前后端分離及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的組件

<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>

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請求

let Mock = require("mockjs")
var dataList = [];
for(var i = 0;i < 101;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;
  var index = JSON.parse(opts.body).page;
  var size = 10;
  var total = list.length
  list = pagination(index, size, list)
  return {
    'total': total,//總的條數
    'data': list//分頁之后的數據
  }
})

(4) 安裝axios

npminstall axios --save

<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: [],
        total:0,
        page:1
      }
    },
    methods:{
      getUsers(){
        //這個是對象  {key:value}
        let para = {
          page:this.page
        }
        //加載數據
        //發送ajax 從后台查詢出來...沒有寫后台 --模擬后台數據 mockjs
        this.$http.post('/user/list',para).then(res=>{
          this.users = res.data.data;
          this.total = res.data.total;
        });
      },
      handleCurrentChange(val){
        //把當前頁 賦值給page這個字段
        this.page = val;
        this.getUsers();
      }
    },
    mounted(){
      //頁面加載完之后執行的方法
      this.getUsers();
    }
  };
</script>

(5) 注意事項

在main.js中引入usermock.js

 

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