8 U8 A: {5 |9 i$ x3 d% N4 F0 {2 W2 g5 @
! o, c3 b7 ^6 l& ?: \# [8 A【课程简介】9 g7 B4 X" H6 q# w$ L- U
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。9 z& I/ r# U2 H( r3 o
" |. t: O" D' T% G) Y0 Y) s
【课程目录】
7 D t8 s0 }! x6 ~; x第1章 课程导学
# D+ r( q4 N- m( n( r! x3 F这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
6 l4 o: d* O% U: ~, Q1-1 课程导学 试看
7 Z5 O9 s/ @. S) h5 n
4 Z& V: ]6 w9 ~! O8 K' A0 q3 |第2章 Vue基础知识
* D1 a& n5 j, `7 `( V整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。7 `- j( W6 A8 o* f
2-1 概述&脚手架
* x& \; ~) `$ W6 V) f' B2-2 模板语法（1）' \ q- V3 B5 v1 `& }
2-3 模板语法（2）/ C# x+ x1 |/ Y5 z- C" y; Z# s
2-4 样式与遍历, h' \1 H" T' @$ `: J7 a) S
2-5 事件+ R! `9 N% l; |. x3 X, o9 W
2-6 组件（1）
! Q5 Z, J. X2 J$ _! }( S& m3 Y) s2-7 组件（2）0 P j) Y% E- @. a0 r7 I
2-8 路由基础2 D8 b; i9 M# P4 H" }8 }
2-9 Vuex基础用例（1）6 B, x1 s7 [4 y" L# [/ ?
2-10 Vuex基础用例（2）
. v. {3 R4 t# L0 m2-11 Vuex高级用例（1）
# Q$ e( s0 ]" V% e* m2-12 Vuex高级用例（2）3 ~3 C. E+ F1 y- l: A9 g3 d4 k4 ^
: m1 S! _0 U# t- d- Q- G% C3 d第3章 Koa2基础知识
! z5 |' p* U" L! v9 Z, X. ^$ D' pNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
4 N% z1 n. q" ~( Z5 Y0 {/ k; H% N1 k3-1 Koa-generator1 ~% d8 w1 O2 T
3-2 Koa异步async
# J% p9 X8 J4 g3-3 Koa中间件
, `" |" k" C- z3-4 koa路由和cookie( H! ]9 I ]# I4 r/ L% T$ Z& o
* U' ]& H$ B; K0 u* O) a* z& i
第4章 Mongoose和Redis基础' O- B, c7 L2 F/ q0 R
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...; P/ o; f9 E7 O5 [% D( O' r
4-1 mongoose（1）, Y2 C: o( b( n" S" S( ^ M. D
4-2 mongoose（2）
8 o/ z5 o* t4 Q& E7 Q$ `6 f4 M4-3 Redis（1）+ {9 V ~; K5 e) P
4-4 Redis（2）
% l, l4 Z2 p3 m- j' ? a4 t f3 A1 p$ @7 z9 E3 d
第5章 Nuxt.js基础知识
- `( ]6 `9 X; M+ W. Q" h6 q( U# dNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...6 i+ ]) ~/ P, @6 P2 R5 Q
5-1 Nuxt.js基础（1）
* {8 W: y4 y; @; H; Z5-2 Nuxt.js基础（2）
& W1 \3 q; S3 x0 @* G8 g% d+ q5-3 Nuxt.js基础（3）
$ ?3 S' h6 t0 ~( T. g G" ?. N5-4 Nuxt.js基础（4）
! ?2 q F7 y$ S$ X
) [# w% N. ~0 e: D1 t2 M, b% V6 w5 a第6章 实战准备: L: b- w, Y4 H3 A+ S
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。% A9 _0 g0 i/ g
6-1 环境准备与项目安装 R0 r( p7 \1 k) q
6-2 辅助工具安装与配置改装- X& G5 h" I6 O3 |
9 v, P/ C/ Y& S5 n% Z第7章 开发美团网首页
" P- v- \& t( h从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
" q4 h& k9 s+ H6 C* L7-1 需求分析 试看
, E, w+ V# @$ i" M5 h7-2 首页Header开发-城市定位服务设计. p; z: E( T1 f j% z1 O# \
7-3 首页Header开发-头部引导导航设计/ M, X; L; M/ y: @. ^/ \' a, u
7-4 首页Header开发-搜索界面设计
q' l! g/ }* K' X& i, `# J7-5 Bug修复# y9 _9 z) V- d& ~, @4 L
7-6 首页搜索
9 i$ y4 l/ X1 H( M/ W7-7 首页菜单（1）2 k: o1 k' | g9 p& D
7-8 首页菜单（2）- r/ J8 g, d- D+ h/ b
7-9 章节小结
, D! ]9 Y! g! ]; m9 S7-10 Footer补充
- @5 Y6 x/ d) V( o
+ b* O+ g3 U' Z4 Y$ Q第8章 开发美团网首页-登录注册$ D1 }* `/ L4 g* {& [; b
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
5 X( s, G- z7 b5 r8-1 注册（1）9 D8 \( G3 x+ s* U* {. o
8-2 注册（2）
1 Z- \- ?* u# f/ b6 N6 R8-3 注册（3）9 B& i, ?# S4 q+ X
8-4 注册（4）
) i$ V, c0 E2 {$ e' v2 v8-5 注册（5）% Q% B/ q- y& U* h
8-6 注册（6）+ O& d$ \. a( v) m( [
8-7 注册（7）' N2 F8 Z u$ A+ @3 R3 N" e
8-8 注册&登录（1）
) f2 J! r" A. P! o& f+ V8-9 注册&登录（2）
- R$ E' L. e% ^- p
. ^! M3 q* _: E第9章 开发美团网首页-Search搜索
# ^7 C9 f2 z, t8 V& ]" d只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
; y/ b4 p# }8 |- H4 e9-1 城市服务( K* j+ U) M. n3 y
9-2 菜单数据
% r% k5 ^# I8 s6 H6 _" |/ `% L9-3 Geo接口实现
* P* ~- Y3 Y4 H# Y9-4 Search接口实现（1）
5 g9 w$ P# o5 K' o1 E. `- K9-5 Search接口实现（2）
3 k( z& _* a! x( K8 c% }3 A
i G( a& o: _) ^! N8 H$ `第10章 切换城市页& E% M5 @" C( v. ]4 h
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
/ n' R* F: j5 n8 o; b8 U+ Y; i10-1 切换城市（1）
- T0 j2 {* n! L* J10-2 切换城市（2）0 [3 e8 I' U2 a5 |. q7 D0 {
10-3 切换城市（3）! i- p0 h7 D8 d5 L$ }5 J
6 f0 L; y2 g+ A( B3 t! o" Q* O
第11章 美团网产品列表页3 R/ @4 X- D1 u5 P* \: f( |
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
, X. I) t D! x9 [9 D9 O9 X11-1 页面设计（1）
7 R# z: T+ n" f% E7 {. ?11-2 页面设计（2）! _$ V; q9 L, g" q: {/ K9 x
11-3 地图组件开发& B1 J6 V/ q8 T4 ]
11-4 入口文件编写（1）2 r& e* D4 h4 X7 ^9 \9 V% r1 S
11-5 入口文件编写（2）0 L& h, r- r0 t% n# @/ _
11-6 页面调试
' c# S. d( g; l$ s0 z+ f& p) O0 m, F$ l" J$ c
第12章 美团网产品详情页开发. P0 `1 z9 Q& {' S
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
5 e V4 T9 P0 s12-1 需求分析 试看
7 b+ M* }- L$ x$ j& k& b12-2 静态模板: C, A8 U2 { |) L7 D
12-3 产品详情页入口-静态文件
5 m+ {* `) i0 E7 \12-4 产品详情页-接口
! s, z$ N; b" D/ A. Q
8 ~7 _+ X4 h3 J/ B, I0 K) j第13章 购物车开发% D1 u1 {+ M3 @7 X! w
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
- P) p6 a9 H' }13-1 购物车&订单-需求分析+ `9 ]/ Z$ O/ N
13-2 购物车&订单-页面创建
4 T+ R- `" ]' O# e- L13-3 购物车接口实现) v3 P% w0 O' g w2 X
13-4 购物车调试5 ?( U, Z) {3 B; m
9 u+ R% b ~7 M4 V2 d第14章 订单页开发
8 M0 O4 y9 A- D/ l! b3 ]2 S订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。 @9 n) Z/ w4 r- \$ ?' i2 z
14-1 订单页面
$ q4 y6 l3 f2 H- ~6 V14-2 订单接口8 ]7 u1 ?8 ?) [- o8 q/ A% X
14-3 订单调试1 t4 y* C2 F" G/ _9 R
. H) y4 q) Y" y2 ~. |! f
第15章 课程总结
! R! H, C8 D8 y( A+ o对课程整体进行回顾与总结6 T. g4 `4 P2 D1 t* j2 c! \% f
15-1 课程总结
" f5 X0 e8 S$ E# {+ x( { z) J! x: T9 {0 x
【下载地址】
, N# O: h& j2 _
2 c3 c8 T& _. ~# x5 A) l# |9 Y$ r& ~/ i6 A$ ?
( _; m+ P6 I' @1 R) c3 _# ?# W' I) @% s
|
|
[复制链接]
a
