! e- i6 D3 `' I$ T
% m6 {, \8 j8 j5 w# {5 _: b" {. s1 I1 i
【课程简介】
5 `* U4 E; H6 w这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
3 W! S3 R6 m8 j( D8 ?8 K7 A' Q& t; K0 u H( Y
【课程目录】) `- P+ X9 S. x) _
第1章 课程导学8 k4 K7 t$ q% e
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等1 o" [% w* ~2 @- B
1-1 课程导学 试看
. V, v- g8 [( D- t( X H. D. u
) f% W J5 ^% `. v第2章 Vue基础知识
+ y4 v. S7 y4 V$ |7 g5 b+ l0 H整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。4 O' v7 j7 d' R* H; v+ D% V/ ^
2-1 概述&脚手架
2 a/ }0 Z. s0 J( D- N2-2 模板语法（1）2 R$ v3 |- ~7 ~( y
2-3 模板语法（2）3 X$ g4 a( ?" U, v# R' |
2-4 样式与遍历
5 c& Y2 v! o7 Y+ J1 o& W2-5 事件0 J _# I0 M% T" I6 Z
2-6 组件（1）
% q+ o7 W8 ?7 D: X2 Z, J1 N6 M2-7 组件（2）
# ^* |0 _6 A2 \: b# X2-8 路由基础0 Q9 ]7 `: e8 E3 P) G
2-9 Vuex基础用例（1）1 T' b8 m6 b7 J# \: p5 ?
2-10 Vuex基础用例（2）
! b( z0 S h) h; }% N) j1 O2-11 Vuex高级用例（1）
* g& F7 d0 p# x2-12 Vuex高级用例（2）
% {1 V; J" J$ S0 {# s- ^) I
( I# x( G* G5 e3 l% ]% K: p第3章 Koa2基础知识
7 N( z) K" \* ~8 R, @5 t- P. eNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。/ j2 Q( u9 w' b. n7 H8 S
3-1 Koa-generator$ N8 |9 X4 k- c# P; d) R
3-2 Koa异步async
/ O! L. ]' I) F& h* L3-3 Koa中间件
8 n" q8 z/ p- ]3-4 koa路由和cookie, r& Y! X. a7 }) z
( I% n& q8 w9 E1 ~' b0 B" K第4章 Mongoose和Redis基础
: F K8 q! z( umongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...8 F: E# L' j; h0 K$ } I, C! N. `
4-1 mongoose（1）
* S0 ?( S5 ?7 @+ M# V4-2 mongoose（2）
/ I9 \# l5 T/ D T2 I4-3 Redis（1） G/ d i6 h5 @' R* O9 a
4-4 Redis（2）& o, t& }+ J- _% E5 K" v
8 A, J$ d3 y* K$ l; N/ d
第5章 Nuxt.js基础知识6 r1 W4 `) O( x4 R2 k
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...9 V0 w4 u. A; L$ {" w$ a' u
5-1 Nuxt.js基础（1）
4 X5 R% p' y# D$ V- X5-2 Nuxt.js基础（2）) `: U$ c, N$ L8 Y2 B
5-3 Nuxt.js基础（3）- G& M9 h$ T, t5 _
5-4 Nuxt.js基础（4）8 {5 \( o* a M- B* l$ d/ B& |
, l* L0 }8 p$ e0 T( X
第6章 实战准备+ y$ L4 q" T- Y+ G/ s0 V# Z0 ~, V
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
7 S: ?$ B/ ?1 U. @" Y6-1 环境准备与项目安装
8 [- V. u' W, V9 @$ B" ]# m9 j6-2 辅助工具安装与配置改装- h" K& Q% B. c
! [7 a9 t5 V" F! j( o1 b( R第7章 开发美团网首页
6 ]& W# Z n( y! ^$ X: b从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。7 S3 n1 ~' D0 o) \6 p( |
7-1 需求分析 试看
" Z. F+ y# d( P. F: }7-2 首页Header开发-城市定位服务设计5 i& ? A2 O! `" a1 ]) [; Q' J
7-3 首页Header开发-头部引导导航设计
, P' `" ]- d3 w+ I* |7-4 首页Header开发-搜索界面设计
' L* D$ ~" u5 o7-5 Bug修复
: O* L7 d& t* J7-6 首页搜索" S3 Z6 C) _* m+ O" ` y- ]+ m: |, f8 l5 ?
7-7 首页菜单（1）
/ {8 J3 _6 q( L ]% {0 o7 y8 T7-8 首页菜单（2）0 ?: c: b' }6 ?; H
7-9 章节小结9 ]0 S4 D+ l q% P* m
7-10 Footer补充" Y8 Q* W$ _, v/ \0 q3 e! g8 P
, ?6 r4 N& N5 e* m( l: O, ?第8章 开发美团网首页-登录注册
9 p9 {4 r7 e! a3 X+ ~ }* F3 c p从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全+ ^) o9 c% d4 V' ^- U$ k
8-1 注册（1）
3 J: f2 m) e* M+ n }) [; u8-2 注册（2）
6 H; g) w3 w4 ?9 t; l2 ^8 S8-3 注册（3）/ _: ?; \- @/ {* g- ?$ ?
8-4 注册（4）
5 h2 [1 ^ X J! E. t( T8 M' ^8-5 注册（5）
' O- n0 T% g' I8-6 注册（6）4 K1 ~8 L' W; y1 U; T# r8 p, l0 ]
8-7 注册（7）& D2 {- |8 Q/ K8 |' Y# B5 W' s0 u& w
8-8 注册&登录（1）
: }8 l" f) G2 e0 ]- S O* h8-9 注册&登录（2）' E5 z$ C9 W% D( D) p
6 @" r# [. H! I' `& ]
第9章 开发美团网首页-Search搜索
' W2 k$ C# ]% Z只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
8 F5 `; y, E1 t) e- A9-1 城市服务
" V# e+ V/ c2 T) a7 b+ a9-2 菜单数据% l# O6 F Q1 ~% C( y& s6 V
9-3 Geo接口实现" u1 [. b C- q7 A7 J7 ~$ Q2 {% q
9-4 Search接口实现（1）* n5 x. [5 w- G& J
9-5 Search接口实现（2）5 a0 i2 n) J. q) R! B
$ t$ S9 m) C& G& ]第10章 切换城市页 |7 `: I" i. x# `7 g* d0 N& Q
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
: x% @# L: \6 s( B6 Z10-1 切换城市（1）
! q/ j' }" R5 k p2 S10-2 切换城市（2）
* I; ?. t% S5 |" H, y" T% @10-3 切换城市（3）
* s% U9 t9 y6 `- W- r# k) C( ?9 V' t* I* I
第11章 美团网产品列表页 m$ H( i# |6 X, Q4 ?# ^. M ?
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
4 m2 {: m* U; t8 D4 E( R) ^11-1 页面设计（1）
7 f1 Q+ Q; Y# j$ d; I11-2 页面设计（2）
( b; b& J, O+ `" x$ K# i11-3 地图组件开发
5 X* K- r" a, J3 c( y K11-4 入口文件编写（1）6 W/ V9 b1 |, M# b9 X; u
11-5 入口文件编写（2）0 y1 S( {% U' [- i- V0 J4 ~
11-6 页面调试& x' R5 U. m& T$ T! \
0 X5 I( w& x# y) ^/ L
第12章 美团网产品详情页开发4 w5 K8 k6 u8 a& i- ? D
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。5 a s( q+ t5 K6 V- m, ]
12-1 需求分析 试看
5 I( Q9 e2 C9 W5 b: [5 e12-2 静态模板, E3 S' ~- O0 c
12-3 产品详情页入口-静态文件
& E" f0 w3 m8 U1 m% d4 N0 S12-4 产品详情页-接口5 R* J$ {( S( J! r7 X
! I }' O; g0 m/ j
第13章 购物车开发, i1 \: y1 z6 d- _
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定- A! o6 U; E3 K, K
13-1 购物车&订单-需求分析
* O8 f5 ]4 c# f& E# L13-2 购物车&订单-页面创建, S( x# s, W( @9 P* e3 v+ l
13-3 购物车接口实现
+ w( ^1 `4 z1 X13-4 购物车调试: V+ W. w, ]* V# j
+ c( s& i; ?- ?
第14章 订单页开发
5 q5 n8 @& q- A% J) g, x& I {订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。" E! N) y) [4 N, X2 e3 B
14-1 订单页面* g! H. U0 o2 J' }: O# j5 C/ \# Y
14-2 订单接口
( Y, [6 ^0 m1 W1 v: B" F6 b' N; ~$ {14-3 订单调试
7 {% D! F) v6 j# K, f' p. O
6 ]& ?1 w5 x5 r第15章 课程总结& u! ~% V- |# M: g% ~" d+ b- G
对课程整体进行回顾与总结
w8 I; ?: d% `+ G) q! Q15-1 课程总结 @" l |/ k8 F L1 \' O) Z2 ~
9 _- y) t6 t- B【下载地址】- U# r0 y) r/ n- T( _8 _% ?
% t, ?' F3 J) a
& p! t }! q ]* J7 F4 l- i3 F0 P9 x( U& ^. W
|
|
[复制链接]
a
