3 c, L4 o9 s" @0 r4 K2 k# E; T! w6 F0 u) R' y, c9 b2 ]
" F5 f6 f1 l5 X0 A% E7 H【课程简介】5 ?) p0 u' E8 b0 a
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。; V& g. d4 g0 Y. A1 l; i6 k
: W2 x$ n0 F, B
【课程目录】
; @: K+ o, Y% f9 E) w$ @- X" m第1章 课程导学
/ B. v& |, t: _( I这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等: Q- o$ w& h5 Y# x" v9 X
1-1 课程导学 试看
9 c& t v) N+ I! r5 T9 h, h0 W
4 Q+ v" Q0 F9 d$ ]8 ]第2章 Vue基础知识
1 B3 K# @- u# u9 [& o* Z, i& z5 L- ^整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。% u0 y9 F. p6 C! E. k; Y$ s
2-1 概述&脚手架
/ P1 R# _0 s. j% c: W7 B2-2 模板语法（1）
8 d- J( G; ~3 w2-3 模板语法（2）
$ r: M$ |' ]4 v* p F+ ?2-4 样式与遍历1 X5 @6 H* V5 I* y
2-5 事件* V3 @# O. O% `$ }7 z, z
2-6 组件（1）
# @. \# {; V, ?4 a f/ b" p4 u2-7 组件（2）
3 R. }+ x# L. s( O1 c2-8 路由基础 @! J4 G/ V. p- k
2-9 Vuex基础用例（1）6 X( j3 ?8 ?2 P
2-10 Vuex基础用例（2）1 q& q( K$ B6 D& k- {5 d% F' v
2-11 Vuex高级用例（1）9 i4 m& v9 ~- ^3 ]7 c; ?, n8 e+ k
2-12 Vuex高级用例（2）# q+ w% R) N/ K! p( \- O, g6 L
0 m' ?1 X7 S- o$ T第3章 Koa2基础知识, O, c, c, t* z. T4 S
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。 F' z4 ]; P9 w7 l
3-1 Koa-generator% J4 R4 q- a. c7 M$ @
3-2 Koa异步async
4 x: c; ]" ^8 f4 K* x7 o2 ~3-3 Koa中间件4 h. A$ s# F( C0 e. N, o
3-4 koa路由和cookie
' h( a5 u W5 r5 t! ]' m" |
8 l+ Q, ~& @3 t第4章 Mongoose和Redis基础) ]8 |0 Q% Q Y. |( W+ s
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...- S( p6 W/ m' H9 n
4-1 mongoose（1）/ t; Q7 X* i7 t4 K' x5 i" s& u' u& S/ O
4-2 mongoose（2）8 c8 l3 e: J9 {) f; R
4-3 Redis（1）
1 N( T' L }- ~: [/ Z, O4-4 Redis（2）
) e& Z( g3 z ?+ r/ F$ `0 w
3 o) f q; u* C5 h第5章 Nuxt.js基础知识
! y" w6 y. b2 KNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
+ b- j* T* e. X7 W5-1 Nuxt.js基础（1）
7 k h! ]/ W4 K" k5-2 Nuxt.js基础（2）; h+ b; E0 \" Z& i# ~
5-3 Nuxt.js基础（3）) f: i/ N6 b' S) G# m& r
5-4 Nuxt.js基础（4）
8 {8 u2 j. I* X1 o- ?: Q3 }# N* ?8 L
第6章 实战准备8 R* {2 i" U/ T- [1 H
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。% u G7 p4 F8 S" l* F- i! K0 L$ a! i
6-1 环境准备与项目安装
: z5 \* W' G- l5 x- I+ o9 Q5 {# e6-2 辅助工具安装与配置改装8 A2 V/ \1 d) w7 B: N5 f4 u
( T. B4 o- `) ]! Q' R
第7章 开发美团网首页
- B) O, f. _. g$ r* V: a4 \从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。7 a# T" o5 L$ [' v2 _8 `: z
7-1 需求分析 试看. {/ L' ~6 k" O
7-2 首页Header开发-城市定位服务设计
4 M+ q5 g) P! \- |* N7-3 首页Header开发-头部引导导航设计% @7 h% x J0 v6 X" D: j' Q% d
7-4 首页Header开发-搜索界面设计% {0 E2 s9 q) `1 S4 [3 W
7-5 Bug修复
( K) T% _& A3 |7-6 首页搜索
& W- c8 K; y5 G8 B7-7 首页菜单（1）# n% d6 O7 \1 j Z" Q0 C: }
7-8 首页菜单（2）) a4 S3 |4 J( R4 y
7-9 章节小结6 u' |0 Z- {7 |* y. x7 [
7-10 Footer补充 a4 x4 {' t z/ _8 a4 e
+ D2 f1 B" J4 F1 W* X- c' S7 O; r第8章 开发美团网首页-登录注册
6 R6 @ y# @+ Y" U从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
$ P& N9 l) J/ s2 i8-1 注册（1）4 f: c. F* ~7 B& N; ^" N
8-2 注册（2）
, ^1 n, ^$ o; v: N8 I8-3 注册（3）
) r l& e$ }. h4 Y% ?/ U8-4 注册（4）; U5 N9 P" q$ I* F9 o( t& v7 |
8-5 注册（5）
2 `" F2 M: B; Y8-6 注册（6）) t$ Z$ |1 w! T
8-7 注册（7）
" W9 \, Y+ D* e4 e% f8-8 注册&登录（1）
& ^# Q7 ?6 ]# C+ B' U8-9 注册&登录（2）' G/ E9 ^: p# c7 }% V' H
" q" a- Y! k% R, }: Q+ M
第9章 开发美团网首页-Search搜索
# x+ ]6 D P% u& E. D9 a只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。$ B n. L( x' {1 K
9-1 城市服务4 F; `8 f0 l6 P
9-2 菜单数据
6 A( {/ H! i$ p& R9-3 Geo接口实现
5 M3 ^ d6 h7 }$ N- j& [4 J9-4 Search接口实现（1）
8 i) ^) D( v% R. d9-5 Search接口实现（2）
{0 _* g, s/ \" r. U u8 Q$ E- e4 E( y0 O; ~ _: \; o
第10章 切换城市页
% r) l" s6 G4 l y% q& E' r切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
, D* a: Q2 ~- G l; J10-1 切换城市（1）4 q% S N5 R% f7 E! `3 X
10-2 切换城市（2）
- @+ p @' O4 {) `10-3 切换城市（3）% o8 p \1 Y' w- e
6 x- X" R3 H) G _7 r
第11章 美团网产品列表页, |) \3 I a" ^
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。8 Y; c( p- V+ O- L
11-1 页面设计（1）
3 S5 A9 `' ~9 {$ k11-2 页面设计（2）
9 L' |6 w+ r3 t, B [5 R: z11-3 地图组件开发. O7 N2 b# `. v
11-4 入口文件编写（1）- j$ a3 Q/ D* V$ @8 g
11-5 入口文件编写（2）! x: G y& t7 @
11-6 页面调试( ]- E- H$ m0 e& |
8 h5 J9 _7 T+ I4 ^" t第12章 美团网产品详情页开发7 H# V5 k/ @, ]/ V3 h
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。% S2 j/ V( F: {5 ]- H2 ?" R/ i
12-1 需求分析 试看
) E T6 z' F" z& o' e! z12-2 静态模板* U) s" p) d% F
12-3 产品详情页入口-静态文件5 d" y7 e* p$ h
12-4 产品详情页-接口7 ~% d$ d% Z$ w# s
3 | Q7 ]# n- Q$ {第13章 购物车开发! o, l8 @2 v! y8 b. ~
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
. ?9 F+ P% V3 R' Z13-1 购物车&订单-需求分析
' h) G3 u, r) ~13-2 购物车&订单-页面创建/ [! x* B0 @- j0 o
13-3 购物车接口实现4 J, {8 q5 i* C7 G9 _. l4 J6 e5 m0 [, t
13-4 购物车调试
8 ]0 ~2 D7 b% ]% t+ a
6 `) e- y/ G4 Q第14章 订单页开发* \" k- s1 \8 @' B8 C
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。4 v7 V K" e' ]7 C' M' B9 U) j
14-1 订单页面
" n/ }$ N" \+ M14-2 订单接口. r! D# p' ^) ^' {. }
14-3 订单调试
3 N7 h, O( v& h8 O% Q* V( O( t4 w9 _9 ` ^
第15章 课程总结
5 x6 h6 X2 d. j7 ]对课程整体进行回顾与总结: g! _' Q6 z, L# a: T+ d- u
15-1 课程总结
* }1 t# G; X3 k# c. d6 T! F3 z& D2 ~. z: e8 d- o: ?% b1 `
【下载地址】 c6 s5 Y8 G6 d
) {. Y( i- F& p. X4 T
+ i1 H5 O: A, I9 p9 `( }8 o3 d# @
* }, u+ }( J( O+ h+ a |
|
[复制链接]
a
