% q O) ?. H& m, E
9 n) b/ u6 q. L' _. F s! `) _* _6 r& W# ?
3 [4 p0 g |" m; C& a【课程简介】
* W0 h1 G5 }4 h& m这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
" @+ q M( p' H/ J% J6 V
* h: O& X- D5 A* Y; ^3 U5 Q【课程目录】
! Y3 o5 a6 Z1 G9 d5 ?第1章 课程导学
5 o2 g" n4 F% D% ]这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
1 K7 r: a g4 N+ s2 A3 T3 m1-1 课程导学 试看9 k% j5 b- v+ u) B
1 z8 q8 P+ _' S4 m+ J第2章 Vue基础知识
) Y9 e% p- O+ b) D& N整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
+ l8 I6 k5 M, M2-1 概述&脚手架
+ [8 t) x2 @% }0 U2-2 模板语法（1）
( ~( V; k2 T/ E! i( l; N' F$ m2-3 模板语法（2）6 d* z! i% i0 @8 S
2-4 样式与遍历) ]1 z5 X# H+ q! p% [+ z4 |4 k
2-5 事件
/ D! i: u% f% O7 |8 N2-6 组件（1）" M! ?; z/ Y, y6 G9 N* Z# e
2-7 组件（2）
5 u+ v6 u7 }1 a) ~2 G7 L2-8 路由基础
" H% j0 R; B7 W5 c8 g2-9 Vuex基础用例（1）
2 W* ` e" q @0 j: Z: ^1 f2-10 Vuex基础用例（2）5 B& n3 m+ `, s# M
2-11 Vuex高级用例（1）
4 r, L+ h# D' G" o& @) z4 l0 e2-12 Vuex高级用例（2）
$ N' X8 S% o: p7 |. O& W4 _% j; K$ _7 q+ R9 I4 v6 L I, n! |. z5 g
第3章 Koa2基础知识( ~5 x7 h( ^ W z% p- k
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。: V& d! r% @& S
3-1 Koa-generator7 T P0 S( X6 K$ s6 y. p, d2 Q1 T0 O
3-2 Koa异步async, A4 j; ^ A D1 s! }) n/ A
3-3 Koa中间件
: ^1 ?7 j% p2 A5 O; \/ K3-4 koa路由和cookie: n% A& V2 E k
8 w. K2 c7 G$ m$ l第4章 Mongoose和Redis基础3 A* \+ l0 w- X0 E x
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
! k' _; _, G; W; a4-1 mongoose（1）
9 @) W4 H8 W5 ~) }) E. F0 J4-2 mongoose（2）
) D0 I/ o! D# A4-3 Redis（1）) S0 L1 Z. c( |1 g
4-4 Redis（2）% o! D$ P! |* x
, S: y: P: U" D7 G- @+ D第5章 Nuxt.js基础知识* s- P* Z/ C; f0 F3 W
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...* d- C! F& |, v9 x. L' R+ c! X' g
5-1 Nuxt.js基础（1）* x6 S' p5 ^; b C6 c7 G
5-2 Nuxt.js基础（2）% a1 t" Q. y* v6 Y) L
5-3 Nuxt.js基础（3）
/ b/ d9 |8 Y2 |; Q8 I5-4 Nuxt.js基础（4）
8 z0 t8 R+ E& R- D. p- J9 V. F* V N8 N; @
% N" y6 u& y- ^- h( Y+ r第6章 实战准备' m/ }! b; [2 g( x
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
, B" F# ?( m/ _$ B$ l) T6-1 环境准备与项目安装
5 f- F% w& k7 E5 ^6 t( |% K5 y! G2 c6-2 辅助工具安装与配置改装
6 d. ?+ `% B2 ]) `2 R; ^) F4 s
0 I" ?; t- m n. E4 V第7章 开发美团网首页 l* Z6 o% h, @4 f8 `
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。 G8 \- \- n J C; T1 }
7-1 需求分析 试看6 N; L) b+ Z2 Z* G; h6 e! |+ R
7-2 首页Header开发-城市定位服务设计
0 d/ s+ H0 K w$ b: a9 O7-3 首页Header开发-头部引导导航设计. M) W2 J1 L6 m7 Z0 p8 v5 a6 E, f
7-4 首页Header开发-搜索界面设计
8 \9 V% J$ a5 Q, l& @0 e; w- i: |7-5 Bug修复
$ n5 V, \) U. }7-6 首页搜索
$ a3 H& ]4 \* ]. S$ H7-7 首页菜单（1）
* [ l% j# O1 R3 ~: r% s7-8 首页菜单（2）
: V8 z7 {, o. }& K: h5 L$ m$ }7-9 章节小结
% S) K7 e/ y {+ p/ x7-10 Footer补充$ S% A7 R/ e6 ]% s; j7 q
4 ^! b. N6 J* Q1 K; [第8章 开发美团网首页-登录注册) N) X. `* D3 |+ z$ L
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全: j- y7 x$ Z* c# b, y6 J+ q
8-1 注册（1）
3 c( y) }7 ?% |& g$ y! H% L6 `& V, U8-2 注册（2）4 z' v# v' R# ]1 Q* V: i
8-3 注册（3）
$ t1 M4 F. r t/ l6 X4 L9 A8-4 注册（4）
$ V, g/ Y0 M. K( D8-5 注册（5）' \2 d* Y" f, K- s* Z5 x% R
8-6 注册（6）% q; W1 A4 j3 A4 b+ Z
8-7 注册（7）) [3 V, [( C5 m- t: y& q* d
8-8 注册&登录（1）& G- o2 j5 x1 C) i9 d
8-9 注册&登录（2）) `+ g3 k- L6 h, r3 R" t0 s
, b B. [0 \! y, A {- p第9章 开发美团网首页-Search搜索
* d$ F* r' R( ~* Z只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
" k' |% X# y: r( o, v; S9-1 城市服务
" F& n9 j! a9 p& N9-2 菜单数据1 i) v6 _1 f, [9 q4 A( C
9-3 Geo接口实现
* c; _8 c$ q0 D3 u7 d _' Q9-4 Search接口实现（1）! Y" G, }$ u) @2 R' b1 o4 w- l
9-5 Search接口实现（2）
3 s; D( c& v& j* f" a& U. a0 c! J! }, O7 ^
第10章 切换城市页# Q _9 w' _- l; C8 R+ G& @7 a2 T
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
! ~5 k( s7 k7 P! M3 u10-1 切换城市（1）4 D7 O& e# n1 _* e4 m$ g6 q
10-2 切换城市（2）" b2 W9 ?; G4 B% i# @
10-3 切换城市（3）9 d( C! G4 q8 H s
7 u: S- H+ e# |9 l( }9 F( N' e, b
第11章 美团网产品列表页8 S6 `7 V3 C7 k, P$ K+ x
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
: Z8 Y( @" X k9 l8 L% n6 I/ O$ |11-1 页面设计（1）
H* J( y1 p% ~! l# z6 T) E11-2 页面设计（2）! d+ V( p# H. Z! ?$ g# q; H( t% S3 y
11-3 地图组件开发! ?% x/ p1 H7 _8 ~3 ]5 _; Y
11-4 入口文件编写（1）6 Q) x* I }4 }- A- `+ R2 m7 Z) }
11-5 入口文件编写（2）
2 |! a0 L, {& t# ?4 ~3 M1 I( Y2 _11-6 页面调试& E" F, A- R, O* y; U6 y
* d# Y* R5 {( `4 }第12章 美团网产品详情页开发 _( o2 R( J/ m* i/ r. m
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。# G1 E" W7 b( s# R0 S
12-1 需求分析 试看
2 F) M- o! M3 h( ]12-2 静态模板
1 K: m1 ^. n. Z$ l0 N8 a; A+ ^, U12-3 产品详情页入口-静态文件& I7 a+ `0 y9 e) m. e
12-4 产品详情页-接口
+ a: F: ~1 f8 e: X8 V, a( p3 Y1 B* L+ H. j% ^' V7 I( q9 V
第13章 购物车开发7 D- d2 [+ ^% F x; n# m
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
9 l8 O( I% G" N2 m13-1 购物车&订单-需求分析% e/ X2 t3 W. ^7 S1 l
13-2 购物车&订单-页面创建
( g9 Z4 P5 K& i1 r7 o# D& J2 k4 x13-3 购物车接口实现- J. n/ T: h, B$ R+ Z0 \
13-4 购物车调试4 y( T6 H2 o# i8 l" ^. C
4 f; ]3 c/ _3 l& H第14章 订单页开发
2 P+ b+ N- p( @( @订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。# L! N3 q2 G0 z1 v: ^
14-1 订单页面
- v; Z* t) l& S* h4 n3 v, Q14-2 订单接口2 B1 u; |6 r, y( ?/ M
14-3 订单调试1 F2 U% B, b0 B9 M% D/ Q6 O
6 m/ a/ s9 K) U0 P6 Z) G" }+ C6 W第15章 课程总结: T3 u* c+ _4 Z9 X! j. B5 _
对课程整体进行回顾与总结) b8 u2 p% I- }! `( q* Z$ x
15-1 课程总结6 j6 g- D2 a ]5 A
* M6 j+ I# p, P* u Z8 g
【下载地址】. D5 ^" S5 j1 { S
7 s3 s4 G0 S2 O4 D- z5 b. L
) P( B, O: Q3 S$ s- c6 Z4 F7 B/ W4 k8 i1 `) m7 R( P+ o3 ^
|
|
[复制链接]
a
