* ?$ K9 H1 ~8 A0 h2 y, K/ i6 m* j9 ~) k2 g# w
7 I5 U, L# h' v【课程简介】
* ?& j- W6 j5 ?" C这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
* p* V) K0 W8 b5 Y8 I5 x: A0 p. C# F8 Q
【课程目录】4 f( @9 b! i! |& ?4 ?" k
第1章 课程导学
M# |# T( h4 v9 b$ h$ S这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
. [' X A) H) \2 j1-1 课程导学 试看
( o. n+ q7 E1 A. ?4 e& M& y6 Y' E |
. ]) ^: J! j) k第2章 Vue基础知识" p }" Z2 B0 v
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。4 ~0 D; C9 k( y
2-1 概述&脚手架7 R- L0 L* c9 g$ b7 ]& m
2-2 模板语法（1）
# |+ S q# o1 ~" u2-3 模板语法（2）
6 z' |/ q# x2 ]2-4 样式与遍历
7 \1 m* H! |/ P; V" O% S2-5 事件
" _) ]- h1 o7 Z# {1 y2-6 组件（1）8 z7 k* M B) M# i
2-7 组件（2）$ J% R3 z6 K+ x
2-8 路由基础
3 b) t% f6 [" b2-9 Vuex基础用例（1）6 L- @. d6 a% I1 G0 O6 B) {
2-10 Vuex基础用例（2）
8 o: E9 i' u6 ?2-11 Vuex高级用例（1）' D6 [. O! X0 [# O2 `
2-12 Vuex高级用例（2）
" |6 i! d. y( k; j6 o; n/ m R; _+ ?1 }# Z+ _6 G0 Z% `. g
第3章 Koa2基础知识2 ~% ]9 I; @2 r
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
: T/ \4 Q. v# `" w3-1 Koa-generator# y1 S& x9 m, M" b+ r, T) ~
3-2 Koa异步async
5 f" f1 i) K+ o3-3 Koa中间件
3 A& C9 ?5 @6 n, J _# S& ?: i3-4 koa路由和cookie' a X" P% W1 J# R' i5 f' T. o
9 \5 d6 [, f1 _" h7 z1 u% j第4章 Mongoose和Redis基础8 x$ E W* z, L/ Z' F3 n5 z1 _
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
9 E. d: {- ~# U3 a" H. l4-1 mongoose（1）2 v8 y Z; `8 R! O( C
4-2 mongoose（2）/ {0 f1 e0 X. r! o5 p
4-3 Redis（1）4 y6 F/ u7 u: a7 }
4-4 Redis（2）
1 d3 f1 h- j7 ]; w' Y* E. b
. G& g4 m/ j/ a8 Y: M第5章 Nuxt.js基础知识4 ^% a6 b' e6 J" q
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...1 z" T# Z2 G K, f, R8 l2 m
5-1 Nuxt.js基础（1）2 }/ j- \6 H( o
5-2 Nuxt.js基础（2）9 f5 b2 T/ ]1 w, D, U; E- Y
5-3 Nuxt.js基础（3）$ ]5 x' M- }, V4 o i- ]* |
5-4 Nuxt.js基础（4）
3 U- N* V7 d! d1 }# \5 M: b# L
) [1 Q/ `- E: j$ j- X7 S第6章 实战准备: b8 Z, }3 W( }
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
6 J8 C- |; Z7 S9 `4 w6-1 环境准备与项目安装# E1 C$ f8 `6 p8 ^( w
6-2 辅助工具安装与配置改装
* b) q* G, o) G6 N, g4 Q, d9 O! S2 W% T+ A
第7章 开发美团网首页( }( `) h( D$ |
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。/ k# e4 J" k2 V! |% U
7-1 需求分析 试看
: _2 n/ y. `2 Y7-2 首页Header开发-城市定位服务设计
1 \) D0 j) Y$ v7-3 首页Header开发-头部引导导航设计 | J7 s1 e. e6 W
7-4 首页Header开发-搜索界面设计
, r J4 c& j i+ p7-5 Bug修复
! I `# i4 q8 a9 A d9 Y7-6 首页搜索$ K6 d6 p& X1 S7 n _
7-7 首页菜单（1）
7 G6 y/ a" g( ~7-8 首页菜单（2）- O& R3 v% Z' ]% s4 C9 n
7-9 章节小结
, v3 ]- Q! {/ i" ~3 y7-10 Footer补充
1 _, n8 g V3 A9 a# h. ~7 ?. u
! `. Y |) n5 V6 Y( Y q8 f' `0 R第8章 开发美团网首页-登录注册# H) E+ F* }' \
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
/ P/ z O5 j, N8 x! G8 E' F8-1 注册（1）
' |& M, N* ]/ B% _5 D* F$ }8-2 注册（2）- z& b' X# v7 ]! E3 @+ `
8-3 注册（3）# o7 q6 Q' B& {
8-4 注册（4）
r* Y4 d. o+ Q: Y8-5 注册（5）# F( x3 L$ Q) C
8-6 注册（6）6 K& \- P) Y& `! `1 J6 W4 {
8-7 注册（7）- P* F l, t. m; H- |2 ^: j' ]- w
8-8 注册&登录（1）: F. v" o+ d4 }( `9 m
8-9 注册&登录（2）# R* b5 P _+ V6 b% }
2 d; o' s6 u8 I+ V) h: E0 z! g第9章 开发美团网首页-Search搜索" U- q2 b$ r9 y" b
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
- Y! j3 [5 o5 Y0 H8 O9-1 城市服务
" a; i% ^! U' M+ Y; C# a# \9-2 菜单数据3 U. V5 k( c" k: ^4 x+ x
9-3 Geo接口实现
, c3 o: a. L. _3 p- X: m9-4 Search接口实现（1）$ h5 h1 e6 f! t7 P2 N
9-5 Search接口实现（2）; R1 k/ I Z. o& u: ?$ @8 h6 V p
: m9 w! ?: n U2 n4 B& y
第10章 切换城市页
1 P: g% j7 `' ?/ `1 G: N% y$ h切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
8 g- C4 J' H% c. n# H9 `10-1 切换城市（1）
s# \! ~, A( i% S4 \. s. e* C10-2 切换城市（2）$ g; o/ d2 _5 S, ]" G
10-3 切换城市（3）" W1 s& \7 W- g& m* ?* l
7 n4 F- g; i2 t9 k U2 R第11章 美团网产品列表页
: k9 `! _, T1 A) X' S! ~# A/ L# s点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
! I( M* U1 g M# A5 \; A, d* r11-1 页面设计（1）$ d1 ~) w- ]5 q
11-2 页面设计（2）/ e* |3 J. K# ~" I8 M$ v
11-3 地图组件开发; }# {% R$ W' {; Y" O+ T
11-4 入口文件编写（1）/ y8 |" m& t7 a8 @1 ?, f1 K- x
11-5 入口文件编写（2）3 j, _0 O2 H9 s( s P! S
11-6 页面调试
4 @; c" s' g! W: ?, Y7 c; \! z8 x/ Q; R M. Y& l/ ]
第12章 美团网产品详情页开发
% {0 O( \1 W) b9 w/ ~产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
1 z' o( }7 d/ E/ m' _( n12-1 需求分析 试看
- T: ^) X/ p8 \0 W6 \6 V6 }5 j12-2 静态模板
3 w n; H. i' ?4 r12-3 产品详情页入口-静态文件$ n4 ^( D# d& c0 B+ z
12-4 产品详情页-接口
% n) b' w; ^* l% z. m, a' ~* W* Q2 }/ p& p; T$ B9 b) D: m
第13章 购物车开发
& R5 ^9 a5 }. F购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定: {3 @2 Z% g0 i" V' Q# P: j( i
13-1 购物车&订单-需求分析
! d7 N; U0 X- M' O9 p13-2 购物车&订单-页面创建) U. h' H6 m; I6 [5 v! r
13-3 购物车接口实现
4 V& w9 `- p7 C) U13-4 购物车调试
" ^' V+ I/ P3 t5 w6 | j$ f7 B4 R! V( t) M2 w3 m
第14章 订单页开发+ L9 M, Y7 `9 ?: q
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
9 ?& ]9 S+ L, i14-1 订单页面' Q3 o0 F% D' J5 q/ v
14-2 订单接口: p0 b- b. L2 t9 g d, Y3 L
14-3 订单调试( W1 G* x2 @6 m+ }/ x/ N/ T. I
, W1 Z3 |/ P( a' [! h
第15章 课程总结
: I, |: N {6 I4 w- q8 S/ M对课程整体进行回顾与总结' K: i4 f2 j3 ]9 z" ?9 m2 d
15-1 课程总结8 G* R$ m! y V: @5 M8 F6 s5 b, ]. M
8 W O8 T- F9 Z" R1 ^【下载地址】, ]+ p4 L2 U2 m7 q
! ^) {! S5 }- A/ u4 a/ h
& j9 `$ e& y9 ~3 s4 D
% Q% V. H9 m. m |
|
[复制链接]
a
