Java小白学习指南【day52】---谁说后端不能写ElementUI

于 2021-03-07 09:00:41 发布
阅读量240 收藏
点赞数
分类专栏： 学习 文章标签： vue java javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WLK0423/article/details/114476301
版权

文章目录

一、Hello ElementUI

1、准备工作

①、搭建脚手架

创建普通得web项目，在该项目下搭建脚手架——vue init webpack

启动npm run dev在浏览器中进行查看，查看是否成功

②、安装Element

根据官网：https://element.eleme.cn/#/zh-CN/component/installation

npm安装：npm i element-ui -S

引入 Element（完整引入）：

main.js中

/*模块化引入elementui*/
import ElementUI from 'element-ui';
/*模块化引入elementui核心样式*/
import 'element-ui/lib/theme-chalk/index.css';
/*要使用element提供得所有组件*/
Vue.use(ElementUI);

2、Hello elementui

<template>
  <el-row>
    <el-col :span="24" style="background-color: crimson ; width: 100% ; font-size: 50px ">Hello ElementUI</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
    }
  }
}
</script>

还需在index.js中配置路由路径

elementui得标签基本都是以el-开头得

image-20201209125142674

二、Mock.js

在前后端分离开发模式中，前后端是分离并行开发的，前端开发人员在开发的时候后台提供接口数据的接口还没有写好，所以需要模拟数据。优点及作用都可以在官网上进行学习：http://mockjs.com/

1、安装Mock.js

在项目中进行Node (CommonJS)：npm install mockjs

2、使用

在src下创建js/employee.js文件

// 导入 Mockjs得核心插件（组件commonJS规范）
let Mock = require('mockjs')
/*模拟数据*/
let data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
  }]
});
// 输出结果
console.log(JSON.stringify(data));

显示数据需要进入到该js文件所在文件夹，然后执行node employee.js就得到随机模拟得数据

image-20201209150141088

注：上述模拟数据得代码，可以自行百度或者根据官网进行编写（前端人员使用较多，后端了解即可）

三、Axios(发送Ajax请求)

vue更新到2.0之后，官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中。

简单理解就是vue不包含ajax请求，如果使用vue插件，并且想发送ajax请求，就得安装Axios（Axios与ajax关系就类似jQuery与js得）

1、安装

在项目执行npm install axios --save进行安装

同时在main.js中需要引入axios以及扩展vus原型属性

/*引入axiox*/
import axios from 'axios';
/*给vue扩展原型属性，方便vue实例对象中获取axios，类似于给vue添加一个方法*/
Vue.prototype.$http = axios;

后台js模拟数据进行测试

// 导入 Mockjs得核心插件（组件commonJS规范）
let Mock = require('mockjs');
/*模拟数据*/
let data = Mock.mock({
  'list|202': [{//产生得数量，设置为202条
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,//正则表达式
    'email': '@email',//邮箱
    'address': '@county(true)',//地址，三级省市区
    'createTime': '@date("yyyy-MM-dd")'//创建时间 年月日
  }]
});
// 输出结果
console.log(JSON.stringify(data));

前台vue进行接收

2、前台发送Axios请求

<template>
    <!--数据展示列表-->
    <el-table :data="tableData" stripe border style="width: 100%"><!--stripe斑马格；border边框-->
      <!--prop：JSON对象的key值，通过key进行取值；label表头；align：对齐方式-->
      <el-table-column type="index" align="center" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="name" align="center" label="姓名">
      </el-table-column>
      <el-table-column prop="phone" align="center" label="电话">
      </el-table-column>
      <el-table-column prop="email" align="center" label="邮箱">
      </el-table-column>
      <el-table-column prop="address" align="center" label="地址">
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间">
      </el-table-column>
    </el-table>
</template>
<script>
  /*模块化引入employee.js*/
  import employee from "../js/employee.js"
export default {
  name: 'Employee',
  data () {
    return {
      tableData:[]
    }
  },
  /*页面渲染完后（dom节点挂载完毕）立刻执行，类似于jQuery中的$(function)*/
  mounted(){
    /*前台模拟发送axios的post请求，并通过回调函数接收模拟的数据*/
    this.$http.post("/employee/list").then(res=>{/*响应成功res存放返回的数据*/
      /*通过解构表达式获取传回的数据*/
      let {list} = res.data;
      /*给tableData进行赋值展示*/
      this.tableData = list;
    })
  }
}
</script>

注：前台显示的样式可以自行在Element官网进行查找

3、后台拦截Axios并传回模拟数据

// 导入 Mockjs得核心插件（组件commonJS规范）
let Mock = require('mockjs');
/*模拟数据*/
let data = Mock.mock({
  'list|202': [{//产生得数量，设置为202条
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,//正则表达式
    'email': '@email',//邮箱
    'address': '@county(true)',//地址，三级省市区
    'createTime': '@date("yyyy-MM-dd")'//创建时间 年月日
  }]
});
/*拦截axios对应路径的请求*/
Mock.mock("/employee/list","post",function (options) {
  /*响应至前台的数据*/
  return data;
});

四、elementui-CRUD

1、数据分页

  • 拷贝分页条模板
  • 补全对应的函数以及提取参数至data
  • 设置当前也默认值1和每页条数默认10
  • 前台传递当前页于每页条数作为axios参数
  • 后台接收参数，处理模拟数据
  • 对总数居进行分割jsArray.slice(begin,end)
  • 将处理的模拟数据进行返回，返回包括总的数据total（自动分页用），list分页列表（table展示数据）

