使用springboot+elementui实现模糊查询和增加

目录

 

一、搭建环境

①数据库

②使用HBuilderX搭建前端环境

 ③使用idea搭建后台环境

二、编写所需的接口

BookController

 BookMapper

 BookService

 BookServiceImpl

BookMapper.xml

 三、写前端

action.js

BookList.vue

 

一、搭建环境

①数据库

运行SQL文件，或者创建项目中所要用到的数据库

②使用HBuilderX搭建前端环境

将准备好的前端的spa项目导入该工具，然后下载所需要node.js

测试一下能否看见版本

 若命令无效 则用管理员的身份打开黑窗口 进入对应的位置再运行，命令有效就下载所需的文件 npm i

下载完成之后 运行就能看见以下的页面 

 ③使用idea搭建后台环境

将准备好的没有写接口的后台导入idea

一定要修改maven的地址 还有以下的一些配置

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.3.1.RELEASE
         
    
    com.zking
    spboot
    0.0.1-SNAPSHOT
    spboot
    Demo project for Spring Boot

    
        1.8
        5.1.44
    

    
        
            org.springframework.boot
            spring-boot-starter-aop
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.3.2
        
        
            mysql
            mysql-connector-java
            ${mysql.version}
            runtime
        
        
            org.projectlombok
            lombok
        

        
        
            com.alibaba
            druid-spring-boot-starter
            1.1.10
        

        
        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.2.3
        

        
        
            org.springframework.boot
            spring-boot-starter-freemarker
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
            
                org.mybatis.generator
                mybatis-generator-maven-plugin
                1.3.2
                
                    
                    
                        mysql
                        mysql-connector-java
                        ${mysql.version}
                    
                
                
                    true
                
            
        
    

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=123456

generatorConfig.xml

生成代码的类 修改jar的位置

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: 123456
    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

启动项目

二、编写所需的接口

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 cdl
 * @site www.cdl.com
 * @create 2022-11-17 20:37
 */
@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookService bookService;

    //带模糊查询的查询所有的接口
    @RequestMapping("/query")
    public JsonResponseBody query(Book book){
        List 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{
        private int code =200;
        private String msg ="ok";
        private T data;
    }




}

 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 record
     * @return
     */
    int insert(Book record);

    /**
     * *带模糊查询的查询所有
     * @param book
     * @return
     */
    List query(Book book);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

 BookService

package com.zking.spboot.service;

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

import java.util.List;


public interface BookService {

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

    /**
     * *带模糊查询的查询所有
     * @param book
     * @return
     */
    List query(Book book);


}

 BookServiceImpl

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 cdl
 * @site www.cdl.com
 * @create 2022-11-17 20:35
 */
@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookMapper bookMapper;

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

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

BookMapper.xml

添加一个带模糊查询的方法

  
        select  from t_book where 1=1
        
          and bookname like concat('%',#{bookname},'%')
        
    

因为id是自增的，将id的值删除

 运行项目访问能拿到所有的值

 三、写前端

action.js

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

router中index.js

import Vue from 'vue'
import Router from 'vue-router'
import BookList from '@/views/BookList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BookList',
      component: BookList
    }
  ]
})

BookList.vue

运行结果：

 

 

 表格等都是来自于elementui的官网