springboot、vue、mysql实现简单的图书记录

最新推荐文章于 2024-07-30 13:51:05 发布

CodeYello

最新推荐文章于 2024-07-30 13:51:05 发布

阅读量1.1k

点赞数 15

分类专栏： Java 文章标签： mysql spring boot java vue.js javaweb

本文链接：https://blog.csdn.net/m0_52937388/article/details/118380298

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了一种使用SpringBoot后端、Vue前端和MySQL数据库实现图书记录的方法。首先，图书数据存储在MySQL中，接着通过SpringBoot配置文件连接数据库。在前端，利用Vue创建用户界面，并借助Ajax获取后端数据。最后，处理前端粒子特效与文本选中问题，并解决跨域问题，完成前后端对接。

摘要由CSDN通过智能技术生成

技术概要：

1、先把图书的相关数据储存在mysql里
2、通过yml配置文件等其他代码从springboot里访问数据库的信息
3、前端vue写好自己喜欢的界面（我这里偷懒了）
4、前端通过Ajax连接后端，从后端返回数据展现在浏览器页面上

实现过程：

数据库存入信息的部分非常简单，这里略去
前端的vue创建部分可以参考我之前的文章vue配置
我的前端添加了粒子特效作为背景，和一个淡紫色的表格
（粒子特效的具体操作可以在csdn里搜索，他们写的非常详细）

<!--以下为例子特效，写在div标签里-->
<vue-particles
        id="particles-js"
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
>
</vue-particles>

但是用该特效有一个缺陷，特效区域会和我们的文本内容区域上下分开，所以我们还需要给粒子特效加上id（这里设置的是particles-js），然后在style部分里加上如下代码即可

#particles-js{
        width: 100%;
        height: calc(100% - 100px);
        position: absolute;
    }

这样做后，我们会发现文本内容无法被鼠标选中，解决方法：
在文本内容外套一个div标签，加上id=“content”，在style里加上如下代码即可

#content {
        position: relative
}

然后我们在这里创建一个列表，用于展示图书数据

<div id = "list">
	<table id="table-4"> 
	    <thead>
	    <th>_______编号</th>
	    <th>_______图书名称</th>
	    <th>_______作者</th>
	    </thead>
	    <tbody>
	    <tr v-for="item in books">
	        <td>{{item.id}}</td>
	        <td>{{item.name}}</td>
	        <td>{{item.author}}</td>
	    </tr>
	    </tbody>
	</table>
</div>

这里我们加上id（table-4），在style里加上我们想要的格式

  /* Border styles */
    #table-4 thead, #table-4 tr {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(211, 202, 221);
    }
    #table-4 {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(211, 202, 221);
        width:500px;
        height:500px;
    }

    /* Padding and font style */
    #table-4 td, #table-4 th {
        padding: 5px 10px;
        font-size: 12px;
        font-family: Verdana;
        color: rgb(95, 74, 121);

    }

    /* Alternating background colors */
    #table-4 tr:nth-child(even) {
        background: rgb(223, 216, 232)
    }
    #table-4 tr:nth-child(odd) {
        background: #FFF
    }

界面大致调好后，我们进行后端部分的书写。先创建一个springboot项目

springboot可以直接在idea里创建
在这里插入图片描述

直接file，new，project，spring initializr，下一步

在Group和Artifact处随便起个名，下一步
在这里插入图片描述
在勾选配置上

为连上数据库，再勾选

在这里插入图片描述

最后选上了这四项，再next，finish
在这里插入图片描述

但创建好后我们需要更换一个文件，我们不需要propertise格式，我们需要yml格式
在这里插入图片描述
变为

在这里插入图片描述

配置好yml文件

spring:
  datasource:
    url: 你的数据库的地址
    username: root（如果是本机写root）
    password: 你的mysql数据库的密码
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 你想要的端口号

DataSource：数据源
Show-sql：表示打印sql
Format_sql：表示格式化sql，如果不格式化，那么会直接把sql写在一行，格式化后，就会自动换行
Port：端口号，不能为8080，因为之前vue网址的端口已经为8080了，所以改成8181
在这里插入图片描述
第一步，使用springdata jpa，创建实体类，把这个实体类和（数据库）表绑定

