9 D9 D' i* G% n# _ ]1 K( [; G0 r6 b, [% d& G% h0 x
3 ^6 H( H3 ~9 d( f! d6 D8 J
【课程简介】7 O8 I8 X' x- ^% s S9 J
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。9 o) g$ \2 X/ |* _& z/ J
: ~' @" C2 M5 z4 [- Q- M( X
【课程目录】
8 k" h$ K3 \2 l$ E, M. j第1章 课程导学
, }0 V7 ^. x" a- u8 H f& o8 L这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等/ H& ~# H! ?7 j3 Z, ~* D
1-1 课程导学 试看
0 q; v* K) I& R9 E/ X/ X( T3 |; ]! B9 i0 @' J( j' B* ~5 h
第2章 Vue基础知识" C/ X( t& {2 f+ j( ^
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
$ e2 i+ M6 L% X+ l4 T2-1 概述&脚手架$ l% V4 j9 p$ n8 q
2-2 模板语法（1）
; b$ N& j6 k/ w) Y5 T; D; T/ G( A2-3 模板语法（2）; e" E6 s' I7 I9 q$ K, l7 h
2-4 样式与遍历% Y2 }; V4 I' j$ t) n
2-5 事件4 D9 \3 O8 K2 I) }6 r& j
2-6 组件（1）
! H( h! s3 K+ U0 Y$ i( J3 l2-7 组件（2）+ U' |' G; b+ E: I
2-8 路由基础/ ]5 B* ?: V5 E' l4 i! Y3 L
2-9 Vuex基础用例（1）4 p. K9 Z4 @2 N; z
2-10 Vuex基础用例（2）
1 X i, f! `* N: t4 K$ ]5 T* g2-11 Vuex高级用例（1）
, _1 s4 F2 ~9 u2 H5 f2-12 Vuex高级用例（2）0 T _- [; z4 P' [
( t( |* b1 q( T, h+ L第3章 Koa2基础知识3 g$ |/ b9 V8 T8 _' i0 y- ^
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。' o! s( [1 E1 [! O4 t- o7 j
3-1 Koa-generator
$ ]" _! S) H+ U, M& i( y! l3-2 Koa异步async
# r: A( e$ v- n" c, G+ [6 y" C n* |% ~3-3 Koa中间件% u- R- ^( K5 X4 R: }
3-4 koa路由和cookie/ M7 K# a, M! s
1 R, f9 g p- S% R$ [3 `
第4章 Mongoose和Redis基础
* B9 w$ K9 [; L6 A2 j, L( \mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
$ @; } F4 O& J' t% n7 y8 n4-1 mongoose（1）
. u l; i5 I2 C; e* n! y. L4-2 mongoose（2）6 }) K: t: J7 W) O+ h
4-3 Redis（1）" E, C& j4 g4 _! i
4-4 Redis（2）( n5 C+ w4 q( y$ V- s
, Z+ H+ Y4 P7 ^2 e第5章 Nuxt.js基础知识
. ~- ]1 F* p& n" ?# [1 n. U+ W' sNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...; x4 S& h6 c/ c) g( Z. Y
5-1 Nuxt.js基础（1）
' a, q2 D% N5 e5-2 Nuxt.js基础（2）
6 ?& k9 N8 q h- c6 d# `% H' {& d5-3 Nuxt.js基础（3）
; o4 M, _5 j0 k6 F2 [5-4 Nuxt.js基础（4）
! W; y% G# ]$ V+ @# i2 E8 J
" f/ z* c8 K- b; l5 B& @第6章 实战准备
6 X1 B( _3 C2 U1 Q" D& f1 s工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。: A# V6 V- i( g3 F" a+ l
6-1 环境准备与项目安装
4 [5 r- J/ }2 X) S6-2 辅助工具安装与配置改装! J4 g& v9 ?) ]2 ?. q+ S
5 s3 V$ N/ Q; _# u
第7章 开发美团网首页& {- z9 T2 l8 `/ q; A- ^2 J5 w
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。% i7 F9 }$ e: O2 ~
7-1 需求分析 试看
* | Y5 |9 \ Y. e7-2 首页Header开发-城市定位服务设计
# M3 L( E4 y; V- F1 y! ~7-3 首页Header开发-头部引导导航设计
8 [9 o6 G+ a4 K: k- d+ h7-4 首页Header开发-搜索界面设计
9 `. l7 |: N0 V/ v4 }7-5 Bug修复
: Z! o( C: y0 ?7 s+ H0 h- c7-6 首页搜索
) |- ~) `2 j! W( x( h2 \7-7 首页菜单（1）
( G9 D7 x8 }% D. |8 T2 g7-8 首页菜单（2）5 Q* @6 ^7 w) h/ z# X% Q, B, j
7-9 章节小结
7 R/ Z: p5 Q p+ C7-10 Footer补充
' `5 X! }* n8 B: N1 R) b- F+ \+ F/ `; \
第8章 开发美团网首页-登录注册
/ q: x& ?) K4 d从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
2 a7 X# W" a+ m0 [! n, ?* |8-1 注册（1）$ h( S6 `9 x- Y* o
8-2 注册（2）$ {1 ? [0 \1 ]7 G3 [
8-3 注册（3）' W3 @: I1 l( H
8-4 注册（4）$ S# c9 F% y8 z) A& ~6 ]
8-5 注册（5）: C+ |" B b. h
8-6 注册（6）
+ |3 k/ f2 x3 I) k: e2 i8-7 注册（7）! a1 e( M! k, ] m
8-8 注册&登录（1）
7 N, y9 p a- P6 }' Z8-9 注册&登录（2）' }" ?7 S$ ~1 }5 p
3 T) C/ T; j3 f1 Y6 w1 o2 |; [$ |3 S
第9章 开发美团网首页-Search搜索
' C+ m) }$ k# t: ]只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
$ \6 G5 f1 p+ M9 @$ ^9-1 城市服务
- g1 K8 v4 [) v9-2 菜单数据
: D/ A) c: \* Y# R6 N9-3 Geo接口实现& h- V$ x, n4 }6 p# b
9-4 Search接口实现（1）
6 J0 y$ O" G1 [4 p6 \: ]7 ^, `8 Q1 r9-5 Search接口实现（2）9 j& F! g7 S2 D% \; G& W
* Y) } a0 D' A& U& `
第10章 切换城市页& d Q" n$ O$ g r; h- \
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。+ s; k1 p- a# Y9 p% X
10-1 切换城市（1）
# `; E- W( M3 {& p10-2 切换城市（2） v1 s% g% ^+ \' D5 l
10-3 切换城市（3）2 r" T6 _! r# k, q& a5 g/ o
0 b; f" h2 z9 g$ X
第11章 美团网产品列表页/ I4 \7 k C* @4 c" Z
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
( Y/ T5 K: {* e. p1 R4 R11-1 页面设计（1）. W1 `% n1 P7 W3 v
11-2 页面设计（2）4 b. a* S9 y% m$ w
11-3 地图组件开发( ?, h! y1 f' c4 b. ~+ l
11-4 入口文件编写（1）
& l9 r8 f( \* S) K/ n, j11-5 入口文件编写（2）
( H7 ^: Y0 U6 U- r; u" L4 f8 V11-6 页面调试
0 c5 T0 m& r6 m5 z' d2 v* e% M" b2 J! ]
第12章 美团网产品详情页开发6 m" b8 U+ D3 L/ b3 w" \
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。8 l: ]8 w* ?0 i
12-1 需求分析 试看: }9 H* ~9 L' v& j
12-2 静态模板7 N3 O! k, v; H- ?* G6 w/ @
12-3 产品详情页入口-静态文件, e0 r: q4 \2 J3 h* @/ x
12-4 产品详情页-接口
6 D* H, f0 Y0 h( J# Z& e, `4 h' @( m$ i4 k8 t. c2 f
第13章 购物车开发; t, s' Q/ ^6 t2 o# e
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定' G3 G$ k0 ?5 d5 J0 f
13-1 购物车&订单-需求分析/ N$ E( g4 y% O/ k. g6 E2 |
13-2 购物车&订单-页面创建8 ^# F2 E( n6 ~+ V( c" }9 u' j$ W
13-3 购物车接口实现2 V) r$ B8 \; l
13-4 购物车调试
' x0 ?4 W/ D s7 V" s
* W- ?* N b, i* B第14章 订单页开发
9 {" F& f( w; S" R6 A订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
6 i$ ~5 O! n3 G14-1 订单页面
; J" I; p: _3 ~! f. R14-2 订单接口
: V# w/ H: P4 r, [6 U5 f* H14-3 订单调试
( R* I: l+ [% y( k7 F
% a. N. L6 C+ c" i7 d第15章 课程总结
' ~; K' G) l5 `, v4 M对课程整体进行回顾与总结
1 S" r8 ]7 k7 q ?% G/ m" P15-1 课程总结 U" E3 Z, n# o; @
6 R! y) W+ g: ]/ P$ |" o4 |【下载地址】$ \3 _' e. G$ Y% m# ?
! v# g" r# Z; S9 O
4 R* r/ `- O# V/ F8 C
" K& p9 F* K) e: q' N4 } |
|
[复制链接]
a
