, ?+ J$ x7 S3 }2 a: E
4 }3 b( W) `# A |/ d
0 U5 J! r$ f$ [' P; I( g6 }【课程简介】
" n# x* i1 p5 `$ f% E这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。: r+ Z" d# @9 Q- y# W8 R
$ N) H9 Z* X% I3 y8 {3 P【课程目录】
' B& ~# `) I. T7 v第1章 课程导学
& @4 Q3 d9 ~% } I' Z这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等( L M# l& _4 e* ]/ u; N. d
1-1 课程导学 试看
& h( E" {4 E0 J7 o6 b N; O3 I3 G3 g, T7 W8 P0 m# ^" P
第2章 Vue基础知识0 R$ G7 n- B' H& q! i
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。( Y& `9 [: e# ?) @3 z/ U ]( b
2-1 概述&脚手架
( @4 b. x2 x& d3 S- o& `7 W! C2-2 模板语法（1）/ \6 T+ I. a+ N
2-3 模板语法（2）
( t" h; z! ]7 v- P2-4 样式与遍历
; v5 s2 D- L2 N. V2-5 事件& {5 \) G5 K6 d! `2 r0 A
2-6 组件（1）( n. N9 }3 A1 v# r* |
2-7 组件（2）* {2 o1 `: V/ r! B8 T
2-8 路由基础
# Z* X8 ^7 j I2-9 Vuex基础用例（1）% [1 [. ^" c0 }0 F$ W
2-10 Vuex基础用例（2）% v: g# j! ?* \6 @
2-11 Vuex高级用例（1）3 `) F" h8 H3 y/ y+ I2 F' R# `
2-12 Vuex高级用例（2）
0 U6 U4 g% d! P5 K. D( ?* K) a% u$ ~! E
第3章 Koa2基础知识2 Q( M+ A; y/ S( U- }& n! z
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
; C4 x) J& f3 |' ?3-1 Koa-generator
, v) P" K* U: b& h$ T4 O @$ P3-2 Koa异步async& `: v* f9 ?/ x4 }/ Q
3-3 Koa中间件7 ]+ i: E9 t( c! \: p
3-4 koa路由和cookie) S: R5 Y; D! G1 K" [1 S+ o
/ a8 C( ]8 f2 V h0 G. W9 X6 ~/ |
第4章 Mongoose和Redis基础
' O% G) }$ ?# bmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...+ O- N$ j: B* z
4-1 mongoose（1）
# m6 L( b4 e+ D" v: [; G% H4-2 mongoose（2）+ x( \* X7 w W' W) M# H
4-3 Redis（1）
# R% U9 Z) m# P& O' a* p A4-4 Redis（2）$ t3 ^, M+ n: V! @* {9 S! P
, v: k4 D8 h$ Y* f( _
第5章 Nuxt.js基础知识
" j: b; Q4 F0 Q% l/ K# W. o B/ XNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...( M( p+ h7 `, R6 ~% r- z! V; X ^7 \
5-1 Nuxt.js基础（1）
. A7 L4 B- P$ T7 R8 G9 ~5-2 Nuxt.js基础（2）' ~$ y9 i# k, ]& K6 r+ Z
5-3 Nuxt.js基础（3）
9 p& `2 K+ {" T8 ]% S1 _- o& H' c. w0 i5-4 Nuxt.js基础（4）
) b9 u1 M$ A3 l! z; J& W, f+ \8 n$ [. R( b- |5 _% K
第6章 实战准备( g! W+ e! y1 R. G$ ~4 F5 x
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。" ^. S% J) h4 j, y
6-1 环境准备与项目安装
+ R2 N7 T+ k3 }. u( r6-2 辅助工具安装与配置改装
. c5 q; o. m, }, O- f+ K3 W+ \2 _- ]9 B
第7章 开发美团网首页. E+ p8 @: d# |
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
( Y% m; z5 z, v: ^) d7-1 需求分析 试看
2 \; X _7 g" R2 W# O1 f7-2 首页Header开发-城市定位服务设计$ G+ c* J1 Y" p3 ?& P4 J* g* z: ^
7-3 首页Header开发-头部引导导航设计+ }# R+ i0 \8 R
7-4 首页Header开发-搜索界面设计' ^4 z2 l& A; Q4 Z
7-5 Bug修复
9 T7 G, [) u0 `7 P; F7-6 首页搜索) i) @% @+ `* p# g+ ~$ u
7-7 首页菜单（1）$ X* z5 ], h- O$ k
7-8 首页菜单（2）
2 [4 D; o* K$ L3 D& ]+ W0 q7-9 章节小结
% D/ a! }8 w; y, @3 m5 S7-10 Footer补充; a! _: k. k9 {( x
; v2 k" x/ \+ i. o0 @第8章 开发美团网首页-登录注册
+ U) s1 a2 G% R& R; e0 {从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
- `+ L8 \5 ]8 k: \4 D8-1 注册（1）
# ]/ l& n6 a8 j! S4 y8-2 注册（2）
& C2 [9 L6 R' \% j8-3 注册（3）
9 U. G3 v e' l4 i0 Q0 c7 c8-4 注册（4）: o+ w6 i- l- M7 e# @1 w2 u
8-5 注册（5）. e w) d! O0 E! Y6 D% c
8-6 注册（6）
' y( X {1 K! q! L/ X, k1 q" V8-7 注册（7）
3 Z2 @+ d2 R3 c8-8 注册&登录（1）
5 w8 I) Q: [5 s2 Q8-9 注册&登录（2）- _4 ^7 V1 P* Q' o
: A) M- a* `$ I' [: w h
第9章 开发美团网首页-Search搜索3 c' \+ c. E" i0 D) J d1 n: k
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
. x. @0 B2 S* e! F! o( J1 t9-1 城市服务
3 O( K% t% t0 V! o9-2 菜单数据: J4 E7 ?; `' u$ r- j
9-3 Geo接口实现
" e; s5 J9 ]: K3 j9 e, \4 d9-4 Search接口实现（1）+ R5 r6 o" F' B& \% g& k
9-5 Search接口实现（2）
: N9 _+ S* Z- r2 u) c
, U% \, I) l7 y" N第10章 切换城市页7 k5 t- p) S- V* `- g
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
: x) M* C/ c5 ~# o10-1 切换城市（1）' X0 A& e7 d! a6 y" P
10-2 切换城市（2）
/ Q) K: g [: ^' p' {: `$ k$ ^10-3 切换城市（3）
8 d9 g: E$ R8 Z) P8 r, T
. p# ^/ @: U* j2 M( F1 n/ A( B第11章 美团网产品列表页* L* `; m: s$ G. l% y
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
" n& S! q# _0 [0 X. P9 V( V11-1 页面设计（1）+ m% T# s* j' @4 X* Q
11-2 页面设计（2）
5 H$ V7 t2 L+ u$ h: p8 `11-3 地图组件开发3 M3 n/ t7 m; b4 V
11-4 入口文件编写（1）
3 v# Z3 e8 P3 U& f. ~3 u11-5 入口文件编写（2）
( u! p4 q# o7 `. Z$ C11-6 页面调试
% Y2 h, d' M* y R9 r- R" P: B1 m. v$ x7 J. J+ O8 n
第12章 美团网产品详情页开发. I: U- ^9 w5 Q9 i& I5 V! c1 Q+ y
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
4 D7 P; s4 b* E d9 B/ H12-1 需求分析 试看0 i. u8 T6 a* V
12-2 静态模板
* R: e5 L) K, r12-3 产品详情页入口-静态文件( ~! a$ g8 z2 n+ K
12-4 产品详情页-接口; D6 T7 Y7 I! @0 l. L
$ l1 f) }, }$ T m- A, G6 K+ \* _
第13章 购物车开发
, p2 A3 s- v- K/ A. T购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定, S& X1 o# |6 ]8 t. n1 A
13-1 购物车&订单-需求分析
% i' b9 u3 m3 V4 _4 v" f6 f* Q13-2 购物车&订单-页面创建
# r* x" A9 N7 W5 L( h1 r13-3 购物车接口实现
6 b C7 V+ \& e( H13-4 购物车调试3 \ s- }" M( b* D* ~) s
, O }* M; l) p% Z" i. W6 D第14章 订单页开发
: i( x" O, |* Y8 d订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
3 J0 U/ Y3 C6 n L2 X14-1 订单页面3 F! s. Z# h2 B0 J: {
14-2 订单接口! g, f+ r2 w n
14-3 订单调试
" P9 }; j5 A9 z, F; m6 x( l- H% w* T! Z- M& M2 w/ A
第15章 课程总结$ |5 }+ f, j5 Q6 G' p! ^
对课程整体进行回顾与总结
6 w2 E5 u1 v* I f15-1 课程总结- e& |1 W, @) q) D8 q7 M3 X
& n. V" z& Q. P1 @9 C C; ~) n
【下载地址】; Q Z: h- }/ e+ ~; X
( D( A4 s) f. g5 J, r1 g* E+ A& K: ^5 _. p! U2 `3 k
1 U0 ^4 O* c4 n, W0 }8 O, M |
|
[复制链接]
a
