`* u$ N% W5 }3 W8 D
; W& X5 O2 p, r# \1 Q5 l
) P+ e1 x. ^! b3 k4 E3 R# P Z【课程简介】7 F" {5 g" v; [! v5 w
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。' F' C* |) |' v- R6 w; g
d2 r8 l1 B m4 U% D
【课程目录】
4 Y: K7 A2 P" X; D2 M第1章 课程导学4 R ]# S& j& u$ J! p% y: [$ c
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等0 C8 s d! h4 \0 ^
1-1 课程导学 试看
4 o j( {8 f6 i b
: |4 G0 q6 ]# V: c8 `0 z第2章 Vue基础知识$ }& J4 J+ C$ ~% t6 n" G
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
3 z y+ Y: \% D2-1 概述&脚手架
9 s( V/ a$ x0 W/ c! j2 u/ n2-2 模板语法（1）
6 |: p9 D2 w1 w, Q2-3 模板语法（2）
6 ?* e7 L: n0 Z" q; d2-4 样式与遍历) K% ?! p) O) @2 G- n
2-5 事件
. l0 V i1 B- G/ I* \3 ]2-6 组件（1）9 O7 J+ p0 s9 h/ M9 q
2-7 组件（2）' A: `0 e: _7 M1 N+ m% g
2-8 路由基础
; g; F! _/ P& g0 A; G% _2-9 Vuex基础用例（1）* O% P7 i1 M; q: S" V
2-10 Vuex基础用例（2）6 l/ _2 J" S% @& h* g, ~/ D
2-11 Vuex高级用例（1）
" d7 m" K) W3 B. L2 t0 L2-12 Vuex高级用例（2）
/ ?# J2 O4 s+ i2 b
+ t6 C6 k9 E+ P; \" I第3章 Koa2基础知识. I& V( w, w- g+ w
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
; q2 p/ d* ?' o& K; x3-1 Koa-generator' A8 s. u! |# L% i8 O
3-2 Koa异步async
. Y8 a4 f% I/ J# ~, z9 E, O3-3 Koa中间件! Q" s4 v3 f, y: c
3-4 koa路由和cookie/ Z' j d$ m: N1 H; O4 u: Z
: N' T, e b/ O7 I第4章 Mongoose和Redis基础
& k( N. y, @" h' H! Z) _. j& Fmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
N7 D9 d! P7 S# ` D% A& X4-1 mongoose（1）8 {; w5 b5 \! w
4-2 mongoose（2）) M" o2 n: {' b, J% c, }: |' Y
4-3 Redis（1）
/ g9 Y1 o- z! f4-4 Redis（2）4 k8 |9 ^: e7 \. e* g. D1 E# ]
+ K C% b9 G9 ~2 |+ ]6 {# k5 \
第5章 Nuxt.js基础知识* A A" T) H7 q& l
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
; e& A9 j% h0 U8 b- r I3 i3 Y( V* o5-1 Nuxt.js基础（1）: E# T e4 r4 \5 f9 G
5-2 Nuxt.js基础（2）% _4 s9 H4 n$ g" L
5-3 Nuxt.js基础（3）) V3 f% I! L" I! H
5-4 Nuxt.js基础（4）
+ _3 Z1 y2 G( l$ l' n. `- W9 o: j4 t% S
第6章 实战准备, m e! G, Z( L8 a; C. `% U
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。# P: k, u- [ s6 w+ m( n% {7 ?
6-1 环境准备与项目安装3 F* R& T9 I" Z% L! a
6-2 辅助工具安装与配置改装
$ y n+ ?/ `* M2 ~3 Y
; o$ ^' _1 c! X/ Z K- W% ]- L第7章 开发美团网首页
4 P7 r- l0 {. G r7 ?7 H- ?从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
; Q8 J5 v# u; S7 W7-1 需求分析 试看
, m8 E2 B1 k! h( i4 V" \5 k7-2 首页Header开发-城市定位服务设计
( y9 B2 t# I- ^) m/ A# Q7-3 首页Header开发-头部引导导航设计, c! P9 W* X+ R6 u3 L
7-4 首页Header开发-搜索界面设计
7 M) b' n, d% w, M/ B9 P7-5 Bug修复: Z+ ^& r3 @& B8 ]7 [0 h
7-6 首页搜索2 X: P# O5 {. U! j
7-7 首页菜单（1）* G& U" O( z W& h& M
7-8 首页菜单（2）" Y$ `3 R! S/ |+ X, P0 g% _
7-9 章节小结
( x! C' y7 g" x5 ]7-10 Footer补充
- X8 V* ^, G% _6 n+ k0 h. L7 t1 X
% f; s7 j$ s( d, i7 i4 Z, l2 T第8章 开发美团网首页-登录注册; H: i! F' z7 f7 q" P( J S/ c
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
% t+ c3 w4 n# U' P( G! a6 k8-1 注册（1）
- l: w0 E2 ]& L# K- D6 {8-2 注册（2）* u& a0 U! c/ ~9 m# G" ?: i
8-3 注册（3）
" Z9 y0 |* r8 v' Z! }/ N8-4 注册（4）
) Z0 D# W: x& P k( ]8-5 注册（5）# @/ G* H7 m$ h$ b& H
8-6 注册（6）3 w( R1 v! S1 r: u
8-7 注册（7）' i$ t( p ~- i+ t
8-8 注册&登录（1）8 E7 t4 C" j1 d8 E7 z% t! b% G, p* R
8-9 注册&登录（2）
' s* Z9 Z" r5 G& o! z% E! ^ ~' A1 _. j3 o- _
第9章 开发美团网首页-Search搜索: M: f; t; p. D; m" B8 k% |4 P; P
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。1 B5 y& {6 j5 s; s& ^; B1 s- p
9-1 城市服务- N' z; I% f' X; M$ s
9-2 菜单数据/ \! o; o7 g( e# Z, A/ S- l
9-3 Geo接口实现* w0 p# D/ ~ P( n0 f: e- l
9-4 Search接口实现（1）1 g4 [4 _$ R+ k# x) b
9-5 Search接口实现（2）
( s0 ^2 D2 P5 l7 X" L( M4 N! T
9 }- n; _! u/ s0 N2 O第10章 切换城市页$ k0 q4 g6 z. {# \! p) a
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
" W* S: a2 M) p: l3 N10-1 切换城市（1）. f% E7 q) Q8 s3 {- q
10-2 切换城市（2）
. F" u8 X$ F8 m; A6 {% c10-3 切换城市（3）
8 L, P' j2 j! u/ n( z' e0 q
; c# Z. `$ Z# w, g8 M第11章 美团网产品列表页
1 n+ k2 \- Y0 W/ i% ~4 |/ q点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。, ^ {5 S- e+ R1 p9 w6 w
11-1 页面设计（1）
1 q+ u. I: A6 q3 C m+ F; S- x11-2 页面设计（2）0 E0 u( H* B$ p" N, G$ D
11-3 地图组件开发
1 P4 X+ `# \4 H+ c9 \11-4 入口文件编写（1）
) W: y7 W7 F' K+ l% Q- L8 a11-5 入口文件编写（2）
0 m' k' ?3 T; m9 S* h11-6 页面调试
9 U+ h# E2 V, q: g) e7 G4 V. @0 l" N# @/ I9 D2 T& Q: H0 {
第12章 美团网产品详情页开发3 _5 U: }( p5 i& f% D K4 x
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。. k$ ^" p" l3 c& d B
12-1 需求分析 试看
- }# [% u- O P) ?12-2 静态模板/ ]/ O3 o/ ?/ o ]$ \/ t
12-3 产品详情页入口-静态文件 e9 y. a. Z9 E X8 j! \) n
12-4 产品详情页-接口4 k, j/ f* C6 k u+ ]+ i" r' b
/ p( m: t! v& ~/ { w第13章 购物车开发" |) O" z# f% m! z
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定& ^! P2 H) {. I$ `. w
13-1 购物车&订单-需求分析
( c, k3 T# \2 N! h, O13-2 购物车&订单-页面创建0 N. e' c* U6 f3 q$ W/ i
13-3 购物车接口实现
& F7 k, [5 z7 t4 P4 b3 R13-4 购物车调试
+ m: a }3 U: }. }; s; x7 T) \+ X& Z% {' x5 R
第14章 订单页开发
9 k* \5 M+ m) u' o' ^+ L# A, @订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。- `( u5 ^3 F6 I# o
14-1 订单页面4 e1 }( O' r* A, U4 u: I7 \
14-2 订单接口/ A! ?& } x4 [" ?' k
14-3 订单调试! q' l, z8 j9 K, p
, k* [0 p9 N2 @0 Y第15章 课程总结# b& x& c* c. y, J% N! |$ i
对课程整体进行回顾与总结
( u5 P" U8 t- x: R: Y1 W: [15-1 课程总结9 y# m+ k( E5 N9 q
5 K) t' R" N- G+ A, [- V$ F. Z【下载地址】
: ~% V/ c C, `8 F9 |& S* g( o2 s* j. N' n) c
! a4 E Z7 q# y7 `: F
- j5 S) i# p3 `; W |
|
[复制链接]
a
