springboot+vue 实现增删改查demo

 

1 springboot 项目目录

2 spring 代码--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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.cetc</groupId>
    <artifactId>03-mybatis</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>03-mybatis</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.21</version>
        </dependency>

    </dependencies>

    <build>

        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

3--springboot--bean--Student

package com.cetc.mybatis.bean;

import lombok.Data;

@Data
public class Student {
    private int id;
    private String name;
    private int age;


    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

4--springboot--Controller--studentController

package com.cetc.mybatis.Controller;

import com.cetc.mybatis.bean.Student;
import com.cetc.mybatis.mapper.StudentMapper;
//import com.cetc.mybatis.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class StudentController {
    @Autowired
    private StudentMapper studentMapper;
    @CrossOrigin(origins = "*",maxAge = 3600)
    @GetMapping("/students")
    public List<Student> selectAllStudent(){
        return studentMapper.selectAllStudent();
    }
    //按id查找

    @GetMapping("/studentsbyid/{id}")
    @CrossOrigin
    public Student studentsListById(@PathVariable("id") int id){
        return studentMapper.getStudentByID(id);
    }
    //添加用户
//    @RequestBody
    @CrossOrigin
    @RequestMapping(value = "/add",method = RequestMethod.POST)
    public void addData(@RequestParam(value = "name") String Name ,@RequestParam(value = "age")int Age){
        Student student = new Student();
        student.setName(Name);
        student.setAge(Age);
        studentMapper.add(student);
    }
    //根据id删除信息
    @CrossOrigin
    @GetMapping("/delete/{id}")
    public void deleteData(@PathVariable("id") int id){
         studentMapper.delete(id);
    }
    //修改数据
    @CrossOrigin(value = "http://localhost:8080", maxAge = 1800, allowedHeaders ="*")
    @RequestMapping(value = "/update",method = RequestMethod.POST)
    public void updateData(@RequestParam(value = "name") String Name ,@RequestParam(value = "age")int Age,@RequestParam(value = "id")int Id){
        Student student = new Student();
        student.setName(Name);
        student.setAge(Age);
        student.setId(Id);
        studentMapper.update(student);
    }

}

5--springboot--mapper--studentMapper

package com.cetc.mybatis.mapper;

import com.cetc.mybatis.bean.Student;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface StudentMapper {
    //查询所有
    List<Student> selectAllStudent();
    //根据编号查询
    Student getStudentByID(int id);
    //根据编号删除
    void delete(int id);
    // 更新
    void update(Student student);
    // 添加
    void add(Student student);
}

6--springboot-service--studentService

package com.cetc.mybatis.service;

import com.cetc.mybatis.bean.Student;

import java.util.List;

public interface StudentService {
//查找所有
    List<Student> selectAllStudent();
    //
    List<Student> getStudentByID(int id);
    //
    void delete(int id);
    //
    void update(Student student);
    //新增数据
    void add(Student student);
}

7---springboot--service--studentServiceImpl

package com.cetc.mybatis.service;

import com.cetc.mybatis.bean.Student;
import com.cetc.mybatis.mapper.StudentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;


@Service
public class StudentServiceImpl implements StudentService{
    @Autowired
    private StudentService studentService;

    @Override
    public List<Student> selectAllStudent(){
        return studentService.selectAllStudent();
    }

    @Override
    public List<Student> getStudentByID(int id) {
        return studentService.getStudentByID(id);
    }
    @Override
    public void delete(int id) {
        studentService.delete(id);
    }
//
    @Override
    public void update(Student student) {
        studentService.update(student);
    }
//
    @Override
    public void add(Student student) {
         studentService.add(student);
    }






}

8--springboot--application

package com.cetc.mybatis;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@SpringBootApplication
@MapperScan("com.cetc.mybatis.mapper")
@EnableTransactionManagement  //开启事务
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

9--springboot--resource--mapper--studentMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.cetc.mybatis.mapper.StudentMapper">
<!--    查询所有数据-->
    <select id="selectAllStudent" resultType="com.cetc.mybatis.bean.Student">
        SELECT id,name,age FROM student
    </select>
<!--    根据id查询-->
    <select id="getStudentByID" resultType="com.cetc.mybatis.bean.Student">
        SELECT id,name,age FROM student WHERE id =#{id}
    </select>
