springboot+vue+mybtais 实现增删改查页面（一后端页面），带分页操作。附上数据库文件，前后端分离小项目

最新推荐文章于 2024-09-12 12:37:49 发布

21级研究生2048207233

最新推荐文章于 2024-09-12 12:37:49 发布

阅读量1.5k

点赞数 3

分类专栏： springboot与vue学习文章标签： spring boot 后端 vue.js

本文链接：https://blog.csdn.net/unique_sir/article/details/121888856

版权

springboot与vue学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.原先这个小项目数据库框架用的是jpa给他换成了mybtais

需要源码的话可以在评论区留下邮箱
先看效果图
在这里插入图片描述

后端项目结构

在这里插入图片描述

数据库

新建一个springboot的项目，这个应该都会把，依次建立相应的包。

建数据库

/*
 Navicat MySQL Data Transfer

 Source Server         : homework
 Source Server Type    : MySQL
 Source Server Version : 80023
 Source Host           : localhost:3306
 Source Schema         : springboot

 Target Server Type    : MySQL
 Target Server Version : 80023
 File Encoding         : 65001

 Date: 12/12/2021 16:06:35
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for flowd
-- ----------------------------
DROP TABLE IF EXISTS `flowd`;
CREATE TABLE `flowd`  (
  `id` int(0) NOT NULL AUTO_INCREMENT,
  `uptime` varchar(8) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `ChsName` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `EnName` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `Version` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `Description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 31 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of flowd
-- ----------------------------
INSERT INTO `flowd` VALUES (13, '1', '44444', 'ss', 'sss', '55', '5555');
INSERT INTO `flowd` VALUES (17, 'sadas', '阿斯顿', '导师aads', '阿斯顿', '阿斯顿', '的');
INSERT INTO `flowd` VALUES (22, '', '45456456', 'asd', 'asd', 'ads', 'asdasd');
INSERT INTO `flowd` VALUES (23, '', 'asd', 'asdas', 'asd', 'asd', 'asd');
INSERT INTO `flowd` VALUES (24, '', '566', '455', '456', '456', '456456');
INSERT INTO `flowd` VALUES (26, '', '12', '123', '123', '123', '123');
INSERT INTO `flowd` VALUES (27, '', '12', '123', '123', '123', '123');
INSERT INTO `flowd` VALUES (28, '', '12', '123', '123', '123', '123');
INSERT INTO `flowd` VALUES (29, '', '11111111111111111111111111111111111111111', '312323', '123123', '45555', '123');
INSERT INTO `flowd` VALUES (31, '', '3512', '12321', '453645', '123123', '123123');

SET FOREIGN_KEY_CHECKS = 1;

后端项目开始，先导入maven依赖

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    <!--  mybatis启动器-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>
         <!--数据库连接器-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
<!--        lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
<!--        分页查询插件，mybatis用的-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.10</version>
        </dependency>
        
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>
<!--  数据源-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.22</version>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.1</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>

yml配置文件
application.yml

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=true
    username: root
    password: 123456
    type: com.alibaba.druid.pool.DruidDataSource
  thymeleaf:
    cache: false #关闭缓存
    mode: HTML5 #设置模板类型
    encoding: utf-8  #设置编码
    suffix: .html
pagehelper: #pagehelper分页插件配置
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSqll

  #指定myBatis的核心配置文件与Mapper映射文件
  # 注意：对应实体类的路径

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.yang.dao
server:
  port: 8282
-Ddruid:
  mysql:
    usePingMethod=false:

注意，换成自己的数据库名称和密码，端口号我写的8282
dao层
实体类
Flow

package com.yang.dao;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Flow {
    private int id;
    private String uptime;
    private String type;
    private String ChsName;
    private String EnName;
    private String Version;
    private String Description;
}

接口FlowMapper

package com.yang.dao;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * @author yangxuan
 */
@Mapper
@Repository
public interface FlowMapper {
    public int addFlow(Flow flow);//添加

    public int updateFlow(Flow flow);//修改

    public int deleteFlow(int id);//删除

    public List<Flow> findAll();//查询全部

    public Flow findOneByid(int id);//通过id查找

    public List<Flow> Pagefindall();//分页查询方法

}

service层
Flowservice接口

package com.yang.service;

import com.github.pagehelper.PageInfo;
import com.yang.dao.Flow;

