7 ~ L( J; G ]; ?8 L
! j4 f9 L- m* F$ i5 w2 l, Q% u2 A) E, ?2 e/ A: u5 o% b/ M
【课程简介】; S. C7 J+ [3 _+ @6 s, I* N
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。1 W, \9 \( w" G1 R% B" D; O& }
% {# M2 r: d p, |8 I【课程目录】
$ k9 S& U! |! {5 Z- G* B第1章 课程导学
4 y. t* R C5 ?% k- M U9 w这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
+ p# T6 i+ m/ W8 f6 ]1-1 课程导学 试看1 u( c: s/ Z- E1 U
/ S% B) e# d- |; W7 R) g P* O
第2章 Vue基础知识
( g" k$ w6 M# }8 \5 r" q7 D, I整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
) _1 V, {: Q" J7 V& Z# b' e; h2-1 概述&脚手架9 A5 z2 h" U* _( C+ B( e
2-2 模板语法（1）6 q% v& u& T+ m6 m
2-3 模板语法（2）
5 M4 A% A: o0 h$ l: \- M2-4 样式与遍历
+ a6 O$ Y7 s. x) y2-5 事件' n6 h8 w% a; a# T- p
2-6 组件（1）
/ q' U# T* \+ R7 r6 {2-7 组件（2）' }# I: A6 ?9 ]
2-8 路由基础/ C4 }6 f* w0 U4 o& F- [ J) d
2-9 Vuex基础用例（1）
' Q: I' _& s9 E' n/ d2-10 Vuex基础用例（2）
: \" d+ q# M0 z3 V7 W+ T7 |2-11 Vuex高级用例（1） j9 ?: Y" [; h; _( \
2-12 Vuex高级用例（2）
2 U/ u: I2 H$ `8 T# y, y2 n& `- [$ n- A k9 V
第3章 Koa2基础知识
$ N9 }! K2 `% BNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。) k) O$ G( s" G
3-1 Koa-generator
D+ i7 z1 `7 P0 Z3-2 Koa异步async
2 x/ g9 I1 M2 `& S3-3 Koa中间件
5 k" ~$ M, h& D6 |3-4 koa路由和cookie# ~5 O5 z8 G _6 @2 I' i
. D( f9 l6 l6 F& W# w' k第4章 Mongoose和Redis基础
g- g: M& ^8 q" gmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...( o9 }$ ^% G9 v/ J) m
4-1 mongoose（1）# f) L9 u3 n. y. [& }* G
4-2 mongoose（2）
1 o4 ?" x8 a, J. }9 C4-3 Redis（1）
- O2 Q5 |0 l$ u( r3 j! i# `4-4 Redis（2） H$ S. F9 E# S1 b
( }" ?8 }6 @ r/ d- _
第5章 Nuxt.js基础知识
. {+ V1 |$ l% Q: nNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
2 |6 X1 J% |- \5-1 Nuxt.js基础（1）
! Z3 ?0 ?1 R) c' N' A5-2 Nuxt.js基础（2）$ F4 |' `5 @' d" b) r: R
5-3 Nuxt.js基础（3）! V" b+ M5 o) q
5-4 Nuxt.js基础（4）
5 b+ v, o J( Q; H; Y* z) T6 a- V3 P! R" |. o
第6章 实战准备
/ K. Y3 c" i9 p, u工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。% W% j( n; a# ]
6-1 环境准备与项目安装 p: C" O; z& Q* T& o) ^- h3 W7 c
6-2 辅助工具安装与配置改装* A5 r! C' L1 ]5 }2 J
3 a5 _, a" g7 {
第7章 开发美团网首页
9 i- U, Q0 a# T8 [$ D! O& W从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。4 `- n4 N( X3 T! K, o) w1 `
7-1 需求分析 试看
, Z8 o; i- d( }. D7-2 首页Header开发-城市定位服务设计
; Q8 w% C+ V$ v( L7-3 首页Header开发-头部引导导航设计% z$ F) G q: z
7-4 首页Header开发-搜索界面设计) x0 J7 g z* }- a
7-5 Bug修复
; ?$ g# s k9 Z8 L1 U! z7-6 首页搜索
2 x- d0 a% l9 e& L7-7 首页菜单（1）( {. H5 T0 V U: C" t+ Y$ F* ~
7-8 首页菜单（2）2 _7 u7 v% t ~9 ]
7-9 章节小结
$ Y# N. M1 `0 f* J) J" f7 K7-10 Footer补充+ ?3 y; f& x; E5 U5 W& S
2 M) a# R" x6 I2 Y O
第8章 开发美团网首页-登录注册* t: W; V( W8 X: u0 o
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全* Z3 i+ |. `' z7 l
8-1 注册（1）
& }$ z1 }5 v( w, {) ?% Q* ]$ w8-2 注册（2）4 H9 ^& A; k( w* e P4 a* G6 c7 H
8-3 注册（3）
v$ `3 q4 a( _% h8 z8-4 注册（4） k- A; F) v) b7 e' [- [1 x# w, l
8-5 注册（5）% c" d5 S# Z& D" X" ]3 q
8-6 注册（6）
4 ]4 I2 _- h! D/ s+ }; I8-7 注册（7）- ~, G7 _4 P. t- Q! V+ B
8-8 注册&登录（1） y/ a1 ` k: f7 ?5 {- b# i9 F4 T
8-9 注册&登录（2）$ k5 f2 ?0 l H- [ H* i9 G0 Y, S$ n
]) r# ~3 U* G0 K7 L( B3 x1 X4 @
第9章 开发美团网首页-Search搜索
0 D$ j, k& ^; g- G& R' n! o( ?; l只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。$ V" c3 B8 G( I2 R/ N6 y' ~
9-1 城市服务+ O# Y s6 E$ z% m' E( E+ P' y1 N$ F
9-2 菜单数据
0 a6 }% B" w3 m b9-3 Geo接口实现5 C- g) Z+ Z8 E I( h6 {! N
9-4 Search接口实现（1）5 G* o! |" K+ W' ?4 G
9-5 Search接口实现（2）0 |1 B1 H4 Y- j) p3 t5 l
$ t' B, N4 S7 C! v
第10章 切换城市页
% V9 S: m" A& z" k切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
6 y; I) ~2 c. D5 U# h6 \; c, C3 {10-1 切换城市（1）0 _5 m; M. X; }5 \1 P
10-2 切换城市（2）
; x4 J7 k/ M9 f! F10-3 切换城市（3）
9 ~" ], g7 Z* b( f7 L; {; h: ?, N4 t0 x/ Z. W [' h1 M+ `$ w$ u
第11章 美团网产品列表页' _" ?4 I3 [( n4 q* ~) j
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。3 d8 G2 c4 m% J5 {' C% z
11-1 页面设计（1）
" p3 t3 Q# m* r! ]11-2 页面设计（2）
- x G9 p& \) i11-3 地图组件开发
2 l S7 T7 ~6 [* P1 g) _6 b11-4 入口文件编写（1）0 k. T6 Z: {7 {6 R
11-5 入口文件编写（2）
( c3 D$ K+ q' s, v( L11-6 页面调试0 m' w) I ]+ Q& ]
- J* |# [" l; H% ]! S
第12章 美团网产品详情页开发- e# n. L/ @2 j5 C, p3 g' f1 K4 z# C8 ]
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
1 M: p9 d- l( a0 f' P/ g12-1 需求分析 试看( @5 X( ^9 I$ [8 ^) |
12-2 静态模板6 m( l0 W' s* p; u
12-3 产品详情页入口-静态文件% K* R: {7 N Q) d; _* u
12-4 产品详情页-接口5 G! O R- r& H0 i, o0 P
: i6 f) m+ y) r9 k9 W
第13章 购物车开发8 h+ `: ?3 I6 w1 P
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定4 ^8 |- S. U1 U, B) \- r$ I
13-1 购物车&订单-需求分析
" V( I- }$ f. P# b5 K13-2 购物车&订单-页面创建: h+ M9 Z3 R: N7 T
13-3 购物车接口实现$ ~/ J0 }# P1 n, ~/ c/ l/ a
13-4 购物车调试
, b* ?, ~& C3 A2 k. G6 g
0 n" P2 K( k& X; m2 L9 [* u/ X第14章 订单页开发
3 p% X' r1 \& B4 n+ [+ q& y. W订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
: J8 g4 K6 n; f X; s- i3 n; `14-1 订单页面
' ]7 q' I' i. A7 b( n14-2 订单接口) \8 O I/ m) e8 U; x+ t
14-3 订单调试2 q& |; {# k2 r( C/ L/ C
/ e* n) G! c a1 d2 ^
第15章 课程总结! @ ^1 S" X4 c
对课程整体进行回顾与总结
7 e ]' H: D- g2 p5 L, Q15-1 课程总结
( R0 L( q: A: C7 a6 A0 X# v% z, A u: B
【下载地址】
6 q* ~; T0 N& [" J1 M- b# m+ d$ Z
! ~/ s$ P" G' c' ^! M+ X
& ]* _) D( m* t8 c D2 }6 ^! u1 w: `
- U6 N, [, P* e5 }0 y |
|
[复制链接]
a
