vue+elementui+axios+ssm实现增删改查(保姆级步骤-适合小白)

vue+element+ssm--增删改查

IT光

1649人浏览 · 2023-05-14 21:33:34

IT光 · 2023-05-14 21:33:34 发布

创建web项目

一，配置环境

sql创建学生和班级表

pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>vue_axios_ssm222</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

<dependencies>
    <!--spring webmvc依赖-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.15.RELEASE</version>
    </dependency>
    <!--mybatis的依赖-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.9</version>
    </dependency>
    <!--mysql驱动依赖-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.31</version>
    </dependency>
    <!--druid连接池-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.2.8</version>
    </dependency>
    <!--spring和mybatis整合的依赖-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.7</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>5.2.15.RELEASE</version>
    </dependency>

    <!--jackson的依赖-->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.11.4</version>
    </dependency>

    <!--其他依赖-->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.2</version>
    </dependency>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.13.2</version>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.24</version>
    </dependency>

    <!--jstl标签库的依赖-->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

</dependencies>
</project>

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--注册DispatchServlet-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--如果没有指定参数默认解析WEB-INF/servlerName-servlet.xml-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath*:spring-mvc.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--乱码处理过滤器，由SpringMVC提供-->
    <!-- 处理post请求乱码 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <!-- name固定不变，value值根据需要设置 -->
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <!-- 所有请求都设置utf-8的编码 -->
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

配置springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--1.包扫描-->
    <context:component-scan base-package="com.wqg"/>
    <!--2.注解驱动-->
    <mvc:annotation-driven/>
    <!--3.静态资源放行-->
    <mvc:default-servlet-handler/>
    <!--4.视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--5.配置数据源-->
    <bean id="datasource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/qy165ssm"/>
        <property name="username" value="root"/>
        <property name="password" value="root"/>
    </bean>
    <!--6. SqlSessionFactory：理解为mybatis文件
           spring整合mybatis：把mybatis配置文件的内容整合过来
           封装一个类SqlSessionFactoryBean，整合mybatis配置文件的内容
    -->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="datasource"/>
        <!--指定mybatis映射文件的路径-->
        <property name="mapperLocations" value="classpath*:mapper/*.xml"/>

    </bean>
    <!--7.设置dao接口的代理实现类-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sessionFactory"/>
        <!--dao接口所在的包-->
        <property name="basePackage" value="com.wqg.dao"/>
    </bean>
</beans>

二，查询所有

1.前端页面搭建

在webapp下创建list.jsp

1.下载相关的vue和axios和element文件并在list.jsp中引入

    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" src="/js/index.js"></script>

2.使用element组件编写list.jsp布局

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/14
  Time: 18:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
<div id="app">
    <h2 align="center">学生信息表</h2>
<button @click="selectAll">查询所有</button>
    <!--:data --绑定vue中表格的数据
     el-table-column 表格的列
     prop  显示的数据属性名
     label  表格中表头名称
     -->
    <el-table
            :data="emps"
            style="width: 100%"
    >
        <el-table-column
                prop="sid"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                prop="sname"
                label="姓名"
        >
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="clazz.cname"
                label="班级">
        </el-table-column >
    </el-table>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            //保存所有学生信息
            emps: []
        },
        methods: {
            //查
            selectAll() {
                var that = this;
                axios.get("/stu/list").then(function (result) {
                    if (result.data.code==200){
                        that.emps=result.data.data; //result.data获取统一的json对象
                        //result.data.data获取json对象中的属性data值
                    }else {
                        alert(result.data.msg);
                    }
                })
            },
        }
    })
</script>
</html>

2.后台代码书写

1. 为了满足统一的数据结构，我们需要定义一个统一格式的类：

（1）创建实体类 Result

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Result {
    //表示状态码
    private Integer code;
    //消息提示
    private String msg;
    //响应的数据内容
    private Object data;
}

2.pojo层

班级表

@Data
public class Clazz {
    private Integer cid ;
    private String cname;
}

学生信息表