import java.util.List;
@SuppressWarnings(value = "all")
public interface FlowService {
    //查询全部
    List<Flow> findAll();
    //	添加数据
    int addFlow(Flow flow);
    //	删除数据
    Integer deleteFlow(int id);
    //	修改需要先查询出来对象数据，显示然后进行数据提交，依据id唯一进行修改
    int updateFlow(Flow flow);
    //	通过id查询对象
    public Flow findOneByid(int id);
//分页方法
    public PageInfo<Flow> findByPageService(int pageCode, int pageSize);


}

FlowserviceImpl

package com.yang.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.yang.dao.Flow;
import com.yang.dao.FlowMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;
@Service
public class FlowServiceImpl implements FlowService{
    @Resource
    private FlowMapper flowMapper;
    @Override
    public List<Flow> findAll() {
        return flowMapper.findAll();
    }

    @Override
    public int addFlow(Flow flow) {
        return flowMapper.addFlow(flow);
    }

    @Override
    public Integer deleteFlow(int id) {
        return flowMapper.deleteFlow(id);
    }

    @Override
    public int updateFlow(Flow flow) {
        return flowMapper.updateFlow(flow);
    }

    @Override
    public Flow findOneByid(int id) {
        return flowMapper.findOneByid(id);
    }

    @Override
    public PageInfo<Flow> findByPageService(int pageCode, int pageSize) {
        //使用Mybatis分页插件
        PageHelper.startPage(pageCode,pageSize);
       //调用分页查询方法，其实就是查询所有数据，mybatis自动帮我们进行分页计算
        List<Flow> classInfos = flowMapper.Pagefindall();
        return new PageInfo<>(classInfos);
    }
    //    }


}

resource下面的mapper层放sql文件

<?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">
<mapper namespace="com.yang.dao.FlowMapper">
<!--    //namespace对应的是接口-->
    <select id="findAll" resultType="com.yang.dao.Flow">
    select * from flowd
  </select>
    <select id="Pagefindall" resultType="com.yang.dao.Flow">
    select * from flowd
  </select>
    <select id="findOneByid" resultType="com.yang.dao.Flow" parameterType="int">
  	select * from flowd where id=#{id}
  </select>
    <!-- insert update delete的返回值resultType默认为int类型 -->
    <insert id="addFlow" parameterType="com.yang.dao.Flow" >
  	insert into flowd() value(#{id},#{uptime},#{type},#{ChsName},#{EnName},#{Version},#{Description})
  </insert>
    <update id="updateFlow" parameterType="com.yang.dao.Flow">
  	update flowd set uptime=#{uptime},type=#{type},ChsName=#{ChsName},EnName=#{EnName},Version=#{Version},Description=#{Description} where id=#{id}
  </update>

    <delete id="deleteFlow" parameterType="com.yang.dao.Flow">
  	delete from flowd where id=#{id}
  </delete>
</mapper>

controller层

FlowController

package com.yang.controller;
import com.github.pagehelper.PageInfo;
import com.yang.dao.Flow;
import com.yang.service.FlowService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
@RequestMapping("/flow")
public class FlowController {
    @Autowired
    private FlowService flowService;

    @GetMapping("/findAll")
    @ResponseBody
    public List<Flow> list() {
        return flowService.findAll();
    }


//分页
@GetMapping("/pagehelper/{pageCode}/{pageSize}")
@ResponseBody
    public PageInfo<Flow> findByPage(@PathVariable( "pageCode") int pageCode, @PathVariable( "pageSize") int pageSize) {
    System.out.println(pageCode+"...."+pageSize);
    PageInfo<Flow> pageInfo = flowService.findByPageService(pageCode, pageSize);
    return pageInfo;
}


    //添加
    @PostMapping("/add")
    @ResponseBody
    public String addFlow(@RequestBody Flow flow) {
        int result = flowService.addFlow(flow);
        if (result > 0) {
            return "success";
        } else {
            return "error";
        }
    }



    通过id获取所有数据
    @GetMapping("/findById/{id}")
    @ResponseBody
    public Flow findById(@PathVariable("id") Integer id){
        return flowService.findOneByid(id);
    }



//    修改
    @PutMapping("/update")
    @ResponseBody
    public String update(@RequestBody Flow flow) {
        int result = flowService.updateFlow(flow);
        if (result > 0) {
            return "success";
        } else {
            return "error";
        }
    }



    @GetMapping("/delEmp/{id}")
    @ResponseBody
    public String delEmp(@PathVariable("id") Integer id){
        Integer result = flowService.deleteFlow(id);
        if (result > 0) {
            return "success";
        } else {
            return "error";
        }
    }

}

config配置下
KuaYuconfig
解决了与前端交互的跨域问题

package com.yang.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class KuaYuconfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowCredentials(false)
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .allowedOrigins("*");
            }
        };
    }
}