SpringBoot+vue+ElementUi(案例)

 一、创建springboot项目

  2、pom.xml文件

<?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.1.15.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>cn.book</groupId>
    <artifactId>EbookManagement</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>EbookManagement</name>
    <description>EbookManagement</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--redis配置-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

        <!--lombok配置-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--mysql的配置-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--fastjson依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.8</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.46</version>
        </dependency>
        <!--javaWeb依赖-开始-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>

        <!-- JSTL标签库 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <!-- tomcat支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <!--  <scope>provided</scope>-->
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

        <!--javaWeb依赖-结束-->
    </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、application.yml

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/book?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8
    username: root
    password: root
    tomcat:
      initial-size: 5
      max-active: 100
      max-idle: 50
      min-idle: 45
      max-wait: 100
      remove-abandoned: true
      remove-abandoned-timeout: 180
      test-while-idle: true
      time-between-eviction-runs-millis: 60000
      test-on-borrow: false
      test-on-return: false
      validation-query: select 1
      num-tests-per-eviction-run: 100
    redis:
      port: 6379
      database: 0
      host: localhost
      password: 123456

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: cn.book.pojo
server:
  port: 8088

创建包

创建utils的工具

分页工具

public class Page {
    // 总页�?
    private int totalPageCount = 1;
    // 页面大小，即每页显示记录�?
    private int pageSize = 0;
    // 记录总数
    private int totalCount=0;
    // 当前页码
    private int currPageNo = 0;
   public int getTotalPageCount() {
      return totalPageCount;
   }
   public void setTotalPageCount(int totalPageCount) {
      this.totalPageCount = totalPageCount;
   }
   public int getPageSize() {
      return pageSize;
   }
   public void setPageSize(int pageSize) {
      this.pageSize = pageSize;
   }
   public int getTotalCount() {
      return totalCount;
   }
   public void setTotalCount(int totalCount) {
      if(totalCount>0){
            this.totalCount = totalCount;
            totalPageCount=totalCount%pageSize==0?totalCount/pageSize:(totalCount/pageSize)+1;
        }
   }
   public int getCurrPageNo() {
      return currPageNo;
   }
   public void setCurrPageNo(int currPageNo) {
      this.currPageNo = currPageNo;
   }
} 

redis工具

RedisConfig类

import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;

@Configuration
public class RedisConfig {

    //编写我们自己的配置redisTemplate
    @Bean
    @SuppressWarnings("all")
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
        RedisTemplate<String, Object> template = new RedisTemplate<>();
        template.setConnectionFactory(redisConnectionFactory);

        // JSON序列化配置
        Jackson2JsonRedisSerializer jsonRedisSerializer=new Jackson2JsonRedisSerializer(Object.class);
        ObjectMapper objectMapper=new ObjectMapper();
        objectMapper.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        objectMapper.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
        jsonRedisSerializer.setObjectMapper(objectMapper);

        // String的序列化
        StringRedisSerializer stringRedisSerializer=new StringRedisSerializer();

        //key和hash的key都采用String的序列化方式
        template.setKeySerializer(stringRedisSerializer);
        template.setHashKeySerializer(stringRedisSerializer);

        //value和hash的value都采用jackson的序列化方式
        template.setValueSerializer(jsonRedisSerializer);
        template.setHashValueSerializer(jsonRedisSerializer);

        template.afterPropertiesSet();

        return template;
    }
}

RedisUtil类

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;

import java.util.Collection;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.TimeUnit;

/**
 1. Redis工具类
 */
@Component
public class RedisUtil {

    @Autowired  //将序列化配置类RedisConfig里面的bean注入到这里
    private RedisTemplate<String, Object> redisTemplate;