@Data
public class Stu {
    private Integer sid;
    private String sname;
    private Integer age;
    private String sex;
    private Integer classId;
    private Clazz clazz;

}

3.controller层

StuController类

@Controller
@RequestMapping("/stu")
public class StuController {
    @Autowired
    private Stuservice stuservice;


    //查询所有
    @RequestMapping("/list")
    @ResponseBody //需要引入jackson的依赖
    public Result list() {   //返回类型是统一的json类对象
        List<Stu> emps = stuservice.selectAll();
        if (emps.size() == 0) {
            return new com.wqg.vo.Result(500, "查询失败", null);
        }
        return new Result(200, "查询成功", emps);
    }

}

4.service层

Stuservice类

public interface Stuservice {

    //查询所有
    List<Stu> selectAll();

}

StuServiceImpl类

@Service
public class StuServiceImpl implements Stuservice {
    @Autowired
    private StuDao stuDao;
    //查询所有
    @Override
    public List<Stu> selectAll() {
        return stuDao.findAll();
    }
}

dao层

StuDao类

public interface StuDao {
    //查询所有
    public List<Stu> findAll();
}

StuMapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namesapce的内容必须和对应的接口路径映射-->
<mapper namespace="com.wqg.dao.StuDao">
    <resultMap id="StudentMap" type="com.wqg.pojo.Stu" autoMapping="true">
        <id property="sid" column="sid"/>
        <result property="classId" column="class_id"/>
        <association property="clazz" javaType="com.wqg.pojo.Clazz" autoMapping="true">
            <id property="cid" column="cid"/>
            <result property="cname" column="cname"/>
        </association>
    </resultMap>
    <!--查询所有-->
    <select id="findAll" resultMap="StudentMap">
        select s.sid , s.sname , s.age , s.sex , s.class_id ,
               c.cid , c.cname
        from student s join class c on s.class_id = c.cid
    </select>
</mapper>

三，删除功能

1.前端布局

(1)去掉查询所有按钮设置页面加载完成后立即执行查询所有

 //当页面加载创建完毕后执行，无需任何事件来触发
        created() {
            this.selectAll();
        },

(2)添加学生操作列按钮

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-setting"   size="small" >编辑</el-button>
        <el-button type="danger" icon="el-icon-delete"   size="small" >删除</el-button>
    </template>
</el-table-column>

(3)删除按钮功能

1.添加点击事件并传入当前行的学生 id 作为参数

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-setting"   size="small" >编辑</el-button>
        <el-button type="danger" icon="el-icon-delete"   size="small" @click="deletestu(scope.row.sid)">删除</el-button>
    </template>
</el-table-column>

2.methods添加删除事件

methods:{
    //删除事件
    deletestu(sid){}
    }

3.删除的弹框确认提示 ———>从element组件库直接复制粘贴即可

//删除事件
deletestu(sid){
    //提示框
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
    }).then(() => {
        //通过axios调用我们的删除接口
        var that = this;
        axios.get("stu/delete?sid="+sid).then(function (result){
            if (result.data.code==200){
                //1.弹出一个信息
                that.$message.success(result.data.msg);
                //2.重新加载表格数据
                that.selectAll();
            }else {
                //弹出一个信息
                that.$message.error(result.data.msg)
            }
        })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    });
},

2.后台代码书写

(1)controller层

//删
@RequestMapping("/delete")
@ResponseBody
public Result delete(Integer sid){
    int row = stuservice.delete(sid);
    if (row == 0){
        return new Result(500,"删除失败",null);
    }
    return new Result(200,"删除成功",null);
}

(2)service层

  //删
    int delete(Integer sid);

//删
  public int delete(Integer sid) {
      int row = stuDao.delete(sid);
      return row;
  }

(3)StuDao层

   //删
    int delete(Integer sid);

(4)StuMapper.xml文件

  <!--删-->
    <delete id="delete" parameterType="com.wqg.pojo.Stu">
        delete from student where sid = #{sid}
    </delete>

四，添加功能

1.前端布局

