1.正文

1、elementui布局框架
2、使用elementui+vue+axios完成一个案例。

2.elementui布局框架

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

换句话说:Element它是再vue2.0得基础上，提供了各种组件(比如表单表格菜单导航.....),使用这些组件可以更好得完成功能和布局。

这些组件我们使用谁我们就讲谁，你们要主要看看我是如何使用这些组件得，那么你再使用其他组件时也可以按照这种方式来用。

2.1如何使用elementui组件

（1）需要再相应得网页中引入vue和elementui得文件

注意:==必须先引入vue在引入element==

 <!--引入element得css样式--><link type="text/css" rel="stylesheet" href="css/index.css"/><!--引入vue得js文件 这个必须在element之前引入--><script type="text/javascript" src="js/vue.js"></script><!--element得js文件--><script type="text/javascript" src="js/index.js"></script>

(2)设置表格组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入element得css样式--><link type="text/css" rel="stylesheet" href="css/index.css"/><!--引入vue得js文件 这个必须在element之前引入--><script type="text/javascript" src="js/vue.js"></script><!--element得js文件--><script type="text/javascript" src="js/index.js"></script>
</head>
<body><!--创建一个标签使vue挂载到该标签上--><div id="app"><!--:data==绑定了vue中定义得数据tableDataborder表示设置表格边框el-table-column:表示列标签prop:该属性得名称必须和tableData中对象得属性名一致。label：表格得标题width: 设置列得宽度--><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnfixed="right"label="操作"><template slot-scope="scope"><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table></div>
</body>
<!--表示自定义得js文件-->
<script>var app=new Vue({el:"#app",data:{tableData:[{"date":"2020-05-11","name":"张三","address":"北京"},{"date":"2021-05-11","name":"李四","address":"郑州"},{"date":"2022-05-11","name":"五五","address":"杭州"},{"date":"2023-06-11","name":"六六","address":"上海"},],}})
</script>
</html>

把上面得操作文字换成按钮形式:

<el-table-columnfixed="right"label="操作"><template slot-scope="scope"><el-button type="success" size="small" icon="el-icon-edit" plain>编辑</el-button><el-button type="danger"  size="small" icon="el-icon-delete" plain>删除</el-button></template>
</el-table-column>

浏览器并没有显示图标得样式:我们需要引入下面三个文件到工程中

3. elementui+axios+后台代码

我们上面的表格数据都是死数据。而我们实际开发中表格数据应该从后台数据库中查询获取的。

-- 创建数据库
create database vue01;
-- 切换数据库到vue01
use vue01;
-- 创建表
create table t_dept(dept_id int primary key auto_increment COMMENT '部门号',dept_name varchar(20) COMMENT '部门名称',loc varchar(20) COMMENT '部门所在地'
);
create table t_emp(emp_id int primary key auto_increment COMMENT '员工编号',emp_name varchar(20) COMMENT '员工姓名',emp_sex TINYINT COMMENT '性别 0表示男 1表示女',emp_age int  COMMENT '年龄',emp_salary DECIMAL(7,2) COMMENT '工资',dept_id int COMMENT '关联的部门号'
);
-- 添加数据
insert into t_dept values
(null,'研发部','郑州'),(null,'市场部','杭州'),(null,'人事部','北京')insert into t_emp values
(null,'张三',0,25,1666.65,1),
(null,'李四',1,26,2555.65,2),
(null,'王五',0,32,6666.65,3),
(null,'赵六',0,36,8888.65,1)

(2)创建员工实体类

package com.aaa.entity;/*** @program: vue01-qy151* @description: 员工表的实体类* @author: ysh* @create: 2022-05-26 15:21**/
public class Emp {//员工编号private int empId;//员工姓名private String empName;//性别private int empSex;//年龄private int empAge;//薪水private Double empSalary;//部门号private int deptId;public int getEmpId() {return empId;}public void setEmpId(int empId) {this.empId = empId;}public String getEmpName() {return empName;}public void setEmpName(String empName) {this.empName = empName;}public int getEmpSex() {return empSex;}public void setEmpSex(int empSex) {this.empSex = empSex;}public int getEmpAge() {return empAge;}public void setEmpAge(int empAge) {this.empAge = empAge;}public Double getEmpSalary() {return empSalary;}public void setEmpSalary(Double empSalary) {this.empSalary = empSalary;}public int getDeptId() {return deptId;}public void setDeptId(int deptId) {this.deptId = deptId;}
}

