/ f0 Y0 _& O0 A% @+ F) y B! }, W- j
! s" }7 |8 O6 M【课程简介】; J5 }1 C# ]7 F! e) A
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
( ?( Z+ a! w9 r7 v! f( b }* I9 D' x6 x7 B2 J \. J
【课程目录】5 ?6 E' F/ T8 o/ W5 {. l
第1章 课程导学) E! A4 ^) m" h% S8 z0 f2 g: [
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等- Z3 f0 _/ f( i2 H+ L0 c
1-1 课程导学 试看
* j# E8 l! W* e0 Y! I, Y
' |5 x: B+ q& q6 C第2章 Vue基础知识
9 J! M2 l5 }/ P) S6 {( d整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。% b/ t" e- T9 Z& K2 m) P
2-1 概述&脚手架
3 S0 g' I; H6 X- G8 f2-2 模板语法（1）
3 o: }* ~ Z0 C5 I1 i% M' D4 b2-3 模板语法（2）! R, z" ^7 J) B: J7 G! s. {! {
2-4 样式与遍历
9 F# f- ^" S! }" f2-5 事件
1 \3 W& O" u/ \ x2-6 组件（1）
- M7 @; v, ?! b; x% O9 X2-7 组件（2）
6 e2 z6 a- ]" l4 M9 i# T* T6 Q2-8 路由基础% \1 f- b" S" v4 X: E" g9 x8 Q
2-9 Vuex基础用例（1）0 g. X! [* C$ n# ?( H$ p
2-10 Vuex基础用例（2）
8 z+ @" @) N" z) Z1 b2-11 Vuex高级用例（1）
* [* g' X a- O( _+ N& j/ `$ k2-12 Vuex高级用例（2）0 z, T7 b: s7 c9 `! Q
2 [* _/ e0 x/ B( N5 g. R
第3章 Koa2基础知识 {9 L c3 ^# E/ j
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。3 r- g9 Z$ P: S. e/ m
3-1 Koa-generator
# h! X- Z/ E9 E1 \3-2 Koa异步async
; |; A7 Q- d; b3 S0 N* i. O3-3 Koa中间件
9 ]5 W# t/ ~2 o" B; m3-4 koa路由和cookie
7 ^, L! K" o( N0 S
( A6 A6 J% F- R' w第4章 Mongoose和Redis基础. I/ _1 X4 P5 o" l
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...( T% ?4 Z y7 F
4-1 mongoose（1）/ M1 a8 C) `) V, g
4-2 mongoose（2）
; ]3 Q* r8 M) R) B6 z3 j4-3 Redis（1）
|5 e0 H! H( A1 W4-4 Redis（2）
! G) t8 B/ z) O2 p- @- j- w$ f3 ?7 |
% w$ I; i6 | X2 F: I. _* G( R1 U第5章 Nuxt.js基础知识
6 U7 D/ O* V$ b4 l' xNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。..." N, X4 k x8 d* C
5-1 Nuxt.js基础（1）
& x# D9 X& l$ y3 J6 P: |/ T5-2 Nuxt.js基础（2）8 q* ^3 s' E! n% i
5-3 Nuxt.js基础（3）9 T' h0 ^5 Y4 R, |' W" j) j9 d9 p
5-4 Nuxt.js基础（4）
1 O. q( @, I, f1 y [$ i/ A9 w' F: k y; e3 m
第6章 实战准备
, ^ N$ \, ?6 w# E; K k& D工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
; L) n$ y# }% H" p# G% L, m6-1 环境准备与项目安装% X1 k/ W' E9 K- L7 z& ?* K+ l3 d7 P
6-2 辅助工具安装与配置改装8 w) C% t4 W9 e8 L
& { f) o- c" ]+ u# y" [1 h3 z第7章 开发美团网首页
0 L& d+ |, ~4 b! o" e1 m从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
% g) o! A4 ?- U8 S# _- X! w7-1 需求分析 试看. U; k: r% |& p& a% G
7-2 首页Header开发-城市定位服务设计3 ~0 y! ?+ }" N) i! |' X9 n* F
7-3 首页Header开发-头部引导导航设计4 m8 C% T Z6 r5 p
7-4 首页Header开发-搜索界面设计
7 Z* m# A- t I* y p7-5 Bug修复
# a# b" a! B! c( f) D7-6 首页搜索7 P3 d1 U! ~9 S) \
7-7 首页菜单（1）) [+ A! X4 v5 z
7-8 首页菜单（2）
: o O* x# \; d' C; B7-9 章节小结& d# t" X% L7 e" p( G) y9 k
7-10 Footer补充" @5 H; Q' x+ ]& u; C; K
9 e) j% V# v7 N$ m: l. s* h第8章 开发美团网首页-登录注册" h" [& n) W x$ a6 O6 l }7 ?- Y
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全+ s) E/ L3 Z# E
8-1 注册（1）
- ^# }/ b" D+ ?) u8-2 注册（2）
' _3 V4 s7 b: r& h w, A) @% w8-3 注册（3）5 o: Z4 m; l' a0 J4 ?
8-4 注册（4）% e$ T3 P: d/ U% ~/ c& X
8-5 注册（5）
! ], h [' A8 Y; j; B' c% n8-6 注册（6）8 m% X' w7 ^) I* N
8-7 注册（7）
" @9 n% U) I* S& N/ Y/ c0 b8-8 注册&登录（1）$ h5 v0 c! E- n8 e
8-9 注册&登录（2）" b n% x- _& J" a8 P
4 }7 @/ k! f! w; r% Q
第9章 开发美团网首页-Search搜索9 W5 h( q! P9 f5 `5 m
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。2 z W+ P( V3 W, E1 m4 ^
9-1 城市服务
6 U8 p1 V9 R+ j+ F9-2 菜单数据1 b: J0 [' g7 D, Y& f r/ y
9-3 Geo接口实现
% [* h/ O2 A1 U. U- z! }9-4 Search接口实现（1）3 b" h: }9 w: h5 M) d
9-5 Search接口实现（2）5 h( N- P/ |( l* `3 k; b
" _9 \7 o/ y4 L0 o第10章 切换城市页
* u* r" A+ i% ]9 e8 C+ _* `切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。4 ?2 ]9 T; {0 e2 Z
10-1 切换城市（1）
( d9 |+ U* C5 m10-2 切换城市（2）
1 R4 y$ o N/ j7 y0 p E" \+ X/ q" k10-3 切换城市（3）
+ D, }8 F* q: R) `6 p$ r& S8 e, f( F8 C7 ~" i/ ~! k/ L0 y
第11章 美团网产品列表页
+ M0 Q4 w: V3 [- r0 [点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。6 y" s, W) y" J+ s
11-1 页面设计（1）
% T3 \! C- M4 `3 T11-2 页面设计（2）9 ?2 ^. X; f& |4 h" H: e% `+ w
11-3 地图组件开发4 `3 v) p( q/ Q, w
11-4 入口文件编写（1）) u: |) ^. t% {1 M, W
11-5 入口文件编写（2）
3 x, l9 T8 ^: X$ a11-6 页面调试% |/ w: V4 n& J) [5 Y4 X
" [1 O, l4 j8 V1 a2 o8 @) I+ j; ?第12章 美团网产品详情页开发, x. } L6 Q! S# _- N
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。0 r" z# B/ s: f2 f
12-1 需求分析 试看
6 \- O" ^6 R5 I: Z; h12-2 静态模板" T( f( f: s2 m! N3 `
12-3 产品详情页入口-静态文件" ]3 x5 Z: n4 ^& J
12-4 产品详情页-接口
: W: z7 y; |6 s8 N
2 ]! f# j# V8 {1 S7 {. C; J' t第13章 购物车开发
6 _& ~4 i, \% p& C& w7 W$ G% M$ Z购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
( @1 W$ H# Q' v/ Q; M, J4 k" v13-1 购物车&订单-需求分析; @6 e9 Y3 o5 ~% C5 ^9 e' r/ P
13-2 购物车&订单-页面创建
l6 F- \. s0 b3 n% ~6 u2 l7 X13-3 购物车接口实现
' j, x2 E! ^3 S( m13-4 购物车调试' A3 l- v& {! ~! _
1 f9 S( B$ G* }& D
第14章 订单页开发
1 t4 ^$ e/ r, b! u0 L- j订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。! z3 }: e0 G8 i3 G: S
14-1 订单页面, }7 e! }! e- y M. s5 g) b* ]
14-2 订单接口
$ }( Q2 [4 o7 f2 _& R3 ^' [) b" R# L! y14-3 订单调试
( {) d1 O4 n/ A% n9 O- Y6 E7 G* A7 n/ z- Q4 l, _2 ?
第15章 课程总结
' M8 C3 Z- e# r8 I2 |对课程整体进行回顾与总结" |. o4 w* j3 t9 b$ n/ T
15-1 课程总结: k- X3 g! J4 F3 B$ `% j& Q9 q
R8 R% P: ^) n6 J" k【下载地址】# S5 U/ ^& X2 ^% S' j: x1 ]
$ P' g- z5 |" `* ~2 p1 `. O0 }/ q8 U: S
! |( S8 k7 I& ^: J' H9 R: v
|
|
[复制链接]
a
