# \- [5 x4 D6 m* M/ H3 K: T7 G
$ U0 a, |" S/ F
4 y* t6 s8 ]9 h( S. z【课程简介】
* j: @ r! K" ]& M: P0 @' c! t, L这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。6 X( P! W' r3 m1 X& j# s4 C
U4 ?( I" N& P9 _6 D4 u
【课程目录】
2 X9 R( T6 y) g/ |( [第1章 课程导学" M' F4 C+ N% b* \. o
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
# Y( g. ^9 o) x* ]1-1 课程导学 试看
& a7 ]. \: B. {
8 L" m9 s2 t, i c2 j. i第2章 Vue基础知识
9 V; h6 z, ~$ C8 A整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。' W2 q: T6 q( v" M0 I9 H1 Z
2-1 概述&脚手架
' J! r0 ~7 N; \2-2 模板语法（1）
4 }: N6 p- a( V- F) y9 a+ `; ^2-3 模板语法（2）# N0 D7 N: \1 Z
2-4 样式与遍历
- I; j& s$ N4 c6 M g2-5 事件
" R/ ^" m$ Y7 m6 r9 h6 R/ r2-6 组件（1）
$ |( N3 ~ [7 K( z, n1 H2-7 组件（2）4 b3 j% w' P( J4 V
2-8 路由基础' s" J- L0 y9 d+ O6 E$ l- X
2-9 Vuex基础用例（1）* R( ~" ~: v: T+ L7 G5 }. N
2-10 Vuex基础用例（2）
% M+ V: X+ c6 q, U% y+ M4 ^2-11 Vuex高级用例（1）
4 q* E0 T% r7 ]' X6 I" D2-12 Vuex高级用例（2）
) a e: L9 t- \' j
/ Q4 w% }' ^+ N" a6 O第3章 Koa2基础知识
* H* m. j$ ?) t; d+ }Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。0 V5 w' r$ A) y2 g/ f8 I# @
3-1 Koa-generator$ ^% |2 N: A4 z4 Q0 W
3-2 Koa异步async4 a Y/ l! K- _2 V
3-3 Koa中间件- e) S4 ]. s) F; Q: Y' K. |9 L6 c
3-4 koa路由和cookie1 F! D7 y Q3 B; c3 m2 t% K
5 f% D K# I4 R! b% f第4章 Mongoose和Redis基础
: B0 l+ ^4 L. v/ c6 J5 }mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...0 v* q5 h$ `* M4 b# r5 o% v
4-1 mongoose（1）
0 Y: e) ~: Y0 P0 v1 H- D4-2 mongoose（2）
/ k6 U5 y5 S+ \! t; S. h# f4-3 Redis（1）+ [: h2 Y n! w: V
4-4 Redis（2）; P- `" a/ ^! g: z6 y- T: |# ]6 @2 C5 u
+ o% p4 \ j0 |. T+ J第5章 Nuxt.js基础知识
4 p0 v6 o, d5 G4 Y; x4 x4 RNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
) V% r: i; i# L7 G5-1 Nuxt.js基础（1）
. s) g2 E& y: @: |- e5-2 Nuxt.js基础（2） k& \9 @3 S) f: r
5-3 Nuxt.js基础（3）1 F5 c# M; S; Q) u7 Z
5-4 Nuxt.js基础（4）
6 I( f! F) t3 N% l! i% ]: W( Q, a- }
第6章 实战准备
6 s+ w, E0 [" N5 O3 \工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。4 c* F8 {. {- Q! h* ]: z
6-1 环境准备与项目安装- x6 ^' U& B7 g2 [: P
6-2 辅助工具安装与配置改装1 R7 O( ]1 x5 z( {
- r. m8 `$ |6 S6 J& L5 z第7章 开发美团网首页* A2 h4 B8 O7 A7 r$ N+ T. L
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。0 ^- G1 a( g3 _4 w; I# Z( j8 X
7-1 需求分析 试看
) I0 D4 N/ d) R1 _' E7-2 首页Header开发-城市定位服务设计
. @: @2 u% Y; w' \9 T! n7-3 首页Header开发-头部引导导航设计
+ J, f0 j7 F$ `/ I# a0 R3 q) \7-4 首页Header开发-搜索界面设计% m. D; s+ L/ ?# f( L8 k& B7 d
7-5 Bug修复- H+ k- W' q9 r- p# @
7-6 首页搜索( }" p' C) D4 C) \
7-7 首页菜单（1）0 @0 w; A- a5 B, Q) c
7-8 首页菜单（2）
2 T9 ^+ R" F- t; ?! `7-9 章节小结5 N' f& J. Z- j r8 @
7-10 Footer补充
# x' d) A) Y5 h
- B4 D$ g2 n' |2 U1 k2 m* E$ U第8章 开发美团网首页-登录注册& J8 o! h' K$ Q
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全/ ~$ R: I# E$ C5 {, a# Q
8-1 注册（1）
- v( }$ V3 @$ p! ?+ d; I8-2 注册（2）
, X3 M& T1 q' Y" m6 i/ K2 ~" h) _6 S8-3 注册（3）5 f- L5 a$ o# U0 G, h
8-4 注册（4）# g+ W: |6 u2 `$ A
8-5 注册（5）
/ P) _5 t# j; I" s8 @8-6 注册（6）5 G( |7 L# Y8 |- e
8-7 注册（7）
8 Q: R. Y+ [- Y8 W0 _8-8 注册&登录（1）1 q4 E8 S6 a6 x# h
8-9 注册&登录（2）0 P0 F1 P; l& Q/ u7 o* f) b0 E* w
) F' [: t% f. Z6 S8 W
第9章 开发美团网首页-Search搜索( s- @' Y1 W) |' c
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
1 h( A8 j( R" Z. \3 B9-1 城市服务! y7 Y U1 u" v# M
9-2 菜单数据1 K( o; x% }, }7 k }) r. c
9-3 Geo接口实现
, m: t+ a8 c6 q: f) J( Z9-4 Search接口实现（1）
/ U& A$ z% a' i7 R9-5 Search接口实现（2）
0 T) K" s' C5 ^' R& ~3 P% {2 X' H2 J
第10章 切换城市页
y# D7 e; K* J切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。1 u# V. j; u0 n; l
10-1 切换城市（1）' q% L0 r( h% m8 v! f0 H
10-2 切换城市（2）, g5 k! t: W9 W2 K; b' Q
10-3 切换城市（3）, U- y/ _3 a/ {5 ?* j% L
. v4 }; M9 K% J8 ^5 \( t第11章 美团网产品列表页5 q( l) w [: @; r- u
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
( S! B: s# Y+ `/ |) [1 ~! D: f11-1 页面设计（1）
# i# L/ S% `3 N1 ?11-2 页面设计（2）
, x- \; q4 F( r0 x; q& t1 y- _11-3 地图组件开发7 m' z0 s% P' V" ]
11-4 入口文件编写（1）" L- j7 K8 G" O# M
11-5 入口文件编写（2）
0 u! R L& E$ n0 b11-6 页面调试
( h p* U3 y% ]8 B0 F m3 n8 i6 B
S& D* _, F6 I# y1 G+ n1 ?$ X第12章 美团网产品详情页开发
4 A8 \4 |+ T. R* V产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
( b; G. B& M1 B3 F7 X/ E" l12-1 需求分析 试看1 d: G- Y. d6 R; }' \+ H
12-2 静态模板/ x- i( @4 Z+ k' Y1 {6 e s1 G
12-3 产品详情页入口-静态文件
4 y K7 [: u+ `. s6 y, g12-4 产品详情页-接口! n% b# y' }( d7 {; A
2 }! k3 w, ]8 @( T3 n8 B2 \5 a. n, a第13章 购物车开发$ s, z5 G& i5 |! D' \+ Y
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定/ G7 P% J: u9 z' \& s8 V
13-1 购物车&订单-需求分析
0 v: v( c% L/ o* |6 P7 W& Z2 l) I13-2 购物车&订单-页面创建& X# U( V0 `2 E/ b
13-3 购物车接口实现/ w4 g4 K7 ^' w! n! M" v; l7 t- }& g
13-4 购物车调试
) y" }2 U) E, i, j0 S' T" ]6 U; r" W* V7 [ @
第14章 订单页开发
" p/ t* h& X) e3 n% d# m订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。& s- s: \3 d; b+ L, @; t" N1 F
14-1 订单页面/ a2 s, b; r: U5 d2 j2 l" Z6 i3 B
14-2 订单接口1 l% B4 }% |, ?6 ^
14-3 订单调试
6 J. ] z$ t2 x9 w1 O* k+ X
@8 B2 J+ U' W0 g7 n# b0 c第15章 课程总结
. D' Z3 t' l) f8 N6 Z" y对课程整体进行回顾与总结 U; w4 L1 _1 g. i
15-1 课程总结
7 P) e# Q! c3 A2 T2 f; k
8 M' c- i2 W3 i( B& g( W4 x【下载地址】
3 F; B& I/ E; }! R* I" d# H( a- j. X4 d% U
: T7 S# r# h+ k7 i3 K3 M7 f
5 {# {) h0 _! ]* h* v/ Y
|
|
[复制链接]
a
