! O& Y$ ^5 X# |, ^9 Y2 f
! s# I) l9 k7 f4 i' N
) M' v- m- A. |) P" w4 V& ~1 d
【课程简介】+ \& r, b- ]: B! i
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
; d2 z% ~8 ]4 `$ j% v1 }# T* ~. D# d8 U W6 X) l* P4 i/ P
【课程目录】
7 b% Z B; e6 e1 ~第1章 课程导学1 O" { P, O/ X( i8 R
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
# d( b! `- ^2 g$ ]- R, K6 E' t1 |# p1-1 课程导学 试看
X: c8 F3 H* d- O6 g" T# k+ H
第2章 Vue基础知识9 `( G" `2 n" h8 e- J
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。4 ?8 S% Q0 x. O, |; |5 Q2 R2 }/ z
2-1 概述&脚手架- a0 V& s1 [2 } f" F+ A: ?3 r. C8 m
2-2 模板语法（1）
6 @+ ?# i( @3 N1 s2-3 模板语法（2）6 }2 a' C) h& u' F. k7 m$ N
2-4 样式与遍历
$ _) m2 {- R& g, }7 o3 `! ^2-5 事件8 [- _$ H* f* L6 L& ]: X) O
2-6 组件（1）
1 ?# O( k# q, L% f; Z" [2-7 组件（2）
; u( X! \- v3 p# |( h2-8 路由基础 H4 S) P: \( o6 ]
2-9 Vuex基础用例（1）
, t% R9 Z \( F" Z$ |2-10 Vuex基础用例（2）' m& V+ f7 z# z3 k# Y6 S, k
2-11 Vuex高级用例（1）2 ?2 k5 L& J5 \5 b4 u$ P: Q
2-12 Vuex高级用例（2）
" s9 F# ~- p3 R& {+ o0 R
+ @ [& f9 d' P( o第3章 Koa2基础知识# L! A7 j4 O" ~4 L2 w
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
, m6 F6 Z, S8 m6 |3-1 Koa-generator$ q. k4 f$ j2 U5 Y; Y+ U
3-2 Koa异步async
9 \7 i& Y4 h3 d) w: ?3-3 Koa中间件, I& ^! R$ T! z A1 \. `( o
3-4 koa路由和cookie
5 z$ T; Y$ ^5 y( r
; Y) _ J* a# ]# V7 [0 L第4章 Mongoose和Redis基础/ {+ G- n: [: W
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
# s# p. Q% f; J4-1 mongoose（1）$ j+ D, y1 J( k/ l! O. u2 N* B2 r _
4-2 mongoose（2）1 w, t$ g2 P2 v
4-3 Redis（1）
. ?2 j8 F& {: h4-4 Redis（2）
& z, r; I* p4 i+ V) W$ i( ], [. L4 S$ y! ]7 x( Y- ^
第5章 Nuxt.js基础知识7 V7 T( D5 w6 P$ @
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
' y4 B3 ?# d% R' N8 ^- z) A+ Y5-1 Nuxt.js基础（1）
: B8 m6 |( O% \' w. k% y9 p5-2 Nuxt.js基础（2）1 V6 q+ O. F; Y, \0 R
5-3 Nuxt.js基础（3）
; u. k; |8 T) O% x/ l2 G5-4 Nuxt.js基础（4）+ S. w% Y, B d5 ?
8 K& s5 ~2 ]; E4 D& O% X* z第6章 实战准备/ X- a B/ o& W) Z
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。+ L* K- ]1 \6 r) H9 W8 @) T
6-1 环境准备与项目安装
) W2 z4 i2 N+ F1 o' h6-2 辅助工具安装与配置改装
- S0 q+ H4 c+ G& s) U$ o. b& ]! y: Y- I+ o/ ?* O1 i' q
第7章 开发美团网首页
4 L9 h# k$ P" ?" [# ?从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。7 C) l! m: q8 m, R
7-1 需求分析 试看
6 n8 h2 W4 R" G7-2 首页Header开发-城市定位服务设计
* I3 h0 z! V* V7-3 首页Header开发-头部引导导航设计
! O0 y% v# n1 v" X: A3 U7-4 首页Header开发-搜索界面设计# {' }5 Q3 k7 u/ v2 ]5 B: r2 _
7-5 Bug修复7 v9 o. Q0 \6 G/ Z
7-6 首页搜索
) |! x, n2 Z; O3 u7-7 首页菜单（1）
& P* _. w% M. S1 K7-8 首页菜单（2）
% {+ ^4 f+ a8 B7-9 章节小结 J1 }% i4 [$ A# g) ?
7-10 Footer补充
/ K" L# ]+ T; S) D) b% ^, \3 D2 h0 z$ U1 }' T3 B& u) ~6 C5 H
第8章 开发美团网首页-登录注册0 d6 n' B* A# K0 k
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
0 e x {* H( ]2 p) Q3 \8-1 注册（1）
% I7 f- w( V/ u' ^3 H$ R3 \" i# r% Z8-2 注册（2）0 z5 C9 |. F! s8 u X( w
8-3 注册（3）
# a+ D# C6 }1 E/ F4 J7 o8-4 注册（4）' p6 u% v: J6 W: t, j
8-5 注册（5）( P( t }# f1 L; p
8-6 注册（6）
) y |3 Y) v0 _8-7 注册（7）
1 H' f" k. n% F1 O" ^( f8-8 注册&登录（1）
* o1 ~& l) g. R2 r1 I6 w' ~# ^8-9 注册&登录（2）; @; h( P5 j5 S B. |/ F
! V6 V4 B @: @8 `: ?0 v6 m% |7 k! i: ]第9章 开发美团网首页-Search搜索
) l2 C- E, H4 f" ?只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。# e8 T. J2 \ u7 e6 t
9-1 城市服务
$ c; @) F, K+ L& t; {9-2 菜单数据5 y9 B1 j0 n) W0 S
9-3 Geo接口实现
) n: G2 i9 [) D, V+ F) u9-4 Search接口实现（1）
) f5 P- N1 s6 j4 N2 @# a' x9-5 Search接口实现（2）5 C0 g9 R4 O8 P h( D3 A6 {0 G
4 h/ M( q4 u* J8 |
第10章 切换城市页
6 e+ q( v$ u$ a; a4 J切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。3 w' \ }. w. B$ n/ Y
10-1 切换城市（1）# G, l+ O7 R/ f7 L W
10-2 切换城市（2）* x( S3 k# f( @& f/ k! {3 D
10-3 切换城市（3）
/ r% ?$ t( }* A4 y9 _, ?3 c
* ~) y0 Y0 g) }2 J% D6 P, I第11章 美团网产品列表页7 Z) i# K! q% F+ b9 L% J
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
4 Y3 w6 b0 O3 }% W" |5 R11-1 页面设计（1）
6 y; R! y. [) g3 O6 g11-2 页面设计（2）% {, |7 O! B2 @8 Y H7 |/ ^
11-3 地图组件开发
: q# r% w5 M5 Y1 V" c2 T% G5 u11-4 入口文件编写（1）
$ N4 j9 t- B; N11-5 入口文件编写（2）
3 D' ~/ y1 G# X3 A11-6 页面调试2 f: F/ ~# d+ X+ B% X) J! ~
2 o1 k# r( [! ]3 y; ]( J
第12章 美团网产品详情页开发
) L! n- f( m3 K8 j% k产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
J3 a/ T: g& K" b) E4 |. w3 Q12-1 需求分析 试看2 I: C/ F+ U0 C. d" y5 L
12-2 静态模板
4 a. ]( |$ P* H* S12-3 产品详情页入口-静态文件
+ P0 [5 q8 r, Q) Z9 Q12-4 产品详情页-接口
8 ~ P6 E& v, t2 Y! f6 ^; T
. d3 V9 Y6 e1 a \/ {第13章 购物车开发: [6 Y4 `. W9 |! @$ Q
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
, X) c2 B( z! ~" z' C; u13-1 购物车&订单-需求分析
4 _7 t% ]) b# ^4 Q0 H13-2 购物车&订单-页面创建- X3 g) l' ^, N+ m+ U
13-3 购物车接口实现
Z$ F! U% Q! {2 q! e8 p" N# q13-4 购物车调试: E1 @& `4 H( }4 Z/ \( ]# i5 @
: u6 A- v6 ]+ m7 O1 [1 R( @第14章 订单页开发1 j9 P; u; t2 a3 e0 I/ G& U0 ?$ A# E
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
- ~1 n+ }- m d9 d6 \4 z& C14-1 订单页面
7 n7 r1 [( }2 [4 P; N9 q! Q0 C14-2 订单接口
- _, X8 g1 N( h V' e" _14-3 订单调试6 C; |2 G+ `8 u4 c% ?0 n4 u
+ i, q3 R4 Y% A' W. y. {第15章 课程总结2 L& a: x% c, q5 m) h
对课程整体进行回顾与总结! N5 b5 {! M8 m I
15-1 课程总结
) ?. i- U0 d" k$ ^0 M& K# V4 R8 L/ ~5 |' N/ `
【下载地址】& k6 H* t3 ]' P
- N& E9 p& x2 k" O, G7 W$ ^3 |! Y1 P" R! z; m+ y
" T( U8 G1 C2 o) N* O |
|
[复制链接]
a
