elementui基础和前后端分离的理解

最新推荐文章于 2023-07-24 14:05:14 发布

原创最新推荐文章于 2023-07-24 14:05:14 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了前后端分离的架构模式，包括其交互形式、代码组织方式、开发模式等，并介绍了如何使用Element UI这一基于Vue 2.0的桌面端组件库搭建前端服务，同时提供了使用mock.js进行数据模拟的示例。

前后端分离

1.1 什么是前后端分离

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

前后端分离大概可以从四个方面来理解：

1.2 交互形式

在这里插入图片描述
在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，页面跳转，最终返回给浏览器。

1.3 代码组织方式

在这里插入图片描述在传统架构模式中，前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:

半分离
前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端交互的测试用例。
真分离
前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低集成风险。

1.4 开发模式

真正前后端分离
后端先行

1.5 前后端分离的优势

(1) 分工合作 - 为优质产品打造精益团队专业的人做专业的事情

(2) 提升开发效率 – >并行开发

(3) 完美应对复杂多变的前端需求

(4) 增强代码可维护性

2.elementui

2.1 搭建前端服务

(1) 安装 npm install -g vue-cli

(2) vue init webpack 项目名

(3)cd 项目名

(4)npm run dev 运行服务

2.2 使用

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

(1)安装

npm i element-ui -S

(2)引入elementui 在 main.js

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

(3)在vue页面使用elementui的组件

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

2.2 组件

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/component/installation

mock.js

mockjs:前端工程师来模拟的数据

安装:

(1) npm install mockjs

(2)userMock.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)crud.vue – 掌握

//安装axios

npm install axios --save

getUsers(){
        //这个是对象  {key:value} 传递参数
        let para = {
          page:this.page
        }
        //加载数据
        //发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
        this.$http.post('/user/list',para).then(res=>{
          console.log(res.data);//返回数组 {'total': total, 'data': list}
         this.users = res.data.data; //返回分页list
          this.total = res.data.total;//返回总的条数
        });

      },
      handleCurrentChange(val){
          //currentPage  每次点击分页条执行的方法
        console.log(val);
        //把当前页 赋值给page这个字段
        this.page = val;
        this.getUsers();
      }


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