先後端分離及Element的使用

1. 先後端分離

1.1 什麼是先後端分離

　　在傳統的web應用開發中，大多數的程序員會將瀏覽器做爲先後端的分界線。將瀏覽器中爲用戶進行頁面展現的部分稱之爲前端，而將運行在服務器，爲前端提供業務邏輯和數據準備的全部代碼統稱爲後端。

　　不少人誤覺得先後端分離只是一種web應用開發模式，只要在web應用的開發期進行了先後端開發工做的分工就是先後端分離。  （先後端分工）

　　其實先後端分離並不僅是開發模式，而是web應用的一種架構模式。在開發階段，先後端工程師約定好數據交互接口，實現並行開發和測試；在運行階段先後端分離模式須要對web應用進行分離部署，先後端以前使用HTTP或者其餘協議進行交互請求。

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 項目名

　　npm run dev  運行服務

如何去設置代理:

npm config set proxy=null

npm config set registry https://registry.npm.taobao.org

3. Element

Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫

(1) 安裝

npm i element-ui-S

(2) 引入element-ui在main.js

import ElementUI from 'element-ui'; //引入核心js組件
import 'element-ui/lib/theme-chalk/index.css';//引入依賴的樣式
Vue.use(ElementUI) //引用

(3) 在vue頁面使用element-ui的組件

 1 <div id="app">
 2       <el-button @click="visible = true">Button</el-button>
 3       <el-dialog :visible.sync="visible" title="Hello world">
 4         <p>Try Element</p>
 5       </el-dialog>
 6     </div>
 7 <script>
 8   export default {
 9     name: 'elementUi01',
10     data () {
11       return {
12         msg: 'Welcome to Your Vue.js App',
13         visible:false
14       }
15     }
16   }
17 </script>

element-ui的組件：

el-button 按鈕

el-tree 樹形

el-table表格

el-form表單

el-pagination分頁

el-container容器

el-layout佈局

el-tabs頁籤 選項卡

el-dialog對話框

el-alert 提示框

……

具體使用能夠查看官網網站：https://element.eleme.cn/#/zh-CN

4. mockjs

mockjs：前端工程師用來產生模擬數據的

安裝：

(1) npm install mockjs

(2) userMock.js文件引用 mockjs

let Mock = require('mockjs')

(3) 在js生成數據，攔截axios請求

 1 let Mock = require("mockjs")
 2 var dataList = [];
 3 for(var i = 0;i < 101;i++) {
 4   dataList.push(Mock.mock({
 5     'id': '@increment',
 6     'name': '@cname',
 7     'phone': /^1[0-9]{10}$/,
 8     'email': '@email',
 9     'address': '@county(true)',
10     'createTime': '@date("yyyy-MM-dd")'
11   }));
12 }
13 function pagination(index, size, list) {
14   return list.slice((index - 1) * size, index * size);
15 }
16 //攔截axios請求
17 Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
18   var list = dataList;
19   var index = JSON.parse(opts.body).page;
20   var size = 10;
21   var total = list.length
22   list = pagination(index, size, list)
23   return {
24     'total': total,//總的條數
25     'data': list//分頁以後的數據
26   }
27 })

(4) 安裝axios

npminstall axios --save

 1 <template>
 2   <div>
 3     <!--工具條-->
 4     <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
 5       <el-form :inline="true">
 6         <el-form-item>
 7           <el-input placeholder="關鍵字"></el-input>
 8         </el-form-item>
 9         <el-form-item>
10           <el-button type="primary">查詢</el-button>
11         </el-form-item>
12         <el-form-item>
13           <el-button type="primary">新增</el-button>
14         </el-form-item>
15       </el-form>
16     </el-col>
17     <el-table
18       :data="users"
19       style="width: 100%"
20       border
21       height="450px"
22     >
23       <el-table-column
24         prop="name"
25         label="姓名"
26         width="180">
27       </el-table-column>
28       <el-table-column
29         prop="address"
30         label="地址">
31       </el-table-column>
32       <el-table-column
33         prop="email"
34         label="郵件">
35       </el-table-column>
36       <el-table-column
37         prop="phone"
38         label="電話">
39       </el-table-column>
40       <el-table-column
41         prop="createTime"
42         label="建立時間"
43         width="180">
44       </el-table-column>
45       <el-table-column
46         fixed="right"
47         label="操做"
48         width="100">
49         <template slot-scope="scope">
50           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
51           <el-button type="text" size="small">編輯</el-button>
52         </template>
53       </el-table-column>
54     </el-table>
55     <el-col :span="24" class="toolbar">
56       <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
57       </el-pagination>
58     </el-col>
59   </div>
60 </template>
61 <script>
62   export default {
63     data() {
64       return {
65         users: [],
66         total:0,
67         page:1
68       }
69     },
70     methods:{
71       getUsers(){
72         //這個是對象  {key:value}
73         let para = {
74           page:this.page
75         }
76         //加載數據
77         //發送ajax 從後臺查詢出來...沒有寫後臺 --模擬後臺數據 mockjs
78         this.$http.post('/user/list',para).then(res=>{
79           this.users = res.data.data;
80           this.total = res.data.total;
81         });
82       },
83       handleCurrentChange(val){
84         //把當前頁 賦值給page這個字段
85         this.page = val;
86         this.getUsers();
87       }
88     },
89     mounted(){
90       //頁面加載完以後執行的方法
91       this.getUsers();
92     }
93   };
94 </script>

(5) 注意事項

在main.js中引入usermock.js

 

1 import axios from 'axios'
2 import UserMock from './usermock.js'
3 //配置axios的全局基本路徑
4 axios.defaults.baseURL = ''
5 //全局屬性配置，在任意組件內可使用this.$http獲取axios對象
6 Vue.prototype.$http = axios