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

最新推荐文章于 2024-05-08 12:36:30 发布

一条要上岸的鱼

最新推荐文章于 2024-05-08 12:36:30 发布

阅读量1.3w

点赞数 9

分类专栏： Vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/wk3510/article/details/126940725

版权

Vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

三、elementui+axios+后台代码

一、正文

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

二、elementui布局框架

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

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

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

2.1 如何使用elementui组件

需要在相应的网页中引入vue和elementui的文件

注意：必须先引入Vue然后再引入element

2.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中定义得数据tableData
           border表示设置表格边框
           el-table-column:表示列标签
              prop:该属性得名称必须和tableData中对象得属性名一致。
              label：表格得标题
              width: 设置列得宽度
       -->
       <el-table
               :data="tableData"
               border
               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-column
                   fixed="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-column
                   fixed="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>

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

三、elementui+axios+后台代码

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

3.1 创建数据库

-- 创建数据库
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)

3.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.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;
    }

3.4 测试DAO方法

package com.aaa.test;
 
import com.aaa.dao.EmpDao;
import org.junit.Test;
 
public class TestEmpDao {
    private EmpDao empDao=new EmpDao();
    @Test
    public void testFindAll(){
        System.out.println(empDao.findAll());
    }
}

3.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();
    @Override
    protected 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对象。---fastjson
        String result = JSON.toJSONString(list);
        PrintWriter writer = resp.getWriter();
        //输出给客户
        writer.print(result);
        //关闭资源
        writer.flush();
        writer.close();
    }
}

3.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中定义得数据tableData
           border表示设置表格边框
           el-table-column:表示列标签
              prop:该属性得名称必须和tableData中对象得属性名一致。
              label：表格得标题
              width: 设置列得宽度
       -->
       <el-table
               :data="tableData"
               border
               style="width: 100%">
           <el-table-column
                   prop="empId"
                   label="员工编号"
                   >
           </el-table-column>
           <el-table-column
                   prop="empName"
                   label="员工姓名"
                   >
           </el-table-column>
           <el-table-column
                   prop="empSex"
                   label="性别">
           </el-table-column>
           <el-table-column
                   prop="empAge"
                   label="年龄">
           </el-table-column>
           <el-table-column
                   prop="empSalary"
                   label="薪水">
           </el-table-column>
           <el-table-column
                   prop="deptId"
                   label="部门编号">
           </el-table-column>
           <el-table-column
                   fixed="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-column
                   prop="empSex"
                   label="性别">
               <template slot-scope="scope">
                   <el-tag size="medium"> {{ scope.row.empSex==0?"男":"女" }}</el-tag>
               </template>
           </el-table-column>