elementui布局框架 elementui+axios+后台代码删除添加_html-js-css

1. elementui布局框架

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

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

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

1.1 如何使用elementui组件

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

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

(2)设置表格组件




    
    Title

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

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

2. 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: 员工表的实体类
 * @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 findAll(){
        List 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:
 * @create: 2022-05-26 15:30
 **/
public class TestEmpDao {
    private EmpDao empDao=new EmpDao();
    @Test
    public 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();
    @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 list = empDao.findAll();
        //把java集合转换为json对象。---fastjson
        String result = JSON.toJSONString(list);
        PrintWriter writer = resp.getWriter();
        //输出给客户
        writer.print(result);
        //关闭资源
        writer.flush();
        writer.close();
    }
}

(6)展示到网页




    
    Title

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

3.删除

(1)前端

 var qs=Qs;     
var that = this;      
    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

(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);
    }

（4）html

//删除方法----->不要起名为delete
            del(id){
                var that = this;
                var qs = Qs;
                //把{}参数转换为请求查询参数类型，在axios提供了一个Qs的插件
                axios.post("StudentServlet",qs.stringify({"method":"delete","id":id})).then(function(result){
                    //console.log(result);
                    if(result.data.code==2000){
                        // that.$message({
                        //     showClose: true,
                        //     message: result.data.msg,
                        //     type: 'success'
                        // });
                        that.$message.success(result.data.msg);
                        that.initTable();
                    }
                });
            },

4.添加

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

(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());
    }

5.表单校验

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; //隐藏d出层
                            }
                        })
                    }
                });

            }

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322035.html

elementui布局框架 elementui+axios+后台代码删除添加

发表评论

评论列表（0条）

elementui布局框架 elementui+axios+后台代码 删除 添加

发表评论

评论列表（0条）

elementui布局框架 elementui+axios+后台代码删除添加