ElementUI+Vue

最新推荐文章于 2024-04-12 05:20:26 发布

wild horses

最新推荐文章于 2024-04-12 05:20:26 发布

阅读量2.8k

点赞数

文章标签： vue javascript nodejs

本文链接：https://blog.csdn.net/weixin_45557307/article/details/106772555

版权

本文介绍了使用Element UI和Vue进行前后端分离应用的开发，包括前后端分离的基本概念、环境搭建步骤，以及用户CRUD操作的具体实现，如表格组件、数据模拟、动态渲染、分页、删除、批量删除、高级查询和新增修改功能。

摘要由CSDN通过智能技术生成

element ui

一.基本概念

1.前后端分离

1.1.什么是前后端分离

前端代码后后端代码分开运行，后端有后端的服务器去运行，前端有前端的服务器去运行，前端和后端通过 HTTP Restful 方式进行交互，通常是前端向后端发送AJAX请求获取数据。

注意：有些人认为前段人员写前段，后端人员写后端就是前后端分离了，其实这样说不准确，前后端分离不是前后端分工，只有前端代码和后端代码分开各自都有独立的容器运行这才是前后端分离，谁写前端谁写后端其实并不重要。

1.2.为什么要前后端分离

责任分离，擅长的人做擅长的事情，专业的前端人员做前端代码，专业的后端人员做后端代码。
开发效率高，前后端可以同时开发，专业前端人员写前端比较快，效果也比较好。
增强代码可维护性，前端是前端，后端是后端，不会混淆。

1.3.前后端分离缺陷

成本高，公司不仅要招聘后端人员，也要招聘前端人员，人力成本是很高的(工资)，小项目，小公司不适合前后端分离

1.4.前后端如何联调

前后端分离后，后端可以使用postman进行测试，前端可以使用mock/Easymock模拟后端数据进行测试，那么前端怎么知道后端的接口如何对接？比如：接口地址，接口参数，请求方式，返回值等等。方式一：我们可以手写接口文档规范，前后端都通过这个接口文档进行开发和调试，方式二：我们可以使用Swagger接口文档生成工具，该工具集成在后端，通过扫描Controller接口自动生成API文档，那么前端小姐姐就可以根据Swagger接口文档对接后端应用，当前后端都开发完成，前后端一起联调测试。

1.5.Element UI

饿了么Element UI 文档 http://element-cn.eleme.io/#/zh-CN

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。资料下载网站：https://unpkg.com/element-ui@2.4.6/lib/

Element UI 可以使用cdn方式和NPM方式进行安装，我们使用Npm

二.环境搭建

1.安装VUE-CLI

2.1.创建工程

创建一个static web工程

2.1.初始化VUE-CLI

vue init webpack

2.2.安装Element UI

npm方式安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

如果出现报错：npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself. ，就执行 npm i ajv 安装ajv.

在main.js中导入Element ui

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

也可以通过CND方式安装-不推荐

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.配置路由

2.1.创建elementui.vue

拷贝HelloWorld.vue重命名为ElementUI.vue ,内容如下

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

2.2.配置路由

router.js导入ElementUI.vue

import ElementUI from '@/components/ElementUI'

增加路由配置

{
   
    path: '/ElementUI',
    name: 'ElementUI',
    component: ElementUI
}

三.用户CRUD

ElementUI简单的组件这个不一一做演示，同学们自己去根据官网文档去尝试。

1.Table组件

2.1.创建页面

创建页面名字为 user.vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" > </el-table-column>
    <el-table-column prop="name"  label="姓名" > </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

2.2.配置路由

router.js导入user

import ElementUI from '@/components/user'

增加路由配置

{
   
    path: '/user',
    name: 'user',
    component: user
}

2.3.页面编写

去官网拷贝table页面代码

2.mock模拟动态数据

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

2.1.安装mockjs

npm install mockjs

2.2.创建user.js文件

创建 src/js/user.js ，引入mockjs用来模拟后台数据

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
   
    // 属性 list 的值是一个数组，随机产生 1 到 10 个元素
    'list|1-10': [{
   	
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

2.3.测试效果

cd src/js
node user.js

user.js模拟列表数据,并向外暴露资源

//模拟列表数据=======================================
var dataList = []
for (var i = 0; i < 15; i++) {
   
  dataList.push(Mock.mock({
   
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }))
}

//开始的位置 size 每页显示的条数 list 总结数据
function pagination(page, size, list) {
   
  // page = 2 size 10   list.slice(10,20)