) M4 u& E# Y$ r+ I1 X+ Z( ~6 ?: _
@( q5 F% U. j/ r7 N* y; M: Z% o& ~* X" V3 J7 p5 E0 x* B
【课程简介】
) j+ L: {' Y4 F4 w. @0 y5 L! N7 @这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
+ d2 Q% U9 c7 c! I5 d4 \4 n% [6 s! Y7 ]8 q( ]& B$ H
【课程目录】
( p- n2 p6 N% l2 V. \! y/ I! f第1章 课程导学
# q' I" X( D6 x8 S1 j1 e7 n2 m这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等' K; R3 o" J6 I3 h/ ~ ?% b
1-1 课程导学 试看1 J. v/ U3 @7 L. e
9 e$ v7 U- k& `* {- N4 [$ R第2章 Vue基础知识
% w. s N0 [% y+ S; @0 p- n; z整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。& G& Z4 k7 J8 f" F/ [
2-1 概述&脚手架0 v1 J& y, U* Y& q( S* _6 _
2-2 模板语法（1）' i; E3 G: ^6 ^: X0 _
2-3 模板语法（2）7 J: I$ w1 [# Q: t+ ~+ {
2-4 样式与遍历
) Q( W( i; g' V2-5 事件
% }1 d1 {5 z' ^/ W9 Q1 Y2-6 组件（1）0 }/ d7 f5 W f; D
2-7 组件（2）
; l8 C) B* b+ L5 G: V9 a/ F- w0 W2-8 路由基础
9 z' h Q* g+ O$ U% o8 a2-9 Vuex基础用例（1）+ n" p, K. c! D, _$ t
2-10 Vuex基础用例（2）
! l- i0 n: q% W4 r2-11 Vuex高级用例（1）
% C6 [9 R+ x" o2 E( V% L1 h2-12 Vuex高级用例（2）! e7 x3 T$ S9 Q
9 z1 Z; j1 e5 g. ^) Q1 Z第3章 Koa2基础知识, z5 J7 F9 V K7 f) {
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。0 p; t$ J& b5 N0 x
3-1 Koa-generator% q- U- G. A0 ]5 E* b4 ^
3-2 Koa异步async% F7 b( E( Q# X1 S
3-3 Koa中间件! R) A& ^. E h0 @( ]% N
3-4 koa路由和cookie" a. _ }* z/ G- _ j# u0 H1 ^! }
8 ] W: J+ M5 i0 x2 L: b第4章 Mongoose和Redis基础; d& u% O( }7 N4 h
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...2 b0 I b2 p( o- j" l
4-1 mongoose（1）
3 k: o/ s/ L6 O1 M+ U5 u4-2 mongoose（2）1 H- q$ p- I, t% z0 ]
4-3 Redis（1）; m; t) S+ }$ }/ o
4-4 Redis（2）
( h4 J, n0 ?5 H, m! m; ?' a4 I, F+ V- C- d
第5章 Nuxt.js基础知识
; z8 T8 e1 J1 LNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...3 X( n: H1 S5 x; b9 P
5-1 Nuxt.js基础（1）3 _7 g% K7 t; K# N3 x( B: R! p$ z
5-2 Nuxt.js基础（2）. |5 O6 o1 M& k8 g, G7 R' ]" d" [
5-3 Nuxt.js基础（3）3 K/ T9 y2 R& p4 L! r6 L* m
5-4 Nuxt.js基础（4）
! V$ M' S) r1 [# N' p: q- b: @
# V' ]6 w! G* x; s! d) n第6章 实战准备. c7 K% R. o- b, }' ~6 p+ p! O5 z
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
$ ]8 j7 g, X" T6-1 环境准备与项目安装/ i1 s. B- K% F/ k
6-2 辅助工具安装与配置改装 g' ~: b/ o ^$ Z
5 M" }# a4 ~- `0 Q) o s& R第7章 开发美团网首页% g* Y/ y7 w* W# _
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。; E0 h% ]: |3 ?& n( v; v
7-1 需求分析 试看9 J! u! M6 `: m/ o+ o8 {
7-2 首页Header开发-城市定位服务设计( E: C! J! G' E* n0 p- q' k
7-3 首页Header开发-头部引导导航设计0 M+ I$ @ {8 ^) O6 D+ W- i
7-4 首页Header开发-搜索界面设计8 g/ w0 D: D9 f5 x. m
7-5 Bug修复7 A9 @" x: \! N5 y
7-6 首页搜索
" I6 ^& `3 e3 K* s( ?7-7 首页菜单（1）
f+ q+ i' M7 P* x- F4 p7-8 首页菜单（2）4 e/ Y' G6 q% u+ Y
7-9 章节小结
( n7 {" I+ a0 L8 b6 f9 c7-10 Footer补充
9 O& q7 v/ j5 n! n8 @% J4 S1 K/ G B- z5 x0 G) k
第8章 开发美团网首页-登录注册
2 j* y. m' {8 S8 n从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
+ n: Y. R* Z9 B4 A* w- u! j8-1 注册（1）2 ^5 Q( E9 M K b/ y2 \2 Z
8-2 注册（2）0 v' x' S4 g& V1 D, ?+ b! Q$ b
8-3 注册（3）) Y( c' m) E& k' O9 ]" r
8-4 注册（4）% g7 i' N: d- ?+ C7 d# p; [" |% g
8-5 注册（5）
$ T# H9 }5 ~4 }( j9 _8-6 注册（6）
+ G# [9 A; [! u/ S! K" n$ i8-7 注册（7）
) e, E/ _ N" {) E/ b# @+ x$ G: o( Z- k8-8 注册&登录（1）
, n4 N/ e+ M! C/ N& T. `8-9 注册&登录（2）
* `9 p. l+ g9 z# n, F* t
8 t! C3 I: H( |第9章 开发美团网首页-Search搜索
* c% ^% d( M) J [' |1 [7 S只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
3 B4 q" ^4 |. _; g9 B9 X; e }3 |' T9-1 城市服务# E+ n4 X) Y g" I
9-2 菜单数据
- e0 ^# H8 @! v. i/ Q) w6 a9 U9-3 Geo接口实现
6 ]; |. Y# ? G- F! K9-4 Search接口实现（1）$ e4 S+ f/ y4 C) m! v3 S
9-5 Search接口实现（2）7 q. }. S5 L G6 H6 E* O1 ~3 p
) O2 }9 _0 T+ M' q( ^/ z
第10章 切换城市页5 {# |: W% q; C2 N& m
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。5 n: x' x, z% d1 n& G* f, L
10-1 切换城市（1）
V- ^7 q) i# R: L! E( o10-2 切换城市（2）
$ X6 W2 N1 U& w, U' g10-3 切换城市（3）
; v$ L( A, v7 F7 e2 c- q
- P: r. r$ Y4 T第11章 美团网产品列表页
4 s6 H1 k7 R! c; l+ G. q. s- Y) T点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。9 H* B% Y( g5 p( E0 P% w$ }, W; p
11-1 页面设计（1）' S4 H' C! k" m
11-2 页面设计（2）+ W9 Z# k) b) h/ U9 ?
11-3 地图组件开发' u2 F- L& {. @
11-4 入口文件编写（1）
8 I. s' h6 D& C( g) V2 C$ t11-5 入口文件编写（2）- n) l/ x d# P: j; g
11-6 页面调试
. y a6 X, O9 H& ~2 r) n5 S" j" d @ k0 D* v7 W
第12章 美团网产品详情页开发/ A) g+ u5 n! {* C
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
' ]; R( O5 c8 g8 T* j* n* O12-1 需求分析 试看
+ B# S- I& Y; n; k/ A. E12-2 静态模板1 ?8 t4 [9 J0 `4 A9 d
12-3 产品详情页入口-静态文件4 ~- j0 m+ w* p0 f
12-4 产品详情页-接口( x, a2 y U k$ t- }8 l7 B9 A0 G, l
) T) G& o! q2 \第13章 购物车开发
. V# V, }/ E$ q; ]% W$ \购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
& M6 n; d2 ?+ h$ T# i7 O, v13-1 购物车&订单-需求分析
2 @! @5 ^( ~' @ o) O' c* D13-2 购物车&订单-页面创建1 K' e0 B6 G& Q" ]% W: Z1 f; z, T1 G
13-3 购物车接口实现
' N% Y; Q0 v( I13-4 购物车调试
: Z1 A1 ?% h0 F, n, U) C% b
; w. [9 n- q2 \/ x第14章 订单页开发3 K% y% a- `0 ^
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。; t* S( t4 M _- U! v
14-1 订单页面$ o8 @! s( \5 E6 B8 h- X# I# M4 X
14-2 订单接口/ g& h9 c6 ^( ?1 _5 U
14-3 订单调试9 M% M$ C3 o, c3 z/ L. d6 C
( |3 u {6 [! R- c6 ]0 w, S
第15章 课程总结0 v! `; u# ^7 Y2 t
对课程整体进行回顾与总结; x% K; x% b+ y- ]% s
15-1 课程总结
0 U, V% G; {* V: j
1 O: M- A/ L1 J5 l- ^【下载地址】
?: F. R: H- m" v- ?
! r! p# W: k% B9 f, ^: s- Z) f) |' D3 q( ^8 A
0 V2 t9 O* _3 M0 e3 n" @: @ {6 q |
|
[复制链接]
a
