$ I3 s+ a# V" k
2 ?7 b5 v6 ]0 |/ C/ }
7 P# H5 c; \+ s% d【课程简介】
$ V/ `1 @0 P/ I# s& R. N, M这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。# r, E) |9 T) d7 {6 p
( i6 T! t9 G9 p( K+ e' p
【课程目录】
! }( e- w: o! Y+ J/ n" Q, w第1章 课程导学- ~( L( d) c- t/ H; I
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等 F @: y( j) S
1-1 课程导学 试看
; l. G# D ]- \6 Z1 ~7 t; e. {; @2 _. g8 x: f
第2章 Vue基础知识( {( A# O) y8 ?
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。+ X6 k) t9 ?1 \) r" K
2-1 概述&脚手架3 `& t' l5 b: M8 \
2-2 模板语法（1）
- L7 S) _7 w6 H" P9 v2-3 模板语法（2）
+ c$ }& U+ @; I S7 s5 ^2-4 样式与遍历( f3 L: ? c/ V& Q2 M; z# m) L
2-5 事件
1 |' V' h' q+ F7 I2-6 组件（1）
4 |2 N2 r) t# H) n) C) ]2-7 组件（2）* S& H+ @: ~$ R% C: k. f
2-8 路由基础
# V+ w: q& c+ Q) l `2-9 Vuex基础用例（1）
8 k2 a, [" _( w$ c2-10 Vuex基础用例（2）
8 F. A* B4 J9 T1 N2-11 Vuex高级用例（1）
3 |& o/ V% J/ y2-12 Vuex高级用例（2）# f" d: W, b$ U/ q; ~! i; x6 a
. y7 E7 w5 y3 Q) F/ t0 E
第3章 Koa2基础知识7 V( p, K9 i) W7 k3 N
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
' d! O2 C8 U. t, K: `) p! j9 N, l" D3-1 Koa-generator
4 q% Z, m7 X+ X3-2 Koa异步async
& |$ T1 \/ p' F3-3 Koa中间件
- {" D* h0 j) v4 `$ a4 ]) F3-4 koa路由和cookie
8 M' N3 b7 Z5 W# e( f0 D' v1 G$ U- X5 t( f# x" M# e
第4章 Mongoose和Redis基础
4 K8 i5 v; ^; ^1 T* Pmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
! x) Q6 \& x. g' d! R4-1 mongoose（1）
9 J# f9 P0 G' |, k4-2 mongoose（2）. j0 k1 J; m1 Q& {+ F$ i
4-3 Redis（1）
) y) q7 L* Y9 N( B! s6 X, M4-4 Redis（2）
* z- [! l5 h2 y
! ^8 _4 u# _3 o( ^' g) x5 r5 |第5章 Nuxt.js基础知识7 k# P, L+ M- w8 @% }9 }. }# U9 ]0 ~
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...; F) Z) R* a/ H& X
5-1 Nuxt.js基础（1）3 V) E: j C1 Q' h4 k7 B6 l1 z
5-2 Nuxt.js基础（2）# i' V) Y7 f! q- ]
5-3 Nuxt.js基础（3）
6 l; E$ s' {' j* U& I5-4 Nuxt.js基础（4）
* P# v4 Y3 Y7 A! X$ e
" Q! j" L9 |. ]; b第6章 实战准备
+ H1 D5 L$ I. k: |工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
- T- s3 U$ D+ C$ t6-1 环境准备与项目安装8 y& O9 Z; F# K# r$ L* b5 p6 X
6-2 辅助工具安装与配置改装! F8 U' M$ V0 E. s" H. b/ D
( i# {- [4 `0 m, S: f* _: `
第7章 开发美团网首页5 b* g/ v% I# r* }3 W
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
. X5 j: a! Q/ h$ ]2 B: \, e7-1 需求分析 试看
) h1 u2 \7 D* M3 `7 X0 K/ Q7-2 首页Header开发-城市定位服务设计
/ s% i3 ^# g# C5 d% @2 _! j/ s4 e7-3 首页Header开发-头部引导导航设计- @* Q# ?/ x' I: t7 L, `: z( x
7-4 首页Header开发-搜索界面设计
6 l, \- W, I/ ^( ?0 i7-5 Bug修复
( e# t+ F4 A0 a8 V$ r7-6 首页搜索
" T J. d/ w7 a6 \# {) F7-7 首页菜单（1）
. |0 o1 O' b. h7-8 首页菜单（2）
6 `) I6 B$ F1 V% x) a; {6 l/ [7-9 章节小结
& ^% D1 D/ [# v- N7-10 Footer补充% D/ L, |3 P, t# ?) V
: n3 c6 f- ~: k+ c. Q
第8章 开发美团网首页-登录注册
4 E2 n) v9 Q7 S2 |. y从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
" X5 `0 n& V3 M3 ~8-1 注册（1）2 M% C+ x; J$ @! c% j9 \
8-2 注册（2）. J. O3 Q' p5 k! J( j3 F
8-3 注册（3）
4 I. w: @6 @. C! ~. R7 ]9 x; b/ L& e8-4 注册（4）( k/ M# ?# V+ a) E& |- M
8-5 注册（5）
" g5 N$ ?$ F$ a5 s! [' m$ Z+ c8-6 注册（6）
. m" n9 O) W" t9 `) Y8-7 注册（7）- w- I) r0 D2 t8 J! p
8-8 注册&登录（1）
8 z$ U- {; H( p5 _- Z1 O8 m8-9 注册&登录（2）
( G p }' n) ]% {) I7 e
& I3 I; ]: w: E2 O4 m第9章 开发美团网首页-Search搜索
C+ w& A: A! D; p3 ~只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。% C/ D" s L- x! n5 k2 i
9-1 城市服务6 K3 ~4 r3 r/ }& L4 N. w# B, q1 E
9-2 菜单数据
) J0 p. ]: \9 U* I2 a% Z; w9-3 Geo接口实现
& u3 z9 x0 }+ A$ q) x) `: J9-4 Search接口实现（1）: ], s) C1 i; p' N8 j- r1 \: ~5 r
9-5 Search接口实现（2）
* |5 z; {% Z) Z. l/ { \
: l% a& Y& Q( ]) \% j第10章 切换城市页
4 ?/ h4 T9 ?5 D0 G0 q切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。. o; V) B: m K7 Q
10-1 切换城市（1）' l/ J3 Q& E' f
10-2 切换城市（2）
0 o% x+ G/ |2 i+ E% \10-3 切换城市（3）
+ o* k. V$ q: }+ i" v
% r! q% t4 m% u d8 `! H" b; o第11章 美团网产品列表页( p9 ]2 F. E4 } @; k4 T9 e1 b5 s
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
1 p [5 v$ U2 c8 m8 n1 h11-1 页面设计（1）
, ` r5 `' h, b3 Z+ N. S11-2 页面设计（2）
( T" T# C! b' x11-3 地图组件开发* S4 e- U8 s# Q: H
11-4 入口文件编写（1）
( R! }2 v0 ~& N! J3 N" d% A, i8 J11-5 入口文件编写（2）
8 I4 K4 K4 t5 E3 |11-6 页面调试
) X" s9 I7 A$ D/ e# C$ D
3 I0 }6 J0 P* |: b h第12章 美团网产品详情页开发9 e Z) _/ k% X5 G% F# B: _
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
6 q% ]" J, e0 Q# K6 O0 o# V12-1 需求分析 试看/ ?; A c1 ^ B
12-2 静态模板( J4 S9 [* l2 u h
12-3 产品详情页入口-静态文件9 b1 S* `0 D. V9 \9 I
12-4 产品详情页-接口
* F- g; l: y4 w+ k3 u9 i" V
7 W& a5 c7 z' a: Y第13章 购物车开发- p6 X. ]& Q, I' z! H
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定+ \: P1 ?4 r5 T! x
13-1 购物车&订单-需求分析5 m5 l& ^2 ~- D% ~* m9 c; b1 Y
13-2 购物车&订单-页面创建6 I5 I/ A& q8 W" c6 X5 `
13-3 购物车接口实现
! k" h: Y$ Y. G0 A) b& q+ ]13-4 购物车调试
8 h6 g; u, F2 x5 `" m8 T7 h% z0 B9 \2 c Z. c9 W
第14章 订单页开发
8 L7 `. q$ Z0 L! y8 ?订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
& X: W; U. z- P2 K14-1 订单页面( d6 w1 ?# f3 S( Y) B9 k9 o
14-2 订单接口3 b& n+ F/ l L0 d
14-3 订单调试
2 U( w! {/ M% N/ U/ m8 C' R. D: v4 Q; E, @! e2 }+ N
第15章 课程总结
3 H4 Q3 n% U/ Y对课程整体进行回顾与总结) A7 @5 [; R4 s1 K. x5 @9 Q
15-1 课程总结
* @# ]4 ?( ^3 I- q
8 R/ k E4 W: Z( l+ U5 R6 N【下载地址】
! i1 O. s2 y/ \$ F0 x0 n4 W' T3 i
' C D* U6 g1 J. `+ S
+ ]4 w8 m# K( q/ X. p! Q. A/ S; [. C+ `# Y( U. |5 D# J/ n0 x
|
|
[复制链接]
a
