SpringBoot简单实现模糊查询及新增

springboot基础

畅畅子-

6746人浏览 · 2022-07-20 21:10:57

畅畅子- · 2022-07-20 21:10:57 发布

后端

1.检查mave仓库是否是本地地址

2.下载依赖

3.检查jdbc.properties(数据库及密码)

4.generatorConfig.xml设置

（1）修改jar包位置，更换成本地maven仓库中mysql数据库jdbc驱动jar包的位置

修改classPathEntry配置，更换成本地maven仓库中mysql数据库jdbc驱动jar包的位置

修改table配置表信息(tableName和domainObjectName)，更换成对应数据库表

点击Edit Configurations...配置，添加Maven，输入命名：mybatis-gerenator:gerenate -e

（2）修改你要生成的表名及实体类名字（生成完之后记得注释）

要使用mybatisGenrtator 进行生成（使用完记得切换）

实体类添加相关注解

package com.zking.spboot.model;

import lombok.ToString;

@ToString
public class Book {
    private Integer id;

    private String bookname;

    private Float price;

    private String booktype;

    public Book(Integer id, String bookname, Float price, String booktype) {
        this.id = id;
        this.bookname = bookname;
        this.price = price;
        this.booktype = booktype;
    }

    public Book() {
        super();
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getBookname() {
        return bookname;
    }

    public void setBookname(String bookname) {
        this.bookname = bookname;
    }

    public Float getPrice() {
        return price;
    }

    public void setPrice(Float price) {
        this.price = price;
    }

    public String getBooktype() {
        return booktype;
    }

    public void setBooktype(String booktype) {
        this.booktype = booktype;
    }
}

5.application.yml设置

查看端口号，访问路径名。

修改数据库账号密码

以上步骤完成，先将web项目发布至tomcat并启动，如果首页访问成功，表示web项目部署成功，可以开始编写后台代码了。

6.mapper层

添加注解，写一个模糊查询的方法

package com.zking.spboot.mapper;

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

import java.util.List;

@Repository
public interface BookMapper {

    /**
     * 添加
     * @param record
     * @return
     */
    int insert(Book record);

    /**
     * 根据书本名称模糊查询书本信息
     * @param book
     * @return
     */


    List<Book> all(Book book);
    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

7.service层

可以复制mapper层，只留下需要的方法

创建iml,添加相关注解，及返回结果

package com.zking.spboot.service.impl;

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

import java.util.List;

@Service
public class BookServiceImpl implements IBookService {
    @Autowired
    private BookMapper bookMapper;

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

    @Override
    public List<Book> all(Book book) {

        return bookMapper.all(book);
    }
}

8.controller层

package com.zking.spboot.controller;

import com.zking.spboot.model.Book;
import com.zking.spboot.service.IBookService;
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;
import java.util.Map;

@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    private IBookService bookService;

    @RequestMapping("/add")
    public ResponseData<?> add(Book book){
        try {
            bookService.insert(book);
            return new ResponseData<>(200,"新增成功",null);
        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseData<>(500,"新增失败",null);
        }
    }


    @RequestMapping("/all")
    public ResponseData<?> all(Book book){
        try {
            List<Book> books =bookService.all(book);
            bookService.all(book);
            return new ResponseData<>(200,"ok",books);
        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseData<>(500,"c查询书本信息失败",null);
        }
    }

}

@Data
@AllArgsConstructor
@NoArgsConstructor
class ResponseData<T>{
    private int code;
    private  String msg;
    private T data;
}

前端

1.导入项目

2.下载依赖

如果出现以下报错，输入npm cache clear --force并重试

依赖下载完成后输入 npm run dev启动项目

浏览器访问效果

3.找到action.js

1.这里的服务器地址与前端的必须一致

2.把后端方法添加到前端接口

element官网

Element - The world's most popular Vue UI framework

4.找到 BookList开始写前端方法

模糊查询方法如下：

<template>
	<div>
		<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
		<!-- 搜索栏 -->
		<!-- from表单中的行内表单 -->
		<el-form :inline="true">
			<el-form-item>
				<el-input v-model="bookname" placeholder="书本名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="query">查询</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>



	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ts: new Date().getTime(),
				bookname: '',
				tableData:[]
			};
		},
		methods: {
			query: function() {
				//获取查询参数
				let params={
					//第一个参数的参数名与后台实体名字一致
					bookname:this.bookname
				};
				//获取请求URL
				let url =this.axios.urls.All;
				//发起ajax请求
				this.axios.post(url,params).then(resp=>{
					let data =resp.data;
					if(data.code==200)
						this.tableData=data.data;
				}).catch(err=>{
					console.log(err);
				});

			}
		}
	}
</script>

<style>
</style>

如果报Access to XMLHttpRequest at 'http://localhost:8080/spboot' from origin 'http://localhost:8088' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.那就是路径写错了

运行效果图

添加新增按钮

<template>
	<div>
		<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
		<!-- 搜索栏 -->
		<!-- from表单中的行内表单 -->
		<el-form :inline="true">
			<el-form-item>
				<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>
		
		<!-- 对话框（新增） -->
		<!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 -->
		<el-dialog 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="booktype" label="书本类型" :label-width="formLabelWidth">
		      <el-select v-model="book.booktype" placeholder="请选择书本类型">
		        <el-option label="玄幻" value="玄幻"></el-option>
		        <el-option label="文学" value="文学"></el-option>
		      </el-select>
		    </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>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="add">确 定</el-button>
		  </div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ts: new Date().getTime(),
				bookname: '',
				tableData:[],
				dialogFormVisible:false,
				formLabelWidth:'120px',
				book:{
					//实体类中的属性来定义
					bookname:'',
					price:'',
					booktype:'',
				},
				 rules: {
				          bookname: [
				            { required: true, message: '请输入名称', trigger: 'blur' },
				           
				          ],
						  price: [
						    { required: true, message: '请输入价格', trigger: 'blur' },
						   
						  ],
						  booktype: [
						    { required: true, message: '请输入类型', trigger: 'blur' },
						   
						  ],
						 }
			};
		},
		methods: {
			query: function() {
				//获取查询参数
				let params={
					//第一个参数的参数名与后台实体名字一致
					bookname:this.bookname
				};
				//获取请求URL
				let url =this.axios.urls.All;
				//发起ajax请求
				this.axios.post(url,params).then(resp=>{
					let data =resp.data;
					if(data.code==200)
						this.tableData=data.data;
				}).catch(err=>{
					console.log(err);
				});

			},
			open:function(){
				//每次打开之前清空表单数据
				this.book={
					bookname:'',
					price:'',
					booktype:''
				}
				//每次打开之前清空表单验证
				//this.$refs['book'].resetFields();
				//显示对话框
				this.dialogFormVisible=true;
			},
			add:function(){
				//表单验证
				this.$refs['book'].validate((valid) => {
				          if (valid) {
				           //获取请求路径
				           let url =this.axios.urls.ADD;
				           this.axios.post(url,this.book).then(resp=>{
				           	let data =resp.data;
				           	if(data.code==200){
				           	 this.$message({
				           	          message: data.msg,
				           	          type: 'success'
				           	        });
									this.dialogFormVisible=false;
									this.query();
								}else{
									this.$message({
										message: data.msg,
										type:'error'
									});
								}
				           }).catch(err=>{
				           	console.log(err);
				           });
				          } else {
				            console.log('error submit!!');
				            return false;
				          }
				        });
				
				
			}
			
		}
	}
</script>

<style>
</style>