SpringBoot完成查询和增加功能（简易版）

酒醉猫(^･ｪ･^)

已于 2022-11-23 10:19:23 修改

阅读量3k

点赞数 10

文章标签： spring boot java 数据库

于 2022-11-18 01:43:34 首次发布

本文链接：https://blog.csdn.net/weixin_65808248/article/details/127910517

版权

一、环境准备

1、db

2、html

打开前端开发工具HBuilder X，把准备好的前端spboot移进去：

在弹出的窗口中选择你需要导入的项目，点击ok，选择maven

然后去修改maven配置：

再去检查一下application.yml文件和jdbc.properties，看数据库配置是否正确：

最后要注意修改generatorConfig.xml：

二、后台接口定义及测试

开始自动生成代码：

BookMapper类上加@Repository

由于考虑到MySQL数据库里的id有可能是自增的，所以：

BookMapper ：

BookService :

（把类上的注解@Repository去掉，以及除了查询和增加的其他方法都可以去掉）

复制到BookList.vue再稍作调整：

查询全部：

模糊查询：

增加运行效果：

一、环境准备

1、db

将以上sql脚本文件放在MySQL中去运行：

2、html

打开前端开发工具HBuilder X，把准备好的前端spboot移进去：

接着查看电脑的mvn版本，选中项目右键：

( 这里我使用的是内置终端)

npm -version

npm i

前端搭建完毕！

紧接着是搭建后端环境：

3、java

在弹出的窗口中选择你需要导入的项目，点击ok，选择maven

去寻找一下电脑中的maven所在地：

输入mvn -version

然后去修改maven配置：

再去检查一下application.yml文件和jdbc.properties，看数据库配置是否正确：

最后要注意修改generatorConfig.xml：

以及下面的：

这样后端环境也搭建完毕！

二、后台接口定义及测试

jdbc.properties:

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=1234

CorsMapping :

(解决跨域问题工具包)

package com.zking.spboot.util;

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 CorsMapping implements WebMvcConfigurer {

    /*@Override
    *
     * 重新跨域支持方法
     * CorsRegistry  开启跨域注册
     */
    public void addCorsMappings(CorsRegistry registry) {
        //addMapping 添加可跨域的请求地址
        registry.addMapping("/**")
                //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
                .allowedOrigins("*")
                //是否开启cookie跨域
                .allowCredentials(false)
                //规定能够跨域访问的方法类型
                .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
                //添加验证头信息  token
                //.allowedHeaders()
                //预检请求存活时间 在此期间不再次发送预检请求
                .maxAge(3600);
    }
}

application.yml：