(3)员工的dao

/*** 查询所有员工信息* @return 所有员工信息*/public List<Emp> findAll(){List<Emp> list = new ArrayList<>();try {getConn();String sql="select * from t_emp";ps=connection.prepareStatement(sql);rs=ps.executeQuery();while(rs.next()){Emp emp=new Emp();emp.setEmpId(rs.getInt("emp_id"));emp.setEmpName(rs.getString("emp_name"));emp.setEmpAge(rs.getInt("emp_age"));emp.setEmpSalary(rs.getDouble("emp_salary"));emp.setEmpSex(rs.getInt("emp_sex"));emp.setDeptId(rs.getInt("dept_id"));list.add(emp);}} catch (Exception e) {e.printStackTrace();} finally {closeAll();}return list;}

(4)测试dao方法

package com.aaa.test;import com.aaa.dao.EmpDao;
import org.junit.Test;/*** @program: vue01-qy151* @description:* @author: ysh* @create: 2022-05-26 15:30**/
public class TestEmpDao {private EmpDao empDao=new EmpDao();@Testpublic void testFindAll(){System.out.println(empDao.findAll());}
}

(5)controller

package com.aaa.controller;import com.aaa.dao.EmpDao;
import com.aaa.entity.Emp;
import com.alibaba.fastjson.JSON;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;@WebServlet(name = "EmpServlet",urlPatterns = "/EmpServlet")
public class EmpServlet extends HttpServlet {private EmpDao empDao=new EmpDao();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");//接受处理的标识String method = req.getParameter("method");if("delete".equals(method)){}else{//查询所有的操作queryAll(req,resp);}}private void queryAll(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {List<Emp> list = empDao.findAll();//把java集合转换为json对象。---fastjsonString result = JSON.toJSONString(list);PrintWriter writer = resp.getWriter();//输出给客户writer.print(result);//关闭资源writer.flush();writer.close();}
}

