0 k/ [( S, z% X" [
! M3 I) ?4 T! K- k0 v( L; W
' D( s; K1 P3 H
【课程简介】6 P! ]5 V0 G+ a6 f4 R
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
& B5 l' f- f, }1 N: R, z8 ^, [, d' Q1 Z. b; O1 H4 X
【课程目录】. v* Y1 Z; `" W! N3 v* h- j9 e/ S
第1章 课程导学! u6 ?, M/ S9 H6 z- a+ k% f5 m0 n
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
" M; L& ^5 g0 [3 y5 D' v6 _# y1-1 课程导学 试看
% p& K8 }! Y' y' [: v1 s
2 U* I# ~! @5 S9 Z) R$ _第2章 Vue基础知识1 ^$ G7 {0 y7 ^
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
, H" O+ b' m; i5 v! l2 J) [$ q$ v8 ?3 U2-1 概述&脚手架
# l, {& D8 b! g" b! O2-2 模板语法（1）% e. K/ z" s% [; R
2-3 模板语法（2）$ b, c- h$ G& G: a
2-4 样式与遍历
/ W! W4 }" A3 X9 R4 G1 ?: l- Z2-5 事件! ^" j+ u. r7 c& s6 Q
2-6 组件（1）, s0 W6 O. ~+ G8 y6 A6 C8 \
2-7 组件（2）9 I% z8 m! A& D. A
2-8 路由基础
5 n* d0 N1 u7 L2-9 Vuex基础用例（1）
1 x* F+ E* ?( M Z% j2-10 Vuex基础用例（2）$ q8 M4 K! N F7 x6 Y+ y2 ^2 E
2-11 Vuex高级用例（1）
3 L' L' F7 j4 C5 c/ y6 I( \, j2-12 Vuex高级用例（2）
7 m% T. h1 T' N! V! A3 o V7 a2 ~) j' r
第3章 Koa2基础知识0 E5 S( [3 y% u, s
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
% q6 {( i, N" I" }9 t0 D3-1 Koa-generator
6 ~# F, B. y7 d$ A9 u3-2 Koa异步async: f: a* N' A" b+ A' H3 G
3-3 Koa中间件
1 } j5 o, t3 w3-4 koa路由和cookie1 b( h! O3 o# N9 z; x
& |, z1 T1 ]& _* O. f第4章 Mongoose和Redis基础& E; N' T2 [' ~0 u6 g0 P
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
! l. J( _7 Q9 p& F; t( V4-1 mongoose（1）& {* _$ i9 K5 N; j( s6 a
4-2 mongoose（2）, O0 I- W1 L( D: G+ a8 W
4-3 Redis（1）) Z0 g: n( f! A) V) B: {2 ]
4-4 Redis（2） |$ r) E+ f: J( R; M/ a
, |- m' B( G* |) i0 G! t, @
第5章 Nuxt.js基础知识
# |! ?7 G0 X7 W5 e3 s4 b9 x" P* sNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。..., O# d6 i% W9 o& a( O
5-1 Nuxt.js基础（1）
/ h" h- R" N( e- F5-2 Nuxt.js基础（2）- m% T: x& y$ L% M% s/ K2 j: l
5-3 Nuxt.js基础（3）
0 X. v4 k8 s0 N& J, @- G5-4 Nuxt.js基础（4）
( Q1 t6 a( e2 @" `& L" ?3 b1 u G
第6章 实战准备4 i, f) L; a7 }
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。* d3 p1 y. Z1 H$ h9 Y
6-1 环境准备与项目安装
3 F8 Q3 x# l! n4 e) e9 E' C6-2 辅助工具安装与配置改装
9 d( Y5 ^2 c* U1 z
; o, h9 O" u! p. l3 T7 T第7章 开发美团网首页
/ f. A' D, g5 Q; Q @: x/ }! ?0 z6 J从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。$ o' c9 S+ i) s: Y# P! k. Q. b0 h
7-1 需求分析 试看% R! d, ~% u+ ^$ J2 s
7-2 首页Header开发-城市定位服务设计5 K7 U# n& t# ^- U" K
7-3 首页Header开发-头部引导导航设计
8 P! ^) N& e! M+ S! F/ Y5 J7-4 首页Header开发-搜索界面设计
- r! ^1 o. I8 F/ V; p7-5 Bug修复
/ }9 j3 y$ S* l; |7-6 首页搜索
$ d. j% |! c& C+ W3 ?6 x& j7-7 首页菜单（1）
( d$ Y# j1 `9 e' y& V" t7-8 首页菜单（2）
, k$ B! P9 J. ]+ |. i, V/ ~7-9 章节小结7 t3 d( d3 t5 y* |! d% u
7-10 Footer补充4 M- ^1 a6 d4 f2 d2 J" J
8 }" _2 ]1 H& e R5 a
第8章 开发美团网首页-登录注册% o) h4 o" \/ j: K' ` @3 x( X2 j! I
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
3 c9 X' g/ b' D8-1 注册（1）, F6 g( T# U# Y7 [
8-2 注册（2）
& Z) |4 s7 Z+ [& _: l8-3 注册（3）
9 S) d9 p# y3 H4 f# d! @* H8-4 注册（4）
: K* J- h* \6 F; q7 K2 v& i8-5 注册（5）
$ M( w$ X* m+ W- @6 W: H+ z8-6 注册（6）5 c+ B. _& S, ]/ b" w0 L
8-7 注册（7）6 i, h( d ^; U/ C8 b
8-8 注册&登录（1）( z/ \ ^$ e" y
8-9 注册&登录（2）
9 h* z- d7 ` `' d" h
6 h% r/ H" c, x |" o& X第9章 开发美团网首页-Search搜索 ^% J ~5 _( U
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
) c6 v% P% l2 Z, g3 {1 c( i* g9-1 城市服务
# U$ p$ F0 L: m& V$ R9-2 菜单数据
7 V9 U1 ~; z0 ~$ M* ?; U! m8 g9-3 Geo接口实现: R$ P( Z ~" ^* i3 d
9-4 Search接口实现（1）; i; a) J3 k. k6 N( C# G
9-5 Search接口实现（2）* |: a2 Y0 [8 U6 N
# O& x4 @9 c, b0 p! \& j第10章 切换城市页! J. ]$ C4 K: K7 O" r x% Y
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。+ l" n* _% E* T1 V( N, j
10-1 切换城市（1）) g" V! @, _2 P( D" X; U( |
10-2 切换城市（2）' V! z8 |6 o+ `8 ^' F
10-3 切换城市（3）
' X$ y) P n2 ?1 B) `7 {5 d
( F; [, r! [1 g) [& x8 T第11章 美团网产品列表页
$ Z1 o, Y2 k( Y点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
0 j9 X7 `; `$ q* q7 g11-1 页面设计（1）
$ o# M5 R6 k' s- V11-2 页面设计（2）
3 l6 D9 c) E& O3 Y4 i11-3 地图组件开发
+ Q# |$ g4 [7 ~6 e* R; q9 t. W11-4 入口文件编写（1）% ^8 a5 C3 M2 }: B4 \
11-5 入口文件编写（2）# ]9 H- ` q$ f2 S& E
11-6 页面调试% V$ q$ [9 Y- b7 Z
: m: ^; F, u, k
第12章 美团网产品详情页开发
! v& b" o0 c2 I; k% [( h产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。& y' O0 A$ x# K0 X
12-1 需求分析 试看
, s {, h- h* X* I12-2 静态模板" R9 F1 A6 O" f9 o; {. |1 W+ S" |8 p
12-3 产品详情页入口-静态文件9 P6 M% `* O7 b. M
12-4 产品详情页-接口5 L# U" L! S8 v; E$ c
+ [, j3 e& [5 G+ ^第13章 购物车开发
6 `( p4 Z8 ]' G, H4 d/ L购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定4 F& H t9 c) q* g; D
13-1 购物车&订单-需求分析1 r b( Z* \* l9 I* N2 \& ^
13-2 购物车&订单-页面创建
# O8 n# ~: z2 V& w( t13-3 购物车接口实现
1 f7 Q% J% H0 \/ F13-4 购物车调试/ N0 Y# d( f- t3 L+ D
( x6 V- v8 |1 @, l6 |* S; L第14章 订单页开发- b; F8 r3 N0 r9 s
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
+ G- H( {" D6 H9 T' q* |3 \% y14-1 订单页面
$ f) K8 v* U; s0 g) ~" W6 ]" s% P% w14-2 订单接口" a: m, g% c% k& I4 g
14-3 订单调试
% W9 G9 S( N0 h& x6 L# s# g/ d2 G! v* t% _
第15章 课程总结
8 N5 b! n& N7 r1 o9 D7 S G( M对课程整体进行回顾与总结
& t% C4 F7 f$ K7 J' G6 ]* d5 |! [15-1 课程总结
/ t: C! k/ a$ m. C- l; k( B0 `- k
" U9 ]' V: S# A$ \【下载地址】
# o6 d j6 S. |" O0 v+ n
6 i4 P8 ^, }& B3 H
; ^: f5 c- B6 |( @2 b) ^( x) Z4 w/ \" G T" E) \' y* s3 w
|
|
[复制链接]
a