server:
  port: 8080
  servlet:
    context-path: /spboot
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: 1234
    druid:
      initial-size: 5
      min-idle: 5
      max-active: 20
      max-wait: 60000
      time-between-eviction-runs-millis: 60000
      min-evictable-idle-time-millis: 30000
      validation-query: SELECT 1 FROM DUAL
      test-while-idle: true
      test-on-borrow: true
      test-on-return: false
      pool-prepared-statements: true
      max-pool-prepared-statement-per-connection-size: 20
      filter:
        stat:
          merge-sql: true
          slow-sql-millis: 5000
      web-stat-filter:
        enabled: true
        url-pattern: /*
        exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
        session-stat-enable: true
        session-stat-max-count: 100
      stat-view-servlet:
        enabled: true
        url-pattern: /druid/*
        reset-enable: true
        login-username: admin
        login-password: admin
        allow: 127.0.0.1
        #deny: 192.168.1.100
  freemarker:
    cache: false
    charset: UTF-8
    content-type: text/html
    suffix: .ftl
    template-loader-path: classpath:/templates
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.zking.spboot.model
  configuration:
    map-underscore-to-camel-case: true
logging:
  level:
    com.zking.spboot.mapper: debug
pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql

generator：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
<generatorConfiguration>
    <!-- 引入配置文件 -->
    <properties resource="jdbc.properties"/>

    <!--指定数据库jdbc驱动jar包的位置-->
    <classPathEntry location="E:\mvn_repository\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>

    <!-- 一个数据库一个context -->
    <context id="infoGuardian">
        <!-- 注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/><!-- 是否取消注释 -->
            <property name="suppressDate" value="true"/> <!-- 是否生成注释代时间戳 -->
        </commentGenerator>

        <!-- jdbc连接 -->
        <jdbcConnection driverClass="${jdbc.driver}"
                        connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>

        <!-- 类型转换 -->
        <javaTypeResolver>
            <!-- 是否使用bigDecimal， false可自动转化以下类型（Long, Integer, Short, etc.） -->
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>

        <!-- 01 指定javaBean生成的位置 -->
        <!-- targetPackage：指定生成的model生成所在的包名 -->
        <!-- targetProject：指定在该项目下所在的路径  -->
        <javaModelGenerator targetPackage="com.zking.spboot.model"
                            targetProject="src/main/java">
            <!-- 是否允许子包，即targetPackage.schemaName.tableName -->
            <property name="enableSubPackages" value="false"/>
            <!-- 是否对model添加构造函数 -->
            <property name="constructorBased" value="true"/>
            <!-- 是否针对string类型的字段在set的时候进行trim调用 -->
            <property name="trimStrings" value="false"/>
            <!-- 建立的Model对象是否 不可改变  即生成的Model对象不会有 setter方法，只有构造方法 -->
            <property name="immutable" value="false"/>
        </javaModelGenerator>

        <!-- 02 指定sql映射文件生成的位置 -->
        <sqlMapGenerator targetPackage="com.zking.spboot.mapper"
                         targetProject="src/main/resources">
            <!-- 是否允许子包，即targetPackage.schemaName.tableName -->
            <property name="enableSubPackages" value="false"/>
        </sqlMapGenerator>

        <!-- 03 生成XxxMapper接口 -->
        <!-- type="ANNOTATEDMAPPER",生成Java Model 和基于注解的Mapper对象 -->
        <!-- type="MIXEDMAPPER",生成基于注解的Java Model 和相应的Mapper对象 -->
        <!-- type="XMLMAPPER",生成SQLMap XML文件和独立的Mapper接口 -->
        <javaClientGenerator targetPackage="com.zking.spboot.mapper"
                             targetProject="src/main/java" type="XMLMAPPER">
            <!-- 是否在当前路径下新加一层schema,false路径com.oop.eksp.user.model， true:com.oop.eksp.user.model.[schemaName] -->
            <property name="enableSubPackages" value="false"/>
        </javaClientGenerator>

        <!-- 配置表信息 -->
        <!-- schema即为数据库名 -->
        <!-- tableName为对应的数据库表 -->
        <!-- domainObjectName是要生成的实体类 -->
        <!-- enable*ByExample是否生成 example类 -->
        <!--<table schema="" tableName="t_book" domainObjectName="Book"-->
               <!--enableCountByExample="false" enableDeleteByExample="false"-->
               <!--enableSelectByExample="false" enableUpdateByExample="false">-->
            <!--&lt;!&ndash; 忽略列，不生成bean 字段 &ndash;&gt;-->
            <!--&lt;!&ndash; <ignoreColumn column="FRED" /> &ndash;&gt;-->
            <!--&lt;!&ndash; 指定列的java数据类型 &ndash;&gt;-->
            <!--&lt;!&ndash; <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> &ndash;&gt;-->
        <!--</table>-->

        <table schema="" tableName="t_book" domainObjectName="Book"
               enableCountByExample="false" enableDeleteByExample="false"
               enableSelectByExample="false" enableUpdateByExample="false">
            <!-- 忽略列，不生成bean 字段 -->
            <!-- <ignoreColumn column="FRED" /> -->
            <!-- 指定列的java数据类型 -->
            <!-- <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> -->
        </table>

    </context>
</generatorConfiguration>

开始自动生成代码：

生成完毕！

开始编码：

BookMapper类上加@Repository

package com.zking.spboot.mapper;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;

@Repository
public interface BookMapper {
    int deleteByPrimaryKey(Integer id);

    int insert(Book record);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

由于考虑到MySQL数据库里的id有可能是自增的，所以：

BookMapper ：

package com.zking.spboot.mapper;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface BookMapper {


    int deleteByPrimaryKey(Integer id);

    /**
     * 根据书本名称模糊查询书本信息
     * @param book
     * @return
     */
    List<Book> query(Book book);

    /**
     * 新增书本
     * @param record
     * @return
     */
    int insert(Book record);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