(1)添加的网页布局

 <%--添加--%>
  <el-button type="success" @click="addStu">添加</el-button>
  <%--添加对话框的开始
       :visible.sync:控制对话框的显示和隐藏--%>
  <el-dialog
          title="添加学生信息"
          :visible.sync="dialogVisible"
          width="30%">
      <%--el-form:表示表单标签
            :model表示表单对象 它和vue中的data要绑定再一起。
     --%>
      <el-form ref="form" :model="addStuForm" label-width="80px">
          <el-form-item label="姓名">
              <el-input v-model="addStuForm.sname"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
              <el-input v-model="addStuForm.age"></el-input>
          </el-form-item>
          <el-form-item label="性别">
              <el-input v-model="addStuForm.sex"></el-input>
          </el-form-item>
          <el-form-item label="所在班级">
              <el-select v-model="addStuForm.classId" placeholder="请选择所在班级">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
              </el-select>
          </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>

(2)methods中加入事件

//添加按钮事件
addStu() {
    this.dialogVisible = true;
},

(3)data中加入事件

 //控制添加对话的显示和隐藏
    dialogVisible: false,
    //添加学生的表单对象
    addStuForm:{},

(4)methods中加入查询所有班级事件

 //查询所有班级信息
    getAllClazz(){
      var that= this;
      axios.get("/clazz/list").then(function (result){
          that.clazz=result.data.data;
      })
    },

(5)data中加入保存班级信息事件

  //保存所有班级信息
    clazz:[],

(6)created中加入页面加载后自动显示班级事件

//自动显示所有班级
this.getAllClazz();

2.后台代码书写

(1)controller层

新建ClazzController类  查询班级

@Controller
@RequestMapping("/clazz")
public class ClazzController {
    @Autowired
    private ClazzService clazzService;

    //查询所有班级信息
    @RequestMapping("/list")
    @ResponseBody
    public Result list() {
        List<Clazz> emps = clazzService.findAll();
        if (emps.size() == 0) {
            return new com.wqg.vo.Result(500, "查询学生班级失败", null);
        }
        return new Result(200, "查询学生班级成功", emps);
    }
}

(2)service层

新建ClazzService接口

public interface ClazzService {
    List<Clazz> findAll();
}

新建ClazzServiceImpl类

@Service
public class ClazzServiceImpl implements ClazzService {

    @Autowired
    private ClazzDao clazzDao;

    @Override
    public List<Clazz> findAll() {
        List<Clazz>row=clazzDao.findAll();
        return row;
    }
}

(3)dao层

新建ClazzDao接口

public interface ClazzDao {
    List<Clazz> findAll();
}

(4)新建ClazzMapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namesapce的内容必须和对应的接口路径映射-->
<mapper namespace="com.wqg.dao.ClazzDao">
    <select id="findAll" resultType="com.wqg.pojo.Clazz">
        select * from class
    </select>
</mapper>

(5)优化表单---->主要是性别和班级回显

  <%--添加--%>
    <el-button type="success" @click="addStu">添加</el-button>
    <%--添加对话框的开始
         :visible.sync:控制对话框的显示和隐藏--%>
    <el-dialog
            title="添加学生信息"
            :visible.sync="dialogVisible"
            width="30%">
        <%--el-form:表示表单标签
              :model表示表单对象 它和vue中的data要绑定再一起。
       --%>
        <el-form ref="form" :model="addStuForm" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="addStuForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="addStuForm.age"></el-input>
            </el-form-item>

            <el-form-item label="学生性别">
                <template>
                    <el-radio v-model="addStuForm.sex" label="男"></el-radio>
                    <el-radio v-model="addStuForm.sex" label="女"></el-radio>
                </template>
            </el-form-item>

            <el-form-item label="所在班级">
                <el-select v-model="addStuForm.classId" placeholder="请选择所在班级" style="width:100%">
                    <el-option v-for="c in clazz" :label="c.cname" :value="c.cid"></el-option>
                </el-select>
            </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>

(6)确认添加按钮

确定按钮添加事件绑定

<el-button type="primary" @click="confirmAddStu">确 定</el-button>

点击确定按钮执行confirmAddStu方法

