* D! S. v% b! V6 [! H
7 K2 t5 V8 @; V# u. K* ]) G$ H
3 c8 z* r/ Y4 ^+ }' Z1 W9 B; `
【课程简介】* F: N I' v% T" w) \+ a) B: N
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。8 t/ M7 c+ F& Q8 W+ C; r
4 r5 C& d7 X( b7 i【课程目录】
G; ]0 \9 V+ P( d$ `7 D3 S! ?7 d第1章 课程导学/ O8 T% }# I( Z" p- l. n% y
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等8 X$ f* V+ v0 _/ x/ R
1-1 课程导学 试看
. p0 r& W" f. V8 w5 L9 V" w; p, \* l& @6 q
第2章 Vue基础知识
9 D* W- p+ ?1 h; G2 [整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
, h; S1 A) }0 m" t2-1 概述&脚手架
, }( T' t& ]7 p: z' n. {# r+ `2-2 模板语法（1）
9 ?% F+ t$ u) b( ~2-3 模板语法（2）
. {, U! r8 v: s2-4 样式与遍历* ^! |7 q% ?6 T9 t- K
2-5 事件" a7 c8 n% i8 O O# ^) ]1 ]. _$ B& m7 Q
2-6 组件（1）
8 a/ C+ ^# e+ Q# K, c+ H5 E2-7 组件（2）
' g3 ^$ D* @* v1 P7 X2-8 路由基础; F3 C. `8 ]; p
2-9 Vuex基础用例（1）
, X7 Q# A; w8 }1 T$ y3 J1 C2-10 Vuex基础用例（2）% f1 V) ^! r$ ?- t: S7 G' k. g
2-11 Vuex高级用例（1）
* F7 Y1 X$ A; ?. q8 N, n2-12 Vuex高级用例（2）
$ e5 u2 P2 s8 Q% [6 x* ^. c8 N7 ?$ l* o% S& ~3 b
第3章 Koa2基础知识( c& Z U; \+ ?
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。, K; m" L4 c: z4 ]* [. H" f
3-1 Koa-generator5 ?4 Y8 D% y4 j* s6 ?! g3 z; Z+ w; S
3-2 Koa异步async
1 M' J( v8 [; ?: T: E3-3 Koa中间件
, U% q" K1 e$ ~ z# Q# v3-4 koa路由和cookie
# Y8 w, B$ F6 a- V% f' d/ j# P! Q7 H7 R. }1 F
第4章 Mongoose和Redis基础+ S, A; I) H+ w z- }* v
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...9 @$ M9 r4 t- j: [
4-1 mongoose（1）
; p3 ~' `5 l+ {, ^. n4-2 mongoose（2）3 f# ?- {( N- E" Y& V& S" g6 v# q% I
4-3 Redis（1）
6 L! J* @. U1 C4-4 Redis（2）
, r3 X- i' k; L* |8 z8 y( z O, D6 |2 @ Z1 p
第5章 Nuxt.js基础知识
+ l' ]& J0 W: t6 W0 r( `1 L+ vNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。..." `7 N2 W0 Z% s# K1 N1 A
5-1 Nuxt.js基础（1）
. ^; V8 Y, X! F% U6 x5-2 Nuxt.js基础（2）
4 O$ Z; C0 o) K4 o7 n8 K/ ]$ T4 G5-3 Nuxt.js基础（3）& e) R6 Z2 X+ `- l( o
5-4 Nuxt.js基础（4）! u# Y: K: G. c5 z
: N# |/ n6 m8 e( D4 ^" j
第6章 实战准备
1 l3 n W( _4 w/ _4 M0 C4 e工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。; I+ d( T& U* j1 M( M3 w6 P8 |
6-1 环境准备与项目安装8 Z9 |0 s0 C. ~. s/ h1 d% s
6-2 辅助工具安装与配置改装0 h1 J8 c" D- X* u( L0 ?: C* G F$ |! x
6 E+ ~6 h7 I. E0 j2 ]+ r第7章 开发美团网首页. ?6 \- Q9 W/ [ O$ \& l) A7 j# y a
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
) s) ]; c- P- F2 B/ \4 {1 h) u7-1 需求分析 试看" a, z: l- g, J
7-2 首页Header开发-城市定位服务设计' d& ^& J6 [; u F
7-3 首页Header开发-头部引导导航设计
# r$ S! I9 n4 T# W- u7-4 首页Header开发-搜索界面设计
( }4 s5 N) C" U/ l% O% f- j7-5 Bug修复& M3 F3 i4 F+ ~* c' t
7-6 首页搜索+ ]1 u' J- ^8 ~3 z! n
7-7 首页菜单（1）
; ? W/ U' ^7 [1 Y7-8 首页菜单（2）
5 Z `3 h' N8 e1 S7 _# W: G7-9 章节小结
* W" J7 h/ }. d( ?, \3 P4 v5 b7-10 Footer补充
$ p" P [7 Q5 I5 l: v( D. [( S' V! \" i7 B
第8章 开发美团网首页-登录注册3 f3 \- N& G* V. p
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
2 i2 M: @) S: i7 Q3 [7 J v, A3 `8-1 注册（1）
( n+ _1 K- f( ~8 K5 E' k8-2 注册（2）* I' g8 O! T& r( i' m x$ p
8-3 注册（3）1 i6 V/ _3 I5 C3 N; e2 P+ r
8-4 注册（4）
' K4 T: k5 j& s3 j0 H8-5 注册（5）
9 P( i0 F. \: K0 n. y+ ?& u+ ^8-6 注册（6）9 J8 t( r+ n! n" F% v+ X
8-7 注册（7）2 }4 m0 @4 C4 y- H- E
8-8 注册&登录（1）
8 R2 t; U* G+ D7 s0 e" } L% c m8-9 注册&登录（2）
1 K2 S6 c+ C% m4 `# S w& X: y6 g( G v( y2 q! V5 H
第9章 开发美团网首页-Search搜索
4 O7 d# v* O2 o( J3 C; L只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
$ a- [& G2 s0 {, F" \8 s) }1 g9-1 城市服务
$ i% v& S) }! `2 W9-2 菜单数据0 E3 ]: u4 N- i2 d) S4 R
9-3 Geo接口实现, G" A8 U! q% T( P2 u. B
9-4 Search接口实现（1）! t: M& ]; \' N1 W
9-5 Search接口实现（2）
* b% w/ P7 e( F Y2 h9 w
1 M" P7 z" n3 V# s8 Z第10章 切换城市页
8 d1 k0 y' n6 v6 }( g# D切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
" {2 V3 _2 W" z- m10-1 切换城市（1）2 I: }! N& L9 ]* p
10-2 切换城市（2）5 s2 ]* v; p0 ~6 c
10-3 切换城市（3）
* i! n# R' y$ s D9 l
8 F0 J) s+ G- {5 N+ y" j3 }) `: L第11章 美团网产品列表页8 m) I% r/ \% w: r
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。: d8 t, E% E8 ?6 ^! h
11-1 页面设计（1）
1 W* [: Q+ X. l, |8 v$ Z11-2 页面设计（2）5 C+ S% _+ g! q$ S
11-3 地图组件开发
. G, n- E/ @1 p11-4 入口文件编写（1）2 ]! X: @8 R" ]' d! f
11-5 入口文件编写（2）" @# J) h1 e1 E' B4 R
11-6 页面调试
$ Q* _$ X9 G1 w0 ~" [" f/ J- M) }0 n# B+ z% H ~; d5 ^" r
第12章 美团网产品详情页开发
3 O- U/ c& @* y5 s, S& @产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
1 M5 R* d. V: a* Y12-1 需求分析 试看3 M; O/ I7 l) h
12-2 静态模板5 B8 T, K3 G/ p" l
12-3 产品详情页入口-静态文件
- f: }, G. s& Q F) f p12-4 产品详情页-接口
5 x1 O+ G" D3 ~% q
* g, Y2 U) A: W8 L$ I第13章 购物车开发
/ X! o1 x7 X% P6 |" i- w0 C购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
' m. p2 W; l: s: O8 z13-1 购物车&订单-需求分析
5 T$ |3 b: q' J4 W# F$ x13-2 购物车&订单-页面创建
% Q& V6 W! r1 `( v13-3 购物车接口实现4 Z2 G4 X* y8 R& V H
13-4 购物车调试6 n4 G. O. B1 G) S. u" y1 J* I
+ k3 L& n5 [7 f6 N9 E% h
第14章 订单页开发
/ ], ]- N6 t) C" S$ j; k订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
$ z; W" I% _2 e14-1 订单页面% b5 R- a% D2 d$ y7 r
14-2 订单接口
. u1 r/ d& a' J( J! s+ [14-3 订单调试. \8 p" F( \3 r5 W2 W0 e
% W( f) z2 e: {5 w: n9 d! L
第15章 课程总结6 B( v, U' W- I/ V7 I n
对课程整体进行回顾与总结, E& O3 I; Z4 V5 O
15-1 课程总结8 z- }' S. y' m" U* d; _
+ E @) U& f5 R4 O; c5 g【下载地址】
: K1 ?- o% D- {& H8 o1 B5 x$ L+ t9 M* {2 X1 L5 P* N; c
5 _6 L" a& I' B- }5 c" `/ ?% m" j+ [
6 Q- e1 o! T' v0 W; k% z% D |
|
[复制链接]
a
