+ k; ~* ]6 p% w+ S9 `% w- B
6 {! G$ U5 r) M$ ^& f
$ p' s: V2 T5 ~% m# {; [ I/ Z【课程简介】6 j% N% }* n8 \ z
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。: C( L* z7 d2 h( _; p
& j y" q6 g) z
【课程目录】
# w: |6 P f& x3 a4 E第1章 课程导学" N- s7 {0 `/ o7 U2 o& k2 K
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等2 k. T: x! F& J# d# z7 t. |
1-1 课程导学 试看" ]' L/ ]+ f5 V0 Q% W8 }
- s6 g: y, k7 d1 R/ c第2章 Vue基础知识
6 a" l8 G7 s. |整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
! s1 G: m1 {5 m2-1 概述&脚手架1 Y! W: S$ Q7 b, A# r. }
2-2 模板语法（1）2 K5 q9 j2 t' ?) I ]1 [3 f. [
2-3 模板语法（2）% }5 Z# E4 G* H8 A0 Z& I( o' u4 M
2-4 样式与遍历' k! A* [" g$ b6 [3 A3 m& u, }4 K
2-5 事件! y N. ?' t m/ O9 O
2-6 组件（1）
: _: H% p7 x2 J. m& j2-7 组件（2）$ i7 c9 u e+ V9 J- o& ^
2-8 路由基础2 C! u3 Q, u% M0 E1 k( c
2-9 Vuex基础用例（1）$ F# A6 e' Q) K
2-10 Vuex基础用例（2）: j2 v( E3 U8 e6 [
2-11 Vuex高级用例（1）6 K- y5 w& z S' ^
2-12 Vuex高级用例（2）8 }1 L4 }' E$ w. |* D" F& z# [
& i3 a' J* _/ g, @4 B第3章 Koa2基础知识
$ Z- l# p& p2 `Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。& {. n5 L$ O, U8 h( } n) O
3-1 Koa-generator
2 [2 f5 L5 X8 L" M6 o; S; R3-2 Koa异步async
% S2 ^5 N4 m. x3-3 Koa中间件
% X) U( U) V, X9 ?3-4 koa路由和cookie' q* Y: Q" b1 g2 Z/ {. }. b
" [" b+ I+ m' ?, I# h" w* a$ X' Y第4章 Mongoose和Redis基础2 i) v; m$ m; v& K; L% ]; m4 N5 e
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。..., q" v4 N8 f' N7 }: d8 c
4-1 mongoose（1） \: Q; C; r }; k% C8 u! l1 u
4-2 mongoose（2）
, `( |% v- j7 t3 C1 e5 T G4-3 Redis（1）
' f4 h/ s; ~0 e& X4-4 Redis（2）& j( }# f7 V# p$ u! F( f! p
6 [0 f. N$ u" b q1 u
第5章 Nuxt.js基础知识 \" `0 A* Z9 g' m( E- \6 b
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
0 `6 M( A, g& q3 [3 |( p5-1 Nuxt.js基础（1）
+ [; B8 e+ x3 z3 i5-2 Nuxt.js基础（2）
' l4 x1 R! G K3 e' K3 @5-3 Nuxt.js基础（3）8 k0 P' c& }* [
5-4 Nuxt.js基础（4）! e& E, {( \. s3 q( ~
2 @/ V0 x, A7 U! l第6章 实战准备$ B1 F' e0 K8 G' r
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
4 \* V L" g1 z8 z4 @( w( D+ S6-1 环境准备与项目安装
2 Q- V" J" v! O. p" k% S6-2 辅助工具安装与配置改装
' h. I) w# } v5 O, \; A; W5 |5 _6 }4 V
第7章 开发美团网首页. s" Y& f a4 k8 ]
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。' P' H' D- n& k- @+ a2 G* T
7-1 需求分析 试看" Z! N* C' I3 H; E0 ?
7-2 首页Header开发-城市定位服务设计
[# W+ H8 r) P' b6 a% ^7-3 首页Header开发-头部引导导航设计* B; ^* r0 [( A, M9 f9 ^
7-4 首页Header开发-搜索界面设计
5 M- I, F8 o0 S+ v" t4 q9 f3 x7-5 Bug修复( }# _1 E( ^3 K# K
7-6 首页搜索
# @4 m L' j+ k, \( y+ J- f# s7-7 首页菜单（1）
, l$ r, l Z+ `% U7-8 首页菜单（2）0 j6 B) L: ^( X: M% n
7-9 章节小结" j$ X5 X, J( m4 Z# i" x' E* L
7-10 Footer补充0 v/ X& W5 e+ A0 a/ ?( h( c3 i
0 t2 ]3 |# K. B, M3 `/ _2 o第8章 开发美团网首页-登录注册! q# Q5 ]2 h: M) @% r5 G+ Y, o
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
7 p5 D2 S7 \$ S3 n( w! a0 _8-1 注册（1）
4 R) j+ j& l3 s2 [$ s8 X& l5 b# [8-2 注册（2）
8 C- B2 U: F/ K7 p8-3 注册（3）
& Y; t2 x. ?+ M7 a& A4 Y. n; c8-4 注册（4）+ h3 x1 q5 i% C0 D: ~% x
8-5 注册（5）( G4 j6 r+ o( D$ E
8-6 注册（6）! _' ]& g' s& r
8-7 注册（7）
8 C* a& m* A$ A6 G0 w5 C8-8 注册&登录（1）
* Q; T2 e% [+ {+ x8-9 注册&登录（2）7 j. t- a- E/ p3 c1 A8 }
2 ~" P! h* N a# |' [0 ]/ F第9章 开发美团网首页-Search搜索
9 e9 [3 Z( o8 Z只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
5 A- H7 _$ R7 ?/ r" c9-1 城市服务
$ G7 d" k- L1 }9 U2 k5 k9-2 菜单数据
) n2 f H, [! }, \* y" M; z5 e9-3 Geo接口实现
% ~ p) y, H/ j# r0 O+ S9-4 Search接口实现（1） J+ Q: a: X4 |9 s" F. [7 P
9-5 Search接口实现（2）$ q/ \& R! N" L2 d: U: }8 |6 S
) t: Z* n( G9 V+ N- Y第10章 切换城市页
: l4 ]/ ^4 g r) ]& Z x+ g切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
* V! \/ n9 j3 E- e" ]10-1 切换城市（1）
! p( q* B( w- g8 z; b6 L10-2 切换城市（2）6 i+ @: O- }# y% Z5 Y- `6 e. P+ x
10-3 切换城市（3）
0 E6 k6 q, W7 D/ G: w8 W% f% o+ b% e* p7 l
第11章 美团网产品列表页" a. ]# j6 q% c" k- e
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。; x7 Z$ `; Q; X6 ^$ ^( O
11-1 页面设计（1）/ o& J8 k% n; P7 x# f
11-2 页面设计（2）
$ { J0 k" F& R% n6 J11-3 地图组件开发9 |- I2 X, |) f. S8 w) i/ j
11-4 入口文件编写（1）6 a9 B4 L0 h0 g7 v% R4 Y3 Q
11-5 入口文件编写（2）! L2 i% P% a3 ~! z' S! b2 P
11-6 页面调试
2 Z% U: Y0 K* s& p6 Z, `
$ m3 g/ A% r0 g" u `0 V, Z1 y第12章 美团网产品详情页开发
/ h1 m2 D% u$ b% |: U& u$ B产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
* e2 J4 d: F9 C2 b5 j$ W p! \" r7 q$ L12-1 需求分析 试看
6 G$ J4 G ]" G( P$ `" V12-2 静态模板( K. ?7 P2 Q2 D+ O' }+ o, s. J
12-3 产品详情页入口-静态文件
7 h8 y% V9 \0 K' m4 C0 U: W: k12-4 产品详情页-接口
! t3 [& t8 a2 \* _. u, t( [7 |" b% c. W# T
第13章 购物车开发, m% J2 H* X1 @& t8 h
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定7 f9 o& R( r& C: H' `; I
13-1 购物车&订单-需求分析
- T; \" e; m2 @1 g13-2 购物车&订单-页面创建
* ]/ T& Q0 Y7 L: |) _- n13-3 购物车接口实现
; a: Y8 L% Q7 x5 V13-4 购物车调试
% b/ n6 M! R1 f3 l/ v; R$ ^6 }' G# G6 ?# U* Y. E- q
第14章 订单页开发
3 L- C5 F b% R% U+ O订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。) R* y8 V2 _0 X' r* L& ?
14-1 订单页面
0 ?$ P2 v/ X" N& Q14-2 订单接口
: J3 R$ b, u& [14-3 订单调试
( s' B8 W2 [* J6 ?% O3 ]# V
* P3 D0 D0 @+ c2 |' U6 Z9 n第15章 课程总结" p+ |2 H) T/ O! h" W/ S. I
对课程整体进行回顾与总结
, ~; [. w# P# |9 t+ v2 w15-1 课程总结: n9 z+ F" z: R0 M
$ a' Y' Y( g8 n! i: H- Z) Q* B' z( i
【下载地址】8 o) A ]' z! t& j# s9 p. r
3 ?. `: b) g+ Z2 h/ Y
6 G( H6 [$ @- X6 e! M. Y
3 F/ F; n" d- ~+ j5 l( x |
|
[复制链接]
a
