* J, T$ s$ d8 V: z
2 W& j1 ?4 p2 q7 b8 R5 i
" u$ E, K% d4 I z) _- c
【课程简介】7 h% W# t8 t2 h0 {& D' A# f1 t$ C
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
, s3 A) ?. d p% Z A7 [+ z- q( M: r2 b! I* H
【课程目录】' q! i% |% t; W' l5 U
第1章 课程导学
9 a* c6 \3 W7 k这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等2 J2 G; Q# S* m/ _
1-1 课程导学 试看! t* V' l5 r' K. ^) \
( U* J& ?# ] v6 C7 [4 G% C& Z第2章 Vue基础知识
7 b9 l% v8 S# |' ~( {# a4 T7 z整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
# }2 \, [5 l" u) ^2-1 概述&脚手架
1 ?/ T/ _* M5 p) {' e% [2-2 模板语法（1） \0 i5 ~- s& @ L4 G, G) |- e
2-3 模板语法（2）
& b. q$ `' [ c2 }2 Q2 f2-4 样式与遍历
, c" a K1 T% @/ W3 w; l5 i& g+ _2-5 事件
7 u) b* D' | u) Z+ d- }2-6 组件（1）4 H% F* X" D6 U, U7 J
2-7 组件（2）
# G* j. d0 k+ k( i2-8 路由基础3 W, B3 `% N# G8 p, y X. V T& { I
2-9 Vuex基础用例（1）6 T: G: S- e) S6 N! n
2-10 Vuex基础用例（2）5 b/ p/ W" I- M5 a1 B4 J2 K7 [1 e" a* b
2-11 Vuex高级用例（1）
2 o7 [ C" O( @# r" N2-12 Vuex高级用例（2）
8 [' ^" T! S9 g# p8 v% Q) |& S3 S, l! P
第3章 Koa2基础知识
+ d2 }' M) {, I5 {* CNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。5 q. K9 m9 Y& e
3-1 Koa-generator8 b8 V+ |, V3 z3 q2 U
3-2 Koa异步async9 R c# ~( [1 r
3-3 Koa中间件2 u: x) O7 g5 r7 W* N
3-4 koa路由和cookie
: A+ M+ }( p4 Z" e, j' r! E
/ J, x* @/ n7 ^) i# J- h" I& C第4章 Mongoose和Redis基础" j9 G2 C7 Y. \! r% ~" ?. n: l+ [
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
# l) A" g# b9 X9 O5 l! F/ o9 A, g5 s4-1 mongoose（1）
# r, N% q3 S9 C1 }& T4-2 mongoose（2）: v1 s) S/ w+ w1 O, X( ~4 R1 z
4-3 Redis（1）
8 `9 r# Y9 G Z! @4 g; q! k5 W5 J. R4-4 Redis（2）2 T# ~, B6 b. H% k& U. c& `. }
/ R$ x4 V6 P: n) `, q! P
第5章 Nuxt.js基础知识
& n, i0 V) ^, p+ Z. X9 |3 w4 h! vNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...% F- ?6 B7 o& I
5-1 Nuxt.js基础（1）6 O: Q$ V+ c) L8 ?6 p) F3 ?3 _) ?
5-2 Nuxt.js基础（2）( i, H' f3 k) E; B3 S9 q
5-3 Nuxt.js基础（3）
; m1 E: A7 y0 }; c5-4 Nuxt.js基础（4）# |* i6 Q; a& \9 V I% [6 p
- D4 m) ]/ Q3 z: a3 h& @第6章 实战准备% p9 V" b$ _3 w* Z+ j
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。! O. c" w: S" z4 ~+ |" w4 Z, K% \
6-1 环境准备与项目安装. {+ o$ X" Q! Q
6-2 辅助工具安装与配置改装3 N0 l* y. k: [
" n2 ?( S* F( k. [. `, a' p4 ^第7章 开发美团网首页
6 _# e9 W. F; c# Y$ F6 f从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。4 w/ W; w) _, x+ ]
7-1 需求分析 试看8 y! ]* D* D/ x. P6 d
7-2 首页Header开发-城市定位服务设计
/ @! \4 [! a3 w7-3 首页Header开发-头部引导导航设计* K6 Q+ w3 d2 ]! B* ^. t* o
7-4 首页Header开发-搜索界面设计
' O' G1 D, \4 Y# T; e2 h7-5 Bug修复" A8 n N2 l3 n. m. d% ~; w
7-6 首页搜索7 W7 i3 s3 b# l8 k4 d/ ~
7-7 首页菜单（1）
+ i* ?& P8 k% N: V7-8 首页菜单（2）
. z3 o, {: w; h2 f/ o- k7-9 章节小结9 n8 P/ I% j0 e# W1 f& l
7-10 Footer补充' X* R& ?, k W4 \0 V
+ Z$ M' `! o/ w$ l& l8 D/ F2 E5 Q: c
第8章 开发美团网首页-登录注册
/ J" @, I- X$ f- h2 A% d* o' o从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全% t4 U, U# I4 k" {7 A2 s8 t
8-1 注册（1）
+ H2 H2 Q" S X1 q7 l8 X- c: r+ @8-2 注册（2）8 K# s) S7 y" h
8-3 注册（3）2 `/ c) m3 Q h3 T" \; g
8-4 注册（4）
9 Z, J( O7 B0 S, b$ Q; U8-5 注册（5）
1 ]' C6 e2 k/ g6 R/ K: o. c8-6 注册（6）
- J6 H U& C N8-7 注册（7）
4 F2 E/ Q; w* z# [' D6 x8-8 注册&登录（1）
3 R$ s( b% {1 s5 }3 l7 J4 a( C3 O8-9 注册&登录（2）
- p" q# N- f t, f6 E
* S( [$ p J: D第9章 开发美团网首页-Search搜索
: P8 }: c0 d7 ?1 l! i只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
2 Q$ C$ M/ D5 N }1 D" v* t9-1 城市服务
0 b2 z" g9 K/ b# M5 C( W' i) M9-2 菜单数据
. d9 B' w$ s ~6 \* X, X2 U$ i9-3 Geo接口实现
1 P# U: C6 R5 t8 }, ~9-4 Search接口实现（1）' u6 u) A, ^: h) N% E4 F
9-5 Search接口实现（2）& V+ ]. l! K8 W" W2 `3 W7 m9 f
8 ]% Q s) m/ [4 d第10章 切换城市页
1 B: k! |/ O: [- T3 f) ^) h: O8 t切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。5 ]; Y( i" `7 n1 ^6 F( e- t: j+ ]
10-1 切换城市（1）
0 Y0 H. h3 s! h2 c# O8 S10-2 切换城市（2）- y; M& E( j h) H' v/ `6 Q
10-3 切换城市（3）
% c6 U0 m( l% j7 s: p& v+ B. `/ p4 ]- R8 Y
第11章 美团网产品列表页
4 I n$ s/ _/ H; c8 c! X点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
1 A# w; z2 W9 H( U11-1 页面设计（1）) Q2 i8 a; v& ?7 H1 U$ g
11-2 页面设计（2）
' Q$ d3 f8 K8 f11-3 地图组件开发
1 S" F3 P! [" q0 M. A11-4 入口文件编写（1）8 J. l, }% |1 N1 s7 J; K
11-5 入口文件编写（2）& r0 ?* V0 W. A9 U+ y
11-6 页面调试
( l- d: a0 L7 z" ~8 G* f1 P
, n# u) C& V/ I' B第12章 美团网产品详情页开发
! s {( m! I" `) r% H) g产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。( n w. t+ r( V( _
12-1 需求分析 试看2 j7 O& Y* ]% ^+ c
12-2 静态模板
" e0 A, C& `, h8 @6 U12-3 产品详情页入口-静态文件1 q6 w6 z) j! f/ f" p# \
12-4 产品详情页-接口4 W& i( b: U7 s* G& p) ~
6 X/ v# k1 r6 H& U! |% O
第13章 购物车开发
$ T: ~. f3 _2 d$ _5 X1 F2 C0 L购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
. n0 l# C7 x) S13-1 购物车&订单-需求分析/ G1 r( t5 d) x/ u6 I
13-2 购物车&订单-页面创建
( M4 w+ I' y% G0 f3 M- d13-3 购物车接口实现
B9 I. l& e+ i3 e5 @13-4 购物车调试2 }' X w9 v9 e o& a2 x. r7 n
1 K' m1 U! }0 `1 Z5 L
第14章 订单页开发
- X. F6 |! | z( p3 k7 ?7 t8 J订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
, y$ R" F. W( h7 ~# j14-1 订单页面
. f0 B0 o0 i5 R8 g- E14-2 订单接口# u# t( `" N' c% }1 i
14-3 订单调试
' N) ]( ?. u+ Y; X8 T5 c1 u4 d! r: i& O! l
第15章 课程总结
. Z" y2 t! J3 {) y- t! ]对课程整体进行回顾与总结/ [8 [* ]& N" d: }' E/ |0 f. P
15-1 课程总结# r0 B( }% j: f% X+ _, m+ _
1 h2 k$ Z( E, w' @' e; p2 [
【下载地址】
- a8 T2 y S2 H" d. V, P
! e4 i! O9 Z# u9 f4 L! k: s1 X! U! F( Q+ Z. R2 w: a! \; H
3 K8 U( Z; t# O. }. @0 F |
|
[复制链接]
a
