3 U( p6 t( C# g% h$ N
( K8 W% h% d, j- B2 n# X- n' F! g, C" ^& D- I' @7 I5 P
【课程简介】
* D, d* V. G9 _' F这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。6 K" a, e9 p* Z) Q4 J4 c
8 E$ P0 _6 U3 |! Q, ?
【课程目录】
; c( @8 Y% l) L% g2 r [1 U第1章 课程导学% c/ o7 {5 N, y( y. B
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
5 a( o: C! q# ?& w1 O `1-1 课程导学 试看% q0 F w- d- M& R% v
) r. E4 m4 Z t% I# U4 c# G9 H
第2章 Vue基础知识
, Q7 l( W! D0 ]6 |1 ]整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。9 l6 F2 k. D( O6 B
2-1 概述&脚手架# r$ K. `% }' m6 Y; y: n
2-2 模板语法（1）9 s' H3 _. J% Z+ G
2-3 模板语法（2）
( l G" R* X- I( C: x6 a3 M8 A1 r2-4 样式与遍历6 m' E7 I. ~! u+ @1 ?7 r
2-5 事件% h# d" X8 `% `( _" L, W8 ^
2-6 组件（1）- D, {2 Z# w4 j* W4 }. z
2-7 组件（2）
( j) e7 @, g- s2-8 路由基础, G5 m) x: g# f! F {
2-9 Vuex基础用例（1）" A" M" M+ B6 C9 `
2-10 Vuex基础用例（2） f) t0 J+ I+ o& G; M* K$ M
2-11 Vuex高级用例（1）4 E+ N: j6 h0 `! _0 T
2-12 Vuex高级用例（2）+ }+ c: ?7 k# p) W+ u6 V
9 q2 m8 M8 z0 N% ^
第3章 Koa2基础知识" s5 S5 K& k/ {+ v. J8 w8 a. d
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
" I, z0 F. h9 R5 M3-1 Koa-generator+ C# J1 C% ?* G- j8 H
3-2 Koa异步async. S* A& z: b0 S2 W2 u4 t! ]
3-3 Koa中间件
9 R6 Y h, Z; {, F/ x4 ^3-4 koa路由和cookie" r6 ~& q0 {( o6 [
% c0 w" u$ P u5 u+ g/ z- l# g
第4章 Mongoose和Redis基础
0 M! s9 T. K' p5 f$ t, xmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...4 ?) K' P5 s# h6 H+ u, i
4-1 mongoose（1）
+ P! q' Z* d P4-2 mongoose（2）+ R: k/ m' X$ r' w6 K$ i) M
4-3 Redis（1）( S; t R) r# f
4-4 Redis（2）
% \% F/ Z! g. M+ X: q# o" g* J. k4 B" e) v( K. Q
第5章 Nuxt.js基础知识
) B* ]2 V+ a* T# A: ]Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
8 o0 V3 O: D; q1 ^5-1 Nuxt.js基础（1）5 T" \4 L* b* K: v% }" ?
5-2 Nuxt.js基础（2）' }' A0 r0 m% X. `' ?- j- F; |
5-3 Nuxt.js基础（3）! g! d0 [1 c2 ^3 w* ]
5-4 Nuxt.js基础（4）
$ N2 F/ O/ _% h B6 K, p. j5 d) r. X; J# }# H% ^
第6章 实战准备/ t1 E- D( x) J o( X) g; Y
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。; n5 `! E, p3 Z, B% E: g
6-1 环境准备与项目安装5 M _$ ~" v9 ^( a: V, R. ?5 b! G
6-2 辅助工具安装与配置改装% O% H* I4 V. V& | ~( Q% t5 t
# B; }+ O: r) }2 f6 E9 O
第7章 开发美团网首页; c; s3 L- K6 x7 U; F
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
' H c. n: W5 t" N: k1 |1 ^+ c/ C7-1 需求分析 试看
0 e' J- W& D0 U O2 d: F) \7-2 首页Header开发-城市定位服务设计
! J! k2 x1 c. q, o4 [! ^8 X- N3 \7-3 首页Header开发-头部引导导航设计) s+ x8 {! E( }; l: e
7-4 首页Header开发-搜索界面设计
8 ]% o" }. Z3 _. A* b7-5 Bug修复) c* ?# A( ]% F$ u
7-6 首页搜索
9 u5 y1 g4 t+ \% b& O; U& Z7-7 首页菜单（1）
' {" c) J; ?( Q) O2 J7-8 首页菜单（2）% i. R M5 u# y3 X& [
7-9 章节小结
2 x2 g4 }' b) F0 @/ C: X2 M$ H7-10 Footer补充& \% T; {1 s G# i
( Q v- j* [$ I9 ~0 x' J0 D) O$ K第8章 开发美团网首页-登录注册
9 k8 P' \, Y+ y( L$ ^ T9 Z从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
2 V* b6 e) G3 ]- |: S8-1 注册（1）& e }+ x$ V& }" r( c3 H# P
8-2 注册（2）
E+ D/ o- D- d4 _$ `: ~( R8-3 注册（3）1 k7 {0 D, Y* [4 q
8-4 注册（4）( @. H5 f' a7 S
8-5 注册（5）" E/ F! p, F) A* _& c
8-6 注册（6）+ M& y9 z! T) R2 d& O& X
8-7 注册（7） U9 e: i; f- F) a. a g9 x5 m9 x
8-8 注册&登录（1）
( V; q& r: ^% m, i4 `$ [) B8-9 注册&登录（2）
0 Y8 J8 Q- I9 `9 c8 X$ y1 n# |% c; A: I5 M2 \, e% X
第9章 开发美团网首页-Search搜索
. w9 Y# l; n3 T+ h0 f1 U2 |/ ^只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。7 r, F+ c# a/ M$ }9 {
9-1 城市服务7 `" Y2 u+ x/ S9 M
9-2 菜单数据
+ F; _( t+ ? s2 ^4 G; \4 {9-3 Geo接口实现
+ @4 r o$ B. V7 x \9-4 Search接口实现（1）/ Y9 R& N: h- T6 X/ x7 G
9-5 Search接口实现（2）
: J/ H! r, Y% i
( O0 l+ y/ U T) ^第10章 切换城市页3 e6 F: z& r& E
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
; r# Z! I z, | [2 C" O5 |10-1 切换城市（1）2 A) U. _! C+ F5 A' z
10-2 切换城市（2）: f6 S* M9 U5 T5 a) i% ^- m
10-3 切换城市（3）, Y6 O% [8 D, N1 B$ T y0 X" Z
) A3 G, ?' Z1 Q v- r第11章 美团网产品列表页
E' v- ?, z- l& {6 P: q0 `点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。- b# K5 C0 i9 F8 v6 N: Q6 V
11-1 页面设计（1）
$ h% g3 L" S8 b) ], m$ |11-2 页面设计（2）
) }; A$ V9 {% H11-3 地图组件开发2 V7 h8 D' d5 |0 H3 I. p
11-4 入口文件编写（1）+ V( C2 x7 M) ?: t
11-5 入口文件编写（2）/ f1 I8 G0 \9 @$ u) t
11-6 页面调试
7 Z9 H9 l r1 {* y/ S+ g6 @9 s7 y, g4 U' q
第12章 美团网产品详情页开发
2 Y; _5 f& q; Y1 N! w! l产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
- K! q ? U# W9 ~1 |8 ?* h1 M12-1 需求分析 试看
7 I8 H/ `" b' ~% L12-2 静态模板, ^- M. s4 l, @: N( ?
12-3 产品详情页入口-静态文件: [4 b5 ]7 m1 w* J
12-4 产品详情页-接口6 L$ N" }. t8 b* A. G9 _
) A( Z0 j% j5 f5 X
第13章 购物车开发% d% s8 f& i. v) Z7 C3 _
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
: p/ l% e7 ?: J- U# G' R5 z13-1 购物车&订单-需求分析
' q8 M v) d c13-2 购物车&订单-页面创建
5 f1 P% w7 }! }# ? V13-3 购物车接口实现
3 o4 t6 m: s: R: o4 M7 T$ J% G- z13-4 购物车调试
M) P4 v: W! e0 H8 r" Z0 q; ?% L4 K% \
第14章 订单页开发+ O7 X g/ @1 v, K# O& I9 x' b
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
+ o/ H0 n- `' l# F$ `# k: m& Y14-1 订单页面3 _/ M9 a' H$ r9 g- d% X
14-2 订单接口) r4 B+ o( G) t
14-3 订单调试
3 `% B" k+ i8 ?& K. [: N# i
- L$ k( |0 r3 G5 k* l第15章 课程总结
# b7 P: D R. [# g$ M8 G9 A0 e对课程整体进行回顾与总结
) y! G! X$ R. L: ^* X; i15-1 课程总结$ q* T- H2 b2 W/ d" m0 ?
; L+ J" y- P3 C( s4 g# K【下载地址】9 {* j+ j) ~2 i8 C8 b* ~! ~
+ Y+ v2 R$ |# L- W2 V q
}$ }* r: d( Y j6 {* Y
3 ?% k8 ?* Q9 Y' k+ T |
|
[复制链接]
a
