1 f* @8 u+ r5 A6 }' C! G; t3 Q6 c" ?+ @3 H+ I
; t' [+ B9 ?. U
【课程简介】
s: |6 H S( c" ^5 ^这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。' r. m7 b! C" X7 Q
/ u2 E9 X% b5 I7 A3 ?: t- K
【课程目录】
. y' y: e& r/ G" ]: d& b第1章 课程导学; k6 G+ r8 G8 m& s+ r: T3 q1 S
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等! F( u4 s0 B1 y5 p1 H
1-1 课程导学 试看5 P* z) q' s7 O/ q- \5 d4 L
. X: X2 J- {, W% T. @- E. [: l/ }% J第2章 Vue基础知识
+ m2 b& ^$ i$ X整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
" X- |* o2 m. X v# ?. k: q( g* {2-1 概述&脚手架
$ \' [3 O! ?# a2-2 模板语法（1）
" o7 B* s; }- H( z% I+ i0 h/ u8 {2-3 模板语法（2）$ H4 R4 B P% Z4 d) e9 U
2-4 样式与遍历
1 L v S5 z, v2-5 事件; `1 K* @+ I' {: |
2-6 组件（1）/ {8 u5 k( B* G! P$ n
2-7 组件（2）) P" O/ u/ q, @! h4 ]: p
2-8 路由基础4 D2 g$ N0 L7 d, d+ |7 h
2-9 Vuex基础用例（1）
- t4 T" e. F& ?- H3 S2-10 Vuex基础用例（2）
5 I* [# ~5 W' W/ G+ O9 t8 j# } ^2-11 Vuex高级用例（1）
& H0 k* t" w* z W( ^+ A1 R4 `; i/ p2-12 Vuex高级用例（2） b$ c" K, t9 z1 C4 A/ L
& [! O/ b j5 Z' H+ `
第3章 Koa2基础知识
2 K. h5 U9 R& k- ^5 e, A, dNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
2 m) a( A& K: M4 @. E8 V3-1 Koa-generator. x- o, n' b) J7 E
3-2 Koa异步async7 Z: P* e( U- W' ?0 V- i' X; c
3-3 Koa中间件3 _6 k% Z. \/ z( A9 M6 ]
3-4 koa路由和cookie
& w1 g2 |' X) L' h+ I! L+ p# Z+ X% ^/ z. L& X2 A& B2 f
第4章 Mongoose和Redis基础
! l% N1 y, x3 R9 L* ymongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...+ k3 ~, `1 g6 ?/ m' S7 z( Z! ^
4-1 mongoose（1）9 L) V) ^" M2 }3 v
4-2 mongoose（2）
@: ]2 ^# z3 ~ R2 s' [) D4-3 Redis（1）7 b R6 e# v# Y& J, w( v
4-4 Redis（2）7 V3 S3 S4 r# |! Z4 o
$ S4 M7 F& m% N* u" c# _
第5章 Nuxt.js基础知识% b' o4 C0 L4 g! a
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
8 X6 e' h% n3 X. z" g5-1 Nuxt.js基础（1）5 b, Y4 W1 {7 W4 g
5-2 Nuxt.js基础（2）, s7 A* D& |; ^ P& K+ ?8 d) Q
5-3 Nuxt.js基础（3）
# ?3 k, i. g. z9 |* ] l V' }* z0 y5-4 Nuxt.js基础（4）
u' u* S4 ]% O% ^0 E; _( t
3 R" O' m% O9 y8 H! n第6章 实战准备3 l+ l( w! I3 A3 d4 H
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
- j9 q$ J& y I+ P6-1 环境准备与项目安装/ |2 g1 k) R, D. Y0 ]9 c b' O9 \
6-2 辅助工具安装与配置改装
6 v9 k: C! Y5 Y! T" f3 d. \' e6 G( I3 f4 ~6 `4 B& }$ [
第7章 开发美团网首页- A h/ k' v5 ^! E, \) v
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
5 n D X1 ^& {! C% f9 y7-1 需求分析 试看
- M" R* g" v7 H8 A7-2 首页Header开发-城市定位服务设计
4 c1 D6 j m( ~8 ~7-3 首页Header开发-头部引导导航设计
! [$ M9 Q0 }# F6 h4 `* y7-4 首页Header开发-搜索界面设计0 U' m+ c( r( x
7-5 Bug修复
8 ?+ A$ ^; j8 p! W6 ]7-6 首页搜索! y0 g. n. Z) V" x
7-7 首页菜单（1）
4 k% {+ f0 p2 l0 I$ {/ ]7-8 首页菜单（2）
+ R2 m- ^7 h8 y' P- V. B7-9 章节小结
' ]* h& @) s) N: m6 @6 K7-10 Footer补充4 |7 o! f- L5 Q' V. P
y8 K5 T: G; [) T0 A$ ^第8章 开发美团网首页-登录注册; l6 F' I" @# E
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
% H" S, d6 X& g( [! i6 q, @2 O8-1 注册（1）
4 |! G0 \2 T& t8 {8-2 注册（2）3 c+ A6 s! w9 q5 ~2 K
8-3 注册（3）
. A4 U2 \* |3 a6 A8-4 注册（4）
, J& \3 W& x: G8 H7 n, U0 q& l* N8-5 注册（5）
& V' {9 T, r* [: c8-6 注册（6）
0 g& X+ p- ?1 `+ i1 D8-7 注册（7）* F4 f) g7 }+ \: M; C9 @& \# C
8-8 注册&登录（1）2 p# \( l3 A$ M! I: U8 U- [
8-9 注册&登录（2）
# c" O& p1 \/ J
& m% ]; r: l; s' E7 v4 |6 u: Z5 M第9章 开发美团网首页-Search搜索
; _( q n3 U4 v z' E6 A. b只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。' P( l0 F5 S! |+ V2 B: A: R% R) \: H: J
9-1 城市服务
' v( h* ]2 w J- U$ L; ]9-2 菜单数据/ y# H5 k. g9 V9 Y: o! g
9-3 Geo接口实现
" u" n0 J# g. w$ x1 y( k1 U x9-4 Search接口实现（1）
" R/ M( g- C% e1 C- Y9-5 Search接口实现（2）& Q- L% X# _% N! x$ E+ K D
5 |$ W) ^6 J0 w/ B7 K) g
第10章 切换城市页) g3 V, G: s3 D8 E4 D$ h( |
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。: Z3 e) E2 a3 A! ^3 `* {
10-1 切换城市（1）
% ^2 R! U: j9 K, U( y2 I10-2 切换城市（2）" z, Y' T3 t B( W$ U: f3 X0 o+ T
10-3 切换城市（3）
5 _' ?5 q+ @, ~, l V2 f
% B d, A2 J) _6 {% w2 `第11章 美团网产品列表页
2 ^( p5 A7 W. _' Y# ~点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
7 l' f( M8 `; Z" _11-1 页面设计（1）
7 D4 R6 V/ \9 e; y* F11-2 页面设计（2）
' F% g- Q, J8 h' o11-3 地图组件开发
" K# |1 C; x6 b" E7 X' v- \11-4 入口文件编写（1）
7 L2 v! G m5 B, r11-5 入口文件编写（2）
0 e; ^9 ?0 {( c" e( Y11-6 页面调试
! ~6 S t4 m D7 Y$ A
$ _9 `# N, ?2 B8 |- \+ J第12章 美团网产品详情页开发& f7 @5 u! E9 u
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。! t0 h4 o; `) M) c2 s
12-1 需求分析 试看
& W" O4 P7 J+ I12-2 静态模板! e% ~3 Y8 o* V$ u( s
12-3 产品详情页入口-静态文件8 U: f7 ]1 C; F a' W2 g6 Z- b+ M6 r
12-4 产品详情页-接口
* C3 P/ X! ^6 l; _: Y' g* w6 k, P, G; L0 B8 C1 Y4 D
第13章 购物车开发% S+ p2 _4 G0 X F3 {, n' R% }; o
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
6 I% S, {. [1 f! k j! B13-1 购物车&订单-需求分析& t1 R/ a/ e# A1 f: j" x. D6 \
13-2 购物车&订单-页面创建
9 D5 L7 u7 ^: Y$ [& a: X13-3 购物车接口实现
7 l1 i: u: t( Q13-4 购物车调试
8 x5 T. x0 q1 H+ |! h4 b& [% O
- h9 F* B( H5 ]& P+ A Q/ Q第14章 订单页开发
# {6 A: o0 U! r1 s; o订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。& T1 t4 S" ^( t# p2 G
14-1 订单页面
* q7 f* l6 X2 G/ i" d; ^14-2 订单接口
. Y: H: Q/ |% D6 f! V5 T& R14-3 订单调试6 w: o6 H8 }* ^. y
0 c& S% P3 \8 h/ `8 ~第15章 课程总结
. J7 F6 T6 j% S& [! T' y对课程整体进行回顾与总结
* K8 z; h; }; ^% P# n8 Q15-1 课程总结
5 V0 J5 c6 j. t- S+ ]
0 ]* i& D7 m5 ^/ D9 r3 A【下载地址】" P4 m2 o; a1 s* f- F/ w3 p z
" Q P" b0 w+ n: R3 ?7 c
: W9 z& O& ^" r# `0 u
- h5 k8 ~ _! G9 D1 A1 x' Y |
|
[复制链接]
a
