是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。
在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,页面跳转,最终返回给浏览器。
在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:
半分离
前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。
真分离
前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。
前后端分离是一种架构模式,前后端人员先预定好接口,并行开发与测试.上线时进行分别部署.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.
1.创建一个static web项目
2.初始化vue项目
vue init webpack
3.运行项目
npm run dev
4.访问首页
localhost:8080
1.安装elementui
npm i element-ui -S
2.main.js中导入elementui
import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)
3.开始使用框架:以button为例
codeDemo
3.1先在components组件中新建一个.vue文件button.vue
<template>
<div class="hello">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
3.2在router路由中的index.js中导入上面建好的组件
import Button from '@/components/button'
在再index.js中写路由配置
{
path: '/button',
name: 'button',
component: Button
}
3.3npm run dev运行起来后在网页打开
localhost:8080/button可见效果
codeDemo
1.先将前端的页面模板展示出来
components中建立一个crud.vue文件
<template>
<div>
<el-table
:data="users"
style="width: 100%">
<el-table-column
prop="createTime"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="email"
label="邮件">
</el-table-column>
<el-table-column
prop="phone"
label="电话">
</el-table-column>
</el-table>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return {
users:[],
total:100,
page:1
}
},
methods: {
handleCurrentChange(val){
//page当前页
this.page = val;
//发送请求查询
this.getUsers();
},
getUsers(){
//发送请求 获取数据 axios
/* axios.get('/getUser').then(res=>{
})*/
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;
})
}
},
mounted(){
//页面加载完之后 执行该方法
this.getUsers();
}
}
</script>
2.Mock.js模拟数据
2.1安装mockjs
npm install mockjs
2.2新建mockdemo.js文件
生成列表数据
// 使用 Mock
var Mock = require('mockjs')
/*
数据模板定义规范 DTD
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})*/
/**
* DPD 数据占位符定义规范
*/
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))
2.3crud数据模拟
新建UserMock.js文件,模拟产生的数据,上面的相当于一个模板,这里是产生实际的数据。
import Mock from 'mockjs' // 引入mock
//var Mock = require('mockjs')
var dataList = []
for (var i = 0; i < 15; i++) {
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}))
}
console.log(JSON.stringify(dataList));
//index 当前页 size: 每页条数 list 总的数据
/**
*
* @param index = 2
* @param size = 10
* @param list 15
* @returns
*/
function pagination(index, size, list){
return list.slice((index-1)*size,index*size);
}
//拦截请求
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
}
})
2.4、知识点:Ajax请求优化-axios
vue更新到2.0之后,官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似,他是基于promise的http库,可以用在浏览器和node.js中
理解 就是ajax请求 --在vue里面axios
安装axios
npm install axios --save
布局到main.js中
import axios from 'axios'
//配置axios的全局基本路径 t
axios.defaults.baseURL=''
//全局属性配置,在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
2.5Axios发送请求
在crud.js中发送请求【包含分页】
methods: {
handleCurrentChange(val){
//page当前页
this.page = val;
//发送请求查询
this.getUsers();
},
getUsers(){
//发送请求 获取数据 axios
/* axios.get('/getUser').then(res=>{
})*/
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;
})
}
},
mounted(){
//页面加载完之后 执行该方法
this.getUsers();
}
2.6mock拦截请求 获取参数,并返回
//index 当前页 size: 每页条数 list 总的数据
/**
*
* @param index = 2
* @param size = 10
* @param list 15
* @returns
*/
function pagination(index, size, list){
return list.slice((index-1)*size,index*size);
}
//拦截请求
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
}
})