" {8 l3 F! u4 H" h+ i# B3 t+ V
6 K4 V6 L0 A, W! G, \
+ f: n. Z) H0 e( k
【课程简介】
- x, b6 C7 h/ h9 ^3 S这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
4 H5 s5 [) r! t' n9 {- _( d0 a$ V: A* U9 \" E6 @
【课程目录】
4 \0 R+ Q5 U- `& A2 a, v+ e第1章 课程导学
7 m7 r0 H% U( X. ]3 ?, R. F这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
( P& u# ]3 G2 v! ?/ }1-1 课程导学 试看. @' h! M2 W. O$ \" v8 g
9 k! v. |" K' s( o( m第2章 Vue基础知识7 l, U+ ^' b- I- J
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
7 G) u4 i" A6 d' J/ [2-1 概述&脚手架: \% E/ v$ M4 b1 D5 p
2-2 模板语法（1）
1 g9 O- T7 s' a. F5 |- H: W2-3 模板语法（2）
- q4 |# t. \' X2-4 样式与遍历
2 K3 S1 t1 {- N0 Q/ _2-5 事件
& Z) W+ B+ w. B" M2-6 组件（1）! i5 f8 L- |9 J d: U' ^- C) r+ Z4 G; Z
2-7 组件（2）
1 Z: F A) @4 w- j2 ~2-8 路由基础, I- Y7 d; _$ w; r1 E! I
2-9 Vuex基础用例（1）" p7 J) H/ `7 w& W3 \- y* L! A8 k! p' r
2-10 Vuex基础用例（2）
1 l: s0 Y" \' H: F: v& ^: ^% l2-11 Vuex高级用例（1）
* Q% `. s! C# [* @* Z2-12 Vuex高级用例（2）
7 n$ T7 A7 Z& h, s8 I( l7 ?" ?
5 j0 W8 j. x9 v- y第3章 Koa2基础知识
; H3 l8 N1 R- [Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。6 m" x* V2 m \( l4 n" [3 D$ X# e$ Q
3-1 Koa-generator
N* L% R0 o- w- O3-2 Koa异步async' l0 a' p7 g: |) G3 }
3-3 Koa中间件8 O, E4 T3 s# b4 d: t& @% [/ o* p. f
3-4 koa路由和cookie
- r. ]+ ?; `- N3 E1 W4 x4 m+ j( q' X3 D% D
第4章 Mongoose和Redis基础
) Y$ g! y# e; C: r! p% qmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
2 ^, D5 I9 |9 J# t# R* D4-1 mongoose（1）0 v- r8 b5 u( P. C2 q, ~ }" ?
4-2 mongoose（2）1 ?# d3 `+ e+ x) }+ o5 C
4-3 Redis（1）# x; |1 d. w" G5 l' D- f
4-4 Redis（2）3 ], A3 c& c$ L* J
* t+ u1 ?* Q3 X* |
第5章 Nuxt.js基础知识
$ |* T% H6 e& R; }" G, q& {Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
2 L1 E u# B, Z9 ~5 t [5-1 Nuxt.js基础（1）8 q3 j0 q4 F8 |6 D3 L
5-2 Nuxt.js基础（2）1 G' ~9 @9 D* t4 O* Q$ _7 d
5-3 Nuxt.js基础（3）$ w, K4 e- I) L e- I9 r! b( Q- a1 F
5-4 Nuxt.js基础（4）$ r6 J) Y4 ]7 j
w$ L/ E9 Y6 `# g* a* F第6章 实战准备
' U4 Q" I( a8 [+ t* C工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
) D2 P% v/ Q6 X( Y y4 p; c6-1 环境准备与项目安装7 M2 A) `( A/ I
6-2 辅助工具安装与配置改装9 M, `9 i7 w* r
% R* f2 `2 S4 Z% w" I) e7 N
第7章 开发美团网首页2 {6 J! f+ s# u, J
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
7 k: V0 Y8 Q/ a: U7-1 需求分析 试看' F9 @; b% g2 S$ t
7-2 首页Header开发-城市定位服务设计 O1 @& K; E3 k5 a5 G
7-3 首页Header开发-头部引导导航设计
" d+ W0 L) g& T- Z1 L7 ?7-4 首页Header开发-搜索界面设计3 G: i* p3 V: v. d; X8 Z
7-5 Bug修复3 t' j4 b/ n4 j
7-6 首页搜索! e% t% m) K+ @1 N% \6 I
7-7 首页菜单（1）2 R$ Q7 Y+ S4 }
7-8 首页菜单（2）/ r" @3 j$ n2 M
7-9 章节小结
, J% M% d; }# L+ N$ T2 o7-10 Footer补充
' w+ A& I- y1 b4 }
6 O# ]8 M, Y5 m3 J5 j) c4 T: J* d第8章 开发美团网首页-登录注册4 i( L( H- J+ }1 G/ k
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
! C) ^- w3 ~: m: c4 x( ?8-1 注册（1）
- g( l3 A4 |, b) p8-2 注册（2）
) t5 R* [" ^ y# t3 l) W+ M z1 ^. d8-3 注册（3）* P, @" u% k6 V+ r0 D+ l; x$ F
8-4 注册（4）& c4 B7 p# X/ g+ @* N* @; g/ S
8-5 注册（5）
: \7 \" c( \$ C4 \$ d+ A8-6 注册（6）3 `4 P; i# M/ j. {# @0 w' `5 n
8-7 注册（7）
" p( o& p$ B6 r! {. p/ M1 w/ P8-8 注册&登录（1）$ ^! k+ t# ^4 p1 M
8-9 注册&登录（2）) `: R* Y! {+ ~! ^8 I$ Q
! \+ f( \8 J" d6 R/ C第9章 开发美团网首页-Search搜索7 d" g+ a' e$ B% ^: G! `6 ?3 s/ g
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
k$ V5 \& V7 E2 w5 x9-1 城市服务
# l# f8 Q4 l+ T% i, C9-2 菜单数据
$ C: N% `: S, _8 C6 A0 b# x9-3 Geo接口实现
+ V# _4 c: ?6 H9-4 Search接口实现（1）
, q }3 ^) `* M8 ^5 e9-5 Search接口实现（2）
?0 F+ I0 B* m0 D
8 ]' ?3 {) g+ M2 k* Z( }# u第10章 切换城市页
$ p& ?5 R, H+ u. J- f3 c0 z/ B5 R切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
6 g, F. U5 _- [. t. z* P10-1 切换城市（1）
' @: l) s7 y% _10-2 切换城市（2）& S! y5 p' p" ]
10-3 切换城市（3）+ P9 k1 P- S6 I- V7 N9 e8 a, h
5 k' z5 L. D( S! f7 F4 q第11章 美团网产品列表页9 E) O( }. q# ?, M5 S; g) \/ P
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
' f$ ~. ^3 M& z" s3 u6 x* f' i+ a11-1 页面设计（1）
2 G4 N1 b9 Z* S) P$ i: m2 b n G11-2 页面设计（2）; i+ J/ e- _; j
11-3 地图组件开发
3 r/ u! h5 x" B0 x r5 b11-4 入口文件编写（1）
4 R( `( K8 K/ D. i7 |9 E11-5 入口文件编写（2）
1 W ?, B) F9 }+ v+ I9 Q1 D! j11-6 页面调试' S& p& T% n6 t4 x8 i: q
7 ?3 F; ^6 Y' h0 U V
第12章 美团网产品详情页开发
; u$ |) \9 w/ t: u( { [- e% {产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
9 o: }) A. f( m0 B) u12-1 需求分析 试看. ~ ]* p, u. e* C1 }6 P
12-2 静态模板( j' W" ^" C; p& C' [3 e
12-3 产品详情页入口-静态文件
4 o5 ]. D3 _3 R" H: H12-4 产品详情页-接口1 n" r; k& m0 ^, p1 C
# [4 l" n2 s! i' z7 l
第13章 购物车开发7 C7 p1 y4 k: y8 _! f2 m
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
$ B: \7 d( ?6 P7 o3 E+ G13-1 购物车&订单-需求分析, m( S, K8 W& B9 S
13-2 购物车&订单-页面创建
/ J( W' W3 h D- d# L( V13-3 购物车接口实现" o% |: z$ R) X R
13-4 购物车调试) C0 V d6 U1 j8 c' s+ b! Q8 f& _
) N% v! d6 h @% [3 ~6 Y; O
第14章 订单页开发
3 b; V9 ^+ J; G' q$ F" l订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
* a7 o6 ~% [/ a; C14-1 订单页面
+ `8 W) Z% O3 |2 w6 F14-2 订单接口
* ` s8 N- U7 K+ O; _8 K( [14-3 订单调试9 [- f+ y8 q, @# c3 _- o) x
_4 r# g+ b w$ j) C2 Z1 j4 Z" e第15章 课程总结
8 I% e S2 o8 G对课程整体进行回顾与总结% d9 t0 m! Q& T x
15-1 课程总结
5 G" D9 h+ p# r4 {0 A1 V8 v& W" R. y
: N/ W% d8 e7 f# q【下载地址】4 {/ H- z ~7 b. ]7 Y2 Y
' O. e: e' y" ^7 n; y. M# x* L7 X' ^( y
2 x# t% K# Y5 x. O( m: i5 S# s% U |
|
[复制链接]
a
