7 ?' p: y- T: o+ r1 b, [4 I4 e( F) v4 ^
# O% [6 k& _( U$ ? u【课程简介】
5 D/ m% V( X j5 B0 I这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。5 q' i3 N5 l6 \4 E% ]
' z, Z# v; x' u( b( A' A* ?
【课程目录】" J1 N. F; f1 n
第1章 课程导学0 \% G* w8 |! [. i% Y# T, q' x" q
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
' r* ~: u" g u1 l6 [: i8 H) i1-1 课程导学 试看4 `6 U! l O/ _+ ]% _$ M$ B# L, j
& [, I" u! I) p6 r第2章 Vue基础知识; }3 j: K x7 O; n' a# \* V
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。3 g0 }( f; G1 b# s4 f* {6 r
2-1 概述&脚手架/ K; g/ w2 R# F! x. P: p- ]- P
2-2 模板语法（1）* W6 x; ^% Y9 v9 l M4 e6 f
2-3 模板语法（2）
/ c$ k+ t0 O: d" F- o O) m+ ^2-4 样式与遍历
6 H# T7 n1 `. g: N" n7 _- J6 f5 S2-5 事件
7 ]& V8 B- p. G8 M2-6 组件（1）" P+ r* g9 {0 ~2 T# o
2-7 组件（2）: V% e$ d: u* c8 P0 e5 F0 l
2-8 路由基础
: F: p5 ~* l* r0 H$ E2-9 Vuex基础用例（1）; N' m9 ?: `: C5 s# ~7 P
2-10 Vuex基础用例（2）2 ^+ q1 O& |! _' r2 l% N
2-11 Vuex高级用例（1）$ ]4 W* M9 z, p: e, ^( v% `6 G- E
2-12 Vuex高级用例（2）
! K( l8 e+ f! z- X
0 y; W2 _1 [) N6 y r+ p% W: {第3章 Koa2基础知识
1 M$ b5 d1 M7 s$ gNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
- `3 ]+ [9 e: F" \# d# @# h" B2 q( _ ^3-1 Koa-generator
. Y& O* g+ ~! F, Z1 ]! U3-2 Koa异步async1 {( v3 U, I* j: v0 ^5 o. \) ^
3-3 Koa中间件
5 {: _; S H' |; S3-4 koa路由和cookie% s! F& J6 e* [6 D! w3 H7 B+ l) F
8 R% U& {, o) z9 Q+ ~" k/ P0 A
第4章 Mongoose和Redis基础1 D2 n( l. `# R: ~( `6 U$ n
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
9 f+ v" C/ B( Q' ]' H& ]4-1 mongoose（1）
0 M* [( F7 K; b) O' I5 ]7 _4 g4-2 mongoose（2）
$ d. K" [( R" \7 p# T) q4-3 Redis（1）4 z) \: f d2 e" a3 A4 `
4-4 Redis（2）
: Z1 { M. l7 k$ ^) v0 ?) H) W7 _2 F: J! v
第5章 Nuxt.js基础知识9 w$ J6 u- Z# ?
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
& _% V8 j+ l( ]( O6 l: L7 x5-1 Nuxt.js基础（1）0 W6 J8 J$ [7 u. y. P/ K
5-2 Nuxt.js基础（2）) e+ J% c" v$ w: p) A
5-3 Nuxt.js基础（3）+ x* x. y7 G/ t* R4 J
5-4 Nuxt.js基础（4）
6 D& p l3 p& g) a" q( u5 x0 f1 ?4 _
第6章 实战准备
S9 Z1 x, L3 M/ L6 G3 h: U$ y, c工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。- [. @3 h0 q3 a, z
6-1 环境准备与项目安装* O6 _+ Q$ A3 V% h2 |
6-2 辅助工具安装与配置改装
4 ]' U' H1 n S# y! F
6 w+ q; D- S! M7 w1 Z8 x5 x6 b% O4 \第7章 开发美团网首页/ R6 ^, ]" T" F' ~/ G
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
6 ^8 v/ g4 ^7 X% I8 D2 L/ O& o) e. S7-1 需求分析 试看
: M1 p( k, R% h6 `3 A) n6 b/ a7-2 首页Header开发-城市定位服务设计
$ K _% l$ n. c& c$ X5 p- i! j+ f7-3 首页Header开发-头部引导导航设计 p( U* d6 T9 E" f5 W# a- c1 N
7-4 首页Header开发-搜索界面设计
* Z" ]6 A2 o: y9 G, Q2 p7-5 Bug修复 v+ k, y' [2 r3 Y- R
7-6 首页搜索
6 o- A* v& l9 ?$ H' H/ n- f) f7-7 首页菜单（1）
1 Z4 C" l" _: x+ d& o$ T& }* L7 w7-8 首页菜单（2）
4 Q+ H2 e! Q8 q4 z, ]; {( c7-9 章节小结
8 U) {- y2 C- B3 t1 a7-10 Footer补充2 k7 N8 }3 P% d. W
X8 h0 U8 H4 m0 `6 Z) c第8章 开发美团网首页-登录注册, y' D/ \* s: P0 P1 m. B
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
8 n8 ~2 K% O) D4 B8-1 注册（1）' k- w5 A, E J- J: I3 H* b2 c. G
8-2 注册（2）5 A. q/ T9 q r2 Z/ V, p3 q) H
8-3 注册（3）- d1 Z) @4 d7 l# J# M( x3 j
8-4 注册（4）
9 l4 x8 _& `9 C- D( \6 M5 U" S9 n7 S8-5 注册（5）
5 p; V/ x! Z* }8-6 注册（6）) H3 |: w2 s" i( f5 X
8-7 注册（7）
) }/ u* T1 F4 d8-8 注册&登录（1）
& X# Q% t; f6 p) O/ O8-9 注册&登录（2）6 m( y3 G+ L U$ {' H% y
& f& A1 F: h% O e) y7 O
第9章 开发美团网首页-Search搜索
. N5 D9 R- n" K只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。- F0 p e1 Z2 n$ \( ?7 A7 |% w
9-1 城市服务: z' B9 \# O7 w; c
9-2 菜单数据
& ~( O* j$ i) r1 O" n9-3 Geo接口实现& s. I7 o) A' \& t* Q
9-4 Search接口实现（1）
; ]5 R- `+ x8 I5 c9-5 Search接口实现（2） i1 R+ }5 [% k4 d
; W3 `. k. s. k$ |) D第10章 切换城市页
) b6 a$ n0 Z% ~4 g) X% H. U7 v7 k. ?切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。, y; x. R9 Z% }; v+ p/ R
10-1 切换城市（1）
% u) r) D! K3 Z10-2 切换城市（2）
$ C3 s2 \3 ] \, L10-3 切换城市（3）4 M8 N$ T9 O+ \( r3 Y H
1 K+ m: F1 C; {# S& ]第11章 美团网产品列表页
3 w$ D8 S& z" p" t点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
/ i, I! i* e: L11-1 页面设计（1）7 Y, s- t/ A$ @& M# {4 A
11-2 页面设计（2）
' ] R* C& n$ Z! s) y* n% p11-3 地图组件开发
7 h! H1 h8 v5 ~4 m- z2 ?; l9 q11-4 入口文件编写（1）7 G; x( q& \9 k
11-5 入口文件编写（2）3 [- X! A" b7 B' p) H2 \% {% h
11-6 页面调试) a# b1 y- n9 u
' J9 Z' |. |8 A, n! |第12章 美团网产品详情页开发
! j6 K+ [2 A7 P& j) e: W产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。" i4 x& d9 O) P' a1 Q2 Y
12-1 需求分析 试看
2 ]- o5 v. @3 `12-2 静态模板
2 c2 @9 R. d* G! ~12-3 产品详情页入口-静态文件& P M7 ~6 L& Q2 f# Z
12-4 产品详情页-接口
( Z" n" B! {5 ^+ U- [' X/ n( s5 \, n" b) X
第13章 购物车开发
) G& S3 x" d9 e. o3 E2 B8 M, a; N8 C购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
! @* k; J, Q8 f! a0 L. W% T13-1 购物车&订单-需求分析( w4 D1 U0 d8 x* H
13-2 购物车&订单-页面创建
; A2 e) ^. ~/ r2 S# u13-3 购物车接口实现
; c( t) r# ]+ [" V5 X13-4 购物车调试
z, H/ [5 L. Z" @4 o7 W
, X; o+ p& z* ^. [' i1 T3 ^第14章 订单页开发+ j, `9 O3 k! j, ~
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
) G, Z+ ] L& Y7 Y0 W$ R4 C4 p$ o; K14-1 订单页面: X8 R0 m* T$ y9 A6 A* }
14-2 订单接口
9 Y7 l) G! D3 K- {14-3 订单调试; ?7 k3 Z K0 l. ]3 s3 m/ i; X$ R' }
. \ h# z$ T; w) a* X! L, i9 N第15章 课程总结
' D% ]7 A( v, R @ \. x对课程整体进行回顾与总结' S* P2 h) {8 M/ v! U1 N
15-1 课程总结& m! r4 o2 G# G* A/ U0 k/ e2 ?
. B! q i: L" q7 Z, h5 n- q, |& s$ v
【下载地址】
5 b; H& C6 n8 R! ]( ^/ l; j0 d2 V3 ], {- v5 M8 l
& Q- }3 q$ g' W, K
* Y) C& p4 \; m( ^! k6 q$ v, c |
|
[复制链接]
a
