+ Z9 o% y* w, I" H; J
6 e& J' y# `. u9 k
, G6 |0 D) r5 S【课程简介】' U( _# N. `* J* }! p
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
# I; T/ n/ n6 x( f% c; J6 \% ~% j
2 R _, I5 W2 j2 U5 x【课程目录】" |3 }4 E0 G" m6 k7 U5 {( P
第1章 课程导学
' I8 U2 p/ t; a' t1 ?3 O这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等$ r% A$ M- i0 w
1-1 课程导学 试看& V! L1 j0 E% y( f# k, s7 j7 W
a( v3 Y, K: A p. _ Q8 Q
第2章 Vue基础知识
[4 S" l) ]' N1 y, i4 M0 R( Z整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
6 B; w. f- D* R @4 Y7 n' e2-1 概述&脚手架1 K7 N/ j! ~) A
2-2 模板语法（1）: f% _, m+ y" x! f8 l
2-3 模板语法（2）0 ?- _, W7 e" {+ T, m9 h
2-4 样式与遍历
: t- t! y6 c) K! |/ B6 U2-5 事件2 ]( `: ~+ K: n6 b
2-6 组件（1）/ H+ G- p5 R/ G$ C/ e! A2 R
2-7 组件（2）
5 p* j) n' Z0 k2-8 路由基础& g, w. _! ?, y9 Y; \1 x3 U
2-9 Vuex基础用例（1）
7 |1 N8 d4 x+ H; u$ s2 w3 L5 J) E2-10 Vuex基础用例（2）( ^" `# G5 T' Y
2-11 Vuex高级用例（1）
& i2 {9 p: r. I6 i6 S' m2-12 Vuex高级用例（2）
5 c; L. v- V6 U1 s" ~. ^, `* D( |! k3 z
第3章 Koa2基础知识# P2 y) m! u% g& p
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。5 f, z; k% h2 O: r
3-1 Koa-generator
" c# _3 k: p. Z3 w) s6 B) Y3-2 Koa异步async
2 u( b: r' u" x% p' V f3-3 Koa中间件: k, b* D' _4 B6 s# y
3-4 koa路由和cookie F7 Z7 T) H5 l1 `& Q
7 W4 b" z6 C5 t4 {& O
第4章 Mongoose和Redis基础 o5 ~- Z6 l3 }0 m# L
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
: g+ Y& q6 K+ @1 H9 Z8 R7 Z4-1 mongoose（1）6 B, }! O" q2 n& v5 |7 W& N
4-2 mongoose（2）
( S7 A$ z8 I x' T; i4-3 Redis（1）
7 {' ?, v) {( m2 ?2 f( p t4-4 Redis（2）
- Y# U# ]* v/ O7 `% j N
" I% D9 x7 o( `, E! N第5章 Nuxt.js基础知识
% ^3 T! i6 _: w' ]: \Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。..., A! w' s2 ~& z% n# m/ L0 p
5-1 Nuxt.js基础（1）
/ r( V7 j/ S7 R; Z: N& E: r/ {- f5-2 Nuxt.js基础（2）2 v' ~/ O. I: |: G0 `
5-3 Nuxt.js基础（3）
) d, }" P' }# n1 ^5-4 Nuxt.js基础（4）
! c( ~: r# o! g" M: ~* K6 T* w
4 F9 ~3 `" D) p1 d& \( w) _第6章 实战准备
5 F% [, u1 X# I工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。$ ?4 @0 h0 ]! ~1 Q
6-1 环境准备与项目安装9 V3 X: `& c/ \# I! G
6-2 辅助工具安装与配置改装+ r# V( O( e) E0 B8 @
3 ^' k2 J$ ~+ z& e* Y$ l+ @第7章 开发美团网首页
& b: j" }0 q) H2 g从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
& e3 ]0 O! j! I- j9 J7-1 需求分析 试看
' W- G1 C1 _! l& O* ?/ G7-2 首页Header开发-城市定位服务设计, f* h! ~8 J' k
7-3 首页Header开发-头部引导导航设计; u9 E! i$ ?. w( @0 x
7-4 首页Header开发-搜索界面设计
5 P8 v P. F# B; p/ _ @8 |8 ^7-5 Bug修复( k; w/ S3 o6 Y$ a5 Q6 b; Y/ @
7-6 首页搜索
1 f% T g' y5 N: K* N7-7 首页菜单（1）( ^& B7 r% M6 n& u: n* e
7-8 首页菜单（2）9 | ^1 w6 [0 d
7-9 章节小结: K2 t6 p+ u* `! o3 a- T. y
7-10 Footer补充# l: M- A$ k3 C; ~- u
6 C! q# \" z9 p6 W, l/ p c) f0 V
第8章 开发美团网首页-登录注册
$ C; \. k# f. z" U9 \/ J6 O- N) M从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
/ ~, I* o% w3 H8-1 注册（1）0 o" l5 |6 j5 i* O0 x
8-2 注册（2）
6 J2 q( t7 S3 C. F/ m8-3 注册（3）
# r2 l* @' ~( D9 u" S7 J% T8-4 注册（4）
9 j% U7 c' B/ Z! ^8 Q8-5 注册（5）1 B9 D' a. C$ o+ R
8-6 注册（6）
0 `( d) b# h- V8-7 注册（7）
; h) G. w6 g: y( o9 j8-8 注册&登录（1）
# O( p8 x# k8 Z, n8-9 注册&登录（2）* z! ?8 R; e0 Z9 R
: e& G2 O" b' p3 v第9章 开发美团网首页-Search搜索
. J; p3 z5 A4 b) X只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。( L( M" f# m: e( t' {- ~
9-1 城市服务2 H. g% m8 E: C& f& }9 D
9-2 菜单数据" K9 K2 b+ }7 f; T$ U
9-3 Geo接口实现
5 T, D8 x1 P5 ~% f; }9-4 Search接口实现（1）
( D) ?+ d& @7 n- @9 W9-5 Search接口实现（2）
6 @* r( l7 ] K/ ^. n0 o$ R0 ^# ]# ~; Y& x! ?
第10章 切换城市页+ J! ?2 `9 k2 K( F, k- {* D* d* E% H
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
' f0 [. A, M1 y( i; J* s1 e10-1 切换城市（1）
1 a& e& t, E3 k! b10-2 切换城市（2）
7 l, t$ U# N5 d( m+ Y& l8 o10-3 切换城市（3）- k" w* N" D& |/ j
- O2 v) j8 F+ V- ?第11章 美团网产品列表页
7 b+ u1 g/ c- M7 ?2 r+ v- m8 J# B点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。4 S& x2 a: ?, c8 q
11-1 页面设计（1）, {) m$ G/ M- u, C% x
11-2 页面设计（2）, D1 }) ]9 @3 c, C- M
11-3 地图组件开发
' d% ~5 R4 Z% {: z9 B; {8 B) M5 @( y11-4 入口文件编写（1）
( b( P" G4 y7 k {. u7 G" j11-5 入口文件编写（2）: ` ~5 j# h+ x* W8 j
11-6 页面调试2 }6 r! @ x; h+ ^
# L/ ]& p, ~! Q M! y. a第12章 美团网产品详情页开发
+ m0 H; b; H- U i4 I* U$ N" V Q产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
5 q2 s3 F4 w9 _) D4 S12-1 需求分析 试看) q2 ^" v7 u% L/ @1 [
12-2 静态模板) K0 v) Z0 u. u p3 `9 b4 n/ x) h
12-3 产品详情页入口-静态文件
; ?/ X7 \$ G7 }: P2 u12-4 产品详情页-接口
- P* r& R q& e. C. q, e+ R7 [
3 ?8 W! o/ G9 Q$ m: I" [第13章 购物车开发* t9 t( r" I5 d8 V+ n$ {
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定7 _6 z( k/ ?. x
13-1 购物车&订单-需求分析1 ]# t, d- A6 K1 s" l* P0 I
13-2 购物车&订单-页面创建
' U$ I5 _+ {' _! t1 T5 _1 X# C13-3 购物车接口实现
4 ^) p7 d6 y$ i6 G( W+ I- S13-4 购物车调试
1 C0 z8 g0 W, V$ P N9 z0 Y3 v6 l3 r$ b; {. w( M
第14章 订单页开发
# F- w# v5 u# @# K% r, d3 W. U订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。. O \9 K: X+ V' \' X
14-1 订单页面7 r# E* N* t( b {& i0 Y% V
14-2 订单接口& _: M1 D* G. D# K5 d6 Z2 ~0 c
14-3 订单调试
8 G1 w! ]" y1 L' t! y3 ?
8 a5 G! b, D/ E& ~- v2 s第15章 课程总结
' g+ q( o5 k7 I( C对课程整体进行回顾与总结
9 l0 W) R$ G9 ?$ d! w% F* @' h: V! T0 _15-1 课程总结' X6 U: _; b0 H+ ~
7 F1 P8 Y: ?4 ~5 w7 v* ~: Q
【下载地址】; o& L2 q& p8 R2 B
# Q. s! N* |( ]- t) ]
V$ `9 N( `6 t. \9 `3 ~9 d$ y2 ^2 P& ^3 y. j
|
|
[复制链接]
a