//添加确认按钮点击事件
confirmAddStu(){
    var that= this;
    axios.post("/stu/insert",this.addStuForm).then(function (result){
        if (result.data.code==200){
            that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible=false;
            //重新加载表格数据
            that.selectAll();
        }else {
            that.$message.error(result.data.msg);
        }
    })
},

(7)后台代码书写

(8)controller层

//添加
@RequestMapping("/insert")
@ResponseBody
public Result insert(@RequestBody Stu stu){
    int row = stuservice.save(stu);
    if (row==0){
        return new Result(500,"添加失败",null);
    }
    return new Result(200,"添加成功",null);
}

(9)service层

//添加
    int save(Stu stu);

  //添加
    @Override
    public int save(Stu stu) {
        int row = stuDao.save(stu);
        return row;
    }

(10)dao层

  //添加
    int save(Stu stu)

(11)StuMapper.xml文件

注意：参数数量一定和数据库相等

     <!--添加-->
    <insert id="save" parameterType="com.wqg.pojo.Stu">
        insert into student values (null,#{sname},#{age},#{sex},#{classId},null)
    </insert>

五，编辑功能

1.前端页面布局

(1)编辑加入事件

<el-button type="primary" icon="el-icon-edit" size="small" @click="editStu(scope.row)">编辑</el-button>

(2)methods加入编辑按钮事件

            //编辑按钮事件
            editStu(row) {
                this.editDialogVisible = true;
                //回显 当前行赋值给修改学生的表单对象
                this.editStuForm = row;
                //回显头像
                this.imageUrl=row.headImg;
            },

(3)新增编辑表单

 <%--编辑的对话框开始--%>
    <el-dialog
            title="编辑学生信息"
            :visible.sync="editDialogVisible"
            width="30%">
        <%--el-form:表示表单标签
              :model表示表单对象 它和vue中的data要绑定再一起。--%>
        <el-form ref="form" :model="editStuForm" label-width="80px">

           
            <el-form-item label="姓名">
                <el-input v-model="editStuForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editStuForm.age"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <template>
                    <el-radio v-model="editStuForm.sex" label="男"></el-radio>
                    <el-radio v-model="editStuForm.sex" label="女"></el-radio>
                </template>
            </el-form-item>

            <el-form-item label="所在班级">
                <el-select v-model="editStuForm.classId" placeholder="请选择所在班级" style="width:100%">
                    <el-option v-for="c in clazz" :label="c.cname" :value="c.cid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmUpdateStu">确 定</el-button>
  </span>
    </el-dialog>
    <%--编辑的对话框结束--%>

(4)data加入

    //控制编辑对话框的显示和隐藏
     editDialogVisible: false,
    //修改学生的表单对象
    editStuForm:{},

(5)点击编辑的确定按钮

点击确定在methods中触发confirmUpdateStu事件

 //编辑确认按钮点击事件
            confirmUpdateStu() {
                var that = this;
                axios.post("/stu/update", this.editStuForm).then(function (result) {
                    if (result.data.code == 200) {
                        that.$message.success(result.data.msg);
                        //关闭对话框
                        that.editDialogVisible = false;
                        //重新加载表格数据
                        that.selectAll();
                    } else {
                        that.$message.error(result.data.msg);
                    }

                })
            },

2.后台代码书写

(1)controller层

//修改
@RequestMapping("/update")
@ResponseBody
public Result update(@RequestBody Stu stu){
    int row = stuservice.update(stu);
    if (row==0){
        return new Result(500,"添加失败",null);
    }
    return new Result(200,"添加成功",null);
}

(2)service层

 //编辑
    int update(Stu stu);

  //编辑
    @Override
    public int update(Stu stu) {
        int row = stuDao.update(stu);
        return row;
    }

(3)dao层

   //编辑
    int update(Stu stu);

(4)StuMapper.xml文件

 <!--编辑-->
    <update id="update">
        update student set sname=#{sname},age=#{age},sex=#{sex},class_id=#{classId}  where sid=#{sid}
    </update>

增删改查结束....

后续内容待更新.......