页面展示

	<!--分页条-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page=currentPage :page-sizes=pageSize :page-size=pagesize
      layout="total, sizes, prev, pager, next, jumper" :total=total>
    </el-pagination>

<script>
  /*模块化引入employee.js*/
  import employee from "../js/employee.js"
export default {
  name: 'Employee',
  data () {
    return {
      tableData:[],//表格中数据
      currentPage:1,//当前页
      pageSize : [5,10,20,30],//下拉框每页显示条数
      pagesize : 10,//每页条显示条数
      total : 10,//总的数据条数
    }
  },
  methods: {
    /*每页条数发生变化时调用此函数*/
    handleSizeChange(val) {
      /*每次分页后跳至第一页*/
      this.currentPage = 1;
      /*改变每页条数*/
      this.pageSize = val;
      /*查询员工分页列表*/
      this.loadEmployee();
    },
    /*当前页发生变化时调用此函数*/
    handleCurrentChange(val) {
      /*改变当前页*/
      this.currentPage = val;
      /*查询员工分页列表*/
      this.loadEmployee();
    },
    /*分页显示*/
    loadEmployee(){
      /*传递需要进行分页的参数，就是当前页和每页条数和*/
      let param = {"currentPage":this.currentPage,"pagesize":this.pagesize}
      /*前台模拟发送axios的post请求，并通过回调函数接收模拟的数据*/
      this.$http.post("/employee/list",param).then(res=>{/*响应成功res存放返回的数据*/
        /*通过解构表达式获取传回的数据*/
        let {list,total} = res.data;
        /*赋值总数据*/
        this.total = total;
        /*给tableData进行赋值展示*/
        this.tableData = list;
      })
    }
  },
  /*页面渲染完后（dom节点挂载完毕）立刻执行，类似于jQuery中的$(function)*/
  mounted(){
    this.loadEmployee();
  }
}
</script>

后台接收数据

Mock.mock("/employee/list","post",function (options) {
  let jsonStr = options.body;//接收前台传回的json字符串信息
  let param = JSON.parse(jsonStr);//转换为json对象，方便取值
  let currentPage = param.currentPage;//获取当前页
  let pagesize = param.pagesize;//获取每页条数
  let list = data.list;//获取总的数据
  /*关键步骤，需要对总数居进行分割，放进分页信息中*/
  let begin = (currentPage-1)*pagesize;
  let end = currentPage*pagesize;
  /*分割同时会进行分页*/
  list = list.slice(begin,end);
  /*响应至前台的数据*/
  return {//返回总条数进行分页，返回分页列表
    "list":list,
    "total":data.list.length
  }
});

2、高级查询

	<!--高级查询，使用行内表单:inline="true"
    :model="searchForm双向绑定的公共前缀，类似于定义一个对象，里面可以又字段-->
    <el-form style="float: left" :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadEmployee">查询</el-button>
      </el-form-item>
    </el-form>

点击查询的时候可以直接调用已有的分页方法，将需要查询的内容作为参数进行传递

let param = {"currentPage": this.currentPage, "pageSize": this.pageSize, "name":this.searchForm.name};

3、删除

删除得显示样式

	<!--编辑或删除操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

删除前台方法

 	/*删除按钮执行得方法*/
    handleDelete(index, row) {
      this.$confirm('亲！你确定要删除这条数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {//删除成功执行这里
        /*删除成功时候发送axios请求到后台，同时把需要删除得那行数据作为参数*/
        this.$http.post("/employee/delete",row).then(res=>{
          let {success,msg} = res.data;
          if(success){/*根据后台传回得Boolean值显示提示信息*/
            this.$message({
              type: 'success',
              message: msg
            });
          } else {/*删除失败*/
            this.$message.error(msg);
          }
        });
      }).catch(() => {//删除失败执行这里，因为是模拟数据所以暂时没有方法
      });
    }

删除向后台发送axios请求

/*对删除请求进行拦截*/
Mock.mock("/employee/delete","post",function (options) {
  return {
    "success":true,
    "msg":"删除成功"
  }
});

4、新增

页面样式需要使用弹出框以及按钮

	<el-form-item>
        <el-button type="primary" @click="loadEmployee">查询</el-button>
        <el-button type="success" @click="openDialog">新增</el-button>
      </el-form-item>
	<!--新增按钮-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
      <el-form label-width="80px" :model="addForm">
        <el-form-item label="名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

传输数据

 	/*新增的from表单*/
      addForm:{
        name:"",
        phone:"",
        email:"",
        address:""
      },
      //弹出框默认关闭状态
      dialogVisible:false,
      
      
     /*新增弹出框*/
    openDialog(){
      //修改弹出框标题
      this.title = "新增";
      //清空form表单
      this.addForm.id = "";
      this.addForm.name = "";
      this.addForm.email = "";
      this.addForm.phone = "";
      this.addForm.address = "";
      //显示新增得弹出框
      this.dialogVisible = true;
    }

5、修改

前端显示使用得还是之前编辑与删除使用得

	<!--编辑或删除操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

为编辑按钮注册事件，可以使用新增得弹出框，只需要在新增得基础上传输数据做一个区分，为了实现回显

	handleEdit(index, row) {
        /*修改编译弹出框得标题*/
        this.title = "修改";
        /*回显数据*/
        this.addForm.id = row.id;
        this.addForm.name = row.name;
        this.addForm.email = row.email;
        this.addForm.phone = row.phone;
        this.addForm.address = row.address;
        //显示新增得弹出框
        this.dialogVisible = true;
    },
0423WANG
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值