怎么做到绑定在一起：写@Entity，就会自动生成上面的import，同时，会自动映射一个叫book的表
功能会根据类的名字，把首字母小写B变b，然后其余不变，获得名称，从数据库里找与该名称一致的表
在这里插入图片描述
将其写成与数据库里表对应的格式：

添加@Data注解可以不用书写 getter,setter方法, toString方法 hashCode方法 equals方法
为了写private Integer id;需要先写@Id，这个东西是主键，因为类要和表绑定起来，所以类里的成员变量就要和表里的字段绑定

然后再写一个接口，这个接口不用写任何方法，直接去继承JpaRepository
在这里插入图片描述

JpaRepository里的泛型第一个是实体类的类型，第二个是主键的类型

在这里略去@Test单元测试的部分（用于测试能否成功调用数据库里的内容）
创建controller包，BookHandler.java（用于让外部去访问）

在Spring中@RestController的作用等同于@Controller + @ResponseBody，返回json数据不需要在方法前面加@ResponseBody注解了，但使用@RestController这个注解，就不能返回jsp,html页面，视图解析器无法解析jsp,html页面

@Controller的作用：

1、就是将这个类纳入到spring容器当中
2、在一个类上添加@Controller注解，表明了这个类是一个控制器类。
实例化你写的类（springboot里只有一个IOC容器，没有两个容器，所以你需要告诉它这是一个控制层的bean），表示这是一个控制层的bean

@ResponseBody的作用：

把返回内容转成json格式

@RequestMapping的作用：

1、在Spring MVC 中使用 @RequestMapping 来映射请求，也就是通过它来指定控制器可以处理哪些URL请求
在代码里我们的赋值是@RequestMapping("/book")，book与之前的Book.java对应
2、此注解可以用在class和method上，用来映射web请求到某一个handler类或者handler方法上。当此注解用在Class上时，就创造了一个基础url，其所有的方法上的@RequestMapping都是在此url之上的。可以使用其method属性来限制请求匹配的http method。
在这里插入图片描述
内容与数据库里的信息格式对应

@GetMapping的作用：

Spring4.3之后引入了一系列@RequestMapping的变种中的一种。
@GetMapping是一个组合注解，相当于@RequestMapping(method = RequestMethod.GET)的缩写

解释结束，回归代码：

之前只能后端应用与数据库进行连接，现在后端应用也可以与浏览器（外部）连接，只需浏览器访问后端的端口
现在运行代码SpringboottestApplication.java，在浏览器里输入localhost:8080/book/findAll就可以访问到我们的数据库内容了
在这里插入图片描述
接下来只需让前后端对接即可（用Ajax），后端就不用管了，改前端，最终把数据替换一下
vue怎样请求Ajax：安装一个组件axios
先停掉vue（ctrl+c），再输入vue add axios
安装完后就可以在plugins里找到我们刚刚安好的axios
在这里插入图片描述
为了让vue前端页面一刷新就可以吧后端内容加载出来，需要把前端内容代码写在初始化函数中
在vue部分的export default里，添加一个created ( ) { } 这就是初始化操作

此时运行会发现控制台报错，因为跨域问题（CORS）：我们在8080端口访问8181
如何解决：在后端添加一个配置类
在这里插入图片描述

创建config包，创建CrosConfig.java
只需添加@Configuration注解、实现一个接接口WebMvcConfigurer、重写addCorsMappings方法

方法内写如下代码：这样8181端口无论是何种请求：GET、HEAD、…都可以

package com.yuanshuai.springboottest.config;

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

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(false);
    }
}

然后再刷新页面，数据就拿到了
在这里插入图片描述
在前端，我们需要将返回的结果输入到books里。这里有一点需要注意this的指代

如上写时，this指代vue.vue.books是上面的books。但如下写时this指代回调function(resp)，而这个回调里是没有books的

解决方案：

页面效果：（这里鼠标点击次数过多，所以显得乱）
在这里插入图片描述