$ [( k2 Y* K. V8 u; i' B- y
# r, @) z7 l. t/ C
0 e m# Q5 M$ y0 H4 i* D
【课程简介】/ O0 J; B( z, t; j {
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。4 V% k `* S, Y; C7 Q
7 u3 j& V4 U& j6 Z6 w5 _- r
【课程目录】# R! ?% E {& u
第1章 课程导学8 J7 d$ ?9 {, @2 G9 I. k
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等- B4 o5 ^/ l6 X
1-1 课程导学 试看
1 i! z; a0 F3 X2 G, W
- `7 l. _! T. ]8 D第2章 Vue基础知识
5 I6 H+ ~. |' N3 `整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
$ z: ?. J H" G% f2-1 概述&脚手架6 { p( _: b, O6 U3 f3 v) S
2-2 模板语法（1）
$ ^7 R9 e' g) }' f+ h( Q9 a2-3 模板语法（2）
; u; b% i0 a+ i& p0 _. {+ ]2-4 样式与遍历9 M+ o4 j: w4 v. m4 J, O
2-5 事件+ Q" L/ A$ h8 D
2-6 组件（1）4 }; r; O2 [* A" z3 V5 y# ^, Q+ [
2-7 组件（2）
' x6 w: {5 V5 A) p. ?2-8 路由基础
8 l$ w1 x5 ] A1 d8 X2-9 Vuex基础用例（1）
$ V) I i$ t- }, p- e3 H2-10 Vuex基础用例（2）, t# Q3 ~& ~' s; b# `5 K1 ?* I7 |" q
2-11 Vuex高级用例（1）
2 M" d5 T- o3 V- a; t2-12 Vuex高级用例（2）1 C& ^5 H& I, @: d0 r+ @; M+ b: G
/ s8 C! s% W7 B S. ~! F! X第3章 Koa2基础知识
9 w( u |; R- v: K! B: m+ c0 LNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。: d5 C: Z# m2 z1 P# S
3-1 Koa-generator
/ r" o5 z" U. x2 p4 B, i; ~3 i3-2 Koa异步async
2 D7 ]/ y: k3 q" f w0 x ^& o. x5 X3-3 Koa中间件
0 h* @, {1 i+ S7 t; X3-4 koa路由和cookie
+ ~* l5 J8 I2 C" e" N$ q! @! W7 Q2 c
第4章 Mongoose和Redis基础
& T b' N0 ?+ D9 L7 _5 s; ~mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
! ~2 H( Z( c3 _+ R5 h4-1 mongoose（1）8 W7 m3 S! m! u% k# A( i
4-2 mongoose（2）
* J Z1 U+ v* r4-3 Redis（1）5 n0 o+ z4 p6 i5 |0 P. f* y
4-4 Redis（2）
/ ]7 i4 \7 d+ z7 o: I
2 A1 q+ c; i r" T5 V4 i第5章 Nuxt.js基础知识
5 \* J$ p& x* Q3 }3 KNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...6 S" G. R. R8 m. p$ c5 ? H
5-1 Nuxt.js基础（1）
R% f6 B) i! `; Y5-2 Nuxt.js基础（2）
n7 N: O0 b5 X+ D) C( P" @, t5-3 Nuxt.js基础（3）
7 E) J7 L7 g- C3 S W5 A( q; k" W5-4 Nuxt.js基础（4）" o$ k$ l* ~6 n2 S2 u/ ^, l
, a2 x0 j7 B1 o$ [9 e第6章 实战准备
* t, b- z) w: T, q$ D. s工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
& n8 U6 f6 Z m) w6 l0 i, `6-1 环境准备与项目安装
: k( ?" s% v9 e; o( L) R! b6-2 辅助工具安装与配置改装7 }4 }( R, d8 c g- ?& t
* T! |/ C( j6 R6 i* h4 y- k2 k第7章 开发美团网首页
/ L$ ~; h b) c( M l3 y从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
% l6 Z+ Q6 t5 f7 l1 G3 D7-1 需求分析 试看 l {/ m: R3 x
7-2 首页Header开发-城市定位服务设计
8 G* f$ K$ [, ^7-3 首页Header开发-头部引导导航设计: Q9 f" R7 u# W2 O
7-4 首页Header开发-搜索界面设计
: U+ @/ I2 U9 Z: p; O4 m/ K7-5 Bug修复' I) E9 S; T( V! N
7-6 首页搜索
* v: f, i* P9 M4 {. o. N; _7-7 首页菜单（1）2 r1 l3 U5 _8 P4 c5 U( y
7-8 首页菜单（2）
% X3 _2 K" T/ t7-9 章节小结
4 m1 ~/ z! i5 ?+ m# Q' `7-10 Footer补充
) A! c7 l6 X" Q$ y0 N9 H$ m
7 K0 J& B& x+ R, \2 z. b- @# E. e) J第8章 开发美团网首页-登录注册
, J2 V" I1 F. P1 |/ |/ X从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
, s6 i/ B( s7 N* d0 u# m- L6 p8-1 注册（1）
% v2 \4 ^2 ]7 i5 Y* @/ K8-2 注册（2）4 q; y4 r% v ]7 z$ [; k
8-3 注册（3）
# K* E0 E f9 _4 N/ @1 t6 A, A, P2 ~ P8-4 注册（4）! @1 V4 [* f; O0 o2 V
8-5 注册（5）- V; B; }& e, u
8-6 注册（6）
# w; S- o/ Y8 E8-7 注册（7）4 w' ], L3 M$ [ m/ B
8-8 注册&登录（1）
) z" U& R7 w8 s8 |# s' h* m8-9 注册&登录（2）
5 N& W9 j1 x# K$ U) N" e3 R S5 p( o" c, y0 C# ~( z
第9章 开发美团网首页-Search搜索. o8 i: }4 @1 a2 j4 d- n, m
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。" e, E3 g4 i8 G0 e, ~( |
9-1 城市服务
8 D9 u: E/ M& {, x* n9-2 菜单数据
+ [% z6 [$ b4 @, d1 a* k' o6 s8 a9-3 Geo接口实现/ A* P* A& r K e, o3 ]
9-4 Search接口实现（1）! o0 V2 @+ X7 R) d7 s; ~( O
9-5 Search接口实现（2）
. e6 o# @! k4 o1 r5 G' a5 e+ a# S1 N* k& Y
第10章 切换城市页
6 G9 `; P! X/ ^: G切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。* a+ c5 s( q/ ^! P4 p: b2 e- t
10-1 切换城市（1）
2 O8 K; J* s, `, C! `2 x10-2 切换城市（2）5 P+ _! e* K. g2 N6 W
10-3 切换城市（3）( E' X0 L& J* b: L
+ Q9 H" [, h6 A
第11章 美团网产品列表页0 h/ f: S) u ~8 _! s
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
3 V5 Q( M+ G2 ? P% z6 o11-1 页面设计（1）
- ^! o+ B( p* e, E. j11-2 页面设计（2）# l& c/ H$ ?' Q- S F. X
11-3 地图组件开发' i) F& n3 I7 f, [
11-4 入口文件编写（1）) l2 L9 @8 z6 m5 C2 t# @) _ C
11-5 入口文件编写（2）
( E8 L' P# }8 O; y0 f11-6 页面调试* O4 ^0 }) p1 r/ X* K h r
+ Z9 s# g' S# Z) z. P' P第12章 美团网产品详情页开发
. y8 m) R$ d9 Z6 ? ~$ v8 s7 J产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
, @$ Y0 c+ D* |# C: R! D+ S: Y( U4 B12-1 需求分析 试看
, Z3 p" Y' o- i4 T( j3 E2 E12-2 静态模板
- j3 ^4 c- v9 _12-3 产品详情页入口-静态文件2 ?' T B* c) Q( S/ S- a- x
12-4 产品详情页-接口
a: w, {% N+ k4 z# t) [1 I$ y+ u' ?( w4 p0 ^; R" S5 y3 Z3 T
第13章 购物车开发 N2 U$ D9 l# U) f
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定& J* c9 \) ?6 A! w
13-1 购物车&订单-需求分析% P* F- E6 W+ O5 g& W1 C
13-2 购物车&订单-页面创建
$ n: X, n* _ E& g13-3 购物车接口实现
+ b5 ]6 n4 S& ]* f13-4 购物车调试+ ?3 k$ \1 m9 r3 G2 W
* [' f. O' \+ G- N9 e5 O第14章 订单页开发* k( Q! Q, W- h% E, i6 |( [2 {
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
2 v! X3 P1 U$ y; ~14-1 订单页面
( P% r% {7 o4 }5 U" A1 s14-2 订单接口
. y5 i+ {+ d' w* w C$ |14-3 订单调试
$ ~% ]9 l( o' j$ q5 H" m# A5 [+ {5 Q* p" `* x, u a3 B( G
第15章 课程总结; O8 f( A2 D. g; z
对课程整体进行回顾与总结
?0 q0 g7 L) T: Y b; z15-1 课程总结4 d6 p+ q8 g2 {" \) O: s \' M
& z% A" T( l3 {6 W: w
【下载地址】
! P. H/ G+ M0 ?9 J, P7 F, b( Q
% m$ r& O d9 s$ }5 [; Y* d2 e* L5 t$ a0 c
# L- n! G* _% i |
|
[复制链接]
a
