1 前后端分离(理解)

什么叫前后端分离:

前端和后端分离开

前端: 将浏览器中为用户进行页面展示的部分称之为前端

后端: 为前端提供业务逻辑和数据准备的所有代码统称为后端

前后端分工:

前后端开发工作的分工就是前后端分离。前后端分工;(错误的认识)

真的前后端分离:

不仅仅是前端和后端的分工开发,而是架构的模式

2 前后端分离理解

(1)交互模式 --restful

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f17FBPMI-1577779405832)(笔记.assets/image-20191231092731114.png)]

(2)代码层次–代码仓库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SxsZYteD-1577779405843)(笔记.assets/image-20191231093330782.png)]

(3)开发模式–人员分配 (理解)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ARGAqoWB-1577779405845)(笔记.assets/image-20191231094408983.png)]

现在我们开发第三个第四个 :(全栈工程师)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MynNKPVf-1577779405847)(笔记.assets/image-20191231094654490.png)]

3 前后端分离好处

(1) 专业的人做专业的事情

(2) 提高开发效率 --并行开发

(3) 应对复杂多变的需求

(4) 提高维护性

(5) 成本高有钱人做的

4 搭建脚手架工程(掌握)

省略 --和昨天一样

1)创建一个web项目

2)vue init webpack

3)npm run dev

5 Elementui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,网站快速成型的工具类似easyui layui

5.1 elementui使用

1)安装 : npm i element-ui -S

2)在main.js 引入:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3)组件

测试elementui的组件

5.2 elementui组件(练习)

layout message

container tree

button …

dialog

table

form

tabs

alert

5.3 mockjs --(了解)

为什么需要模拟数据?

主要针对前端人员 , 前端没有后台的数据,需要模拟进行测试

使用mockjs:

(1)安装

npm install mockjs

(2)测试

新创建一个js文件:

// 使用 Mock
var Mock = require('mockjs')

var data = Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last',
    email:'@email',
    ip:'@ip'
  }
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

3)运行 node demo

5.4 axios请求

axios类似 ajax ,封装promise(异步请求)

安装:

npm install axios --save

5.5 mockjs流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMv2v0WO-1577779405849)(笔记.assets/image-20191231153231852.png)]

注意:

main.js引入文件

import axios from 'axios'
import userMock from '../userMock'
//配置axios的全局基本路径 t
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

5.6 crud.vue (掌握)

1)发送请求:

getUsers(){
      let params = {
         page:this.page
      }
      //发送请求  controller {data:[],total:100}
      this.$http.post('/user/list',params).then(res=>{
         console.log("-------------------res.data {data: total}");
         console.log(res);
         this.users =  res.data.data;
         this.total = res.data.total;
      })
      }

2)被mock拦截(了解)

Mock.mock(new RegExp('/user/list'),'post',(opts) => {
  //赋值
  var list =dataList;
  console.log(opts.body) ;// "{page:2}"
  //json字符串转换成JSON对象
  var index = JSON.parse(opts.body).page; //2
  //每页条数
  var size = 10;
  //公共的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list);
  return {
    'total': total,
    'data': list
  }
})

arse(opts.body).page; //2
  //每页条数
  var size = 10;
  //公共的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list);
  return {
    'total': total,
    'data': list
  }
})

寻找java养生之道

发布了28 篇原创文章 · 获赞 15 · 访问量 1118

私信关注

饿了么ui-day01