    /****************** common start ****************/
    /**
     * 指定缓存失效时间
     * @param key 键
     * @param time 时间(秒)
     * @return
     */
    public boolean expire(String key, long time) {
        try {
            if (time > 0) {
                redisTemplate.expire(key, time, TimeUnit.SECONDS);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 根据key 获取过期时间
     * @param key 键 不能为null
     * @return 时间(秒) 返回0代表为永久有效
     */
    public long getExpire(String key) {
        return redisTemplate.getExpire(key, TimeUnit.SECONDS);
    }

    /**
     * 判断key是否存在
     * @param key 键
     * @return true 存在 false不存在
     */
    public boolean hasKey(String key) {
        try {
            return redisTemplate.hasKey(key);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 删除缓存
     * @param key 可以传一个值 或多个
     */
    @SuppressWarnings("unchecked")
    public void del(String... key) {
        if (key != null && key.length > 0) {
            if (key.length == 1) {
                redisTemplate.delete(key[0]);
            } else {
                redisTemplate.delete((Collection<String>) CollectionUtils.arrayToList(key));
            }
        }
    }
    /****************** common end ****************/


    /****************** String start ****************/

    /**
     * 普通缓存获取
     * @param key 键
     * @return 值
     */
    public Object get(String key) {
        return key == null ? null : redisTemplate.opsForValue().get(key);
    }

    /**
     * 普通缓存放入
     * @param key 键
     * @param value 值
     * @return true成功 false失败
     */
    public boolean set(String key, Object value) {
        try {
            redisTemplate.opsForValue().set(key, value);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * 普通缓存放入并设置时间
     * @param key 键
     * @param value 值
     * @param time 时间(秒) time要大于0 如果time小于等于0 将设置无限期
     * @return true成功 false 失败
     */
    public boolean set(String key, Object value, long time) {
        try {
            if (time > 0) {
                redisTemplate.opsForValue().set(key, value, time, TimeUnit.SECONDS);
            } else {
                set(key, value);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * 递增
     * @param key 键
     * @param delta 要增加几(大于0)
     * @return
     */
    public long incr(String key, long delta) {
        if (delta < 0) {
            throw new RuntimeException("递增因子必须大于0");
        }
        return redisTemplate.opsForValue().increment(key, delta);
    }
    /**
     * 递减
     * @param key 键
     * @param delta 要减少几(小于0)
     * @return
     */
    public long decr(String key, long delta) {
        if (delta < 0) {
            throw new RuntimeException("递减因子必须大于0");
        }
        return redisTemplate.opsForValue().increment(key, -delta);
    }
    /****************** String end ****************/


    /****************** Map start ****************/

    /**
     * HashGet
     * @param key 键 不能为null
     * @param item 项 不能为null
     * @return 值
     */
    public Object hget(String key, String item) {
        return redisTemplate.opsForHash().get(key, item);
    }
    /**
     * 获取hashKey对应的所有键值
     * @param key 键
     * @return 对应的多个键值
     */
    public Map<Object, Object> hmget(String key) {
        return redisTemplate.opsForHash().entries(key);
    }
    /**
     * HashSet
     * @param key 键
     * @param map 对应多个键值
     * @return true 成功 false 失败
     */
    public boolean hmset(String key, Map<String, Object> map) {
        try {
            redisTemplate.opsForHash().putAll(key, map);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * HashSet 并设置时间
     * @param key 键
     * @param map 对应多个键值
     * @param time 时间(秒)
     * @return true成功 false失败
     */
    public boolean hmset(String key, Map<String, Object> map, long time) {
        try {
            redisTemplate.opsForHash().putAll(key, map);
            if (time > 0) {
                expire(key, time);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * 向一张hash表中放入数据,如果不存在将创建
     * @param key 键
     * @param item 项
     * @param value 值
     * @return true 成功 false失败
     */
    public boolean hset(String key, String item, Object value) {
        try {
            redisTemplate.opsForHash().put(key, item, value);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * 向一张hash表中放入数据,如果不存在将创建
     * @param key 键
     * @param item 项
     * @param value 值
     * @param time 时间(秒) 注意:如果已存在的hash表有时间,这里将会替换原有的时间
     * @return true 成功 false失败
     */
    public boolean hset(String key, String item, Object value, long time) {
        try {
            redisTemplate.opsForHash().put(key, item, value);
            if (time > 0) {
                expire(key, time);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * 删除hash表中的值
     * @param key 键 不能为null
     * @param item 项 可以使多个 不能为null
     */
    public void hdel(String key, Object... item) {
        redisTemplate.opsForHash().delete(key, item);
    }
    /**
     * 判断hash表中是否有该项的值
     * @param key 键 不能为null
     * @param item 项 不能为null
     * @return true 存在 false不存在
     */
    public boolean hHasKey(String key, String item) {
        return redisTemplate.opsForHash().hasKey(key, item);
    }
    /**
     * hash递增 如果不存在,就会创建一个 并把新增后的值返回
     * @param key 键
     * @param item 项
     * @param by 要增加几(大于0)
     * @return
     */
    public double hincr(String key, String item, long by) {
        return redisTemplate.opsForHash().increment(key, item, by);
    }
    /**
     * hash递减
     * @param key 键
     * @param item 项
     * @param by 要减少记(小于0)
     * @return
     */
    public double hdecr(String key, String item, long by) {
        return redisTemplate.opsForHash().increment(key, item, -by);
    }


    /****************** Map end ****************/



    /****************** Set start ****************/

    /**
     * 根据key获取Set中的所有值
     * @param key 键
     * @return
     */
    public Set<Object> sGet(String key) {
        try {
            return redisTemplate.opsForSet().members(key);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
    /**
     * 根据value从一个set中查询,是否存在
     * @param key 键
     * @param value 值
     * @return true 存在 false不存在
     */
    public boolean sHasKey(String key, Object value) {
        try {
            return redisTemplate.opsForSet().isMember(key, value);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }


    /**
     * 将数据放入set缓存
     * @param key 键
     * @param values 值 可以是多个
     * @return 成功个数
     */
    public long sSet(String key, Object... values) {
        try {
            return redisTemplate.opsForSet().add(key, values);
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }

    /**
     * 将set数据放入缓存
     * @param key 键
     * @param time 时间(秒)
     * @param values 值 可以是多个
     * @return 成功个数
     */
    public long sSetAndTime(String key, long time, Object... values) {
        try {
            Long count = redisTemplate.opsForSet().add(key, values);
            if (time > 0)
                expire(key, time);
            return count;
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }


    /**
     * 获取set缓存的长度
     * @param key 键
     * @return
     */
    public long sGetSetSize(String key) {
        try {
            return redisTemplate.opsForSet().size(key);
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }


    /**
     * 移除值为value的
     * @param key 键
     * @param values 值 可以是多个
     * @return 移除的个数
     */
    public long setRemove(String key, Object... values) {
        try {
            Long count = redisTemplate.opsForSet().remove(key, values);
            return count;
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }


    /****************** Set end ****************/

    /****************** List start ****************/

    /**
     * 获取list缓存的内容
     * @param key 键
     * @param start 开始
     * @param end 结束 0 到 -1代表所有值
     * @return
     */
    public List<Object> lGet(String key, long start, long end) {
        try {
            return redisTemplate.opsForList().range(key, start, end);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }


    /**
     * 获取list缓存的长度
     * @param key 键
     * @return
     */
    public long lGetListSize(String key) {
        try {
            return redisTemplate.opsForList().size(key);
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }


    /**
     * 通过索引 获取list中的值
     * @param key 键
     * @param index 索引 index>=0时， 0 表头，1 第二个元素，依次类推；index<0时，-1，表尾，-2倒数第二个元素，依次类推
     * @return
     */
    public Object lGetIndex(String key, long index) {
        try {
            return redisTemplate.opsForList().index(key, index);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 将list放入缓存
     * @param key 键
     * @param value 值
     * @return
     */
    public boolean lSet(String key, Object value) {
        try {
            redisTemplate.opsForList().rightPush(key, value);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 将list放入缓存
     * @param key 键
     * @param value 值
     * @param time 时间(秒)
     * @return
     */
    public boolean lSet(String key, Object value, long time) {
        try {
            redisTemplate.opsForList().rightPush(key, value);
            if (time > 0)
                expire(key, time);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 将list放入缓存
     * @param key 键
     * @param value 值
     * @return
     */
    public boolean lSet(String key, List<Object> value) {
        try {
            redisTemplate.opsForList().rightPushAll(key, value);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 将list放入缓存
     * @param key 键
     * @param value 值
     * @param time 时间(秒)
     * @return
     */
    public boolean lSet(String key, List<Object> value, long time) {
        try {
            redisTemplate.opsForList().rightPushAll(key, value);
            if (time > 0)
                expire(key, time);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 根据索引修改list中的某条数据
     * @param key 键
     * @param index 索引
     * @param value 值
     * @return
     */
    public boolean lUpdateIndex(String key, long index, Object value) {
        try {
            redisTemplate.opsForList().set(key, index, value);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 移除N个值为value
     * @param key 键
     * @param count 移除多少个
     * @param value 值
     * @return 移除的个数
     */
    public long lRemove(String key, long count, Object value) {
        try {
            Long remove = redisTemplate.opsForList().remove(key, count, value);
            return remove;
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }
    /****************** List end ****************/
}

config包

创建WebConfig类：处理跨域请求问题

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

//声明配置类
@Configuration
public class WebConfig  extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")// 项目中的所有接口都支持跨域
                .allowedOrigins("*") //允许哪些域能访问我们的跨域资源
                .allowedMethods("*")//允许的访问方法"POST", "GET", "PUT", "OPTIONS", "DELETE"等
                .allowedHeaders("*");//允许所有的请求header访问，可以自定义设置任意请求头信息
        super.addCorsMappings(registry);
    }
}  

其他：正常根据需要编写实体类、mapper、service、controller

创建VUE项目

vue create 项目名

自定义的选择

更改端口号：

找到package.json》server

内容里面提交：--hot --port 81

二、安装ElementUI 2.0

命令：npm i element-ui -S

三、安装axios

npm install --save axios vue-axios qs

在main.js中添加：

//引入ElementUI

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import axios from 'axios';

import QS from 'qs' /* 解码器 */

//将axios和qs放入到vue的原型链中

Vue.prototype.$axios = axios;

Vue.prototype.qs = QS;

Vue.use(ElementUI);

启动vue项目

npm run serve

四、后端代码

后端所有功能

查询、分页、添加、删除、修改、绑定下拉列表功能

后端mapper

<?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="cn.book.mapper.EbookEntryMapper">

   <!--  查询分页  -->
    <select id="getBookList" parameterType="map" resultType="ebookEntry">
        SELECT * FROM ebook_entry
        <where>
             <if test=" title !=null and title != '' ">
                 title LIKE CONCAT('%',#{title},'%')
             </if>
            <if test=" categoryId !=null and categoryId != 0 ">
                AND categoryId =#{categoryId}
            </if>
        </where>
           LIMIT #{pageNo},#{pageSize}
    </select>
<!--  查询总数-->
    <select id="getBookListCount" resultType="integer">
        SELECT count(1) FROM ebook_entry
        <where>
            <if test=" title !=null and title != '' ">
                title LIKE CONCAT('%',#{title},'%')
            </if>
            <if test=" categoryId !=null and categoryId != 0 ">
                AND categoryId =#{categoryId}
            </if>
        </where>
    </select>
<!--    新增-->
    <insert id="addEbook" parameterType="ebookEntry">
        INSERT INTO `ebook_entry` (`categoryId`, `title`, `summary`, `author`, `createdate`)
        VALUES
            ( #{categoryid}, #{title}, #{summary}, #{author}, #{createdate});
    </insert>
<!--    删除-->
    <delete id="delEbook" parameterType="integer">
        DELETE FROM ebook_entry
        WHERE id=#{id}
    </delete>

<!--    修改-->
        <update id="UpdateEbook" parameterType="ebookEntry">
            UPDATE `ebook_entry`
            <trim  prefix="SET" suffixOverrides="," suffix=" WHERE  `id` = #{id} ">
                <if test=" title !=null and title != '' ">
                    `title` = #{title},
                </if>
                <if test=" summary !=null and summary != '' ">
                    `summary` = #{summary},
                </if>
                <if test=" author !=null and author != '' ">
                    `author` = #{author},
                </if>
                <if test=" createdate != null ">
                    `createdate` = #{createdate}
                </if>
            </trim>
        </update>


</mapper>

下拉列表查询

<?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="cn.book.mapper.EbookCategoryMapper">
<!--    查询所有分类-->
   <select id="getCategoryList" resultType="ebookCategory">
       SELECT * FROM ebook_category
   </select>

</mapper>

mapper接口

public interface EbookEntryMapper {
    /**
     * 分页查询
     * @param map
     * @return
     */
    List<EbookEntry> getBookList(Map<String, Object> map);
    //查询总数
    int getBookListCount(@Param("title")String title,
                         @Param("categoryId")Integer categoryId);
    //新增
    int addEbook(EbookEntry ebookEntry);
    //删除
    int delEbook(@Param("id")Integer id);

    //修改
    int UpdateEbook(EbookEntry ebookEntry);
}

下拉列表

public interface EbookCategoryMapper {
    /**
     * 查询所有分类
     * @return
     */
    List<EbookCategory> getCategoryList();
}

service层接口

public interface EbookEntryService {
    /*
     * 分页查询
     * @param map
     * @return
     */
    List<EbookEntry> getBookList(String title,
                                 Integer categoryId,
                                 Page page);
    //查询总数
    int getBookListCount(String title,
                         Integer categoryId);
    //新增
    int addEbook(EbookEntry ebookEntry);

    //删除
    int delEbook(Integer id);
    //修改
    int UpdateEbook(EbookEntry ebookEntry);
}

下拉

public interface EbookCategoryService {
    /**
     * 查询所有分类
     * @return
     */
    List<EbookCategory> getCategoryList();
}

service实现类

@Service
public class EbookEntryServiceImpl implements EbookEntryService{
    //引入mapper
    @Resource
    private EbookEntryMapper ebookEntryMapper;

    @Override
    public List<EbookEntry> getBookList(String title, Integer categoryId,
                                        Page page) {
        //入参
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("title",title);
        map.put("categoryId",categoryId);
        map.put("pageNo",(page.getCurrPageNo()-1)*page.getPageSize());
        map.put("pageSize",page.getPageSize());

        return ebookEntryMapper.getBookList(map);
    }

    @Override
    public int getBookListCount(String title, Integer categoryId) {
        return ebookEntryMapper.getBookListCount(title,categoryId);
    }

    @Override
    public int addEbook(EbookEntry ebookEntry) {
        return ebookEntryMapper.addEbook(ebookEntry);
    }

    @Override
    public int delEbook(Integer id) {
        return ebookEntryMapper.delEbook(id);
    }

    @Override
    public int UpdateEbook(EbookEntry ebookEntry) {
        return ebookEntryMapper.UpdateEbook(ebookEntry);
    }
}

下拉

@Service
public class EbookCategoryServiceImpl implements EbookCategoryService{
    //mapper
    @Resource
    private EbookCategoryMapper ebookCategoryMapper;


    @Override
    public List<EbookCategory> getCategoryList() {
        return ebookCategoryMapper.getCategoryList();
    }
}

controller层

/**
 * 控制层
 */
@RestController
public class BookController {
    //分类
    @Resource
    private EbookCategoryService ebookCategoryService;
    //图书信息
    @Resource
    private EbookEntryService ebookEntryService;

   @RequestMapping("/getEbookList")
   @ResponseBody
    public String getEbookList(@RequestParam(value = "title",required = false)String title,
                               @RequestParam(value = "categoryId",required = false)Integer categoryId,
                               @RequestParam(value = "pageIndex",required = false,defaultValue = "1")String pageIndex){
       System.out.println("进行getEbookList："+categoryId);
       //返回值
       Map<String, Object> map=new HashMap<String, Object>();
       //分页
       Page page=new Page();
       //设置当前页
       Integer pageNo=1;
       if(pageIndex !=null){
           pageNo=Integer.valueOf(pageIndex);
       }
       Integer pageSize=2;
       page.setCurrPageNo(pageNo);
       page.setPageSize(pageSize);
       //获取总数
      int totalCount= ebookEntryService.getBookListCount(title,categoryId);
       page.setTotalCount(totalCount);
       //总页数
       int totalPageCount=page.getTotalPageCount();
       //控制首页和尾页
       if (pageNo > totalPageCount) {

           pageNo = totalPageCount;
           throw new RuntimeException("页码不正确");
       }

       //执行查询分页
       List<EbookEntry> list=ebookEntryService.getBookList(title,categoryId,page);
      //分类
       List<EbookCategory> categoryList=ebookCategoryService.getCategoryList();
       //传数据
       map.put("EbookEntryList",list);//数据
       map.put("EbookCategoryList",categoryList);//分类
       map.put("page",page);

       return JSON.toJSONString(map);
    }

    @RequestMapping("/addEbook")
    @ResponseBody
    public String addEbook(@RequestBody EbookEntry ebookEntry){
        System.out.println("进入添加"+ebookEntry.getCategoryid());
        //返回值
        Map<String, Object> map=new HashMap<String, Object>();
        //调用添加
       int i= ebookEntryService.addEbook(ebookEntry);
       if(i>0){
           map.put("resout","true");
       }else {
           map.put("resout","false");
       }
       return  JSON.toJSONString(map);
    }

    //删除
    @RequestMapping("/del/{id}")
    @ResponseBody
    public String delEbook(@PathVariable Integer id){
        System.out.println("删除："+id);
        //调用方法
        int i=ebookEntryService.delEbook(id);
        if(i>0){
            return  "true";
        }else {
            return "false";
        }
    }

    //修改
    @RequestMapping("/update")
    @ResponseBody
    public String UpdateEbook(@RequestBody EbookEntry ebookEntry){
        System.out.println("修改："+ebookEntry.getCreatedate());

        //调用修改的方法
        int i=ebookEntryService.UpdateEbook(ebookEntry);
        if(i>0){
            return  "true";
        }else {
            return  "false";
        }
    }
}

五、前端代码

前端页面截图

创建views页面

第一个首页home.vue

配置启动App.vue页面

<template>

  <div id="app">

    <nav>

      <router-link to="/" tag="div"></router-link>

    </nav>

    <router-view/>

  </div>

</template>

<style lang="less">

</style>

配置https.js请求头

import axios from 'axios'

import qs from 'qs'

axios.defaults.timeout = 5000;                        //响应时间

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';        //配置请求头

axios.defaults.baseURL = 'http://localhost:8088';   //配置接口地址

自己记得配置路由

home.vue页面代码

<template>
  <div id="home">
    <!--搜索栏-->
    <div class="form-div">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="图书名称">
          <el-input v-model="formInline.title" placeholder="图书名称"></el-input>
        </el-form-item>
        <el-form-item label="图书分类">
          <el-select v-model="formInline.categoryid" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新增电子图书</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <div>
      <h1 style="display: flex;justify-content: center;font-size: 28px">电子图书列表</h1>
      <!-- 显示数据 -->
      <el-table
          :data="tableData"
          align="center"
          style="width: 100%"
          :row-class-name="tableRowClassName">

        <el-table-column
            prop="id"
            label="图书编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="title"
            label="图书名称">
        </el-table-column>
        <el-table-column
            prop="summary"
            label="图书摘要">
        </el-table-column>
        <el-table-column
            prop="author"
            label="上传人">
        </el-table-column>
        <el-table-column prop="createdate" label="上传时间" :show-overflow-tooltip="true" width="150">
          <template slot-scope="scope">
            <span>{{ dateFormat("YYYY-mm-dd", scope.row.createdate) }}</span>
          </template>
        </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>
    <div style="display: flex;justify-content: center;">
      <el-pagination
          @current-change="pageChange"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<style>
/*隔行换色*/
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
//引入请求头
import http from '../https.js'
export default {
  data() {
    return {
      formInline: {
        title: '',
        categoryid: ''
      },
      tableData: [], //保存图书信息
      page: '',//分页
      options: {}, //下拉列表
      total: 1,//总条目数
      pageSize: 2,//分页数
    }
  },
  methods: {
    //获取当前条数
    pageChange(value) {
      //传pageIndex
      const params = {
        pageIndex: value
      }
      //查询
      this.$axios.get("getEbookList", {params}).then(response => {
        //请求成功
        console.log(response.data);
        //图书信息
        this.tableData = response.data.EbookEntryList
        //分页
        this.page = response.data.page
        //下拉
        this.options = response.data.EbookCategoryList
        //总条目数
        this.total = response.data.page.totalCount
      }).catch(error => {
        console.log("失败：" + error)
      })

    },
    //修改
    handleEdit(index, row) {
      console.log("修改：" + row);
      this.$router.push({
        path: '/update', //跳转到修改页面
        query: {
          book: row //传值ID给我们的下一个页面
        }
      })
    },
    //删除
    handleDelete(index, row) {
      console.log(row.id)
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        //执行删除
        this.$axios.post('/del/' + row.id)
            .then(response => {
              console.log(response.data)
              if (response.data == true) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //成功后重新调用查询方法
                this.labelDataList();
              }
            })
            .catch(error => {
              this.$message({
                type: 'info',
                message: '删除失败！' + error
              });
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    add() {
      //添加：跳转页面，不需要带参
      this.$router.push({
        path: '/add'
      })
    },
    //查询
    onSubmit() {
      //传递的参数
      const params = {
        title: this.formInline.title,
        categoryId: this.formInline.categoryid
      }
      //查询
      this.$axios.get("getEbookList", {params}).then(response => {
        //请求成功
        console.log(response.data);
        //图书信息
        this.tableData = response.data.EbookEntryList
        //分页
        this.page = response.data.page
        //下拉
        this.options = response.data.EbookCategoryList
        //总条目数
        this.total = response.data.page.totalCount

      }).catch(error => {
        console.log("失败：" + error)
      })
    },
    labelDataList() {
      //获取数据
      this.$axios.get("getEbookList").then(response => {
        //请求成功
        console.log(response.data);
        //图书信息
        this.tableData = response.data.EbookEntryList
        //分页
        this.page = response.data.page
        //下拉
        this.options = response.data.EbookCategoryList
        //总条目数
        this.total = response.data.page.totalCount

      }).catch(error => {
        //请求失败
        console.log("失败:" + error)
      })
    },
    //表单
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    //处理日期格式
    dateFormat(format, date) {
      if (date == null) {
        return null;
      }
      let ret = "";
      date = new Date(date);
      const val = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
      };
      for (let k in val) {
        ret = new RegExp("(" + k + ")").exec(format);
        if (ret) {
          format = format.replace(
              ret[1],
              ret[1].length == 1
                  ? val[k]
                  : val[k].padStart(ret[1].length, "0")
          );
        }
      }
      return format;
    },
  },
  mounted() {
    //vue示例创建之后
    this.labelDataList();
  },
}
</script>

<style scoped>
/*头部居中*/
.form-div {
  display: flex;
  justify-content: center;
}


.el-header, .el-footer {
  background-color: #409EFF;
  color: #333;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 620px;
}

.el-main {
  background-color: white;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

添加页面

BookAdd.vue

<template>
  <div>
    <h1 style="display: flex;justify-content: center">新增图书信息</h1>

    <div style="display: flex;justify-content: center">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm"
               label-width="100px" class="demo-ruleForm">
        <el-form-item label="图书名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图书摘要" prop="summary">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="ruleForm.summary">
          </el-input>
        </el-form-item>
        <el-form-item label="上传人" prop="author">
          <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>

        <el-form-item label="图书分类" prop="categoryid">
          <el-select v-model="ruleForm.categoryid" placeholder="请选择">
            <el-option label="请选择" value="shanghai"></el-option>
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上传时间" required>
          <el-col :span="20">
            <el-form-item prop="createdate">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createdate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//引入请求头
import http from '../https.js'
export default {
  data() {
    return {
      ruleForm: {
        categoryid: '',
        title: '',
        summary: '',
        author: '',
        createdate: '',
      },
      options: {}, //下拉列表
      rules: {
        title: [
          {required: true, message: '请输入图书名称', trigger: 'blur'},
          {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
        ],
        summary: [
          {required: true, message: '请输入图书摘要', trigger: 'blur'},
        ],
        author: [
          {required: true, message: '请输入上传人', trigger: 'blur'},
        ],
        categoryid: [
          {required: true, message: '请选择分类', trigger: 'change'}
        ],
        createdate: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ]
      }
    };
  },
  created() {
    //获取下拉列表
    //获取数据
    this.$axios.get("getEbookList").then(response => {
      //下拉
      this.options = response.data.EbookCategoryList
    }).catch(error => {
      //请求失败
      console.log("失败:" + error)
    })

  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //成功后：提交数据后台进行添加
          this.$axios.post("/addEbook", this.ruleForm)
              .then(response => {
                console.log(response.data)
                if(response.data.resout=='true'){
                  this.$router.push({
                    path:'/'
                  })
                }else{
                  alert("添加失败！")
                }
              })
              .catch(error => {
                console.log("失败：" + error)
              })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>

修改

BookUpdate.vue

<template>
  <div>
    <h1 style="display: flex;justify-content: center">更新图书信息</h1>

    <div style="display: flex;justify-content: center">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm"
               label-width="100px" class="demo-ruleForm">

        <el-form-item label="图书编号" prop="title">
          <el-input v-model="ruleForm.id" disabled></el-input>
        </el-form-item>

        <el-form-item label="图书名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="图书摘要" prop="summary">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="ruleForm.summary">
          </el-input>
        </el-form-item>

        <el-form-item label="上传人" prop="author">
          <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>

        <el-form-item label="上传时间" required>
          <el-col :span="20">
            <el-form-item prop="createdate">
              <el-date-picker type="date" placeholder="选择日期"
                              v-model="ruleForm.createdate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import http from '../https.js'
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        title: '',
        summary: '',
        author: '',
        createdate: '',
      },
      rules: {
        title: [
          {required: true, message: '请输入图书名称', trigger: 'blur'},
          {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
        ],
        summary: [
          {required: true, message: '请输入图书摘要', trigger: 'blur'},
        ],
        author: [
          {required: true, message: '请输入上传人', trigger: 'blur'},
        ],
        createdate: [
          { type:'date',required: true, message: '请选择日期', trigger: 'change'}
        ]
      }
    };
  },
  created() {
    //生命周期获取传递过来的值
    const  book=this.$route.query.book
    this.ruleForm={
        id: book.id,
        title: book.title,
        summary: book.summary,
        author: book.author,
        createdate: book.createdate,
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(JSON.stringify(this.ruleForm))
          //成功后：提交数据后台进行修改
          this.$axios.post("/update",JSON.stringify(this.ruleForm))
              .then(response=>{
                  if(response.data==true){
                    this.$message({
                      type:"success",
                      message:"修改成果！"
                    })
                    //成功跳转会首页
                    this.$router.push({
                      path:"/"
                    })

                  }
              })
              .catch(error=>{
                 this.$message({
                   type:"info",
                   message:"修改失败！"
                 })
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>