# O. E% e: H' q) U) o' [
4 m' }, ^' T r& a( H
" y( r" u* W" [4 ^- k2 H( g. n+ W V【课程简介】" s9 X2 P! p8 i1 y' m
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。* _/ P+ [0 n J1 B
6 v: i8 `% `# a H7 c: p2 o【课程目录】+ z7 M3 D9 K3 g/ x r
第1章 课程导学
) \. M" p$ n5 \7 i( [这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
0 C% V. t ~$ v! Y5 f/ g' y7 C1-1 课程导学 试看. u$ Y( d$ W! s* N
8 B) b- {) t G% N6 S
第2章 Vue基础知识* k, F1 o+ @# t2 P
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
; p& w+ i @: I( B) G' t2-1 概述&脚手架
% v2 a$ h3 Z2 ]/ s, H! \, B2-2 模板语法（1）
: T+ N8 M1 ^& C# z2-3 模板语法（2）* `/ x6 ^. ?9 v- P) C! v9 {6 d
2-4 样式与遍历" n& E D, C: t: t
2-5 事件0 C" C0 j% ^" U* j
2-6 组件（1）7 g) k/ I, \1 p* M% A- F# B! e
2-7 组件（2）
% c. e7 c ~3 ?& [# \2-8 路由基础" ?8 s3 l+ [/ C) ]# q
2-9 Vuex基础用例（1）
( ?) n! d) @* V; N, ^, K2 F2 u Z& t; W2-10 Vuex基础用例（2）
* G" n) Z: Q' {% b2 K2-11 Vuex高级用例（1）6 H9 j, N' e) m/ a0 I; c4 I
2-12 Vuex高级用例（2）$ c. k1 M- \5 |# a9 V' d* p
" a" r; i3 S& w! n- f L' m
第3章 Koa2基础知识
6 e6 H- N* b, ^- E5 pNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。8 H0 P5 z3 a8 v
3-1 Koa-generator/ {" B9 ?1 ?0 z; q2 f
3-2 Koa异步async
$ X2 e# s6 l$ R% j; ~; O3-3 Koa中间件; A; W" i5 B) ~! k7 U# s
3-4 koa路由和cookie
7 Y% y% `0 o" c# L# ^
r# K$ _, ?+ U% [* _# K第4章 Mongoose和Redis基础
/ W. X+ A. d( T5 w) [" V% ]' f( Vmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...9 |1 h9 v0 L$ v+ L/ @4 t
4-1 mongoose（1）' j/ {/ Q- m" b& d1 G3 {
4-2 mongoose（2）
6 I+ [5 D" M$ v% C8 \9 f Z {4-3 Redis（1）: g6 h( d5 n5 [7 [# w7 d; {
4-4 Redis（2）' n; r0 s& ?! ?0 j
, O* [0 ?6 |! k2 P第5章 Nuxt.js基础知识
% m5 X* Z7 R) r1 k5 @, |Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
( J( A/ p$ F) L5-1 Nuxt.js基础（1）
8 s6 J5 C1 k2 C* a: _9 F5-2 Nuxt.js基础（2）" B# `8 N% U; |0 O% c
5-3 Nuxt.js基础（3）" Q* c7 N7 y& E9 o) r. e9 U/ E8 n
5-4 Nuxt.js基础（4）' [3 E" h3 b/ n
7 H. T4 @) q$ M* Z/ r
第6章 实战准备
. z8 i7 T* w9 B, Y `; K工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。/ d' I T7 R8 [( S, c
6-1 环境准备与项目安装
5 X# W0 p. @. {8 s K; Z0 g6 U5 v6-2 辅助工具安装与配置改装; \9 L" H% R$ T- h# l
& H. C0 Y/ V4 b, U G9 ^' W% U第7章 开发美团网首页/ ?8 ^, M5 O' R+ G+ e: B3 y
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。0 D& A6 k. M. h( ^
7-1 需求分析 试看
, y5 v5 @$ _& u% i7 A7-2 首页Header开发-城市定位服务设计
: g$ Z% E4 {$ }, |6 B' y; n6 i7-3 首页Header开发-头部引导导航设计* d2 [3 H& x! Z" R m. V2 p
7-4 首页Header开发-搜索界面设计4 m% M9 i- B4 o x I
7-5 Bug修复7 W) q! a; }$ z) z( I$ I/ k
7-6 首页搜索" G, X6 g. V3 K' e6 P+ t
7-7 首页菜单（1）
( V% c/ {3 s, Y9 }- a7-8 首页菜单（2）1 R" R$ s8 a+ @4 q; d( ^0 p) a9 n
7-9 章节小结$ |# w5 F! p/ p4 p- D- C3 `+ L% m* s
7-10 Footer补充
% L7 P) j0 p) [$ K, Q
0 n! K8 F4 _9 {" u* |1 i第8章 开发美团网首页-登录注册
& g, R% G0 a+ D从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全( I6 F; B" o" u( ]
8-1 注册（1）4 V1 W# n9 h) ^
8-2 注册（2）; z( ^" L( ^7 {9 |( W
8-3 注册（3）
1 ^5 g/ o: I0 K4 ^' J1 E6 D- S8-4 注册（4）2 x2 d, |! j/ O. I
8-5 注册（5）
0 Q" N8 j+ g5 Y/ n: F8-6 注册（6）
0 _3 \' v0 h4 I% S* G) r8-7 注册（7）3 C- f8 r2 ^5 |& H
8-8 注册&登录（1）
9 e; Z# ? h# C; S; [5 W0 v8-9 注册&登录（2）6 W: E$ g3 s1 @) s! N
) u! B5 S# B; ]/ p$ `' n: d第9章 开发美团网首页-Search搜索. O. t: v1 r* z( z1 C& s$ N
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
( O( U9 q& _* i% B& I9-1 城市服务+ S' j" U* u% ], P* c6 V* g
9-2 菜单数据! g2 L' Q3 H+ {' P/ y# I
9-3 Geo接口实现
' z# C J4 @" k; w4 M9-4 Search接口实现（1）: Q0 P2 c* Y' U0 p* p6 ] R, c
9-5 Search接口实现（2）* z, f* X1 o4 w. x- h/ u
- U# r: D( }. v/ m6 D% V3 f2 N第10章 切换城市页
8 o0 x0 s9 j3 h8 Q切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
+ A2 l& v+ o T5 N" s# N10-1 切换城市（1）
6 \9 }1 Z: D4 q5 s10-2 切换城市（2）5 }! F4 ^1 N! F! C0 t; S3 A
10-3 切换城市（3）
3 m; L8 c, U, T3 f5 S# H
6 _) d( n: A# A第11章 美团网产品列表页
7 d) `# k0 u: o, x3 }2 n点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
4 y6 _" c1 g; K) \$ L11-1 页面设计（1）
! U D$ m: c# k1 P; k! a11-2 页面设计（2）
7 q% ~# R8 n% `; {1 |( b11-3 地图组件开发
, `$ L: \ s) U# W11-4 入口文件编写（1）& K1 B6 q* l+ T& W$ i9 ^
11-5 入口文件编写（2）
; F4 a4 c$ b7 P" w; A! L: v11-6 页面调试# Z) C+ g. L E4 @* j I; C& G
0 V+ L! @6 v: w) c4 o1 y& b
第12章 美团网产品详情页开发
8 |* H% x4 _3 U产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
! i7 v( N- v0 A+ C$ B/ ^. M; y12-1 需求分析 试看7 `- Z! N0 I2 w, J* P8 z- @0 v
12-2 静态模板+ v1 r' g; ^8 |7 @/ V: V* ?- e
12-3 产品详情页入口-静态文件
1 m, x# H7 P& f Y) l12-4 产品详情页-接口
& ?- f3 g6 | T, Q+ k% ~$ z8 U
( k2 q( L ~$ r( Z, ?第13章 购物车开发
+ _/ k. ^/ S9 M3 X7 T5 `: k2 Z购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定. j* X( \$ @# ~9 c6 C& w
13-1 购物车&订单-需求分析$ b3 q- a( U! i( m5 Y4 x5 D2 O
13-2 购物车&订单-页面创建! ?7 A+ I% r9 _$ h4 A: l$ Z9 D
13-3 购物车接口实现
7 ^+ t& O4 m' i' Q& j, f8 f) {13-4 购物车调试: C, ?8 w# C$ e4 W' s9 k2 A
. t' ~% S$ T; q' r3 {3 u* D
第14章 订单页开发! {2 \3 u% y: C( D6 q8 f
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。( S+ t5 c' w+ l/ T" z
14-1 订单页面
* f8 S( X# ` h( n14-2 订单接口3 B: a% B" R1 M$ `- i
14-3 订单调试- N; O( L; ]! ]/ v9 P( M8 L
- \! Y2 V) ?) V9 |3 q第15章 课程总结( Q( V4 ^2 P1 J! a1 x
对课程整体进行回顾与总结
1 O; v: `3 K5 j- T2 J* i) `15-1 课程总结' `$ N$ s# {- j! {* z- {! Z0 m
" k$ q( ~; ]5 w. ]5 Y- ]3 {
【下载地址】
1 Z- V* R+ H- a% f0 ?* F0 c; o- ?+ I) ~" W
% u2 e* ~! z7 ~, `2 H w# m2 j- W* v; F/ `
|
|
[复制链接]
a