<select id="query" resultType="com.zking.spboot.model.Book">
    select <include refid="Base_Column_List"/> from t_book where 1=1
    <if test="null != bookname and '' !=bookname">
      and bookname like concat ('%',#{bookname},'%')
    </if>
  </select>

然后service层：

BookService :

（把类上的注解@Repository去掉，以及除了查询和增加的其他方法都可以去掉）

package com.zking.spboot.service;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;

import java.util.List;


public interface BookService {


    /**
     * 根据书本名称模糊查询书本信息
     * @param book
     * @return
     */
    List<Book> query(Book book);

    /**
     * 新增书本
     * @param record
     * @return
     */
    int insert(Book record);

}

去实现接口：

BookServiceImpl ：

（在类上要添加注解@Service）

package com.zking.spboot.service.impl;

import com.zking.spboot.mapper.BookMapper;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author 杨总
 * @create 2022-11-18 1:24
 */
@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookMapper bookMapper;

    @Override
    public List<Book> query(Book book) {
        return bookMapper.query(book);
    }

    @Override
    public int insert(Book record) {
        return bookMapper.insert(record);
    }
}

BookController :

package com.zking.spboot.controller;

import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author 杨总
 * @create 2022-11-18 1:27
 */
@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookService bookService;

    @RequestMapping("/query")
    public JsonResponseBody<?> query(Book book){
        List<Book> books = bookService.query(book);
        return new JsonResponseBody<>(200,"OK",books);
    }

    @RequestMapping("/add")
    public JsonResponseBody<?> add(Book book){
        bookService.insert(book);
        return new JsonResponseBody<>();
    }

    @Data
    @AllArgsConstructor //有参的构造方法
    @NoArgsConstructor //无参的构造方法
    class JsonResponseBody<T>{
        private int code=200;
        private String msg="OK";
        private T data;
    }


}

测试：

三、前端页面效果实现

回到前端HBuilder X：

action.js：

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	//服务器
	'SERVER': 'http://localhost:8080/spboot', 
	'ALL':'/book/query',
	'ADD':'/book/add',
	//获得请求的完整地址，用于mockjs测试时使用
	'getFullPath': k => {
		return this.SERVER + this[k];
	}
}

接着去访问ElementUI官网：

复制到BookList.vue再稍作调整：

目前页面效果：

再去官网扩一个表格：

复制到BookList.vue:

目前页面效果：

查询全部：

模糊查询：

接着弄新增，

加一个新增按钮：

再去官网扩一份新增的对话框：

复制到BookList.vue稍作调整：

目前点击增加的页面效果：

OK，我们再去官网扩一个做校验的代码：

增加运行效果：

BookList.vue完整代码：

