8 O1 D% H+ v+ z! ?* D6 I% r3 D1 y
$ ]! d4 l( R* [3 D( ?6 Y; G
1 }6 s5 z& \7 v1 q
【课程简介】
! g W y/ m9 }6 K这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。& Q' _- n s, \* p7 v, D( ]
; M1 S) |; ~6 r& a3 [* q【课程目录】
. \- K8 @* m) X1 E6 s第1章 课程导学
Q9 i1 B$ L9 E V这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
7 a) A/ W+ }+ n1-1 课程导学 试看$ q& C# F# g4 P9 c) r
1 O3 s6 T2 D2 h- O第2章 Vue基础知识
+ T9 Z5 E1 t. t8 K整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
# Q) S( l& r) }3 e2-1 概述&脚手架- n1 ~9 o8 ~ j% L
2-2 模板语法（1）* I0 i: v% `- R3 T9 T/ G' z% `
2-3 模板语法（2）2 f% b' c5 j; V5 Y! c$ `1 w- }
2-4 样式与遍历
& w8 }" @2 \7 \; M' ?- G2-5 事件
' ]! q6 k1 o8 N7 y3 o' ]& W1 r, N7 \2-6 组件（1）
[1 t( k5 I4 r6 o Q2 N2-7 组件（2）. s0 B1 B [* A) {* t E
2-8 路由基础; \' r7 \$ {& e+ x5 j( p
2-9 Vuex基础用例（1）
& E7 ~* Z0 ~, O/ a% N3 F, }2-10 Vuex基础用例（2）
b2 s2 q; }, X6 {. k6 ^2-11 Vuex高级用例（1）
+ b1 |6 ]* ^& n7 L2-12 Vuex高级用例（2）
+ ]: l* e% K; x% i! u1 t% B2 L7 \% V0 S+ d0 t6 {$ d( ~1 i9 y
第3章 Koa2基础知识
9 p! |; A4 P8 Q, @) R3 ^) mNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
7 ?& _0 j% I: ?8 ?/ w3-1 Koa-generator
$ A& ^+ d% q" S3-2 Koa异步async) S( f( P/ K( @! r3 `; R
3-3 Koa中间件6 T8 W; G: i+ `0 s. A" U
3-4 koa路由和cookie) X9 }5 F5 a! r
Q' x. h! v& G
第4章 Mongoose和Redis基础' r% L& B, g+ b- w
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...8 ^$ r& |6 e8 I ]7 D
4-1 mongoose（1）8 Y: E9 w D2 J# I" M
4-2 mongoose（2） |: r& H7 C0 d0 u7 ]# s2 q9 {1 {
4-3 Redis（1）
6 O P1 {5 o2 e( W) e4-4 Redis（2）: X! z# W% l3 P) e1 {2 X
3 ]& Z& ~! e1 w8 o% q
第5章 Nuxt.js基础知识: H# @9 h0 Q; l0 I" a
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...6 ^) K l: `* O! ]
5-1 Nuxt.js基础（1）
! @, C2 @# K0 T3 x7 b5-2 Nuxt.js基础（2）7 h, z# J0 z, h5 E* B& R' ^/ b
5-3 Nuxt.js基础（3）+ P/ H5 `5 ~7 L( v9 t
5-4 Nuxt.js基础（4）
. ], N* Z% ~+ I
0 T+ Q( C3 N7 Q, d# O1 O3 `第6章 实战准备. W. V9 O% a; I( A$ g" X( p
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。2 T; V. W8 Z: k+ i: i! n! b
6-1 环境准备与项目安装" I7 t4 h/ F! F1 w3 J2 j
6-2 辅助工具安装与配置改装+ @7 U0 \7 }7 H
# E5 \) v K5 t9 b7 c
第7章 开发美团网首页6 e3 |. x0 W$ z; x) }
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
- j7 @! C( f- o$ r7-1 需求分析 试看$ t) v0 r) n! f' u. m3 }1 a' ^
7-2 首页Header开发-城市定位服务设计0 z* B* V8 P$ d. a
7-3 首页Header开发-头部引导导航设计
3 @. D! u2 n- X2 M: R0 j6 ^5 f7-4 首页Header开发-搜索界面设计
" N* ]7 f$ y* s$ {9 j: j7-5 Bug修复% e# k! I+ ]. u ^
7-6 首页搜索0 H6 m9 R+ W9 c4 o+ a1 m
7-7 首页菜单（1）0 {# H& w, \( O6 }# l) n9 A
7-8 首页菜单（2）
: t6 w" c3 A* p7-9 章节小结
) d( c4 b* A4 G) [( K7-10 Footer补充% o; l0 @9 t* T- F {& i
) y& G( a' Q8 ^4 |; @" }& |0 M& X第8章 开发美团网首页-登录注册
% }; g/ c! G9 I6 W, T从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全. E1 {8 x6 r3 P" x4 c1 ^
8-1 注册（1）
: A( b# c: T+ Y+ ~) `1 s" }8-2 注册（2）9 ]# a& `0 T4 y7 d0 b
8-3 注册（3） h/ |% o% ~0 i+ P0 d' A% `4 _% i
8-4 注册（4）
* S$ D' G! @. P( |( D8-5 注册（5）( @) p2 [3 _( e1 {6 a
8-6 注册（6）3 \* l2 Y' G+ C3 p, m; i Z8 A
8-7 注册（7）2 M i" h, X1 ^3 [! c* t) H% |6 r
8-8 注册&登录（1）
, N# V6 J' v1 S& {7 S9 k8-9 注册&登录（2）, \; J+ _' Y1 ]" u, O
+ W3 V! R% q) W* ^ G& {( B2 v/ f! X
第9章 开发美团网首页-Search搜索- S, ]8 v1 `- G" u8 W% u
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。# j4 X N4 p% F; w& l% f
9-1 城市服务7 R& {& c; z, V- q# L6 q
9-2 菜单数据# y* W# V, O& b+ u/ i9 J8 c4 ?# t
9-3 Geo接口实现
1 v* X3 d6 M b$ ~9-4 Search接口实现（1）
: Z( U I x. B7 X6 V5 Z, m% A0 \& H: k/ p9-5 Search接口实现（2）
2 {4 x9 u; n% k8 M& X! _/ G- X# E6 P& l6 u$ m6 F9 T
第10章 切换城市页& \! t* G5 c( X8 j O% ^0 {
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。( x1 T7 Q W! h8 }, q9 y
10-1 切换城市（1）
- h7 m" Q, n4 l! B* D( P4 D4 ?10-2 切换城市（2）
8 d1 H& s1 h- k10-3 切换城市（3）9 T j% a3 U1 A7 K4 j/ y4 p
6 r$ {: `/ l+ R# M* u! e第11章 美团网产品列表页
" s! p: A! [' T8 o点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。' t; g2 x; c; e3 F8 b6 h$ q, ?
11-1 页面设计（1）- s) y+ X$ s2 g
11-2 页面设计（2） x: I) f- e6 O- V h$ \( n# S% Y
11-3 地图组件开发9 q6 O/ q5 v4 y" u' |! }
11-4 入口文件编写（1）( ^- n) o% U! @, n: d' X; ~- z; i
11-5 入口文件编写（2）
8 E1 S1 J" Q/ a7 {11-6 页面调试, E5 T& N8 m' H. u
4 k2 e' \ ]- r1 K5 ]
第12章 美团网产品详情页开发
! L. W9 M) X8 z* Z9 h4 O, F4 T产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。8 v) ^4 f! n/ j$ G) C
12-1 需求分析 试看0 J) f) R- n m2 I, S1 K$ O( d0 ~
12-2 静态模板 P6 s% R# L. W) r |+ `
12-3 产品详情页入口-静态文件
4 ?' w6 s* E. x" U4 K; u12-4 产品详情页-接口 m. O. G2 D, _5 A: [( _: k0 y
$ M% [5 E3 b0 f8 I! T m% g第13章 购物车开发
$ O% n( x3 Z$ E' D8 z" a购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
' f/ i. R, I0 ] h/ h# c13-1 购物车&订单-需求分析
" ` h0 ?4 o7 ?2 N( x+ y13-2 购物车&订单-页面创建4 m9 r' z% P* n# g& _, n+ G
13-3 购物车接口实现
( V/ h2 W1 n/ e* v13-4 购物车调试
/ h8 E) c& l7 _7 D+ ]" l$ {8 j0 e: ~6 H% }, [: K
第14章 订单页开发! v! b' h( g8 S! ^
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。9 U/ u8 ?6 s! `9 ^8 J4 N
14-1 订单页面
- h6 x" Q4 j& n6 H( k F14-2 订单接口
/ ?" e) F' H; G14-3 订单调试
7 W/ p. A& x { z3 w9 ]
9 ^' d+ u- a; X4 j2 c第15章 课程总结1 s- w; `* Y/ G0 @
对课程整体进行回顾与总结2 d: R. x( z q# h+ T$ a& @
15-1 课程总结
" U! z E- M' O( I1 t
/ `4 D1 Y( k, G9 g1 l3 y7 t【下载地址】: r; E! R+ _9 y# \0 ]
4 O; O, } b! R" W ^2 E i9 d% R- b m3 c5 f7 ~, g7 D
% p: E* b1 i( w( q! x% {/ G |
|
[复制链接]
a
