restful API 介绍
前后端分离优点:
- pc、app、pad 多端适应
后端模板渲染的方式适合PC,app 端不适合 - SPA 开发模式开始流行
单页面应用,最流行的方式就是前后端分离,后端提供接口 - 如果不分离的话,前后端开发职责不清
Django 的 template 由谁写?拆分,模板语言
PHP Java template 语言使用 - 前后端分离,有利于提高开发效率,前后端同时开发,无需相互等待
- 前端不需要一直配合着后端,提升前端代码质量
- 后台开发语言无需和模板高度耦合,减少前端对后端开发语言的依赖
前后端分离缺点:
- 前后端学习门槛增加,根据数据展示的页面交由前端负责
- 数据依赖导致文档重要性增加,以前交给后端,后端一个人看懂
- 前端工作量加大
- SEO 的难度加大,爬虫请求不到数据,有专门的优化
- 后端开发模式迁移增加成本
了解restful API
restful API 目前是前后端分离的最佳实践( 一套标准、建议 )
- 轻量,直接通过 http,不需要额外协议,post/get/put/delete 操作
- 面向资源,一目了然,具有自解释性
推荐阅读:
理解 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 中组件开发目录: