前后端分离:
概念:
浏览器中为用户进行页面展示的部分称为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。是web应用的一种架构模式,在开发阶段前后端工程师约定好数据接口,并行开发和测试。.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.
开发模式
前后端的分离的优势
一, 专业的人做专业的事
提高开发效率
应对复杂多变的前端需求。 前端变化需求比较多,因为人们的审美在不停的变化
增强代码的维护性,前端后端分离,应用的代码不在是前后端混合
搭建前端环境
1 创建一个静态web项目 vue init webpack
2 npm run dev 运行 vue前端
ElementUI 的 入门
1 下载 ElementUI :
安装命令 npm i element-ui -S
2 在 src–》main.js 中导入核心组件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//引入核心js组件
import ElementUI from 'element-ui';
//引入依赖的样式
import 'element-ui/lib/theme-chalk/index.css';
//代表Vue中使用到了ElementUI
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
入门;
1 首先在 components的 文件夹中 创建一个 helloElementUI.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>
</div>
</template>
<script>
//
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- 样式 -->
<style scoped>
</style>
2 在路由( router 文件夹的 index. js 中 ) 中引入 helloElementUI 的样式
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 新建的 01_helloElementUI
import HelloElementUI from '@/components/01_helloElementUI'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// 很重要
{
path: '/HelloElementUI',
name: 'HelloElementUI',
component: HelloElementUI
}
]
})
3 引入核心文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//引入核心js组件
import ElementUI from 'element-ui';
//引入依赖的样式
import 'element-ui/lib/theme-chalk/index.css';
//代表Vue中使用到了ElementUI
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
常用控件
1 布局容器
:外层容器。当子元素中包含 或 时, 全部子元素会垂直上下排列,否则会水平左右排列。
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
2 Layout布局 --和bootstrap中栅格系统差不多
el-row 24个格子
e-col :span=“6”
3 Tree
<!--:data="data" 绑定数据-->
<!--:props="defaultProps" 设置要显示数据字段-->
<!--@node-click= 节点单击事件-->
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
4 Tabs
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
4 table
5 button
crud
1 toolbar
<!--toolbar-->
<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" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">新增</el-button>
</el-form-item>
</el-form>
</el-col>
2 管理表格
<!-- 表格管理
el-table: 表格
el-table-column:列 , prop 数据中的属性 label列名
border ; 边框
height="200px" : 下拉
-->
<el-table
:data="tableData"
border
height="200px"
style="width: 100%">
<el-table-column
prop="date"
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="info.name"
label="boss">
</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" @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
3 分页条
<!--分页条 -->
<el-col :span="24" class="toolbar">
<el-button type="danger" style="float:left;">批量删除</el-button>
<!-- 后台分页的返回值: 总数,当前页 -->
<el-pagination
background
layout="prev, pager, next"
:page-size="10"
:total="total"
@current-change="currentChange"
style="float: right"
>
<!--
page-size="10" 每页多少条数据: 默认是10 页
:total="30" 一共多少条数据
@current-change="currentChange" 点击之后相应数据
-->
</el-pagination>
</el-col>
4 添加或修改的对话框
<!-- 添加或修改对话框 -->
<!-- 这是头部-->
<!-- el-dialog 对话框
:visible.sync="visible" 是否显示
<span slot="footer" class="dialog-footer"> 脚部
打开或关闭对话框 修改 visible 的值
回显 利用 双向绑定来做回显 <el-form :model="user"> 只需要修改user的值就可以了
-->
<el-dialog
title="用户管理"
:visible.sync="visible"
width="50%"
>
<el-form :model="user">
<el-form-item label="用户名称" :label-width=" formLabelWidth">
<el-input v-model="user.name" style="float:left; width:250px " auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="用户区域" style="float:left;" :label-width="formLabelWidth">
<el-select v-model="user.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<!-- 这是脚步-->
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="visible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
5 form 编辑的 或 添加的 表单
<el-form :model="user">
<el-form-item label="用户名称" :label-width=" formLabelWidth">
<el-input v-model="user.name" style="float:left; width:250px " auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="用户区域" style="float:left;" :label-width="formLabelWidth">
<el-select v-model="user.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
模拟数据
概念:在前后端分离开发模式中,前后端是分离并行开发的,前端开发人员在开发的时候后台提供接口数据的接口还没有写好,所以需要模拟数据。
1 mock.js
(1) 根据数据模板生成模拟数据
(2) 模拟 Ajax 请求,生成并返回模拟数据
(3) 基于 HTML 模板生成模拟数据
入门:
1 下载 mock.js
2 创建 mock 的文件夹
3 定义规则
生成规则的含义需要依赖属性值的类型才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型
生成规则 有 7 种格式:
‘name|min-max’: value
‘name|count’: value
‘name|min-max.dmin-dmax’: value
‘name|min-max.dcount’: value
‘name|count.dmin-dmax’: value
‘name|count.dcount’: value
‘name|+step’: value id
/* 引入 'mockjs' js文件 require包含导入的意思 */
let Mock=require('mockjs')
/* 定义一变量 数组 */
let data=Mock.mock({
// name|规则:值 相当于定义一个属性(name ) 使用哪种规则,在给一值
'list|5':[
{
'id':1,
'name':'测试'
}
]
})
/* 输出结果 */
console.log(JSON.stringify(data,null,2 ))
模拟数据 + crud
1 下载 mock.js : npm install mockjs
2 安装 axios npm install axios --save
// 使用 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")'
}))
}
// 获取用户列表
/**
* 确定访问路径与请求
*/
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
var list =dataList.slice(0,10);
return list;
})
3 在main.js 中引入 user.JS
//引入model中的user数据
import userdata from './mock/user'
4 crud 样式
<template>
<div>
<!--数据表格-->
<!--
:data="user" 需要从后台去获取
-->
<el-table
:data="user"
stripe
style="width: 100%">
<el-table-column
prop="id"
label="id"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="phone"
label="手机号"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="邮件">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-col :span="24" class="toolbar">
<el-button type="danger" style="float: left">批量删除</el-button>
<el-pagination
background
layout="prev, pager, next"
:page-size="10"
:total="100"
@current-change="currentChange"
style="float: right"
>
</el-pagination>
</el-col>
</div>
</template>
<script>
/* axios使用方案1
* 局部引入
* */
import axios from "axios";
export default {
name:'Crud2',
/* 在这个里面定义一个函数把 axios.post("user/list")
放到函数里面*/
methods: {
/* 当前页*/
currentChange(currentPage){
this.page=currentPage
this.getUsers();
},
getUsers(){
/* 发送请求到 mock模拟访问地址获取数据 Mock.mock(new RegExp('/user/list'), 'post', (opts) =>
使用 axios
{*/
/* 传递分页条件 当前页 */
let param={"page":this.page}
axios.post("/user/list",param)
.then(result=>{
console.debug(result)
this.user=result.data;
})
}
},
/*user 从后台获取 一开始为空数组 */
data() {
return {
page:1,
user:[]
}
},
/* 挂载加载后管理该表格数据 */
mounted(){
/* this 指代当前对象, getUser(){
axios.post("user/list")
.then(result=>{
console.debug(result)
})
} */
this.getUsers();
}
}
</script>