投稿
  1. 极客之音首页
  2. 后端开发

Element入门及接口数据模拟Mock.js使用

小半 • • 后端开发 • 阅读 260

导读：本篇文章讲解 Element入门及接口数据模拟Mock.js使用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

1 前后端分离

1.1 什么是前后端分离

在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。
很多人误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。 前后端分工
其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。

1.2 前后端分离开发的理解

前后端分离大概可以从三个方面来理解：
（1）交互形式
在这里插入图片描述
在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，页面跳转，最终返回给浏览器。
（2）代码组织方式
在这里插入图片描述
在传统架构模式中，前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:

  • 半分离
    前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。

  • 真分离
    前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端 代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低 集成风险。
    （3）开发模式
    a.真正的前后端分离
    在这里插入图片描述
    b.后端先行

2 前后端分离优势

  • 为优质产品打造精益团队
    通过将开发团队前后端分离化，让前后端工程师只需要专注于前端或后端的开发工作，是的前后端工程师实现自治，培养其独特的技术特性，然后构建出一个全栈式的精益开发团队
  • 提升开发效率
    前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
  • 完美应对复杂多变的前端需求
    如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。
  • 增强代码可维护性
    前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。

3 搭建Element环境

（1）使用idea创建一个static web项目
（2）全局安装脚手架 npm install -g @vue/cli
（3）创建一个vue项目 vue init webpack 项目名
（4）进入创建的项目路径下 cd 项目名
（5）运行服务 npm run dev
（6）使用浏览器访问，默认端口号为8080
让你下载很慢或者失败的时候，可以尝试用淘宝镜像来下载。设置代理方法：
npm config set proxy=null
npm config set registry https://registry.npm.taobao.org

4 Element使用

（1） 安装element-ui
输入指令：npm i element-ui -S
（2）在main.js中引入element-ui

import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)

（3）在vue页面使用element-ui的组件

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

<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        visible:false
      }
    }
  }
</script>

还需要在项目名/src/router文件夹下的index.js文件中添加导入信息：

import ElementUi from '@/components/01_elementui'

{
      path: '/01_elementui',
      name: 'ElementUi',
      component: ElementUi
    }

具体的组件用法，可以去官网查看：https://element.eleme.cn/#/zh-CN

5 接口数据模拟-Mock.js

5.1 为什么需要模拟数据

在前后端分离开发模式中，前后端是分离并行开发的，前端开发人员在开发的时候后台提供接口数据的接口还没有写好，所以需要模拟数据。

5.2 使用Mock.js模拟数据

5.2.1 什么是Mock.js

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

5.2.2 Mock.js特点

  • 前后端分离
  • 让前端攻城师独立于后端进行开发。
  • 增加单元测试的真实性
  • 通过随机数据，模拟各种场景。
  • 开发无侵入
  • 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
  • 用法简单
  • 符合直觉的接口。
  • 数据类型丰富
  • 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 方便扩展
  • 支持支持扩展更多数据类型，支持自定义函数和正则。

5.2.3 Mock.js的使用

（1）安装mock.js
输入指令：npm install mockjs
（2）Mock.js文件引用mockjs

let Mock=require('mockjs') ;

（3）在js生成数据，拦截axios请求

let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }));
}
//拦截axios请求  this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
    //把产生的16数据 放入list对象里面
  var list =dataList;
  console.log(opts.body)
    //取出传递过来的 当前页
  var index = JSON.parse(opts.body).page; //3
    //每页显示条数
  var size = 10;
    //取出总的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list)
  return {
    'total': total, //总的条数
    'data': list //分页之后的数组
  }
})

//分页  
function pagination(index, size, list){
  return list.slice((index-1)*size,index*size); //slice((2-1)*10,2*10)  slice(10,20)
}

（4）编写.vue文件
需要先安装axios，输入指令：npm install 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=>{
          console.log(res);
          this.users = res.data.data;
          this.total = res.data.total;
        });

      },
      handleCurrentChange(val){
        //currentPage
        console.log(val);
        //把当前页 赋值给page这个字段
        this.page = val;
        this.getUsers();
      }
    },
    mounted(){
      //页面加载完之后执行的方法
      this.getUsers();
    }
  };
</script>

（5）在main.js引入mock.js

import axios from 'axios'
import UserMock from './usermock.js'
//配置axios的全局基本路径
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

（6）浏览器访问效果展示：
在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/67291.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！