<template>
	<div>
		<!-- <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1> -->
		<!-- 1、搜索栏 -->
		<el-form :inline="true">
			<el-form-item label="书本名称">
				<el-input v-model="bookname" placeholder="请输入书本名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="query">查询</el-button>
				<el-button type="primary" @click="open">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 2、数据表格 -->
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="书本编号" width="180">
			</el-table-column>
			<el-table-column prop="bookname" label="书本名称" width="180">
			</el-table-column>
			<el-table-column prop="price" label="书本价格">
			</el-table-column>
			<el-table-column prop="booktype" label="书本类型">
			</el-table-column>
		</el-table>
		<!-- 3、弹出框（新增） -->
		<el-dialog @close="close" title="新增书本" :visible.sync="dialogFormVisible">
			<el-form :model="book" :rules="rules" ref="book">
				<el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
					<el-input v-model="book.bookname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
					<el-input v-model="book.price" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
					<el-select style="width: 100%;" v-model="book.booktype" placeholder="===请选择书本类型===">
						<el-option label="悬疑" value="悬疑"></el-option>
						<el-option label="科幻" value="科幻"></el-option>
						<el-option label="喜剧" value="喜剧"></el-option>
						<el-option label="励志" value="励志"></el-option>
						<el-option label="犯罪" value="犯罪"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ts: new Date().getTime(),
				bookname: '',
				tableData: [],
				dialogFormVisible: false,
				formLabelWidth: '100px',
				book: {
					bookname: '',
					price: '',
					booktype: ''
				},
				rules: {
					bookname: [{
						required: true,
						message: '请输入书本名称！',
						trigger: 'blur'
					}, ],
					price: [{
						required: true,
						message: '请输入书本价格！',
						trigger: 'blur'
					}, ],
					booktype: [{
						required: true,
						message: '请选择书本类型！',
						trigger: 'change'
					}, ],
				}
			};
		},
		methods: {
			close:function(){
				 this.$refs['book'].resetFields();
			},
			save: function() {
				this.$refs['book'].validate((valid) => {
					if (valid) {
						let url = this.axios.urls.ADD;
						this.axios.post(url, this.book).then(resp => {
							let rs = resp.data;
							if(rs.code==200){
								//关闭对话框
								this.dialogFormVisible=false;
								//刷新列表
								this.query();
							}else{
								
							}
						}).catch(erro => {
							
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			open: function() {
				this.dialogFormVisible = true;
			},
			query: function() {
				// 1、查询参数
				let params = {
					bookname: this.bookname
				}
				//2、请求路径
				let url = this.axios.urls.ALL; // ALL一定注意与action.js对应
				//3、发起请求
				this.axios.post(url, params).then(resp => {
					let rs = resp.data;
					console.log(rs);
					this.tableData = rs.data;
				}).catch(erro => {

				})
			}
		}
	}
</script>

<style>
</style>

（关于想要删除和修改的，这里前端也有，如下代码，后端的话也比较简单就不讲解了）

<template>
  <div>
    <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
    <!-- 搜索栏 -->
    <el-form :inline="true">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="请输入书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="primary" @click="open">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书本编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
      <el-table-column align="center" laber="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="update(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框-->
    <el-dialog @close="close" :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
          <el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择书本类型">
            <el-option label="神话" value="神话"></el-option>
            <el-option label="古典" value="古典"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        ts: new Date().getTime(),
        bookname: '',
        tableData: [],
        title:'',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        book: {
          id:'',
          bookname: '',
          price: '',
          booktype: ''
        },
        rules: {
          bookname: [{
            required: true,
            message: '请输入书本名称',
            trigger: 'blur'
          }, ],
          price: [{
            required: true,
            message: '请输入书本价格',
            trigger: 'blur'
          }, ],
          booktype: [{
            required: true,
            message: '请选择书本类型',
            trigger: 'change'
          }, ],
        }
      };
    },
    methods: {
      update: function(index, row) {
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
        this.dialogFormVisible = true;
        this.title = "修改书本"
      },
      del: function(index, row) {
        console.log(row.id);
        this.$confirm('此操作将永久删除该书本，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.DEL;
          this.axios.post(url, {
            id: row.id
          }).then((resp) => {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.query();
          }).catch(function(error) {
            console.log(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      close: function() {
        this.$refs['book'].resetFields();
      },
      save: function() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            let url;
            if (this.book.id == 0) {
              url = this.axios.urls.ADD; //发起增加请求
            } else {
              url = this.axios.urls.UPDATE; //发起修改请求
            }
            this.axios.post(url, this.book).then(resp => {
              let rs = resp.data;
              if (rs.code == 200) {
                this.dialogFormVisible = false;
                this.query();
              }
            }).catch(err => {

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      open: function() {
        this.dialogFormVisible = true;
        this.title = "新增书本"
      },
      query: function() {
        //查询参数
        let params = {
          bookname: this.bookname
        }
        //请求路径
        let url = this.axios.urls.ALL;
        // 发起请求
        this.axios.post(url, params).then(resp => {
          let rs = resp.data;
          this.tableData = rs.data;
        }).catch(erro => {
          alert('查询有误！')
        })

      }
    }

  }
</script>

<style>
</style>

今日内容就到这啦！拜拜~

酒醉猫(^･ｪ･^)

关注

10
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot完成查询和增加功能（简易版）

一、环境准备1、db2、html打开前端开发工具HBuilder X，把准备好的前端spboot移进去：接着查看电脑的mvn版本，选中项目右键：npm -versionnpm i编辑3、java在弹出的窗口中选择你需要导入的项目，点击ok，选择maven然后去修改maven配置：再去检查一下application.yml文件和jdbc.properties，看数据库配置是否正确：最后要注意修改generatorConfig.xml：二、后台接口定义及测试
复制链接

扫一扫