前后端分离及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