1.前后端分离
1.1什么是前后端分离
前后端的认识误解:
前端代码 和 后端代码 分开的代码 那就是前后端分离 – 前后端的分工,真正前后分离,不仅仅是分工那么简单,它是一个种架构模式
(1)web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;
(2)在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求(restful风格进行前后分离的交互)
1.2 前后端分离开发的理解
交互形式:
代码形式:
(1)前后端未分离:(同一个项目)
前端代码和后端代码同放到他同一个项目(前端代码里面包含后端代码 比如jsp)
(2)前后端半分离:(同一个项目)
代码仓库 : 前端开发和后端代码分开进行开发 , 前端代码它无法进行单独测试,需要后端代码支持
(3)完成代码分离:(使用) – (不同的项目 前端和后端代码分别代码不同的项目 部署到不同的服务里面),前端代码和后端代码 分别放到不同的项目里面, 前端和后端 可以单独测试 .并行的测试
1.3 为什么要进行前端分离开发:
(1) 分工合作 - 为优质产品打造精益团队 专业的人做专业的事情
(2) 提升开发效率 – >并行开发
(3) 完美应对复杂多变的前端需求
(4) 增强代码可维护性
2.搭建前端环境
(1)创建一个static web project
(2) 安装 npm install -g vue-cli
(3) vue init webpack 项目名
(4)cd 项目名
(5)npm run dev 运行服务
3.elementui
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,类似于easyui一样,提供了很多的ui组件。
资料下载网站:https://unpkg.com/element-ui@2.4.6/lib/
官网:https://element.eleme.cn/2.0/#/zh-CN/component/installation
3.1.安装
npm i element-ui -S
3.2.引入elementui 在 main.js
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI) //引用
3.3.在vue页面 使用elementui的组件
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
<script>
export default {
name: 'elementUi01',
data () {
return {
msg: 'Welcome to Your Vue.js App',
visible:false
}
}
}
</script>
4.elementui的组件
Elementui官网组件里面 拷贝dialog app里面有居中功能
这里列举简单的几个例子
4.1.button按钮
<template>
<div>
<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>
</div>
</template>
<script>
export default {
data () {
return { }
}
}
</script>
在index.js中使用
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/02_button'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/button',
name: 'button',
component: Button
}
}
4.2.Layout布局
通过基础的 24 分栏,迅速简便地创建布局
<template>
<div>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
4.3.Container布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
:顶栏容器。
:侧边栏容器。
:主要区域容器。
:底栏容器。
<template>
<div>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
5.mockjs
5.1.安装:
npm install mockjs
5.2.引用:
(2)userMock.js文件引用 mockjs
let Mock=require('mockjs')
5.3.js:
(3)在js生成数据 ,拦截axios请求
let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}));
}
//拦截axios请求 this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
//把产生的16数据 放入list对象里面
var list =dataList;
console.log(opts.body)
//取出传递过来的 当前页
var index = JSON.parse(opts.body).page; //3
//每页显示条数
var size = 10;
//取出总的条数
var total = list.length
//分页方法
list = pagination(index, size, list)
return {
'total': total, //总的条数
'data': list //分页之后的数组
}
})
//分页
function pagination(index, size, list){
return list.slice((index-1)*size,index*size);
}
6.Elementui+Crud实现
6.1.安装axios
npm install axios --save
6.2.页面布局
<template>
<div>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true">
<el-form-item>
<el-input placeholder="关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table
:data="users"
style="width: 100%"
border
height="450px">
<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-column
prop="createTime"
label="创建时间"
width="180">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24" class="toolbar">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
</div>
</template>
<script>
export default {
data() {
return {
//定义一个users数组,来装数据
users: [],
//总数据条数,默认为0
total:0,
//当前页
page:1
}
},
methods:{
getUsers(){
//这个是对象{key:value}
let para = {
page:this.page
}
//加载数据
//发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
this.$http.post('/user/list',para).then(res=>{
console.log(res);
//分页的list
this.users = res.data.data;
//总数据条数
this.total = res.data.total;
});
},
//每次点击分页条执行的方法
handleCurrentChange(val){
console.log(val);
//把当前页 赋值给page
this.page = val;
this.getUsers();
}
},
mounted(){
//页面加载完之后执行的方法
this.getUsers();
}
};
</script>
6.3.crud数据模拟
let Mock=require('mockjs')
//顶一个数组来装数据
var dataList = [];
//随机产生27条数据
for(var i=0;i<27;i++){
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}));
}
//分页
function pagination(index, size, list){
//返回每页的数据
return list.slice((index-1)*size,index*size);
}
//拦截axios请求
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
//用一个数组来装产生的数据
var list =dataList;
console.log(opts.body)
//拿到当前页获得page
var index = JSON.parse(opts.body).page;
//每页10条数据
var size = 10;
//拿到总数据条数
var total = list.length
//拿到当前页的数据
list = pagination(index, size, list)
//返回给前台的数据
return {
//总数据条数
'total': total,
//每页数据
'data': list
}
})
6.4.注意事项
引入usermock.js --在main.js
import UserMock from './usermock.js'