) X3 n9 \' P+ e! R
" [* G- k8 b* }3 p4 q
& \5 r( V9 J) k4 h' W; X& v; K
【课程简介】
* `8 \+ m( Y3 X7 ^ T2 m8 _& e0 w这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。$ `, u9 j& M. z" m5 Q: F% V
3 S% v1 d* k' [8 ]2 R* U& ?, P【课程目录】, }! j2 U$ h; }! h U( ]+ K0 b
第1章 课程导学. X, v$ k& i+ n [% L
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
# a. W' {4 y- _# J% v$ _. d9 n, f" U+ g1-1 课程导学 试看0 B' l' U! |* m {' O1 i
. V* X9 G8 ~8 t$ u% @- f0 Q
第2章 Vue基础知识. W" W) i! x+ a. y" |- r
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。0 e$ H& d1 n- ?
2-1 概述&脚手架6 q D0 t0 S: C m# Y/ E% g6 l: p% g
2-2 模板语法（1）
8 a" P! f5 @$ p2-3 模板语法（2）
) U: e) y" N! x- Q+ g( i, q2-4 样式与遍历0 V! C* J0 D6 P" h- S8 U
2-5 事件
: t2 u0 T! p7 B% G% E* i2-6 组件（1）
3 |+ A' U; L3 s. k2-7 组件（2）0 Q9 [% j" s* O0 s
2-8 路由基础/ I" ^4 T+ O' H
2-9 Vuex基础用例（1）
" Y/ A* ?; `' |7 g3 ?9 G7 M2-10 Vuex基础用例（2）
+ g0 w7 n7 i% V! U' v0 A, l2-11 Vuex高级用例（1）3 H3 d" I4 z4 ]* ^% M2 s7 w$ k
2-12 Vuex高级用例（2）; q, g# c' e; s6 {6 t3 h+ B
7 a( I! w5 R0 X1 G+ U* _: [第3章 Koa2基础知识; e7 u# R8 t# n Q
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
! }5 o/ V5 }0 }* c) Z$ g5 n" I3-1 Koa-generator0 a+ X7 J& K' G' _7 D3 z
3-2 Koa异步async2 r% R$ y1 s; _1 B) f
3-3 Koa中间件
3 L' e C u& h# I/ V" {! f1 C3-4 koa路由和cookie
) i8 b! y6 d# L$ h# v
0 u% {" v1 L* q. R第4章 Mongoose和Redis基础
. G, u$ R' i1 Z3 ]1 p+ |mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...9 [& Y' O# t3 F% c
4-1 mongoose（1）) r: u% b2 ^9 X, v- G
4-2 mongoose（2）
+ N2 [8 A# j% ]% I5 W# F. I4-3 Redis（1）
" [, Q% F: P6 c: K3 V& T2 [4-4 Redis（2）" h) n) [/ t% h3 C( d) ~. M
; E5 @: X- G2 d! `# [; I6 C, G第5章 Nuxt.js基础知识
( z4 Y' p; O. N+ ?/ a& c' rNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...+ F0 s. {# ~+ x) k& ~/ w. [# B+ h
5-1 Nuxt.js基础（1）2 F9 B$ ?8 H6 t0 `3 X1 Z2 R+ k2 t# A
5-2 Nuxt.js基础（2）/ h; _ F+ _, }( x
5-3 Nuxt.js基础（3）! G, e4 ~ q. p! E/ v/ ^# {
5-4 Nuxt.js基础（4）
- T0 ?) Q" ^' ^/ \5 ^; W4 h t1 U: Z* t
第6章 实战准备
( i1 Q5 H, a) H+ Y8 D工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。* @- r2 ^* p" b
6-1 环境准备与项目安装2 C: y1 J* G/ Y6 P0 D6 ~+ p
6-2 辅助工具安装与配置改装
$ \0 a# D5 R4 H
4 d! H3 s, @9 G7 X$ \( Z% D, H第7章 开发美团网首页) D# B1 a/ D4 r j s4 }
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。- t" m c+ c8 ~. S' w6 Q6 k+ d. p! V
7-1 需求分析 试看
E4 b0 v) d4 I1 x* s" y, l; p- A7-2 首页Header开发-城市定位服务设计
8 z1 V$ U' B7 }9 ^! V, `6 z5 k7-3 首页Header开发-头部引导导航设计
- C& n& P. K7 V& n. o/ ]( J7-4 首页Header开发-搜索界面设计
, K, n0 d- w3 I7-5 Bug修复% R0 f+ G+ y4 ^/ g0 u. Z! K/ m
7-6 首页搜索' L3 ^# }6 V* Q; S
7-7 首页菜单（1）
5 t* E: ~% n3 [$ q, M p7-8 首页菜单（2）
/ n$ i, O& h6 |( w' H; E7-9 章节小结
2 r3 G! P" a, @& ^3 }7-10 Footer补充
2 R& P% g0 a5 Q- p( P/ b4 f1 n; I8 t
第8章 开发美团网首页-登录注册
8 Q7 U" m; i; J5 C从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
: m. T3 z: \$ K8-1 注册（1）
& f% [( S/ B1 v% X5 n% m" ?4 ]: l8-2 注册（2）
1 d+ b: y. j9 {4 G/ F8-3 注册（3）/ i% J% w2 ^, B: L
8-4 注册（4）& r2 f8 r3 `( d4 b
8-5 注册（5）
- E+ S* D2 d8 ?# d1 g0 B8-6 注册（6）! T% P& H$ r' Y; V/ C* L: E+ V
8-7 注册（7）( V* D4 L" z4 T$ M* ^/ M" }
8-8 注册&登录（1）
9 m6 m" _8 |9 o( W4 ~4 w7 A5 [- S8-9 注册&登录（2）
9 Y& U5 P+ o3 ?, z5 f9 v- z5 M. v2 t g6 Z, L
第9章 开发美团网首页-Search搜索
5 G3 l- [- l; o7 s9 z只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
' d0 F% `+ v! I5 ~9-1 城市服务
2 B6 V) y0 e$ M/ M. N) B' }9-2 菜单数据
+ \5 a; w- ~& W S8 @2 P9-3 Geo接口实现
. @- I6 f4 B( O9 c. Z% |5 _9-4 Search接口实现（1）1 m: V0 _5 ~- S4 [
9-5 Search接口实现（2）
x3 J5 ^( v5 [* h3 J0 h& }" B2 z: B- {: _& l6 w3 `2 t
第10章 切换城市页
5 D/ s! \3 ?: P1 z2 @切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
; Z) I9 D( s- A5 B! F* y10-1 切换城市（1）+ a8 c: W/ I) ?! t1 t
10-2 切换城市（2）
) [4 B; k# ]5 {* ]2 f10-3 切换城市（3）
* W' S9 D7 o( }/ i. T# r" P
% v# ^. T% k6 m6 [/ \- ?' {第11章 美团网产品列表页0 W+ K( g. b' `. M
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。5 ?$ a* u, y0 N6 z. q, r1 l! I
11-1 页面设计（1）
$ u) I" q8 D! M3 ?3 |0 e11-2 页面设计（2）
0 b$ J8 b) G j% e11-3 地图组件开发6 |8 o4 j7 r" v5 m5 I4 b
11-4 入口文件编写（1）
9 K; `- F: z& C% `2 K11-5 入口文件编写（2）
# f+ m/ }$ N6 s3 s& P11-6 页面调试
- l# _4 q0 I8 f; w. {# y- k7 ~+ V+ F A+ [4 Q1 t4 S
第12章 美团网产品详情页开发
3 \4 ~+ h: _! T3 F# ]7 d产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。* P! k' `6 x- y0 k6 K6 f
12-1 需求分析 试看/ X7 H7 }, M1 d( ? x8 v
12-2 静态模板( M! h: L- p C7 @1 |( m& U
12-3 产品详情页入口-静态文件# {- @ r' s! {1 W1 w$ r! [5 H* ?
12-4 产品详情页-接口
5 y+ h2 \1 ?8 [$ J; u" b' C9 N! z0 x7 x- r& X3 ~0 X$ b
第13章 购物车开发 f6 H, i6 j- c! K( m9 h
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定 M! H* p; t0 c1 h
13-1 购物车&订单-需求分析1 [0 R. \$ o2 w! R* |
13-2 购物车&订单-页面创建5 ?, |2 m; w. t3 z% u
13-3 购物车接口实现+ C& e8 C- `5 d% L4 T
13-4 购物车调试
# e. @* F8 T2 _, s! v5 C
/ s8 c; ?4 `: s2 @+ j第14章 订单页开发. v0 ]. k. y+ s. i# u0 t& Y
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。: I! w" t% E/ L
14-1 订单页面* Q8 ^ z! f" I0 w5 s z- ?
14-2 订单接口
+ \: D4 }# `. d1 P14-3 订单调试, t8 }" N$ h7 D X& ]$ C: ?* I
7 s/ P; ]' z! |7 ~0 u- k B& O7 d
第15章 课程总结
) r6 L: Z- c9 t+ ]6 B' p/ e D对课程整体进行回顾与总结
9 k) {" _. M9 ]: K15-1 课程总结
/ [ i& `: R0 g) ^5 { d6 _) T) [
' s+ R I3 B" b& n; n【下载地址】0 P( \; ^+ d" z4 {, { w' K/ f
8 }: q- c: K9 [& O# c
/ x# @9 W& P. K4 U' F! f5 G5 F- U
# I6 R8 ~9 f7 C8 w( t |
|
[复制链接]
a
