. @9 |" [" H0 s3 ^7 q+ r/ Q4 l6 P; l4 m
+ f6 B; M# I! F2 u
【课程简介】
+ ~( d! [7 G/ I: u- x这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。, |) y7 X% v# a( b# c0 }
% @' P) i9 j+ F' q
【课程目录】$ [( H7 B7 {0 M0 p/ [: F) \# e% t
第1章 课程导学
, X8 a6 t% x3 a8 ^这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
5 f; B9 o: j; t) s: e1-1 课程导学 试看! E7 r' a6 u& X
0 I1 \+ O* w. v$ \/ ~% Z/ z" c- b
第2章 Vue基础知识
2 Q- y9 X0 m$ N: h0 `4 a整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。 d( g* j( j7 n7 W3 U
2-1 概述&脚手架
$ F5 |3 `) J( [( y8 ? M2-2 模板语法（1）$ x* h7 P' O' b
2-3 模板语法（2）
- ^- K/ o. q& N* G2-4 样式与遍历4 k# l1 x& g7 n/ b
2-5 事件) R$ P6 g! R' Z4 e/ E+ J
2-6 组件（1）
# Y( [* T( \% l. d% C# B& n$ _, k+ j# a2-7 组件（2）
# _9 _# x; v! t: x2-8 路由基础
- X" T( Y2 o% C* X! X, ^# u3 @2-9 Vuex基础用例（1）; `5 _& V# }; k( o
2-10 Vuex基础用例（2）( {- O) L5 |7 j y2 F) p9 \# h% e
2-11 Vuex高级用例（1）- c- V4 O8 {& ? Q8 H+ H
2-12 Vuex高级用例（2）
. ]- ~* j% N- a, U0 o4 j0 D" U& n0 r3 L* ?3 U. T
第3章 Koa2基础知识
' Y$ A$ t5 t3 k+ ]Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
1 H/ T: i8 }9 W3-1 Koa-generator
$ Z, \6 _; d. ?6 `8 R3-2 Koa异步async
# j- g- {8 O& H9 m% ]6 M" U3-3 Koa中间件' n3 S( U; h# F+ \
3-4 koa路由和cookie
9 V7 d4 {3 i8 k7 j4 L, O5 a7 W! n. L% S3 p2 }8 m- i) |3 }
第4章 Mongoose和Redis基础$ d0 q0 ] F3 S) V5 L" d: |: s
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
- y7 j' J: f7 U- {1 R4-1 mongoose（1）0 Y# m- H0 n8 k+ t) E$ M3 g
4-2 mongoose（2）
1 @) y' v- g; o7 \7 q& B( g4-3 Redis（1）
$ ^/ e0 W0 O8 M" v- K+ O0 o- t4-4 Redis（2）, g& ^# |! t* t* B" D6 z6 P& R9 v h6 F
2 x* L* G0 j0 E0 U3 @第5章 Nuxt.js基础知识
4 i0 o4 Z# C% C3 ^7 Q" GNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。.../ ]- s. J, b3 W; Q! U
5-1 Nuxt.js基础（1）
5 M7 U5 H/ W3 G! E+ W- L5-2 Nuxt.js基础（2）
. U/ R4 i- p3 Y* |) D0 h, P" C5-3 Nuxt.js基础（3）
4 t% a) Q! Z" f, w5 n5-4 Nuxt.js基础（4）4 u @" d1 y$ w
( M" O% v+ `% g* }* m% L* R* @第6章 实战准备
, N: k& i7 l2 M工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
4 x- \$ n/ @. U. D8 o8 k' W$ c6-1 环境准备与项目安装! S: }3 f/ u8 N, M
6-2 辅助工具安装与配置改装
. x: i8 O( l, p! Y) Q) n5 v: V( B
; a# [& v$ y. s2 K9 h! y! t第7章 开发美团网首页
/ k4 \5 |3 `" y2 N: t8 l从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
6 Y9 b- i% x5 P( i% O( {# }7-1 需求分析 试看
& z; i" e$ t" B; `: J7-2 首页Header开发-城市定位服务设计- o3 A) e% s$ N' s
7-3 首页Header开发-头部引导导航设计
( h6 Z, \" j2 C: z7-4 首页Header开发-搜索界面设计' V4 O4 y! `" N" v5 i1 N
7-5 Bug修复8 `4 {: k' g' ?# w7 [5 Z
7-6 首页搜索+ p5 U* ~: {$ W2 ?
7-7 首页菜单（1）1 @& R* U( ^0 s+ k8 v! `
7-8 首页菜单（2）
) n* H8 d a5 ^# T7-9 章节小结
) Y% y# J; `5 b) D9 n7-10 Footer补充
, q: h! ~* G% B3 C6 p. [0 D! A9 j7 _
$ P$ }. c: }/ d$ Q. o! x: K第8章 开发美团网首页-登录注册
N4 m2 I0 F2 ~& K( H. E从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全% X+ u+ K5 o# `. d8 D! h7 z. x
8-1 注册（1）5 y) C. ^7 y* D
8-2 注册（2）3 I8 m' }* _2 Q
8-3 注册（3）
. K1 E' m( _, }4 k( d/ y8-4 注册（4）
, n" X) e" J) F9 n- {8-5 注册（5）8 `/ X. T( }! p$ d- s7 h. y/ n
8-6 注册（6）8 H9 Z" ?; b; c: E. w" C5 n
8-7 注册（7）
2 e$ D9 c2 c4 W% R% ]7 F& T; s8-8 注册&登录（1）" U4 I" R+ [! c; k9 ?. {' u4 x
8-9 注册&登录（2）+ x4 E3 R! ]- l: d/ N
, A, d% ]; y7 O4 ~4 O第9章 开发美团网首页-Search搜索
N; b3 d( q6 L/ i8 d只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。3 A& W! \ {. I5 A1 `, E( ~2 U
9-1 城市服务. O! }3 b$ U. X9 ~; k
9-2 菜单数据
* G' m5 K) @. L, o9-3 Geo接口实现7 W9 l# {7 C) M. v
9-4 Search接口实现（1）# |" p4 l. {1 @* e' W# K
9-5 Search接口实现（2）
- _3 [2 g* G/ ?( m% G) l6 x4 Z9 Y: p+ c& z9 l+ \6 W
第10章 切换城市页
1 a7 y) d5 X. {7 j, k e X切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。) x( \' W4 X; K9 \* ?% @. Z
10-1 切换城市（1）
6 c- q) I1 r% D; k10-2 切换城市（2）
' T' h8 t- D& G0 O3 x% U/ U10-3 切换城市（3）8 r, U4 @7 n7 N
) l* X' A0 N0 m% z; O; }, T
第11章 美团网产品列表页
5 ]1 L* N& g. _) v1 C4 F5 u点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
% C. `% C4 z, G11-1 页面设计（1）. D8 |/ }6 a( z0 b7 Z
11-2 页面设计（2）0 i- t. H( _, l6 y' h. R
11-3 地图组件开发
! W! h% q1 U% C# J5 U. w0 `3 V11-4 入口文件编写（1）
$ Q: a4 P, D3 V j11-5 入口文件编写（2）
9 v- w% K. C$ @; A11-6 页面调试 u7 u; G6 B p+ S. S# j# P
; A5 S5 n7 i f P8 E0 y第12章 美团网产品详情页开发
+ h5 Z: V7 }2 H( K产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。) K. ?3 q4 F# Q% }% G2 y
12-1 需求分析 试看
2 Z, [* }8 A' H% k+ S12-2 静态模板, S# R9 N) d" ~9 k* B- C" G+ T8 _
12-3 产品详情页入口-静态文件
; N& `/ @) D9 Q$ n12-4 产品详情页-接口2 ?) d _+ c! ^6 v3 X
2 n- c- b1 F `0 I& @第13章 购物车开发& W& c# g% D6 Q' w# D% s1 F) U
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定# n& A% t8 ?" m3 W4 Y, y& L( B
13-1 购物车&订单-需求分析
: y! f8 G! O1 }; Y' X! f& k' W13-2 购物车&订单-页面创建0 |" c5 e7 S. ?9 g4 E
13-3 购物车接口实现
4 s# K) @/ D' l$ C! z J4 q13-4 购物车调试
0 w) J5 r" Q- o4 r( k
3 H- t7 O1 | r9 s# b第14章 订单页开发
& S" N4 d- [- W: E# g4 {订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。" G' I+ F9 h0 _6 x$ ?& D
14-1 订单页面
* o, |+ j, P. q$ I- K4 `9 f0 w14-2 订单接口
# N( }$ h# Q$ E1 o! l/ j- m: W14-3 订单调试
$ A; ]4 z% ~. Z+ Q$ j) \
r2 a6 k8 z* }. l# e第15章 课程总结# W5 _& ^$ s% |( ~9 V
对课程整体进行回顾与总结1 n1 g' ?/ _* i8 P2 h
15-1 课程总结) x2 ], a9 C( Y7 \
* D: _0 I! G/ E0 e$ h4 n! z: m& n
【下载地址】/ s6 V% k# K8 u5 o7 H$ ~
# @1 a% k ?7 f ~( V# c, I6 j: s
9 C0 ^/ [8 O, {+ t
|
|
[复制链接]
a
