【Django REST framework电商项目笔记】第04章 restful API简介和Vue项目结构

restful API 介绍

前后端分离优点：

1. pc、app、pad 多端适应
   后端模板渲染的方式适合PC，app 端不适合
2. SPA 开发模式开始流行
   单页面应用，最流行的方式就是前后端分离，后端提供接口
3. 如果不分离的话，前后端开发职责不清
   Django 的 template 由谁写？拆分，模板语言
   PHP Java template 语言使用
4. 前后端分离，有利于提高开发效率，前后端同时开发，无需相互等待
5. 前端不需要一直配合着后端，提升前端代码质量
6. 后台开发语言无需和模板高度耦合，减少前端对后端开发语言的依赖

前后端分离缺点：

1. 前后端学习门槛增加，根据数据展示的页面交由前端负责
2. 数据依赖导致文档重要性增加，以前交给后端，后端一个人看懂
3. 前端工作量加大
4. SEO 的难度加大，爬虫请求不到数据，有专门的优化
5. 后端开发模式迁移增加成本

了解restful API

restful API 目前是前后端分离的最佳实践( 一套标准、建议 )

1. 轻量，直接通过 http，不需要额外协议，post/get/put/delete 操作
2. 面向资源，一目了然，具有自解释性

推荐阅读：
理解 restful 架构 阮一峰

Vue 基本概念

前端工程化
数据双向绑定
组件化开发
MVVM 设计模式

nodejs 包管理
MVVM：数据驱动 view，view 又改变数据
表单变成一个组件，而 Bootstrap 就得引入库，库中有很多不需要的代码

Vue 开发中的几个概念

• webpack

重要，属于 js 工具
ES6 到 ES5 代码转换，Vue 不能被浏览器认识
最终想让浏览器认识就得html js css
webpack 将所有前端代码打包变成一个 js 文件

项目完成后才打包好保存到 js
cnpm run build
生成相应前端的文件，存在一个 dist 文件夹中

• vue vuex( 组件通讯 ) vue_router( 单页面的路由 ) axios

前端内部自己跳转，发送 Ajax 请求，不推荐操作 dom
jQuery 导入进来只用 Ajax，不如 axios

• ES6，babel

ES6 语法
babel 将 ES6 转换为 ES5

Vue 项目的目录结构

vue 的组件方案
babel 配置文件
mock 数据

api 就是我们现在请求网络的 api , 所有组件的 api 通过这个来设置
axios 设置了全局拦截 401
components 是基础组件
router 路由
style 全局静态文件
static 静态文件
store 数据仓库
views 我们开发的组件

views 中组件开发目录：