: ?: Z- z" a8 ?' V* G9 a) T
3 p" }6 |* `+ i) n* U
# ~. O* L6 N- v1 d0 B9 u. d【课程简介】
9 |+ |4 D4 Z- V1 f这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
- B& c/ x3 k3 ^4 Q$ b
( f( V. \3 h& j3 E; j. u7 l2 w! O$ F【课程目录】
$ O3 y: V: F: v- O+ @第1章 课程导学2 j, Z2 a0 n& q$ C
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
* U$ [9 u0 ?5 y8 g! u4 [1-1 课程导学 试看0 A: b" B! H. ^# u, S4 h* F1 n
2 l# B `/ N9 V9 ?. R第2章 Vue基础知识, D; D* w# M* E+ t) I
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。& U0 P# Z( }( z0 E& C
2-1 概述&脚手架
# j% s) z1 t7 N) Q' I2-2 模板语法（1）- V5 z" I: O8 s
2-3 模板语法（2）
$ P* c" ~* t1 O) S# ^' A2-4 样式与遍历6 X0 v/ N+ O; [! F
2-5 事件1 D R1 n2 N; z8 i
2-6 组件（1）
+ Y$ j8 v" O* {% k6 R' r7 m- Q2-7 组件（2）
" [ {/ e3 ]7 x+ Z( `) N2-8 路由基础 v2 O7 J$ l% J: o2 `
2-9 Vuex基础用例（1）
- J/ f- `4 H/ `4 Q" f, E2-10 Vuex基础用例（2）
7 Z& m% h* [; P# c4 ^2-11 Vuex高级用例（1）
7 d* n3 `$ z! q5 Q3 I2-12 Vuex高级用例（2）( m; K/ p6 E0 I" s* n
/ i2 T! f' S+ X$ T& p
第3章 Koa2基础知识
$ B2 _( U% C v/ Y+ E! }Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。 d+ r5 F9 ^4 W( R* |; h& o0 N
3-1 Koa-generator
* ` V8 Z* ?. {; F3 v- g3-2 Koa异步async( }7 p' _7 u9 A( s, R
3-3 Koa中间件
0 M3 ]/ ]4 k p; p# ~1 T3-4 koa路由和cookie
: I' y! K, n _7 F: Y o5 ^1 @$ B0 ~" a
第4章 Mongoose和Redis基础% R* B% q/ Z9 T( t; u) a' p
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。... F: x Q3 k* z" P; l9 ~5 v( Y" n
4-1 mongoose（1）1 S }$ z1 P3 z6 [( |8 ]
4-2 mongoose（2）8 y( ~/ e" N5 z6 h! K$ @. [ h, p. f
4-3 Redis（1）
& w" W+ |& D) {; j. J) x1 L4-4 Redis（2）& C. E9 r( R6 y1 Y
7 _# g/ J9 O; p1 C8 k# w/ n第5章 Nuxt.js基础知识
3 i2 L% Z* l0 W, ANuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...$ u+ I& N- ^% W' d, `
5-1 Nuxt.js基础（1）5 C+ s3 p0 F; J" J! u1 i
5-2 Nuxt.js基础（2）
7 K( z2 {9 D p* v- J* h" ~$ y5 L5-3 Nuxt.js基础（3）
5 A' `' v! `/ v5-4 Nuxt.js基础（4）* x" R- @2 O$ h$ b2 i3 U4 s
7 h. D' j! c! x+ g7 x& G第6章 实战准备+ D6 @8 H& d6 O0 `5 N! S! X
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
- @. ]1 p, ` u. g: D/ W( _6-1 环境准备与项目安装) A1 H [# ~9 N* n
6-2 辅助工具安装与配置改装0 b( M; Y X0 r. L% V
$ T! t- e* I- F, W* _0 t
第7章 开发美团网首页% v/ h2 M3 P% g1 ]
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
. i# c! l1 m% x& K8 f7-1 需求分析 试看2 t' j! @1 D3 N4 [% U; n `- o
7-2 首页Header开发-城市定位服务设计
+ Q4 O6 x! t! S% K5 s! G7-3 首页Header开发-头部引导导航设计
1 Q7 p5 i1 Y4 `) A7-4 首页Header开发-搜索界面设计
/ |, M* T0 b# X5 b! i A7-5 Bug修复; H( e8 I4 n( p$ f: R: b+ S' h
7-6 首页搜索
. b+ E! h0 s1 Z r- V9 x7-7 首页菜单（1）
, ?! ?& O) ~0 \! c+ I' v3 t6 H7-8 首页菜单（2）
' {( W/ a9 x$ h4 M' V/ y" w0 ~7-9 章节小结$ z. J5 d) `+ r& E
7-10 Footer补充
' m" m( q+ M, _, f
" K6 y6 L/ C7 q2 |' V. N第8章 开发美团网首页-登录注册
3 s% G- o' V- E0 T& c' n( r7 V3 j从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
9 k6 y2 Z; b% b; Q& Z9 I8-1 注册（1）: f' A3 x$ y8 I. ` Q& `
8-2 注册（2）
& z7 S9 `$ O/ d* r- W2 g8 m+ g8-3 注册（3）5 q2 i' i, z# ~& f2 f' C" y% J0 J
8-4 注册（4）+ F0 C5 s6 v/ Z2 e; y4 V0 }
8-5 注册（5） ?6 |. q" |) N
8-6 注册（6）5 e& r5 G: E9 u, z7 L- g
8-7 注册（7）; Q+ Z, G4 Z1 Q0 C1 \5 c
8-8 注册&登录（1）
* Q# A1 C; \0 G( W7 D8-9 注册&登录（2）+ J5 m% p$ s8 `# _
9 b: i) y% @' I) ?, I第9章 开发美团网首页-Search搜索
9 s; }) q' M% d# j ~( \0 n4 I只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。8 u3 P# d6 A- r4 }6 M+ X" d
9-1 城市服务1 O' y: u- l- P1 r2 h$ a
9-2 菜单数据- `2 V! v1 b5 z* O/ @6 l5 q
9-3 Geo接口实现2 k* ~! s X) Q* _
9-4 Search接口实现（1）6 b) k6 X- T' l- d( [* h9 a
9-5 Search接口实现（2）
c+ G% L8 e8 a' J3 Y* s
5 |& N# J% w! F! L+ U8 n第10章 切换城市页
' f& |$ A+ e' W. F切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。' b( C U- [6 Z7 C" a- Y) e
10-1 切换城市（1）3 z y9 z: `' V
10-2 切换城市（2）
8 a/ U ?7 ?6 I& E! V m10-3 切换城市（3）
6 \. b5 L" s K' U& Y5 o
6 u" Y& Y! r" W `5 a. I' S: z第11章 美团网产品列表页
! u% M2 Y% ^8 Q点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
2 Y# k: W) M$ |) ~% ^11-1 页面设计（1）9 `2 u3 ^ b% f7 j- l
11-2 页面设计（2）3 R- @4 E* o7 \7 e
11-3 地图组件开发) P) b$ M& d) N/ K6 r/ e' l
11-4 入口文件编写（1）* v" n. [/ u8 Q% o
11-5 入口文件编写（2）
7 R- o! G' V0 c0 b7 J11-6 页面调试
2 ^! ]/ T5 G- [" P4 G% x7 r1 i, q( U- Q7 R5 s
第12章 美团网产品详情页开发
' _3 m, p J: @/ {- N产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
) U) J) l, |5 G6 S7 `# z; [12-1 需求分析 试看
0 K1 \( x" \7 S. h12-2 静态模板$ n: E0 K0 W, Z! c( q. o. Z
12-3 产品详情页入口-静态文件
* t. Y5 N% {4 R( U1 |' @12-4 产品详情页-接口0 }& r7 }' C& E- x
6 }0 F/ W( l7 Y第13章 购物车开发
. U7 P/ N7 M/ w( t u购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定) g% O% r3 R3 J" F7 q- h; x( I
13-1 购物车&订单-需求分析
) ]" l* {% A# T/ \9 k* i! J3 G13-2 购物车&订单-页面创建& }9 q* A" L% w, M
13-3 购物车接口实现
/ ~. m# Q3 t% w/ U1 \13-4 购物车调试
, r z' @' w9 m. `) ], t3 q
, S8 g! W# e9 b5 ?! \第14章 订单页开发/ p) ^+ y( Z S0 j5 z
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
; D* R# m! y5 `* f$ R; X6 v! t! e14-1 订单页面, `1 x/ r* ~* |3 k8 d* i- ^ f
14-2 订单接口2 E$ d% P/ v- W& o2 Z8 b
14-3 订单调试
9 I, L3 x+ [& l$ U! ?( v) t K u2 L1 a" t# u% |
第15章 课程总结
% q/ @! w5 ]) u对课程整体进行回顾与总结1 K3 C8 m5 i G7 g; i
15-1 课程总结
: t, Q% Y. y) r. K+ J1 q9 W0 X& s9 P& j
【下载地址】
" ?. `- v7 a9 F6 V, H; B: U% W0 e; Q- ?8 W) m& d( K* ] d
0 \' U+ C: g: ?' l+ t5 H) Q
& C/ w. t5 m% U5 H% c |
|
[复制链接]
a
