1. The front end of the separator: front and rear ends are each running on a separate server, interactive interface agreed only good data before and after the by-side interaction style restful
a) why the front and rear ends to be separated:
i. High efficiency, industry specializing in surgery, to create a lean team, complete front-end needs of complex, maintenance of the code is better,
b) mounting vue scaffold
mounting vue scaffolding: npm install -g vue-cli
initialization webpack: vue init webpack
run vue: npm run dev
c) mounting the front end of the frame UI: ElementUI
NPM the install UI -S-Element
in main.js introduced ElementUI support which
import ElementUI from 'element-ui' ; // js core assembly incorporated
import 'element-ui / lib / theme-chalk /index.css';// introduced dependent style
Vue.use (ElementUI)
custom components; change it to change it
references we write a page in the route (route / index.js) inside
d) ElementUI (Rapid website molding tools)
i. elementUI various components
e) mock.js end analog data (to generate random data, intercept Ajax request)
i installation mock.js:. npm install mockjs
ii. Mock.js basic entry analog data
f) Axios optimization request Ajax
. i download and install: npm install Axios -save
. Ii use:
- Incorporated <script> which import axios from 'axios'
- The method defined in acquiring data
Methods: {
the getUser () {
define data acquisition parameters
var params = {page: 1}
transmission request axios
axios.post ( '/ User / info', the params) .then (Data => {
Console. log (Data)
})
}
}
// mount method, hook method
mounted () {
this.getUser ();
} - Analog front page background data show
a) install mockjs simulated background data (npm install mockjs) axios (npm install axios -save) b) and analog ajax request and the definition of a background data generated analog usermock.js
Import Mock from 'mockjs' // introduced into the mock var dataList = []; // generates 15 pieces of data into an array which for ( var I = 0; I <15; I ++) { dataList.push ( Mock .mock ({ ' ID ' : ' @increment ' , ' name ' : ' @cname ' , ' Phone ' : / ^. 1 [0-9] {10} $ /, ' In Email ' : ' @email ' , ' address ' : ' @ County (to true) ' , ' createTime ' : ' @date ( "the MM-dd-YYYY") '})) }//
function pagination(index, size, list) {
console.log(list);
console.log(index, size);
return list.slice((index-1)*size, index*size)
}
//模拟请求
// 获取用户列表
Mock.mock(new RegExp('/user/info'), 'post', (opts) => {
var list =dataList;
console.log(opts.body);
var index = JSON.parse(opts.body).page;
var size = 10;
var total = list.length;
list = pagination(index, size, list);
return {
'total': total,
'data': list
}
});
c) 前台页面(user.vue)书写
<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>
<!--:data="users"表格的数据-->
<el-table
:data="background data//"the Users
border
height="450px"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="phone"
label="电话"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="180">
</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>
<!--分页标签-->
<!--@current-change="handleCurrentChange"EL-pagination<the Users ->Call the method to get the pagination of
background
layout="prev, pager, next"
:total="total"
:page-size="10"
@current-change="handleCurrentChange"
style="float:right"
>
</el-pagination>
</div>
</template>
<script>
//引用axios发送请求import axios from 'axios';return Data () {{Export defaultGet the source table data attributes//
{
Total : 0,
page :. 1,
Users : []
}
},
Methods : {
handleCurrentChange (The currentPage) {
// current number of pages assigned to the page of this field the this . Page = The currentPage; the this .getUsers (); }, // Get Uuser data approach the getUsers () { // JSON transmitted past format // incoming paging parameters paging display the let the params = { Page : the this . Page }; // send a request acquiring mock analog data
function(data){} 发送后台 http://localhost:80/user/info
//baseURL+/user/info
// axios.post('/user/info',params).then(result=>{
this.$http.post('/user/info',params).then(result=>{
this.total = result.data.total;
this.users = result.data.data;
})
}
},
//方法挂载
mounted(){
this.getUsers();
}
}
</script>
d) index.js page packet routing introduction page and browser user access path
e) introducing the main.js background data generated simulated mock axios core file Import the App from './App' Import Router from './router' Import Vue from 'VUE' ; Import ElementUI from 'UI-Element' ; / / on core js assembly Import 'UI-Element / lib / Theme-Chalk / index.css' ; // introduced dependent pattern // incoming data generated template Import './js/userMock' Import Axios from 'Axios' / / configuration Axios global basic path Axios. Defaults . the baseURL =
'HTTP: // localhost: 80'
@ global property configuration, any component may be used in this $ http. Gets Axios objects
// prototypes axios.post -> this $ http.
Vue. the prototype . $ HTTP = Axios
Vue .use (ElementUI)
. Vue config . productionTip = to false new new Vue ({ EL : '#app' , Router, Components : the App {}, Template : '<the App />' });
- EasyMock
a) Easy Mock car radio is Hangzhou search team produced an extremely simple, efficient, visual, and can be faster
Speed analog data generated online mock service. To organize project management Mock List, can help us better manage Mock data.
b) Initial Settings
c) Log in Register
i. browser opens https://www.easy-mock.com output user name and password, if there is no registered automatically. Note: Do not forget the password, the system does not retrieve password function! -
ii. the new project, create an interface
iii. to start the front end project, projects which do not reference mock.js project