9 U7 |* K3 D( i( X8 w
4 I+ w% E( T) a' c' t
1 _6 p: l- n, i7 H, M' p @【课程简介】$ a" J+ }3 i5 g
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
+ Z" y( `& x6 L; `; _3 i7 l. p" i& T& v0 r1 ^3 {4 y
【课程目录】
: y) ]5 ]' R* [# H- W, s第1章 课程导学8 B9 O# i i9 i5 T
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
' B* Y; P# T- I5 Q+ g1-1 课程导学 试看2 [6 |/ t2 G' T% r' V# i
$ [4 h1 }+ f- @5 O7 v, N
第2章 Vue基础知识
7 A# R( @4 v- _- V! M" R整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。7 r; N5 b) X4 F- {4 l0 d# w% y
2-1 概述&脚手架
4 p. R" l( h6 W2-2 模板语法（1）9 X( t+ h5 _3 ^; m; j2 x4 H5 j6 K
2-3 模板语法（2）, R: }+ ] S1 ^8 ~$ N- {: K- Q
2-4 样式与遍历
4 m* p; m8 i8 L) U9 J" C2 m5 Q9 |2-5 事件- \ Q# h; a/ x6 g
2-6 组件（1）
# A* y: C+ G! _. i" Z2-7 组件（2）# s4 g) Q3 ~* s+ E$ i
2-8 路由基础7 w& J# _6 I$ u, ~& O
2-9 Vuex基础用例（1）
+ E3 B9 K: R7 G; r5 D5 z2-10 Vuex基础用例（2）* h( O2 V+ ^( e3 @2 u3 ^/ h
2-11 Vuex高级用例（1）) N- i9 g) H. Y* g
2-12 Vuex高级用例（2）
2 Q5 [, k( \& F/ \# X- W/ Z9 ^4 O5 J5 P" C! U2 j( l9 d) n
第3章 Koa2基础知识 J8 D( U, _3 c
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
0 C6 n, N! j' f# A; n1 l0 c4 @9 u3-1 Koa-generator( c5 X1 ~" G) u% T) |
3-2 Koa异步async
$ ]& q. g/ g0 ^: S- L* U% i3-3 Koa中间件
5 ?; T& S |0 Z. O) l3-4 koa路由和cookie& [! i6 v0 D% ~# A& x
# k D: M: }* H: R0 f
第4章 Mongoose和Redis基础8 Y# t+ l' T- B" t1 X% \
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。..." a. V1 | l# U- m3 C, ^
4-1 mongoose（1）
& p( y9 U5 ^6 _1 V4-2 mongoose（2）# V( F) c" g$ x! r, h8 f
4-3 Redis（1）: a, ^6 @# x3 T7 |5 j+ R }# ?
4-4 Redis（2）
) K8 r, @) K7 g1 Y' Y+ |6 |
% Y# w8 E3 q. ]1 ~' k# N第5章 Nuxt.js基础知识( z( e) C: D, e! g
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
. `, a( u. F4 I0 C& i5-1 Nuxt.js基础（1）6 S% g& J0 A2 l8 y
5-2 Nuxt.js基础（2）
8 W0 o8 T) ^ A& I j# I5-3 Nuxt.js基础（3）
% v* G5 w+ G/ e# K7 [' [+ k6 u5-4 Nuxt.js基础（4）2 i. h# d. ?' f" h, i
: M9 I: i$ v" M# ]9 ]8 w- O
第6章 实战准备
9 D4 r5 q& L1 C, M工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。1 j& T9 d; N( v: `2 f* u
6-1 环境准备与项目安装2 x y6 E& y; w) F k6 w- B: y; [
6-2 辅助工具安装与配置改装5 J7 D9 T8 _; S3 }$ |$ H
4 W" y0 u' x5 j6 x0 h$ z第7章 开发美团网首页
- V) y! _4 {. C% v* f0 R从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。- t6 }+ V2 D) F( ^
7-1 需求分析 试看
9 q# Z, ~6 N. q5 [4 t6 b. z. N' [7-2 首页Header开发-城市定位服务设计: C+ B' {; `4 k3 U }3 d3 L
7-3 首页Header开发-头部引导导航设计, N; t) e% Z `5 s2 f7 \
7-4 首页Header开发-搜索界面设计
) k* d6 a3 T* i# W' m, ~0 ?$ G7-5 Bug修复- E5 \% m% g; t( c# K6 J
7-6 首页搜索
2 o# f& [8 j' x) K" D$ {7-7 首页菜单（1）( P" ^6 y" M% k0 Y4 l# P/ Z8 g
7-8 首页菜单（2）
; d; H) _4 R* E3 a8 a0 `7-9 章节小结: `* ?6 e" q1 o. t2 }
7-10 Footer补充, h. y- r L1 Z- |! t- A
: G2 z0 [$ J8 ~) V' D$ s
第8章 开发美团网首页-登录注册1 g5 M* w7 Y* s
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
2 Y _/ v' F0 f( i9 h' R8-1 注册（1）% K$ U9 n$ I( ~% R( U
8-2 注册（2）. M! |6 z+ R' N* t
8-3 注册（3）
6 v3 k' W9 ^7 l) Y8-4 注册（4）: l/ s; i" _6 q5 e5 u
8-5 注册（5）
: Z4 ?" L& [- \' l8 j6 H8-6 注册（6）
* ^9 S! R5 A9 S/ b2 a" q4 C8-7 注册（7）
3 y4 g9 [9 k* ~/ l1 o. T8-8 注册&登录（1）
+ H* N! t4 S, m3 P- {( Z. d8-9 注册&登录（2）
/ c( t6 e/ P0 T- Q9 \3 Q$ @8 y }1 {1 O
第9章 开发美团网首页-Search搜索
7 G D4 | D3 G' ]) O只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
& A$ k3 V* b8 E1 L: p9-1 城市服务
0 b/ v0 ?8 k2 }7 T- I9-2 菜单数据6 F2 r/ c; j% A l8 I! c
9-3 Geo接口实现, ]5 I. K E+ K; H' \6 R
9-4 Search接口实现（1）
2 p! y A* q R: j* a9-5 Search接口实现（2）; u& g6 e _/ a) s5 t
( | A+ N$ i( S$ g- Y0 l第10章 切换城市页
9 B5 _- E. x$ `3 I. G, O! m切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
3 [7 x# _" ^ j10-1 切换城市（1）
v! [" ^- v8 i0 q10-2 切换城市（2）
* N5 K0 ^5 B7 y10-3 切换城市（3）, [+ x3 f- x5 {% y1 m: x7 M
+ G$ _7 N! `+ @; ]第11章 美团网产品列表页) a% m( H c) w. g8 i" C% {
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
9 c0 j- C) r$ z1 M& U11-1 页面设计（1）
) ^8 y1 }% n5 m11-2 页面设计（2）
1 \: [2 W0 a7 o5 [2 ~) J$ }11-3 地图组件开发
+ ]: z9 X0 @# C' Q9 e* t& X11-4 入口文件编写（1）: Z; y+ F9 u: {: ?( K
11-5 入口文件编写（2）4 z* K/ B5 i/ r; c& u
11-6 页面调试
" O' S% }0 i2 S' o! w) N" `$ M7 r4 f! D
第12章 美团网产品详情页开发' B+ p z5 u+ _& {$ c# ~
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
4 k. F9 X1 m8 j) P12-1 需求分析 试看
. v$ o" K% m1 h8 P; o" u12-2 静态模板
; Y& |$ l4 v. U& W' Y( b( A12-3 产品详情页入口-静态文件
) _+ B6 }0 e9 S- O5 H( J12-4 产品详情页-接口! l( D/ c0 H/ \. y& V" [0 Z5 ^* E
8 v! A: r; W' l3 }# W第13章 购物车开发
+ R& X$ U8 T7 X& o! y购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
# u) B0 y2 ^0 p) Q2 v3 [ R$ \13-1 购物车&订单-需求分析
7 |4 |# s! ]/ V6 r+ t6 Q) K7 t' w13-2 购物车&订单-页面创建
]) t9 T# k. p8 _9 v13-3 购物车接口实现
8 m. g4 ~0 m8 q/ x+ Z13-4 购物车调试
: }& a& }' F6 g) M+ g6 V4 Z
' @, X# `$ ]! N1 T( h) W第14章 订单页开发. V. x$ H! V! z" L
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
( n* L c' d, w* M% s14-1 订单页面3 m1 q9 R2 R( w% d
14-2 订单接口+ R6 e2 W0 p% c# r8 G, c8 G" {
14-3 订单调试
* z# C3 A0 j* A1 |0 z( @
, L# @& _+ o5 G第15章 课程总结
9 O9 X+ i9 c5 e, s对课程整体进行回顾与总结7 K" t' m5 v+ l6 I+ A6 J
15-1 课程总结
' L( w, ~1 B% y# m7 S0 ~9 B$ d$ |4 {) n1 n
【下载地址】
+ d% }( C; e4 C" y O- Z) `, t9 v9 Q, c! w2 \
! q" q0 b `: {8 b: W
' E/ d$ f2 {6 R4 w$ h# y8 s
|
|
[复制链接]
a
