|# Z$ f6 f/ r6 m
& \8 c f [6 l" M/ j
4 M# A$ q; c: \0 G【课程简介】' @4 m% @' X. `' E4 m# i: U
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
# L* a+ a" [) U- K; ?
; U! c1 E# z" I' A0 g* g" s: ]2 t【课程目录】
2 f. G% g, ]6 s3 p第1章 课程导学2 ]7 K5 y" T& ~2 U
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
4 w; X. S4 z7 _, }5 y. W( Z8 A1-1 课程导学 试看, U+ C7 H3 N! Z7 A: A
, {- ^: h9 E; x7 e; s0 I. g. N. O$ `第2章 Vue基础知识
, E" W$ Y2 r) z7 r- I整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。7 W! h3 n/ ]; b- i& V. [; r
2-1 概述&脚手架$ K3 F% \- z+ p2 Y, q2 ?- Y2 ^, B. \
2-2 模板语法（1）
) G, ]7 {1 p9 i. J8 {2-3 模板语法（2）
3 t6 t3 _ K! Z" [2-4 样式与遍历, s. @6 @3 M! z W1 |
2-5 事件
: H! A" _$ C+ J# v2-6 组件（1）; R9 ]$ u' M8 p( G- H2 {
2-7 组件（2）
7 a7 |1 R: \8 A J2-8 路由基础1 m# Y9 P! q3 Q
2-9 Vuex基础用例（1）
9 L' c, T [+ |2-10 Vuex基础用例（2）% H9 k8 }! B) w! x6 v2 _
2-11 Vuex高级用例（1）
% D T' p1 n r0 ]" _2-12 Vuex高级用例（2）& o1 n$ W7 g! u Q. u
- V9 A4 R1 ?' [5 x第3章 Koa2基础知识' b. q7 r7 `* V1 ~' a, p2 P7 f# W
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
5 d% v- v$ T9 _( _* s. a* l2 s- `3-1 Koa-generator
2 z0 a2 v! B5 n2 j% c: J- ?3-2 Koa异步async1 x d8 H! j9 V. o! c2 m) |4 ~
3-3 Koa中间件
/ z" I2 K7 O r3-4 koa路由和cookie+ l T4 a, X# l c/ }& X
+ j/ O6 y% n, A! P" G; [ Z9 ]第4章 Mongoose和Redis基础) K) C) ]: P- S% H
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...* Z5 {9 t' d/ M6 z
4-1 mongoose（1）3 n4 a+ {: W2 s- o4 t- u
4-2 mongoose（2）. X1 E+ `+ d$ P
4-3 Redis（1）( @2 M2 W3 N7 P: k" W( f$ Z* z, l
4-4 Redis（2）
% u# A9 U5 n" v/ o4 ] c3 r7 k
$ I' Z* B; B8 z$ g第5章 Nuxt.js基础知识
+ K3 O' o6 w6 L% U: iNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...( i; L, h* {9 `( ~2 |' R' s
5-1 Nuxt.js基础（1）
# w3 T+ ?# m; X; d# P% w) p3 {5 h5-2 Nuxt.js基础（2）
8 ?. P( H6 \) R! q! B5-3 Nuxt.js基础（3）
9 z0 u/ a( i) V* h/ J/ ]5 H. J+ P: |5-4 Nuxt.js基础（4）
7 Y- k$ S) t7 z7 C: V3 n) _0 E. {9 M& ?% w2 q
第6章 实战准备
2 u. ?$ c" r/ o Q1 h2 a8 j工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
. S% [, h/ r o+ x6 ~5 Z- v: v# C6-1 环境准备与项目安装
- q/ ]/ c ?* _$ z8 X2 @" y6-2 辅助工具安装与配置改装1 u1 e. U# Y$ ]/ u T {4 A! q8 m
0 _5 k- m5 o7 J, K* H
第7章 开发美团网首页
1 J1 z; R" f" M6 Q# T从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。5 d3 g4 D" _2 `$ p" p4 n D
7-1 需求分析 试看
$ b5 m( n- \' R5 a- x7-2 首页Header开发-城市定位服务设计, Z2 |; l; y; M3 [- C; |2 b
7-3 首页Header开发-头部引导导航设计
7 v2 S g& W8 C) t+ N4 D7-4 首页Header开发-搜索界面设计
0 F2 h& Z3 l8 O- e0 F* X& t g7-5 Bug修复! G0 y' d; c1 q0 j- i3 c
7-6 首页搜索
; k2 Q4 r1 z3 t7-7 首页菜单（1）
2 j, \) k5 x; `7-8 首页菜单（2）6 p! b. \+ Q! _: N! o; O) W9 B) P b" \+ s
7-9 章节小结$ K( V1 ^4 |- Y0 P% k6 H
7-10 Footer补充* P2 M0 H5 B8 P% Z2 f8 ^: G5 r
- D! Q$ a& T- E6 K, k
第8章 开发美团网首页-登录注册
+ }$ I" Q' \4 \1 x: t5 @4 q从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
! o$ G7 g4 D- C2 }8-1 注册（1）) i, A3 s$ B% y( ?) ]" c) d8 p
8-2 注册（2）
/ H! T; b1 n0 b7 V0 E8-3 注册（3）$ d' d3 U4 k3 `/ n6 \6 @. u3 c
8-4 注册（4）. i: t7 ~) j" t
8-5 注册（5）$ L+ B5 C+ y/ b U1 N* M, I
8-6 注册（6）2 e9 l; X4 X. V: t
8-7 注册（7）
( l/ r6 J4 f: E. x. c8-8 注册&登录（1）' B+ J& J. Q9 U- j1 u, ~3 I( M
8-9 注册&登录（2） T2 V' o8 c0 e/ [8 Y
$ f2 ^+ e' {+ w9 N' v! B第9章 开发美团网首页-Search搜索
6 _! R9 [) n9 e3 p+ B% t6 ?- Y9 ~只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
7 P/ I+ _$ _+ Z5 S+ `9-1 城市服务4 h/ }+ o6 i* p1 z n2 L8 q. Y/ h
9-2 菜单数据
+ F6 B8 g1 l' D4 j6 }9-3 Geo接口实现* Q1 ^* G$ o/ M* J
9-4 Search接口实现（1）8 z" m0 ^; }# J- {* {( {$ \/ U
9-5 Search接口实现（2）
* z( B1 L0 R3 \ }7 |
, u4 q" Z, \' ~8 v4 I+ R/ [8 r第10章 切换城市页, T; S" s8 C0 Q9 G% M! @! L
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。- x3 y5 }6 G% o1 s" v
10-1 切换城市（1）9 J* V* U; f+ Y+ E6 y
10-2 切换城市（2）+ V1 ?/ f/ c. A1 _; M1 I$ v4 P
10-3 切换城市（3）
# z7 h' G3 h+ W# K) C1 \: C/ N9 P
第11章 美团网产品列表页 g v$ w0 X3 K- r
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。' c6 n% Y) h1 H. S! H
11-1 页面设计（1）- `. z) [; B# l( C) Z1 k& m
11-2 页面设计（2）# ?. @* C% h+ z" n6 x6 a
11-3 地图组件开发
6 x3 @; `/ N" H. C. y11-4 入口文件编写（1） S- K w/ K7 J/ {
11-5 入口文件编写（2）
1 H& A3 `- N- j3 U$ ^% s h; R- Y11-6 页面调试
5 ]* L) \6 L2 H2 d- o1 E. h. n F. z( v4 h
第12章 美团网产品详情页开发1 f! F3 i2 e# @# f' S4 \/ w
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。( u$ [) l+ |( W2 t5 h
12-1 需求分析 试看7 [; _! o* }* Z
12-2 静态模板/ i* q/ T$ Z0 _5 ?( `
12-3 产品详情页入口-静态文件
7 W! W- Z* f i6 s1 i12-4 产品详情页-接口
0 c) }5 T5 L7 i* Q# m o& T
+ Y: I! g" V8 M5 a第13章 购物车开发
' i" X0 M. |5 j9 U z: L1 b! L4 G购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
1 S& k7 \, c5 \13-1 购物车&订单-需求分析
1 {. I( G0 f! k5 `13-2 购物车&订单-页面创建/ O" W4 p, m5 e
13-3 购物车接口实现" j; d5 T, ^8 _8 R, m0 |) A I
13-4 购物车调试: L) z6 {4 r g2 L& ~3 K' E2 J
' L5 q3 d0 ^, q* F第14章 订单页开发( P9 P) D: j0 W& w
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
( m6 f' A( C+ U) d: b14-1 订单页面4 L( g, @6 h+ H, t' L6 Q+ j( G
14-2 订单接口3 H2 Z8 w! p2 g; L7 L# O6 s
14-3 订单调试
* q9 o8 J1 `$ e" A' B- r2 r& H9 O# x" ~2 l( G H# C9 t, B/ e$ G; l9 v
第15章 课程总结5 j7 I: [. {1 q1 g5 E2 D* ]& n
对课程整体进行回顾与总结) S$ N) E8 p8 ]1 @( H
15-1 课程总结
, ` y/ F; a( U2 [! n0 z) r) d, U D: G* D8 q
【下载地址】
( H" ?7 t2 |0 ?' G5 U l
+ u. C" p% ^: q3 w/ p2 @8 Y
3 Z) C$ \# B' f6 H5 J/ j
! i0 m$ q( N) q/ T |
|
[复制链接]
a
