4 l. Z+ w7 Q' F! Y. D
+ n; `! d' {+ a; c# Y @2 @9 G0 Y
1 S0 x5 \/ S* U8 F" B7 `/ Y8 M【课程简介】) H" q! J; m$ E$ J _
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
5 l. U+ \5 r8 T+ _* }5 o' y% q; E! ~* H
【课程目录】& X2 _; D7 Y" a1 H) L* x
第1章 课程导学* c. G, _# v1 `, p& g+ l, q8 i
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等' _ A9 f. E2 n5 \7 C& j- L
1-1 课程导学 试看0 H& K6 ?: _$ x, f- w7 S
% R+ j. f: M& ?* L- n第2章 Vue基础知识
8 C& x8 J$ i) x# n整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。3 D( Z& j. C# Y1 L8 N' q# ^" }
2-1 概述&脚手架
& r# G+ [7 {* p$ ~- h) [2-2 模板语法（1）1 O2 S! U+ S9 k% S( X) F
2-3 模板语法（2）; q! e$ p: b( Q, T3 w( a
2-4 样式与遍历
, T* S7 O5 m! i7 {. `2-5 事件' F6 d; y% {8 A* M7 f
2-6 组件（1）, [0 [$ C. {* |
2-7 组件（2）
/ c, ]: B5 u+ E3 }8 V2-8 路由基础
1 p# Z7 B0 r; r! f' C/ v2-9 Vuex基础用例（1）
R! s2 q5 s6 ~7 A2-10 Vuex基础用例（2）
% @! v* L& _9 w" {* \8 w2-11 Vuex高级用例（1）7 f8 \; `7 r( y: t
2-12 Vuex高级用例（2）
% k* Q3 C) L8 U7 P( v4 S) S) T6 L, D& P6 f$ b o
第3章 Koa2基础知识& G. u0 r+ e9 v0 Q0 \ B
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。3 D7 \9 ^- E# A1 G, i d0 Z" E
3-1 Koa-generator) |3 w0 K/ h4 K x
3-2 Koa异步async
5 k5 ^) y0 f( k- t! S- o3-3 Koa中间件, q+ f$ m; J/ p5 x4 f9 t
3-4 koa路由和cookie
! j% O* ]4 r- m6 r* L! ?- i; b' Z7 k }8 _0 D
第4章 Mongoose和Redis基础
5 ~0 B+ ~) U2 F, i( z+ k" zmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
; A5 k5 C; D1 X" x+ [' T3 z4-1 mongoose（1）4 m- t6 D$ F$ N" W/ k0 ^
4-2 mongoose（2）, Q! Z+ ? P. `( r9 \* j
4-3 Redis（1）3 o: b5 [" D. q8 ], _6 U% ~' ]
4-4 Redis（2）4 |$ |2 T: m" W: F- i
% s2 {9 E+ T# w. G! y; b' |第5章 Nuxt.js基础知识
$ T0 K {6 A0 _; M' {- o+ SNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...+ a! K2 P" w( W4 B: o
5-1 Nuxt.js基础（1）+ M/ V% _7 A. L
5-2 Nuxt.js基础（2）
+ W1 R! j4 U9 x. R5-3 Nuxt.js基础（3）
, e" `) J; r4 S7 ^" I5-4 Nuxt.js基础（4）
@$ u2 k) Z; R: J. u: M& m( W9 Y, F. a8 Q0 x" u/ h0 Y$ J' x
第6章 实战准备4 o& S, Q! P. C! h1 o+ P' Y! x- S i
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
$ T r, |" z' c% k3 v- x6-1 环境准备与项目安装9 ?( |$ V" z4 R+ e* U& l. ~
6-2 辅助工具安装与配置改装8 I/ Y; q2 U) ?* s9 ^
, c3 P6 t& \8 b7 _( l第7章 开发美团网首页
$ V1 B( h* R g1 P/ A从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。" Y9 A. ?8 H* a3 E' Z( G. \5 f1 _
7-1 需求分析 试看
; n$ s; v9 T5 o" y5 @& B2 X \7-2 首页Header开发-城市定位服务设计6 j: P8 Z4 f% H2 q' I5 @
7-3 首页Header开发-头部引导导航设计
4 [5 g. [$ A$ M5 ^. N7-4 首页Header开发-搜索界面设计
- l7 N* h( c) w; w9 b7-5 Bug修复' |8 C a. @* i) M, n @; F
7-6 首页搜索0 z+ t% _1 Q/ \6 r
7-7 首页菜单（1）
) A" F$ U, W; ]5 D7 t/ R7 q7-8 首页菜单（2）
6 Y7 z# H6 o5 X+ @# ~- X0 u7-9 章节小结
6 }/ o- ] L' N, i9 ^ X7-10 Footer补充 E# t2 o% K- Z* v6 y" I
$ T: K. K& J( ^: d第8章 开发美团网首页-登录注册
$ Q9 f$ k0 t9 W" P+ ^* d1 }2 X# m从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全" s( U% v$ p' k& `, L4 f
8-1 注册（1）
% S* ]2 k( Q3 @# I" t" U8-2 注册（2）
9 _: B: ?* `2 s/ F/ V& ^8-3 注册（3）. \1 @6 `& d( y% Z/ h
8-4 注册（4）% B8 g% w/ w9 g X8 m6 I: r8 A. L
8-5 注册（5）9 p/ z) K. |+ a1 P- g, R
8-6 注册（6）
9 t, x0 ~, {( c: p# G' X; q D0 h8-7 注册（7）
/ ^5 Q) \% j! S% @2 l( y; i8-8 注册&登录（1）
8 V6 I3 d$ N- y6 g8-9 注册&登录（2）& |. T; F2 b+ h8 ]4 \! B
7 q1 z* T4 V, S! D, o
第9章 开发美团网首页-Search搜索! N7 ~0 O/ k" l. u5 G% Q6 l
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。0 }$ w& s* }+ W
9-1 城市服务
7 _% j s5 s1 V# d7 _9-2 菜单数据
3 q8 j3 k9 g% T v( y' V# x4 z9-3 Geo接口实现4 g& L& K! Z+ d6 M; h2 h
9-4 Search接口实现（1）
( L7 I* @4 _: Y0 W; u2 Q3 l' S9-5 Search接口实现（2）, \# s. n, Z5 t; `% @
5 T, {6 H e& E( ~% {, [5 L2 T, x
第10章 切换城市页! ?# q: N- }; C' q; O5 D2 E
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。 R( L$ P! u" W, D4 u
10-1 切换城市（1）
: T1 ^, o+ v7 Y; i10-2 切换城市（2）
+ E4 y+ B E7 I8 P& a10-3 切换城市（3）
. g& q1 S) u$ Z8 O* ?2 q k
2 ~! d2 g9 b9 n: r, |7 z第11章 美团网产品列表页
6 g) p- |" @) E& v点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。& j* G* e7 Q; F- ~+ x) V: D
11-1 页面设计（1）3 v6 T c+ e- t1 v" T
11-2 页面设计（2）) d. K7 y5 ?) m. j* L
11-3 地图组件开发1 G3 Y2 x4 G r/ I
11-4 入口文件编写（1）! ^4 c% q1 Q( w( Q( Z
11-5 入口文件编写（2）: D/ V( }1 U( j. n8 _
11-6 页面调试
! H! b" ?; c$ A
0 [6 B3 S( e7 Z) H1 Q7 g第12章 美团网产品详情页开发
4 _! [" e/ P% [2 `产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。. V/ K$ a, N2 O. G, C n
12-1 需求分析 试看, L2 q! S4 L0 y
12-2 静态模板2 [/ f8 T" B3 k, C) g3 J
12-3 产品详情页入口-静态文件
& H& K( c$ b: I12-4 产品详情页-接口! }8 W! _1 q$ v, O
( G1 r3 U9 E$ M* u# W第13章 购物车开发& Y- }* [4 `: e( E& U6 j' I! {
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定1 i& P k/ r) }# r
13-1 购物车&订单-需求分析& Y. B0 g! Q$ |- B
13-2 购物车&订单-页面创建. a7 i* V% e7 O: P4 E: s
13-3 购物车接口实现
9 d' _! T6 c* A+ O9 x# S13-4 购物车调试
! N7 b# J0 k" w$ n& `& [: L; \ c
! A& w, u* [2 d) Z" j第14章 订单页开发+ ]7 U1 T4 p& I# K2 K9 w( L
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。9 _' p1 L/ O8 g$ V. W
14-1 订单页面: p$ N* j5 T, H8 M* b
14-2 订单接口; u$ k% U1 P! E; h7 R
14-3 订单调试" w5 \1 B3 S- F- f B) b% s
* S0 l: `% q; C& K9 E1 @1 o- I4 W
第15章 课程总结0 m& z) i4 v: @$ y$ O3 O! _* M
对课程整体进行回顾与总结
5 l3 R* E+ K. g) L& Y" l15-1 课程总结
' i4 q- W) C1 E2 [5 {% S7 u
# h/ s( U4 W: s; j. x* N! y& V【下载地址】5 D# G* S% D4 W, Y
8 Y- s3 X; I0 ~. l- L; h6 [. ]9 S+ o
: \& y8 q2 |* b( l |
|
[复制链接]
a
