3 f2 x( t1 g: Y7 ~& }
6 R: o( S2 q! h- Q- t- U8 k
! ?" R2 X6 i8 z4 |; S5 A, v
【课程简介】
+ c M! z8 r0 l3 g& U. n这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
1 e+ f/ U. U- \" M, w) P1 X/ H2 Z6 ^& S
8 a9 I2 c2 G/ o9 z" r9 q【课程目录】- q" m1 d! _6 E! x4 d7 @ t
第1章 课程导学- I! ]. T* `- c+ n3 G
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
* N6 k; O8 a$ i# Q% v1-1 课程导学 试看2 U) p4 }. }" H3 m
1 w9 h1 q. w9 x5 ~2 e
第2章 Vue基础知识2 P; P4 S5 `5 W! ^. z0 \5 V
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。1 h! U9 v* p8 [# n$ }
2-1 概述&脚手架
9 ], R' f( \' c: Z/ @/ z2-2 模板语法（1）
; p# }- S5 u+ x4 p; O; k3 |2-3 模板语法（2）; M$ F; _7 ~3 D8 V! v
2-4 样式与遍历) Y" `2 W Z, m' x8 ~
2-5 事件( O' K% c6 v9 E( i3 Z. n
2-6 组件（1）3 T" T5 C |3 B& c- t! @
2-7 组件（2）2 B/ H# g6 b- f2 c5 Z4 ]
2-8 路由基础, D; D% Z! A8 L* i+ ^
2-9 Vuex基础用例（1）9 g6 ~; z( h- M4 P, b, j, G& t- s
2-10 Vuex基础用例（2）
+ `# g1 {* R. O. `6 H$ |# M2-11 Vuex高级用例（1）3 a* N, h7 i, ^% A' b4 `! T& [
2-12 Vuex高级用例（2）$ B6 n6 |8 W- n- }
" V1 C3 J+ e* K5 e第3章 Koa2基础知识, ]2 M6 i) b6 s% q7 s( e
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。7 s$ e- _6 f5 H+ D
3-1 Koa-generator
4 E `1 J+ _# S8 |6 \! J3-2 Koa异步async
+ q! M1 `9 w) e; o, n/ g3-3 Koa中间件
. G5 Y2 P3 s. u, Z$ U6 p3-4 koa路由和cookie: s. z3 i2 L( s" z0 b
; m2 \* z3 J: Y, W1 r: I/ H( ?第4章 Mongoose和Redis基础
& x5 `9 p9 V& g- N: wmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...8 w8 y9 Z+ s% ]' a& J
4-1 mongoose（1）+ {& N4 |3 {" y$ f. X$ S
4-2 mongoose（2）7 N; m0 c5 G; J0 F
4-3 Redis（1）) U: e8 ^2 z7 V' D: o' v0 ]4 c
4-4 Redis（2）- ?# L( H6 t3 L2 f1 h
8 t3 H' p: q; e% S7 Z
第5章 Nuxt.js基础知识
, I0 f) C( d, |5 S/ A, Y( KNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
% T" f2 a; q1 O; J# _5-1 Nuxt.js基础（1）
# Q( f/ A: e. L) r5-2 Nuxt.js基础（2）
1 d" T M' E; v5-3 Nuxt.js基础（3）
" U/ R$ P! d* I8 g5-4 Nuxt.js基础（4）
/ L% N+ L! V6 i* m: \4 } s/ W+ ^" {, T9 n
第6章 实战准备
2 S- G; m5 d, D工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。# u' L V% J4 Z& |, B9 s( o
6-1 环境准备与项目安装: \8 j$ R' D: x+ _& [
6-2 辅助工具安装与配置改装* F2 Y7 v. U5 }1 @1 ?, o, {
a9 \4 ]' R D: I' \1 e" r第7章 开发美团网首页8 b0 h8 E# D3 B2 y
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。& p( L' Y$ Z1 v2 M. P# x% G
7-1 需求分析 试看
. y: P0 R4 B7 U$ k( _5 D% J( V5 T+ ` ?7-2 首页Header开发-城市定位服务设计
$ h+ ^) h6 i; ~$ Z( Z" `/ T7-3 首页Header开发-头部引导导航设计
$ K# c& p) Q M- Z/ l, y$ O7-4 首页Header开发-搜索界面设计, [% \ q5 J* s" m3 e
7-5 Bug修复
" D/ Y, ?9 I0 `7 O& k! c, T7-6 首页搜索2 I g+ u4 z2 P% c
7-7 首页菜单（1）
% [/ T% n3 a. T" l# U1 }! E7-8 首页菜单（2）# ` O: s: b; T- V( `
7-9 章节小结3 h8 }/ }2 X; U( n' }
7-10 Footer补充
5 J- N% \/ r4 d9 e. V7 o
; n$ w# l* R' W: J9 G) D+ U3 u第8章 开发美团网首页-登录注册( f* @! @; s1 Z f
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全! ]9 R. x1 Z( m8 T( u
8-1 注册（1）0 a6 M/ k- B6 ^4 N
8-2 注册（2）* _, e! \! D- y- q
8-3 注册（3）7 R7 E) C. _% C0 J, |! ~. [
8-4 注册（4）
+ b4 S( M5 h9 y( ]$ U8-5 注册（5）
! c* p2 r8 N4 D0 R7 _1 w8-6 注册（6）) F* J) _) D, o9 L, D! t
8-7 注册（7）# y: i, m, V' ]- U
8-8 注册&登录（1）4 {$ H! H; z4 l* W
8-9 注册&登录（2）
1 ^4 F" N2 G p4 K P Z6 {, I" s# V) D0 p; z- O
第9章 开发美团网首页-Search搜索
; G8 R! k! z2 H9 k( E$ n只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。* r- H0 S) }7 H2 N" S. G! N
9-1 城市服务0 j0 N5 k+ |3 ]5 `, |" u
9-2 菜单数据6 J$ G9 |+ e& f. f$ q- V1 F
9-3 Geo接口实现
5 U& v; k% F* S8 t& b9-4 Search接口实现（1）
- f8 J' c) U9 O' ^/ x& D9-5 Search接口实现（2）# |: P- R0 C/ E+ _% Q( @5 v, R
( ?6 ?" q9 E1 h% ?* y第10章 切换城市页 J! D+ g* q; Z/ g% `
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。. A0 r' ~1 }+ B. o/ l
10-1 切换城市（1）
4 g j3 W A; f0 G! Y* \7 S10-2 切换城市（2）
" `+ r' o4 O3 ]0 a10-3 切换城市（3）
9 d, w" C7 Q- a( {" \+ L5 Q+ J9 B
% T" S( I0 F) [7 y第11章 美团网产品列表页5 F( ]$ U: j, {" S% n. _
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
* o( f o) Q9 _ v0 n11-1 页面设计（1）
/ R3 {7 s, g# L) g$ M( P$ g! I6 d11-2 页面设计（2）
. J6 ]* ?: @9 \5 B11-3 地图组件开发
4 T7 F& K; F5 G5 Y' @5 d: w* V11-4 入口文件编写（1）& T# c3 a5 a" o+ f
11-5 入口文件编写（2）
; x. L* l: b+ ]2 k3 n" a3 \2 F11-6 页面调试
! f# k; l- p( k5 f
% ?$ p$ k* b) N/ `第12章 美团网产品详情页开发. G$ V1 Y" q- j6 N: f
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
9 D6 S/ {5 t. }1 F: G8 I2 X! K12-1 需求分析 试看
) b8 P3 D% i9 j. p6 H' [12-2 静态模板
% R0 G7 G) n b# ^/ A- A d" g12-3 产品详情页入口-静态文件8 o1 {- s* T, P/ S: [
12-4 产品详情页-接口. ]$ M6 w' f6 d; S9 b1 @( j
+ I. ~0 g- W$ {, d( x: T6 o第13章 购物车开发# T. W3 r; i0 R' [; S1 V2 ~
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定. I' N1 y- N8 _) }4 ^
13-1 购物车&订单-需求分析9 Y7 F+ w2 [; V" Z" {
13-2 购物车&订单-页面创建, I' C6 |! w% \8 E
13-3 购物车接口实现
2 S; |5 _% H3 v" c2 i, h13-4 购物车调试! ]5 M1 \9 J) N: s! p. J
" h$ F ?) C: c( C% F
第14章 订单页开发
$ A, D. W' M5 _) q2 z订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。, @+ m* r% A7 b W& z* W
14-1 订单页面" G) r, V8 o1 [. i
14-2 订单接口
# e& U' f6 `" [' s, Q, E6 D8 J14-3 订单调试
J" C! I) N9 z6 a. s* v! ]' |9 n. ~) ?. q; S+ h) D
第15章 课程总结
$ t) X" L* b3 M& S( ~对课程整体进行回顾与总结
% t0 P& a, A: m. q4 C% d; d% O15-1 课程总结
: r' w7 O0 f! G: |9 x
5 k i7 N. A5 A8 T9 x【下载地址】# h: Q% W3 \) [8 l( p
- D. W& F: s( \: ]( i! [) w# P1 Y, a2 D. S5 I5 {
% B# j' O# l) v$ V
|
|
[复制链接]
a
