+ v' O9 m6 A( _% I. P2 Q
4 c, l$ ?1 X, M8 a: l. o9 ]' ^$ Y$ _5 K, }! L2 O, j
【课程简介】( g# H! R: l+ X; q
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
& f; M1 E7 O' A* g- W
: T$ U2 ]* b2 C) k, W8 i【课程目录】
/ ]6 T( l% f2 W+ L第1章 课程导学8 X, K [2 l* v% u. e
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等# h7 d! Z$ A5 T/ t2 x
1-1 课程导学 试看
6 I5 a* O1 g: ^3 _
. o: l% L# V9 ]第2章 Vue基础知识3 x5 r5 \) L+ Z! k3 R" J
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。' \; ]* R7 S9 j# g& T
2-1 概述&脚手架2 z- N1 t. {9 I5 P3 |' J. B4 T
2-2 模板语法（1）
* e0 \# z& q7 e; T) E$ B! y2-3 模板语法（2）
: N# p8 v& o |! W: T4 b1 p2-4 样式与遍历0 P/ J2 j/ V* X9 h* z7 U9 W8 i3 M
2-5 事件
6 ]2 L2 g" |0 R9 n+ P# I8 a2-6 组件（1）5 x8 b; D, @, d8 n% U7 W5 `! ?
2-7 组件（2） r3 Z/ ^, o9 H& [
2-8 路由基础
0 O3 V+ L7 N3 o# g( c% @" }1 q4 S2-9 Vuex基础用例（1）3 Y. N/ W8 O6 A& C
2-10 Vuex基础用例（2）) \' k. Y5 |+ s/ d3 E2 ?
2-11 Vuex高级用例（1）
3 g" U! ^! T4 z9 p8 l% O- v6 ^2-12 Vuex高级用例（2）
) R+ I5 Z0 F! U4 M0 T
2 C \0 m! k1 r' Y( n- f9 w! q第3章 Koa2基础知识
7 v9 O! T$ `- }, A! YNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
" k4 V3 u' \/ {; m- ~8 y3-1 Koa-generator @, i, w3 I6 Y% {7 H( h
3-2 Koa异步async
# {9 M1 U: M" e3-3 Koa中间件1 {! P+ @* u4 H
3-4 koa路由和cookie# ~9 @& D" V6 Y3 g4 J+ T s9 g
# M( N9 u! @) }( v
第4章 Mongoose和Redis基础" V& j5 W3 P8 K/ @: V
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...! \6 m9 Y. T' e
4-1 mongoose（1）
0 e/ G0 Y P; {" M6 s4-2 mongoose（2）1 r8 q) O2 m6 O+ b2 b0 a$ q
4-3 Redis（1）
x; h0 s' q/ F9 v8 _4-4 Redis（2）
% Y$ M3 Z1 S" {3 N J( n: l3 }
第5章 Nuxt.js基础知识
# M7 w* T5 p6 F B9 y2 K# pNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...$ u4 x9 p; p/ Y% I2 c6 M
5-1 Nuxt.js基础（1）; V& P& ^$ n" `1 E
5-2 Nuxt.js基础（2）9 q7 m* v. I; t
5-3 Nuxt.js基础（3）
# k. }. u Q v7 a% P& x- D8 Y5 ]5-4 Nuxt.js基础（4）
2 A* H/ f1 F/ f( m) \' ?0 @# D6 c+ b: `: u( d) B( C
第6章 实战准备- L- _7 R; m+ g4 C$ M X% C3 N
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
( K& P _/ v) |% W6-1 环境准备与项目安装
4 n5 v L1 n1 M6-2 辅助工具安装与配置改装
) q, }, S# g1 d9 @$ h5 Y i+ o4 Y- h) q/ A J) o, w( b/ @
第7章 开发美团网首页
! H s8 P3 j3 }0 D7 T( Y从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。& f" H2 H; n' q: ^
7-1 需求分析 试看0 P8 t3 @1 k9 r4 |% w5 z$ A
7-2 首页Header开发-城市定位服务设计
6 I1 y0 }7 f0 T' j6 b1 }7-3 首页Header开发-头部引导导航设计+ `" }7 E0 E* a5 {. M
7-4 首页Header开发-搜索界面设计
0 D! j5 C/ ?# L2 ?- A2 y* ]6 x1 b7-5 Bug修复* |, M8 w: A2 O( Q
7-6 首页搜索 c) _. e8 B, O1 c
7-7 首页菜单（1）' I) @ r3 I4 {( p+ I0 P
7-8 首页菜单（2）. }* Y' T+ [2 X, r& f$ a5 r
7-9 章节小结4 Z1 E, }( w9 I3 U
7-10 Footer补充$ l# a- W3 A. g3 Y( a
6 I8 j J& q: V X7 k9 X第8章 开发美团网首页-登录注册
( ^3 w; t& M1 T6 y4 t- Z5 C从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全5 ~4 f: t4 {' L# J4 d8 m
8-1 注册（1）
) O6 f2 ?' H7 N2 [5 X8-2 注册（2）
/ @; r( M' Z! C8-3 注册（3）
: t; w- U( q, Z3 j: i2 `! |8-4 注册（4）
7 c. x, P: M( N" N8-5 注册（5）( Y9 {+ E* k- C: s
8-6 注册（6）
) `$ X0 V; q, k' h8 C- `3 q* c0 @8-7 注册（7）
' A+ D7 |9 M6 d4 {( r- |% @ S8-8 注册&登录（1）) I. V: o$ W+ l: b
8-9 注册&登录（2）
7 I5 C: i; Z" f! Z6 {5 Z$ D0 @- k& N
第9章 开发美团网首页-Search搜索8 r- ~( Q, h/ b3 ]# x; }8 N" l- E
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
0 F8 ?6 V$ m3 i- G; e6 [9-1 城市服务, M4 q6 d4 n4 u+ ~- F; \; t" u
9-2 菜单数据
0 C& \& G) B8 k9-3 Geo接口实现
, B. z" {) W3 V9-4 Search接口实现（1）
5 l1 T# v! P m, \9 E& g; V: P9-5 Search接口实现（2）% P# i9 q' n' d- H
, R) J- F' Q7 q
第10章 切换城市页5 _$ e; U9 t6 D# z1 ]; ^) O
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
0 {4 d; o9 }# `: o5 E y; k10-1 切换城市（1）6 r* e7 D9 }: M5 x6 N1 G; A y, ^
10-2 切换城市（2）4 X' c/ f3 h1 i% n" X: G' x, P
10-3 切换城市（3）
4 G' ?. A$ `. P, h( G; H; `% U
( Q: h2 j6 x- @5 B Z! q# ?3 V1 d第11章 美团网产品列表页
" z. g+ i- P" o5 H8 l点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。1 m1 m" Q; l4 q1 z; T5 j
11-1 页面设计（1）' J) M; E5 Y/ B
11-2 页面设计（2）
" j9 @: U4 L% n7 w11-3 地图组件开发
- |9 `! U! C5 j6 H11-4 入口文件编写（1）$ h% x( i" i# j
11-5 入口文件编写（2）
, K* R+ N/ G* b, {11-6 页面调试
c% |1 W3 _) G$ q" J" {6 B6 D) m# ^) @+ g; l9 r& Z- {
第12章 美团网产品详情页开发( l( A- u) s% y; o* R2 t% v
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。& [8 x% N1 o3 `8 T
12-1 需求分析 试看! h& S9 f% A9 d* K
12-2 静态模板. h h4 B6 j! d) F
12-3 产品详情页入口-静态文件
7 F9 r! N1 h( {2 \7 }. S, r% C12-4 产品详情页-接口1 F% l v" K; v4 ^- A
) j( i9 ]3 o E9 E第13章 购物车开发
% C( |! b8 }; d4 u5 J [购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
" y* ]' Y1 i/ V" ^/ \13-1 购物车&订单-需求分析 e' K5 r1 h2 x, V( ^# \4 d% r
13-2 购物车&订单-页面创建$ F0 F0 t m" O6 }! H- t
13-3 购物车接口实现
7 [1 ^( n2 Z/ L9 N! a13-4 购物车调试
Z( F4 `% U4 e( C) N# A: H* W* S" f
第14章 订单页开发' E" {/ D% c7 W! E: ?
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。1 o8 E, f+ t% R: y+ ?8 {1 u
14-1 订单页面
; J0 u9 `" f* A$ R+ [' q, f5 ]14-2 订单接口: M9 V- P+ i x; u) B
14-3 订单调试
$ n7 ^# r2 V$ b5 `7 X& X3 T, u( O6 q% I7 v* R
第15章 课程总结
+ k8 _% v: K, g+ x& `- e- f对课程整体进行回顾与总结+ s( n& ]' _& L$ E/ c: q
15-1 课程总结
+ Y) \5 P9 Y$ m( F1 _7 r1 Y% ]) C/ f! h/ |# I3 ^
【下载地址】
Z* K; G: Q; r$ T4 T: O3 Q8 v
0 G$ v. \8 {0 P4 m) G$ n! H0 Q' M4 p, G! o
4 S( W2 X% N/ c- R$ U |
|
[复制链接]
a
