| 
 
|   : ?: 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
 | 
 |