$ e3 K' V8 A: N3 F& o6 `* O2 G9 p; z' H
& [' Y# k) m9 }5 B% h: L
+ t# y3 Y, V3 _# ^% H+ Z$ B" P【课程简介】
& O* n) { A$ v# I7 P. g这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。. c/ V E: V) q! D3 y `; a
0 f2 z- k/ Q n. n2 W' W8 d【课程目录】+ v* h" C) F/ h- q
第1章 课程导学
6 E* O" d. d' T) f" ?% n$ N& r3 I# x这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等+ _ B J/ s5 M0 U
1-1 课程导学 试看
+ ~) T' K' H) R$ y5 }* }
& v2 p4 Z3 R6 m$ P& |3 S第2章 Vue基础知识
2 K6 x7 u8 r% E+ }5 V整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
# C5 b4 o* `: j2-1 概述&脚手架
& {: g# o3 X5 }' b2-2 模板语法（1）6 T0 }, | U" K3 ^8 ^: Y
2-3 模板语法（2）
+ \! b8 q* Z5 j8 }7 r2-4 样式与遍历
w s: k9 T9 L8 g7 m5 C) ]; r7 h& U' d2-5 事件
' c) N& h- ]" m8 q2-6 组件（1）8 v6 {. N% t) D
2-7 组件（2）* [: L' H Z% x, S, |
2-8 路由基础8 H3 u" L$ l* p- |; Y
2-9 Vuex基础用例（1）( @% [( I, S# x+ D2 x, J; [
2-10 Vuex基础用例（2）
2 O. N, h: t) F2-11 Vuex高级用例（1）& \2 l( \/ i h' r9 R
2-12 Vuex高级用例（2）5 H) A" t, P% w1 f) _7 ~6 ~+ @' [
) O: f9 {8 y5 a& A$ k1 a
第3章 Koa2基础知识
6 W5 [/ h$ B2 y& n0 _/ gNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。3 [9 N& F2 J- u4 d G# j
3-1 Koa-generator1 {" A3 T8 H, ?2 w
3-2 Koa异步async. _6 C+ F: E6 o8 Z
3-3 Koa中间件
/ H$ H8 N# w/ Z3-4 koa路由和cookie
, \! ~3 Z$ D+ C" `: L5 a- v3 ?4 Q9 |& K
第4章 Mongoose和Redis基础. G3 W& ^7 D! ?# R9 l
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
2 I3 S6 h1 Z$ C4-1 mongoose（1）
9 u+ `& r3 ~& x. h4-2 mongoose（2）2 n1 N. ~# [7 K2 ?* C3 i# E
4-3 Redis（1）6 F, |9 M! W9 I
4-4 Redis（2）$ y" x* `, K9 y B
( P* T; c, p! @) Y# R& B/ U4 i% O3 a
第5章 Nuxt.js基础知识9 [1 g. S( g: {& R# }: l
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...2 g' d& `7 j* ~# J- n) U6 }8 d
5-1 Nuxt.js基础（1）& N8 J" S- r" I4 A5 e- Y
5-2 Nuxt.js基础（2）
" x2 O H( S* [0 d( x( r/ P5 l5-3 Nuxt.js基础（3）2 J4 F( t, H) `8 c+ c
5-4 Nuxt.js基础（4）
: t" ]- o4 f& E6 I; D: W' z4 z6 c6 A6 g$ H. \: G$ s5 Q# V+ r/ h
第6章 实战准备
, D! w& Q$ ^ O( u$ B4 t工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
2 n6 M# k0 M: R+ H& ~9 f' a8 ^6-1 环境准备与项目安装
# p8 O |$ J8 _$ W" X6-2 辅助工具安装与配置改装% s; S) D8 Q% P! W5 h
( e0 N, i7 d5 D. g* _第7章 开发美团网首页
" A2 q* S. V4 p, Q: \2 q/ t从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
1 g; K7 @# W4 j& N7-1 需求分析 试看1 h' S" j% P# ^4 K* @3 Z" g4 R- y
7-2 首页Header开发-城市定位服务设计1 w2 b, M: N5 ]7 s
7-3 首页Header开发-头部引导导航设计( w- l- ^6 B# L7 X0 `/ K
7-4 首页Header开发-搜索界面设计
1 i! D3 H6 c* O* h8 E+ p7-5 Bug修复
P! d R6 b- x+ \ \) A) G+ `7-6 首页搜索" d0 i- V8 R s/ i
7-7 首页菜单（1）
, t! f% f) X+ _; d( C3 Y8 F7-8 首页菜单（2）
5 E6 n& ~4 A G4 X1 u' X7-9 章节小结
, A1 f6 T3 n8 J/ L/ R# F7-10 Footer补充8 n7 A- q, r+ S2 m" q
- p r0 X- j8 @; G( |. O1 c第8章 开发美团网首页-登录注册
5 [8 ~ M; }/ X: @从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
% {+ X4 D t M0 [% T, S5 h8-1 注册（1）2 u/ s3 P: M1 s' P
8-2 注册（2）. w# H# U q; X2 l) a
8-3 注册（3）, f# x5 O: J$ ]6 o
8-4 注册（4）
2 ?. C0 d1 V: V4 @8-5 注册（5）
, _7 U2 w9 R2 k! A; d" g( L. E8-6 注册（6）
9 k/ d1 H/ k: F' p* N) R+ v; P8-7 注册（7）
* D( u4 @1 s4 m& G) F$ @8-8 注册&登录（1）
5 S! ], {9 t6 H h2 t8-9 注册&登录（2）
2 r# H& j( E/ v8 Q% V- [" j- {+ e- w( e. T
第9章 开发美团网首页-Search搜索
% b+ _; z, u, |7 b8 g) z只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
) J2 k5 W, ?0 i2 c) g9-1 城市服务, A4 x* v/ U" H4 Y5 g
9-2 菜单数据
# @$ |9 H* B I7 u9-3 Geo接口实现, @8 O9 |0 D9 l/ u& D4 N1 N
9-4 Search接口实现（1）
0 i' l3 q& M/ n' E& p9-5 Search接口实现（2）$ K$ U8 @0 o: l7 p5 U
( P, K( W- l( {8 w" O第10章 切换城市页. n& @) h( l- j7 B( t1 O1 n9 }
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。- X: m8 z& H+ b6 \) y
10-1 切换城市（1）3 \+ V E; Q/ Q, Y7 d, T4 R
10-2 切换城市（2）
b. z2 d5 \& M8 r10-3 切换城市（3）7 N% x" ^0 G+ P4 S
9 i; u1 ]6 y: }* T
第11章 美团网产品列表页5 a7 o0 T2 x7 B0 h3 ?
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
. l$ H, Y7 G. i$ g; v, S11-1 页面设计（1）! a) [: l+ \$ r* E+ ~6 m# A6 Q5 M
11-2 页面设计（2）% O f% o% F% K) O: x
11-3 地图组件开发
% c5 ]1 Y# @) ]; S& I) n9 ~11-4 入口文件编写（1）# G4 |8 y9 n! j4 ]
11-5 入口文件编写（2）; `9 Q ?4 b+ Q: P( G
11-6 页面调试
5 N! a" |9 C5 i( C( t( U3 [0 K2 g/ r6 g& `/ S
第12章 美团网产品详情页开发4 v2 |7 e5 H+ ^% l" M2 h
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
' |# G+ U, M4 ]9 B12-1 需求分析 试看
' c& U. \; l4 K/ s& L12-2 静态模板5 e0 {; A* ^8 w
12-3 产品详情页入口-静态文件! W# @8 [' s. O, X0 g8 z
12-4 产品详情页-接口. t* v4 W3 n4 _! j6 n
8 l& v9 x# O6 O% p# i9 y
第13章 购物车开发: a/ W2 P: j* J+ A6 J, V7 u2 c
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定5 U! e- i0 C# s" @0 K
13-1 购物车&订单-需求分析
" H) X, z3 V" g" n. F, R) }13-2 购物车&订单-页面创建
; O0 A7 e: g# T. M0 ]1 f13-3 购物车接口实现4 {# m; u" @! o) b, `
13-4 购物车调试* L5 E* ^0 s( {0 b% D N
) s& L6 n# Q* i2 A9 \7 P( C第14章 订单页开发2 ~2 V6 D5 z$ g; q# R" t" C2 J
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
: Z ?# @( ] G& A6 M8 ^8 r- k14-1 订单页面
- j& f: H* x; n6 b, s14-2 订单接口- l9 x! u7 a* e
14-3 订单调试' G j! `: Z7 q
7 B# o" M7 O: m; C: A第15章 课程总结% _/ z+ ` d8 h+ I9 u" \1 c, n
对课程整体进行回顾与总结, l: x0 o- u, D" G& E/ }+ r
15-1 课程总结( r2 Z# @ Y2 ~4 [1 C
7 V0 v- g7 {7 p, F【下载地址】' M' f& _0 d, F5 L4 P2 f' P3 N
* v! m8 k+ W" g1 @9 U6 U2 Y
* n( D# L+ |5 k. ^: [* K
* |3 ~ x9 y" V0 G |
|
[复制链接]
a
