$ \, e( K T/ U5 L- A! S
$ ^4 C1 y* X% f1 i* r4 `/ [1 v4 ~; V: y: M5 h, r8 E
【课程简介】
" f8 q7 R! o: L! [* w这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。, E" t$ G* [7 b" n5 t5 y6 L! o/ }4 g
' ?0 T. B6 I; a' D【课程目录】
3 r8 Q& y- `+ K; s( y第1章 课程导学' d& y& Y7 J+ u" V
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
. _4 f7 g% A c8 R( a. U, w1-1 课程导学 试看
! N+ z7 P' b3 D1 P) Q; p+ `! |: Y
% G. m' B5 v( @$ m第2章 Vue基础知识; j# M4 T5 }' n" S
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。" u. @1 N2 i. P' @
2-1 概述&脚手架
5 \; {1 n- |3 m2-2 模板语法（1）
; t. L! ]% @* F) j2-3 模板语法（2）2 i& z0 M# l2 U. Z/ l' q5 R
2-4 样式与遍历
* _0 _6 J/ I% q2 @5 }* J2-5 事件
# q' _$ y$ @2 w8 g0 a( x2-6 组件（1）
- w$ Y4 r. I V2-7 组件（2）7 g0 ~. A, G# ~3 N8 h
2-8 路由基础1 f7 p& d% r4 K1 }% ?$ V& U1 ^
2-9 Vuex基础用例（1）& \6 Q1 }, B/ |7 w
2-10 Vuex基础用例（2）7 q+ O, n# W9 l. h O1 S# U9 n. u
2-11 Vuex高级用例（1）
' w/ ~% k q. ~3 H1 }7 Y2-12 Vuex高级用例（2）
% X8 b5 a/ Y. {/ M; }; ^ k, E
) K( u/ Y6 v1 r0 F/ p第3章 Koa2基础知识3 F1 z F* Y5 q. E% _0 H
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。" T. D' Z: p( e# i; K; ]3 d
3-1 Koa-generator+ U& t [' }; a% S4 u! v/ U
3-2 Koa异步async9 j# s$ }, l# E# [4 O2 j
3-3 Koa中间件
$ y1 ?6 j7 z0 D" _% s3 x9 w! r3-4 koa路由和cookie
2 W1 k3 P( i% S: u+ L9 P
% v; A& ^ o& E9 x第4章 Mongoose和Redis基础
) C# Z) p8 r* g, _9 N" p' Q0 amongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...$ o# _$ L1 h& t5 }4 u
4-1 mongoose（1）
' G1 l1 `% V! k2 X/ T* u0 v4-2 mongoose（2）0 f1 b6 Y6 D0 k, y( B; p
4-3 Redis（1）
8 M) {' ~0 |/ {" }, A. n, F4-4 Redis（2）
( e! b) \3 p1 a0 T/ _; r1 z
3 q a# j4 Z, Z- e1 o! z第5章 Nuxt.js基础知识
7 p% Y+ D8 e( o6 [" A+ eNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
: b# r! ]) r! C- M) d4 L5-1 Nuxt.js基础（1）
+ ^. G5 ], a n# K8 y& _5-2 Nuxt.js基础（2）
& n, \( a. i. Y# Q# }$ N$ P5-3 Nuxt.js基础（3）+ @& m; [6 J, N+ N) j7 m
5-4 Nuxt.js基础（4）
6 h. W3 h7 u% ?" @- |' |6 l' U0 h9 b+ G
第6章 实战准备- T6 `6 ^* B' r1 r! z* b
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。# r% r2 R& x% x+ |! M/ y
6-1 环境准备与项目安装
' X7 L: [" D) T6-2 辅助工具安装与配置改装$ E5 w% W" i+ U' A
$ \# t7 ^6 g" G" `第7章 开发美团网首页5 O% V5 p' S+ i) m* {; X: {+ c1 K1 ^
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。$ m/ I' _4 |- V3 ?* d
7-1 需求分析 试看5 s4 a# l2 E$ X# f! i
7-2 首页Header开发-城市定位服务设计8 y2 p4 `3 S/ N
7-3 首页Header开发-头部引导导航设计( ^4 _" [! i, K- e) c( x
7-4 首页Header开发-搜索界面设计
# ~* i. z( }8 M) j( Q/ w! ~7-5 Bug修复
) C' B9 ?: f9 m7-6 首页搜索) m! l9 a' S; h0 Z/ f
7-7 首页菜单（1）0 E# P( P3 ?3 [" _5 M' z
7-8 首页菜单（2）1 i; c) B8 x7 b& p1 ?
7-9 章节小结! D- b2 ~' P3 l) t
7-10 Footer补充; K' B, L) w* t/ k) d* ^
/ [* ~1 b0 U# g* q- Z: o9 l& D D* t& h
第8章 开发美团网首页-登录注册- X+ Z, \ ]5 ]' P1 T) I
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全8 X3 x4 e# V" }" e0 o
8-1 注册（1）
% _8 b }4 B/ e4 p, ]2 Y8-2 注册（2）' Z7 A' K$ T6 A: u3 R7 {8 G; @
8-3 注册（3）' t; ?- ^% K3 F Q2 \
8-4 注册（4）
" `, P- X5 f7 q' w8-5 注册（5）
- }2 r; B& j# i" F. H8-6 注册（6）% h" V4 S6 i9 s( z7 x
8-7 注册（7） c- [0 q9 I* }+ X5 {% X
8-8 注册&登录（1） Y# S8 I3 J7 p, ~* D0 N' Z, ~
8-9 注册&登录（2）. \7 ~7 j+ S6 m! h" B
6 o" M1 Z0 |& s- Z5 G, O% V
第9章 开发美团网首页-Search搜索5 [1 ?. }; J- g! p6 @
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
, y U$ [8 g$ b" J9-1 城市服务, q2 V- s# N9 ]# K9 W! l2 a
9-2 菜单数据
! H, Z$ }: |* j$ h' Z6 S3 m/ U! P* n9-3 Geo接口实现
) m, x: p2 q- y+ }) f9-4 Search接口实现（1）
) ^+ ~% P' K K: o! R. G9-5 Search接口实现（2）
$ m U1 M0 \6 v* J' l8 Q5 G* _8 {( |1 Y; R. f
第10章 切换城市页; M! v& k$ Z1 [2 y: d0 y1 S' f. O2 n
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
$ B7 Z4 X: M5 z/ }: N( h' ]# ]10-1 切换城市（1）- F. C6 h' G' D8 U
10-2 切换城市（2）- V. N% ~" X! h) _1 p( }# s
10-3 切换城市（3）
' o ^% c0 O. k, ^1 [8 N% r9 K2 N- K7 b3 [2 k! w2 {
第11章 美团网产品列表页+ m( q$ B- v; C- g, K* n$ s5 e
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。2 l W+ X6 G' y: B
11-1 页面设计（1）
+ [( w! a! U/ P* d% C/ Z4 n V% j11-2 页面设计（2）
: B% @$ `' G2 F' O7 y11-3 地图组件开发3 s1 T! q) i; N! N) R! K& g& l+ k
11-4 入口文件编写（1）
1 V3 [ W# e" X* z6 h4 H2 G% l1 L" I11-5 入口文件编写（2）& |8 r) l& {% T. o5 s+ k3 U
11-6 页面调试
0 L9 K+ i8 L7 p4 a- I
, S2 P/ H; X& E第12章 美团网产品详情页开发+ E B6 b i% d- o% \/ x
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。: D% Z+ s5 M! s* y- ]& q
12-1 需求分析 试看
/ S2 J @9 q6 M: G$ w9 j s12-2 静态模板8 z" c& s$ K( @8 I4 Q% b8 v+ ?& \
12-3 产品详情页入口-静态文件+ B4 C8 G; d- d+ e
12-4 产品详情页-接口
% r! i# p0 c$ d2 r8 n+ H5 i- t" r3 Q
第13章 购物车开发- r3 _! _9 h4 e
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定! n* X; }6 x% ]# q7 }; g
13-1 购物车&订单-需求分析
2 K& w6 W4 d; A( w4 U1 {13-2 购物车&订单-页面创建% t' ~3 c7 ]; _8 a* q( L- p
13-3 购物车接口实现+ ~1 A% J0 i$ d6 \" ? Z$ @
13-4 购物车调试( f4 _5 k1 `& ^
7 s1 w, O9 `' Q第14章 订单页开发
# {2 e9 H* G E7 l2 B订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
T5 |; s# i2 s14-1 订单页面
9 {. D; N5 G4 _, N' _! \$ D14-2 订单接口
# i6 e; x8 {; L14-3 订单调试1 L+ F" b7 t" ?0 p' A& N. Q7 b
: |! T. t# Z' M K; i第15章 课程总结3 x4 `8 \6 v2 }+ f* i
对课程整体进行回顾与总结( J" N# N& }6 O' u. N- [5 U
15-1 课程总结; ^, o6 d- M& [4 A8 C9 I
, T! m1 u9 o' b( K, G+ m `9 p- m& ~【下载地址】
3 }3 u; Y: G2 S! e. K' M
* R* C5 P* [* Y3 ^) J6 J$ R+ r0 l7 ^
- R/ H& H5 B1 R% T u9 }1 q7 i
|
|
[复制链接]
a
