" N u( l3 m8 O) K+ L1 e
" Z2 s; M% C% {9 L- f
3 ?; o- [' b; ?. J5 J【课程简介】
7 N6 P& W) `* T$ g% s7 H这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
" \# X( ?% ~5 G* E* z
- |# [% K! L6 s9 h8 L$ N! a+ m% D【课程目录】
' x; q# @" g0 A7 P) T第1章 课程导学" A7 g% [+ N2 o) c. g/ H' B; C1 r) P7 ?
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
3 C6 o8 U( l$ Q& N0 F7 O& B1-1 课程导学 试看; x% D) `# F( e# t
) R+ |/ M! K$ }& _# @, h1 H第2章 Vue基础知识: u# T. V8 I7 x7 S$ j! D |+ u
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
8 p! M! x' ]3 L9 A# I" l A2-1 概述&脚手架' M9 g8 B) J; a' e# p. X, g1 d7 L
2-2 模板语法（1）, m2 A3 Y. S5 P1 A) ^6 z1 x, n5 _2 g0 C
2-3 模板语法（2）" I m8 { p0 ^0 E Z
2-4 样式与遍历: k8 E/ {1 z7 X$ @7 l( B
2-5 事件, ~+ g5 t" _6 b" @ Y0 g; w
2-6 组件（1）1 t/ g( h6 ^/ B' v( _$ l* p+ ]: [
2-7 组件（2）$ F9 ^. d: C$ I- a# G
2-8 路由基础
3 D0 }2 ]1 ?6 |& j$ |& ^/ C2-9 Vuex基础用例（1）
0 U. q# T% O4 V `% i$ T2-10 Vuex基础用例（2）
) a1 F( a2 F) i% N$ o0 E0 B0 a/ L- v; c2-11 Vuex高级用例（1）
4 i0 D2 B; }$ K( I2-12 Vuex高级用例（2）
|& E% g _) p1 ?) V# x9 n
1 o- f1 P4 E, B1 M. G' O0 `) Q2 W第3章 Koa2基础知识
, L0 v) r: M, t! _# ~Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
; _9 f- O: E, I" v0 n0 C3-1 Koa-generator
+ Z B. A2 K4 Z3 K6 L( P9 g3-2 Koa异步async# |- a# y* S! q
3-3 Koa中间件' s B8 Z, L. d" V. ^
3-4 koa路由和cookie8 `' v$ L1 U- R
( G5 E1 g- A( c: S
第4章 Mongoose和Redis基础
, v/ r0 [- a# D7 _! Bmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。..., q2 W6 |! G/ X; R& _7 l/ D
4-1 mongoose（1）
; h) M9 Q5 O( Y2 w) f& z4 ?4-2 mongoose（2）
+ R/ Z, u# h z2 }) ]4-3 Redis（1）& b7 o) G8 L5 R7 z' |3 ~& G5 ]
4-4 Redis（2）
3 V$ ^7 w4 C8 U
7 K: V; \, b6 `: P4 x0 B第5章 Nuxt.js基础知识+ h s. u7 W& T' b3 v9 s' q8 v9 T
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...1 D- b& f2 N& o+ Z* Q/ k, x" b7 J
5-1 Nuxt.js基础（1）
0 |) a8 R' C" `$ q% j: s% H5-2 Nuxt.js基础（2）; O( n1 M8 t$ o
5-3 Nuxt.js基础（3）- U6 q0 c7 T5 q3 o, h
5-4 Nuxt.js基础（4）
2 N& T# F1 ^- }; I+ F# E
% G; M6 V4 [* E& y8 g第6章 实战准备
" \3 F* T3 {1 R6 Z& s工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
( J* C2 f) ]% g7 v3 \" O4 x6-1 环境准备与项目安装
0 B' P! P% Q0 v6-2 辅助工具安装与配置改装
& v2 `- S' h$ i5 \* X* \6 c0 y1 B' ]9 m# A& B
第7章 开发美团网首页+ C- u' E- P( v6 x, h/ Q: v7 G
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。7 M i* b. {" C6 q5 z/ u# z
7-1 需求分析 试看
- Q+ F& {: p6 R+ g8 _# s! T9 i7-2 首页Header开发-城市定位服务设计' F3 W% N6 l7 v0 w: h/ V
7-3 首页Header开发-头部引导导航设计
) f0 o: D& R4 ^- g- A6 n V1 @7-4 首页Header开发-搜索界面设计, j* m. G$ z/ w. |! _" e `0 j2 W
7-5 Bug修复9 h- r5 n: n: ~
7-6 首页搜索3 F4 y2 Y- y' f2 e
7-7 首页菜单（1）6 T- V8 H# M s- n9 u
7-8 首页菜单（2）
6 W; y0 z8 Y- y" D* R5 i5 U' {" u7-9 章节小结- E- b7 G3 r: C* a- s
7-10 Footer补充
" u d: k6 {! C( F# f
) {7 E* t6 Y% r4 o第8章 开发美团网首页-登录注册" y" i2 U" F* I5 c! S
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全5 r2 e+ |; n% S6 {6 y4 a
8-1 注册（1）: @- u1 O1 {) w: j. {: F; |
8-2 注册（2）
4 I" ?2 ]1 f: `) J8-3 注册（3）4 \: V2 ~9 v5 L" A4 k5 Y1 ^
8-4 注册（4）
$ m5 ~+ t4 X P; Z* l8-5 注册（5）
. N+ r/ N9 i o: m0 R8-6 注册（6）2 @8 f M/ J$ E7 M
8-7 注册（7）
% D2 v% T M. D* U% t; s/ Q8-8 注册&登录（1）
( R9 z6 S" Q0 }8-9 注册&登录（2）
9 Z. x% |) b! |. ~" |$ l, g/ ]
/ {6 B3 G4 n1 c( o% E第9章 开发美团网首页-Search搜索$ ?" P. j4 ^9 A4 C% m; F6 {' Q5 f
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。* O0 _7 O- B+ h: b) T0 w3 T
9-1 城市服务1 _* D0 A5 Z5 |+ Z9 V
9-2 菜单数据
. h9 e8 m w+ U: z3 ^4 U, }9-3 Geo接口实现, x0 Y$ m% q6 `6 S9 V
9-4 Search接口实现（1）, ~5 T: u* w0 G) L G, o( z+ Z! {& x
9-5 Search接口实现（2）- l: y7 h! U# ~) J
8 V+ z8 ]3 w9 W2 x
第10章 切换城市页
5 [8 o" M. s3 X' r" i切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。$ v5 N- r" i6 q. h* K
10-1 切换城市（1）
& a0 }, \$ H n. @# X/ J10-2 切换城市（2）. A7 t4 c1 E4 S1 E! E: d
10-3 切换城市（3）
) y0 c- Z# @ C: D
; `) l2 B; y* X+ X第11章 美团网产品列表页
$ |1 R8 z' H" N5 z点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。' z* n6 e# U/ @7 G
11-1 页面设计（1）* S' x) g, D( A* P! o
11-2 页面设计（2）
3 ^/ @; L- Q3 {- U11-3 地图组件开发
! G0 M2 R* C$ F q! f11-4 入口文件编写（1）
2 E3 m1 b8 l0 {1 F9 E1 k( O7 P11-5 入口文件编写（2）% Z T) j" f6 o9 @
11-6 页面调试
" x6 L0 {% c- V" c. j3 I* Q |' Y7 P( K% t n2 _$ R
第12章 美团网产品详情页开发
# U% Z5 B% n' l产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
' K5 q/ y8 A/ ~( k' U12-1 需求分析 试看
0 T6 D1 H8 A; z" {3 v& u; k12-2 静态模板3 V+ c! l, b- M) \/ u. O, b
12-3 产品详情页入口-静态文件, e; w/ g4 O6 @# L2 x! N* V
12-4 产品详情页-接口
! F3 v2 f: ?5 C9 l1 r! }
- J# F% c- ~- }2 V8 h第13章 购物车开发
0 f1 D1 y2 s) p; V% q1 s购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定1 C0 c1 S% _9 W9 O
13-1 购物车&订单-需求分析8 Y: e' r8 e: l: r* d7 J0 p
13-2 购物车&订单-页面创建
0 _9 y! I* Q' B+ s l13-3 购物车接口实现' N$ W" N7 H8 O5 v6 p" P
13-4 购物车调试3 E" J" k' b7 u2 r1 v }* k# F
; g% }' F4 V+ u' [6 j. _4 v
第14章 订单页开发; ^0 E7 l: ^; v( P- Q
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。% B3 x3 U! q* e n
14-1 订单页面
" }# z- a8 o7 P. A2 C& {+ ^" c; M4 m14-2 订单接口. M ^' D8 }& j1 R9 l* A# }. E
14-3 订单调试5 x* u; [, Q5 V/ D. b O
! j! u0 I7 {9 A8 E+ M第15章 课程总结* F2 {7 J. j& I# p; ]
对课程整体进行回顾与总结
( Z: A5 B/ a, ~% g3 m8 O8 ?9 ~: B( @15-1 课程总结
3 p! s8 r' c/ z: U7 t1 a- z! ^ T7 C6 e4 B; ?; n, b
【下载地址】
) y( H. T+ ^- p8 d0 E$ [# N0 e; M: k3 e; M: }) x: N7 Y
& M/ r0 `4 c: D) N, p
( C: z7 G/ _0 A+ ] |
|
[复制链接]
a