<!--    增加数据-->
    <insert id="add" parameterType="com.cetc.mybatis.bean.Student">
        INSERT INTO
        student
        (name,age)
        VALUES
        (#{name},#{age})
    </insert>
    <!-- 改 -->
    <update id="update" parameterType="com.cetc.mybatis.bean.Student">
        UPDATE
        student
        SET
        name  = #{name},age = #{age}
        WHERE
        id = #{id}
    </update>
    <!-- 删 -->
    <delete id="delete" parameterType="com.cetc.mybatis.bean.Student">
        DELETE FROM
        student
        WHERE
        id = #{id}
    </delete>

</mapper>

10--springboot--resource--application.properties

#指定mapper文件的位置
mybatis.mapper-locations=classpath:mapper/*.xml
# 指定bean的位置
mybatis.type-aliases-package=com.monkey1024.mybatis.bean

#数据源

spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.DriverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/spring-data?characterEncoding=utf-8
spring.datasource.type= com.alibaba.druid.pool.DruidDataSource
server.port=8081
# 查看SQL日志
logging.level.com.cetc.mybatis.mapper=debug

11--vue--html

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-form :model="selectForm">
        <el-input v-model="selectForm.id" autocomplete="off" style="width: 200px"></el-input>
        <el-button @click="selectButton">查询</el-button>
      <el-button @click="dialogFormVisible = true">添加</el-button>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <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>

<!--    添加对话框-->
    <div>
      <el-dialog title="添加数据" :visible.sync="dialogFormVisible">
        <el-form :model="form">

          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addButton">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--    修改对话框-->
    <div>
      <el-dialog title="修改数据" :visible.sync="updatedialogFormVisible">
        <el-form :model="updateform">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="updateform.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="updateform.age" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateButton">确 定</el-button>
        </div>
      </el-dialog>
    </div>



  </div>
</template>

12--vue--js

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData:[],
      dialogFormVisible: false,
      updatedialogFormVisible:false,
      selectForm:{
        id:null
      },
      form: {
        name: '',
        age:null
      },
      updateform:{
        id:null,
        name:"",
        age:null,

      },
      formLabelWidth: '120px'

    }
  },
  mounted() {
    this.$axios({
      method:"get",
      url:"http://localhost:8081/students",
    }).then((response)=>{
      console.log(response)
      this.tableData = response.data;
      console.log("eeeeeeeeeeeeeeee")
    })
  },
  methods:{
    //展示
    selectButton : function (){
      console.log(this.selectForm.id)
      this.msg ='hello'
      this.$axios({
        method:"get",
        url:"http://localhost:8081/studentsbyid/" + this.selectForm.id,
      }).then((response)=>{
        console.log(response.data)
        var tableDataArray = [];
        for (let i  in response.data){
          let  o = {};
          o[i] = response.data[i];
          tableDataArray.push(o)
        }
        console.log(tableDataArray)
        console.log(tableDataArray[0])
        this.tableData.id= tableDataArray[0].id;
        this.tableData.name= tableDataArray[1].name;
        this.tableData.age= tableDataArray[2].age;

        console.log("eeeeeeeeeeeeeeee")
      })
    },
    //添加
    addButton:function (){
      this.dialogFormVisible = false
      let formdata = new FormData()
      formdata.append("name",this.form.name)
      formdata.append("age",this.form.age)
      console.log(this.form.name)
      console.log(this.form.age)
      this.$axios({
        method:"post",
        url:"http://localhost:8081/add",
        data: formdata
      }).then((response)=>{
        console.log(response)
        console.log("eeeeeeeeeeeeeeee")
      })

    },
    //修改
    handleEdit(index,row){
      this.updatedialogFormVisible = true
      console.log("编辑")
      console.log(index, row);
      console.log(index)
      console.log(row)
      console.log(row.id)
      this.updateform.id=row.id
      this.updateform.name=row.name
      this.updateform.age = row.age
    },
    //修改确定按钮
    updateButton(){
      let formdata = new FormData()
      formdata.append("name",this.updateform.name)
      formdata.append("age",this.updateform.age)
      formdata.append("id",this.updateform.id)
      console.log(this.updateform.name)
      console.log(this.updateform.age)
      this.$axios({
        method:"post",
        url:"http://localhost:8081/update",
        data: formdata
      }).then((response)=>{
        console.log(response)
        console.log("eeeeeeeeeeeeeeee")
      })
    },
    //删除
    handleDelete(index,row){

      this.$axios({
        method:"get",
        url:"http://localhost:8081/delete/ " + row.id ,
      }).then((response)=>{
        console.log(response)
        console.log("eeeeeeeeeeeeeeee")
      })
    }
  }
}
</script>

13--效果