(6)展示到网页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入element得css样式--><link type="text/css" rel="stylesheet" href="css/index.css"/><!--引入vue得js文件 这个必须在element之前引入--><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/axios.min.js"></script><!--element得js文件--><script type="text/javascript" src="js/index.js"></script>
</head>
<body><!--创建一个标签使vue挂载到该标签上--><div id="app"><!--:data==绑定了vue中定义得数据tableDataborder表示设置表格边框el-table-column:表示列标签prop:该属性得名称必须和tableData中对象得属性名一致。label：表格得标题width: 设置列得宽度--><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="empId"label="员工编号"></el-table-column><el-table-columnprop="empName"label="员工姓名"></el-table-column><el-table-columnprop="empSex"label="性别"></el-table-column><el-table-columnprop="empAge"label="年龄"></el-table-column><el-table-columnprop="empSalary"label="薪水"></el-table-column><el-table-columnprop="deptId"label="部门编号"></el-table-column><el-table-columnfixed="right"label="操作"><template slot-scope="scope"><el-button type="success" size="small" icon="el-icon-edit" plain>编辑</el-button><el-button type="danger"  size="small" icon="el-icon-delete" plain>删除</el-button></template></el-table-column></el-table></div>
</body>
<!--表示自定义得js文件-->
<script>var app=new Vue({el:"#app",data:{tableData:[],},//页面加载完毕后执行；created(){this.initTable();},methods:{//初始化表格数据initTable(){var that=this;//通过axios后台服务发送异步请求axios.post("EmpServlet").then(function(result){if(result.data.code===2000){//===:比较值和引用是否相同that.tableData=result.data.data;}else{}})}}})
</script>
</html>

我们发现上面的性别显示的为数字如何显示男和女呢我们需要自定义列

<el-table-columnprop="empSex"label="性别"><template slot-scope="scope"><el-tag size="medium"> {{ scope.row.empSex==0?"男":"女" }}</el-tag></template></el-table-column>

4.删除

(1)前端

var qs=Qs; axios.post("EmpServlet",qs.stringify({"method":"delete","id":id})).then(function(result){
that.initTable();
})

axios底层post提交的参数会封装到request playload请求载体中，使用request.getParamter是无法接受到请求载体的参数， request.getParamter它只能接受query param参数和form data参数。我们可以借助qs把请求载体的参数转换为form data参数。转换的步骤

(1) 在网页中引入qs
<script type="text/javascript" src="js/qs.min.js"></script>
(2) 把Qs对象重写赋值一个参数
var qs=Qs;
(3) 把 request playload使用 stringify方法转换
qs.stringify({"":"","":""})

（2）servlet

private void delete(HttpServletRequest req, HttpServletResponse resp)  throws ServletException, IOException{String id = req.getParameter("id");int row=empDao.delete(id);PrintWriter writer = resp.getWriter();if(row==1){ //删除成功CommonResult commonResult=new CommonResult(2000,"删除成功",null);writer.print(JSON.toJSONString(commonResult));}else{ //删除失败CommonResult commonResult=new CommonResult(5000,"删除失败",null);writer.print(JSON.toJSONString(commonResult));}writer.flush();writer.close();}

(3) dao

   //删除操作public int delete(String id) {String  sql ="delete from t_emp where emp_id=?";return edit(sql,id);}

5.添加功能

点击添加按钮显示一个弹出层

 <el-dialogtitle="添加员工":visible.sync="addDialogVisible"width="30%"><!--:model==绑定表单数据--><el-form :model="addform"><el-form-item label="姓名" label-width="40px"><el-input v-model="addform.empName" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" label-width="40px"><el-radio v-model="addform.empSex" :label="0">男</el-radio><el-radio v-model="addform.empSex" :label="1">女</el-radio></el-form-item><el-form-item label="年龄" label-width="40px"><el-input v-model="addform.empAge" autocomplete="off"></el-input></el-form-item><el-form-item label="薪水" label-width="40px"><el-input v-model="addform.empSalary" autocomplete="off"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="">确 定</el-button></span></el-dialog>

(2)添加点击事件

 //添加的点击事件addEmp(){var qs=Qs;var that=this;axios.post("EmpServlet?method=insert",qs.stringify(this.addform)).then(function(result){if(result.data.code===2000){that.$message.success(result.data.msg);that.initTable();//重新加载表格that.addDialogVisible=false;}})}

(3)添加servlet

//添加private void insert(HttpServletRequest req, HttpServletResponse resp)  throws ServletException, IOException{String name = req.getParameter("empName");String sex = req.getParameter("empSex");String age = req.getParameter("empAge");String salary = req.getParameter("empSalary");Emp emp = new Emp(name,Integer.parseInt(sex),Integer.parseInt(age),Double.parseDouble(salary));int row=empDao.add(emp);PrintWriter writer = resp.getWriter();if(row==1){ //添加成功CommonResult commonResult=new CommonResult(2000,"添加成功",null);writer.print(JSON.toJSONString(commonResult));}else{ //添加失败CommonResult commonResult=new CommonResult(5000,"添加失败",null);writer.print(JSON.toJSONString(commonResult));}writer.flush();writer.close();}

(4)dao的代码

 /*** 添加功能* @param emp* @return*/public int add(Emp emp) {String sql="insert into t_emp(emp_name,emp_sex,emp_age,emp_salary) values(?,?,?,?)";return edit(sql,emp.getEmpName(),emp.getEmpSex(),emp.getEmpAge(),emp.getEmpSalary());}

6.修改功能

（1）点击编辑回显数据

<!--修改员工的对话框--><el-dialogtitle="修改员工":visible.sync="editDialogVisible"width="30%"><!--:model==绑定表单数据--><el-form :model="editform" :rules="addRules" ref="addRuleForm"><el-form-item label="姓名" label-width="80px" prop="empName"><el-input v-model="editform.empName" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" label-width="80px"><el-radio v-model="editform.empSex" :label="0">男</el-radio><el-radio v-model="editform.empSex" :label="1">女</el-radio></el-form-item><el-form-item label="年龄" label-width="80px" prop="empAge"><el-input v-model.number="editform.empAge" autocomplete="off"></el-input></el-form-item><el-form-item label="薪水" label-width="80px"><el-input v-model="editform.empSalary" autocomplete="off"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editEmp">确定修改</el-button></span></el-dialog>

注意: ==:visible.sync="editDialogVisible" 一定要在vue data中定义editDialogVisible :model="editform" 保证在vue data中定义editform==

<el-button @click="edit(scope.row)" type="success" size="small" icon="el-icon-edit" plain>编辑</el-button>//修改按钮点击事件edit(row){//1.显示修改弹出层this.editDialogVisible=true;//2.数据回显this.editform=row;},

(2) 点击确认修改按钮

<el-button type="primary" @click="editEmp">确定修改</el-button>

//确认修改
editEmp(){var that=this;var qs=Qs;this.$refs['editRuleForm'].validate((valid) => {if (valid) { //表单校验通过axios.post("EmpServlet?method=edit",qs.stringify(this.editform)).then(function(result){if(result.data.code===2000){that.$message.success(result.data.msg);//弹出成功的消息that.editDialogVisible=false; //隐藏修改对话框that.initTable(); //重新加载表格数据}})}});
},

servlet:

//修改操作private void edit(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{String name = req.getParameter("empName");String sex = req.getParameter("empSex");String age = req.getParameter("empAge");String salary = req.getParameter("empSalary");String  id = req.getParameter("empId");Emp emp = new Emp(Integer.parseInt(id),name,Integer.parseInt(sex),Integer.parseInt(age),Double.parseDouble(salary));int row=empDao.update(emp);PrintWriter writer = resp.getWriter();if(row==1){ //删除成功CommonResult commonResult=new CommonResult(2000,"修改成功",null);writer.print(JSON.toJSONString(commonResult));}else{ //删除失败CommonResult commonResult=new CommonResult(5000,"修改失败",null);writer.print(JSON.toJSONString(commonResult));}writer.flush();writer.close();}

dao:

/*** 修改功能* @param emp* @return*/public int update(Emp emp) {String sql = "update t_emp set emp_name=?,emp_sex=?,emp_age=?,emp_salary=? where emp_id=?";return edit(sql,emp.getEmpName(),emp.getEmpSex(),emp.getEmpAge(),emp.getEmpSalary(),emp.getEmpId());}

7.登录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title><!--引入element得css样式--><link type="text/css" rel="stylesheet" href="css/index.css"/><!--引入vue得js文件 这个必须在element之前引入--><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/qs.min.js"></script><script type="text/javascript" src="js/axios.min.js"></script><!--element得js文件--><script type="text/javascript" src="js/index.js"></script><style>/*body{background: url("imgs/1.webp") no-repeat;}*/body,.box{overflow: hidden;height: 100%;}.box{background: url("imgs/1.webp") no-repeat;}#loginBox {width: 450px;height: 300px;background: white;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}#loginBox>.avatar_box{height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;}#loginBox>.avatar_box>img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}</style>
</head>
<body background="imgs/3.webp">
<div class="box"><div id="loginBox"><!-- 头像 --><div class="avatar_box"><img src="imgs/1.jpg" /></div><el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form"><el-form-item label="账号:" prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="密码:" prop="password"><el-input v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm()">登录</el-button></el-form-item></el-form></div>
</div><script>var app = new Vue({el: ".box",data: {loginForm: {},//校验规则rules: {username: [{required: true, message: "请输入账号", trigger: "blur"},{min: 5, max: 12, message: "账号的长度必须{5~12}", trigger: "blur"},],password: [{required: true, message: "请输入密码", trigger: "blur"},{min: 6, max: 12, message: "密码的长度必须{6~12}", trigger: "blur"},]}},methods: {submitForm() {var that = this;var qs = Qs;this.$refs['loginFormRef'].validate((valid) => {if (valid) {axios.post("UserServlet?method=login", qs.stringify(this.loginForm)).then(function (result) {if (result.data.code === 2000) {that.$message.success(result.data.msg);location.href = "element01.html"} else {that.$message.error(result.data.msg);}});}})}}})
</script>
</body>
</html>

(2)servlet

 private void login(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {PrintWriter writer = resp.getWriter();String username = req.getParameter("username");String password = req.getParameter("password");if("admin".equals(username)&&"123456".equals(password)){HttpSession session = req.getSession();session.setAttribute("username",username);CommonResult commonResult=new CommonResult(2000,"登录成功",null);writer.print(JSON.toJSONString(commonResult));}else{CommonResult commonResult=new CommonResult(5000,"账号或密码错误",null);writer.print(JSON.toJSONString(commonResult));}writer.flush();writer.close();}

8.表单校验

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

如果不符合表单的校验应该不允许表单提交

//添加的点击事件addEmp(){this.$refs['addRuleForm'].validate((valid) => {if (valid) { //表单校验通过var qs=Qs;var that=this;axios.post("EmpServlet?method=insert",qs.stringify(this.addform)).then(function(result){if(result.data.code===2000){that.$message.success(result.data.msg);that.initTable();//重新加载表格that.addDialogVisible=false; //隐藏弹出层}})}});}

9.添加登录过滤器

package com.qy151.filter;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @unthor : YSH* @date : 13:44 2022/5/29*/
@WebFilter(filterName = "UserFilter",urlPatterns = "/*")
public class UserFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletException {}public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest request= (HttpServletRequest) servletRequest;HttpServletResponse response= (HttpServletResponse) servletResponse;//1.接受请求路径String path = request.getRequestURI();//2.设置放行的路径if(path.contains("login.html")||path.contains("UserServlet")||path.endsWith(".js")||path.endsWith(".css")||path.endsWith(".jpg")||path.endsWith(".gif")||path.endsWith(".jpeg")||path.endsWith(".webp")||path.endsWith(".png")){filterChain.doFilter(request,response);return;}//3.判断用户是否登录Object username = request.getSession().getAttribute("username");if(username!=null){filterChain.doFilter(request,response);return;}//4.跳转到登录页面response.sendRedirect("login.html");}public void destroy() {}
}

elementui的介绍和使用以及使用elementui完成增删改查和登录相关推荐

Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
SpringBoot+MySql+ElementUI实现一对多的数据库的设计以及增删改查的实现
场景业务中经常会用到一对多的数据库的设计与数据的增删改查的实现. 比如要实现一个对手机应用配置允许访问的权限的业务. app与权限就是一对多的关系.即一个app可以拥有多个权限. 注: 博客: ht ...
mysql一对多增删改查_SpringBoot+MySql+ElementUI实现一对多的数据库的设计以及增删改查的实现...
场景业务中经常会用到一对多的数据库的设计与数据的增删改查的实现. 比如要实现一个对手机应用配置允许访问的权限的业务. app与权限就是一对多的关系.即一个app可以拥有多个权限. 注: 实现首先设 ...
ElementUI中使用el-calendar实现基于日历的节假日的增删改查
场景前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查. 主页面显示效果如下点击日历组件上的某天进行新增节假日时点击已经存在的节假日编辑时博客: https:/ ...
使用v-cli创建项目，引入element-ui构建用户管理页面实现增删改查
文章目录前言一.使用v-cli创建vue项目文件二.引入element-ui 三.开始实现功能 1.初步页面,表格绘制 2.实现增加功能 3.实现修改和删除功能 4.实现查询操作总结前言记 ...
MongoDB从立地到成佛(介绍、安装、增删改查)
目录课程导学第一关 MongoDB介绍 1.1 非关系型数据库 1.2 MongoDB的特点 1.3 MongoDB的应用场景第二关 MongoDB安装和表结构 2.1 MongoDB的安装 2 ...
Java-GUI编程实战之管理系统 Day3【学生管理系统GUI设计、学生管理系统增删改查、项目MVC结构介绍、Java技能图谱】
视频.课件.源码[链接:https://pan.baidu.com/s/13ffqGDzH-DZib6-MFViW3Q 提取码:zjxs] Java-GUI编程实战之管理系统 Day1[项目开发流程. ...
一、mongodb数据库系列——介绍和安装简单使用增删改查
一.Mongodb的介绍和安装学习目标了解非关系型数据库的优势了解 mongodb的安装 1. mongodb的介绍 1.1 什么是mongodb mongodb 是一个功能最丰富的NoSQL ...
mac mongodb可视化工具_MongoDB从立地到成佛(介绍、安装、增删改查)
文章作者公众号bigsai,已收录在回车课堂,如有帮助还请不吝啬点个赞赞支持一下! 课程导学大家好我是bigsai,我们都学过数据库,但你可能更熟悉关系(型)数据库例如MySQL,SQL SERVE ...

elementui的介绍和使用以及使用elementui完成增删改查和登录

1.正文

2.elementui布局框架

2.1如何使用elementui组件

3. elementui+axios+后台代码

4.删除

5.添加功能

6.修改功能

7.登录

8.表单校验

9.添加登录过滤器

elementui的介绍和使用以及使用elementui完成增删改查和登录相关推荐

最新文章

热门文章

elementui的介绍和使用 以及使用elementui完成增删改查和登录

1.正文

2.elementui布局框架

2.1如何使用elementui组件

3. elementui+axios+后台代码

4.删除

5.添加功能

6.修改功能

7.登录

8.表单校验

9.添加登录过滤器

elementui的介绍和使用 以及使用elementui完成增删改查和登录相关推荐

最新文章

热门文章

elementui的介绍和使用以及使用elementui完成增删改查和登录

elementui的介绍和使用以及使用elementui完成增删改查和登录相关推荐