从 0 开始实现一个 SpringBoot + Vue 项目

2024-02-19 02:30:16 分类：后端 热度：49 评论： 0

从 0 开始实现一个 SpringBoot + Vue 项目

参考：梦想屋A

软件和工具

  • 后端开发软件：IntelliJ IDEA
  • 前端开发软件：Visual Studio Code
  • 后端框架：SpringBoot
  • 后端语言：java
  • 前端框架：Vue

这是后面要用的妙妙小工具：

  • 服务器连接工具：Termius
  • 数据库：MySQL
  • 数据库管理工具：Navicat Premium
  • 数据库连接工具：MyBatis
  • API 文档生成工具：Swagger
  • API 文档美化工具：Knife4j
  • UI 组件库：Element
  • 网络请求库：Axios
  • 字体处理库：Sfntly
  • JSON 处理工具：Fastjson
  • Java 工具库：Lombok

可以不必全部用这些来做，有很多类似的产品可以替代。

创建 SpringBoot 后端项目

首先我们打开 IDEA，点击新建项目，选择 Spring Initializr，然后在右侧填写项目名称，类型选择 Maven，JDK 版本选择1.8，如下图所示，然后点击下一步。

在新的页面中选择 SpringBoot 版本 3.0.2，引入一些依赖，点击创建。

后面在 pom.xml 中把 Java 版本改回 1.8，SpringBoot 版本改回 2.7.6。

项目结构：

可以看到 SpringBoot 的基础结构有三个文件：

  • src/main/java 下的程序入口：DreamHouseApplication
  • src/main/resources 下的配置文件：application.properties
  • src/test 下的测试入口：DreamHouseApplicationTests

在运行类 DreamHouseApplication 同级目录下创建 controller、service、mapper、model 四个目录:

controller 层：控制层

  • 作用是请求和响应控制。
  • 负责前后端交互，接受前端请求，调用 service 层，接收 service 层返回的数据，最后返回具体的页面和数据到客户端。

service 层：业务逻辑层

  • 作用是完成功能设计。
  • 调用 mapper 层接口，接收 mapper 层返回的数据，完成项目的基本功能设计。

mapper 层：数据持久层，也被称为 dao 层

  • 作用是访问数据库，向数据库发送 sql 语句，完成数据的增删改查任务。

model 层：数据库实体层，也被称为 entity 层、pojo 层

  • 用于存储数据库中的数据，类属性与数据库表字段对应。
  • 通常情况下，Model 层使用 ORM（对象关系映射）技术，如 JPA，MyBatis 等与数据库进行交互。

在项目目录中的 pom.xml 配置文件中引入本次项目中需要用到的相关依赖：

        <!--MyBatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>

        <!--Swagger3-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>

        <!--knife4j-->
        <dependency>
            <groupId>***.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-ui</artifactId>
            <version>3.0.3</version>
        </dependency>

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

        <!--JSON-->
        <dependency>
            <groupId>***.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.15</version>
        </dependency>

        <!--MySQL-->
        <dependency>
            <groupId>***.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>8.0.31</version>
            <scope>runtime</scope>
        </dependency>

        <!--Lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

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

将这些依赖放到<dependencies></dependencies>标签内，就接着 SpringBoot 自带的一些依赖下面就行了。

稍微解释一下这些依赖:

  • Lombok：可以通过注解的方式为 Java 类生成许多常用的方法，例如 getter、setter、toString、equals 等，省去了手写这些方法的代码。

  • Swagger：开源的 API 文档生成工具，可以根据代码中的注释自动生成 API 文档。

  • Knife4j：用来美化 Swagger 生成的 API 文档。

  • MyBatis：持久层框架，主要用于简化数据库操作，提高代码可读性，降低数据访问代码的维护难度，提高效率。

  • MySQL：MySQL 官方提供的 Java 用的 JDBC 驱动，它允许 Java 程序通过 JDBC API 连接到 MySQL 数据库。

  • JSON：用来将 json 数据序列化和反序列化的，主要是觉得 SpringBoot 自带的 json 工具不好用。

创建 MySQL 数据库

安装 MySQL 这里就不讲了，这里用 Navicat Premium 连接数据库。

填写连接名、主机IP、端口、用户名和密码等，然后点击连接。

可以先点测试连接，显示连接成功，在点确定。

连接上数据库之后，新建数据库–>新建表–>添加 id、ip、province、time、str、likes 六个字段。

表名为 dream，具体内容如下所示：

这里有两个细节：

  1. id 要设置自动递增
  2. likes 设置为无符号

友情链接：mysql自增navicat_navicat怎么设置主键自增

配置文件

让我们回到 SpringBoot，打开刚刚介绍到的配置文件 application.properties 进行项目配置：

server.port = 8087

spring.mvc.pathmatch.matching-strategy = ant_path_matcher

# Swagger
swagger.enabled = true

# MySQL
spring.datasource.url = jdbc:mysql:(服务器IP地址):3306/(数据库名)
spring.datasource.username = (用户名)
spring.datasource.password = (密码)
spring.datasource.driver-class-name = ***.mysql.cj.jdbc.Driver

稍微解释一下：

  • server.port：指定项目使用 8087 端口，默认 8080 端口。

  • spring.mvc.pathmatch.matching-strategy：指定 Spring MVC 框架中 URL 路径匹配策略的实现类的类名，ant_path_matcher 是一种路径匹配策略，使用 Ant 风格的通配符来匹配 URL 路径。

  • swagger.enabled：启用 Swagger 工具。

  • spring.datasource.url：指定 MySQL 数据库的 URL。这里的服务器 IP 地址就是主机名，我的是 localhost（前面要带//），数据库名是 dreamhouse，完整格式：jdbc:mysql://localhost:3306/dreamhouse。

  • spring.datasource.username：指定连接 MySQL 数据库使用的用户名。我的是 root。

  • spring.datasource.password：指定连接 MySQL 数据库使用的密码。

  • spring.datasource.driver-class-name：指定连接 MySQL 数据库使用的 JDBC 驱动程序的类名。

这里可能会有注释中文乱码问题，在设置中可以解决，全部换成 UTF-8：

友情链接：【SpringBoot2】读取配置application.properties文件乱码问题解决

第一次用要安装点驱动啥的，点一下就安装好了，没截到图。

配置好以后，可以测试连接：

也可以在 IDEA 看到数据库：

实现增删改查接口

Model 层

回顾一下 model 层：数据库实体层，也被称为 entity 层、pojo 层

  • 用于存储数据库中的数据，类属性与数据库表字段对应。
  • 通常情况下，Model 层使用 ORM（对象关系映射）技术，如 JPA，MyBatis 等与数据库进行交互。

在 model 目录下新建 Data 类：

package ***.example.dream_house.model;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.NoArgsConstructor;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.model
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-17 16:29:49
 */
 
@lombok.Data
@NoArgsConstructor
@AllArgsConstructor
@ApiModel("数据库字段")
public class Data {

    @ApiModelProperty(value = "信息所属ID", required = true, example = "1")
    private int id;

    @ApiModelProperty(value = "信息来源IP地址", required = true, example = "127.0.0.1")
    private String ip;

    @ApiModelProperty(value = "信息来源所属省份", required = true, example = "广东")
    private String province;

    @ApiModelProperty(value = "内容发布时间", required = true, example = "2023-12-17 16:58:00")
    private String time;

    @ApiModelProperty(value = "梦想内容", required = true, example = "环游世界！")
    private String str;

    @ApiModelProperty(value = "点赞数", required = true, example = "52")
    private int likes;
}

接下来说一下这段代码中的各个注解的作用：

  • @lombok.Data：这是 Lombok 框架提供的注解，它会自动生成 getter、setter、toString、equals、hashCode 等方法。使用该注解可以简化代码，并提高开发效率。

  • @NoArgsConstructor：这也是 Lombok 提供的注解，它会生成一个无参构造器，可以避免手动编写无参构造器。这个注解常用于一些框架或工具的实例化。

  • @AllArgsConstructor：同样是 Lombok 提供的注解，它会生成一个全参构造器，可以避免手动编写全参构造器。这个注解也常用于一些框架或工具的实例化。

  • @ApiModel：这是 Swagger 框架提供的注解，用于描述一个模型类。这个注解的作用是将模型类描述为一个 API 文档的模型，可以通过该注解指定模型类的名称和描述信息。

  • @ApiModelProperty：也是 Swagger 框架提供的注解，用于描述模型类中的属性信息。该注解可以设置属性的名称、描述、是否必需等信息，以便在 Swagger 生成的 API 文档中显示。

    • value：属性的描述信息，用于在 API 文档中显示该属性的作用。

    • required：属性是否必需。当该值为 true 时，表示该属性必须包含在请求中；当该值为 false 时，表示该属性可以为空或者不包含在请求中。

    • example：属性的示例值。用于在 API 文档中显示该属性的样例值，方便开发者理解该属性的类型和取值范围。

mapper 层

回顾一下 mapper 层：数据持久层，也被称为 dao 层

  • 作用是访问数据库，向数据库发送 sql 语句，完成数据的增删改查任务。

在 mapper 目录下新建 DataMapper 接口：

package ***.example.dream_house.mapper;

import ***.example.dream_house.model.Data;
import org.apache.ibatis.annotations.*;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.mapper
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-17 16:36:57
 */

@Mapper
public interface DataMapper {

    /**
     * 信息来源IP地址
     * @param ip
     * 信息来源省份
     * @param province
     * 信息发出时间
     * @param time
     * 信息内容
     * @param str
     * 点赞数
     * @param likes
     *
     * @return
     */
    @Insert("insert into dream (ip, province, time, str, likes) values(#{ip}, #{province}, #{time}, #{str}, #{likes})")
    int insert(@Param("ip") String ip,
               @Param("province") String province,
               @Param("time") String time,
               @Param("str") String str,
               @Param("likes") int likes);

    /**
     * 信息id
     * @param id
     *
     * @return
     *
     * property属性对应Data对象中的成员名，column对应select出的字段名。
     */
    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "ip", column = "ip"),
            @Result(property = "province", column = "province"),
            @Result(property = "time", column = "time"),
            @Result(property = "str", column = "str"),
            @Result(property = "likes", column = "likes")
    })
    @Select("select * from dream where id = #{id}")
    Data findById(@Param("id") int id);

    /**
     * 用Data对象来作为传参,这样语句中的#{id}、#{ip}等数据就分别对应Data对象中的id和ip等属性。
     *
     * @param data
     */
    @Update("update dream set ip=#{ip}, province=#{province}, time=#{time}, str=#{str}, likes=#{likes} where id=#{id}")
    void update(Data data);

    /**
     * 删除该id对应的信息
     *
     * @param id
     */
    @Delete("delete from dream where id =#{id}")
    void delete(int id);

}

相关注解的作用：

  • @Mapper：是 MyBatis 框架提供的注解，用于标记一个 Java 接口，该接口用于定义数据访问方法。在使用 @Mapper 注解后，MyBatis 会自动扫描该接口，为其创建一个代理对象。该代理对象可以将接口方法与 MyBatis 的 SQL 映射文件中的 SQL 语句进行绑定，并完成数据访问的操作。

  • @Insert：也是 MyBatis 框架提供的注解，该注解的值为 SQL 语句，用于指定插入操作的具体逻辑。该 SQL 语句使用了预处理语句，从而避免了 SQL 注入的问题。

  • @Param：

    • /** */中的内容是 JavaDoc（Java文档注释），它用于对方法进行说明、描述和文档化。

    • 在方法中的 @Param 注解用于指定参数的名称，以便在 SQL 语句中使用相应的占位符。

  • @Results：用于定义从查询结果集中将查询结果映射为 Java 对象的过程。

  • @Select：同样是 MyBatis 框架提供的注解，该注解的值为 SQL 语句，用于指定查询操作的具体逻辑。

  • @Update：MyBatis 框架提供的注解，用于指定更新操作的 SQL 语句。

  • @Delete：MyBatis 框架提供的注解，用于指定删除操作的 SQL 语句。

service 层

简单回顾一下 service 层：业务逻辑层

  • 作用是完成功能设计。
  • 调用 mapper 层接口，接收 mapper 层返回的数据，完成项目的基本功能设计。

在 service 目录下新建 DataService 类：

package ***.example.dream_house.service;

import ***.example.dream_house.mapper.DataMapper;
import ***.example.dream_house.model.Data;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.service
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-17 17:04:45
 */

@Service
public class DataService {

    @Autowired
    private DataMapper dataMapper;

    /**
     * 新增信息
     *
     * @param ip
     * @param province
     * @param time
     * @param str
     * @param likes
     * @return
     */
    public String insert(String ip, String province, String time, String str, int likes) {
        dataMapper.insert(ip, province, time, str, likes);
        return "su***eed";
    }

    /**
     * 查询id对应的信息
     *
     * @param id
     * @return
     */
    public Data findById(int id) {
        return dataMapper.findById(id);
    }

    /**
     * 更新信息
     *
     * @param data
     */
    public void update(Data data) {
        dataMapper.update(data);
    }

    /**
     * 删除id对应的信息
     *
     * @param id
     */
    public void delete(int id) {
        dataMapper.delete(id);
    }
}

相关注解的作用：

  • @Service：用于标注一个类为 Spring 框架中的一个服务类，该类中通常包含了业务逻辑的实现。使用该注解可以使 Spring 框架自动扫描并将该类实例化，并将其作为服务类注册到容器中，以供其他组件使用。当我们需要在其他类中使用该服务类时，只需要通过依赖注入的方式获取该类的实例即可。

  • @Autowired：用于实现 Spring 框架中的自动装配功能，将需要使用的 Bean 对象注入到指定的属性中。通过使用该注解，可以避免手动创建 Bean 实例和手动注入对象的麻烦。

controller 层

简单回顾一下 controller 层：控制层

  • 作用是请求和响应控制。
  • 负责前后端交互，接受前端请求，调用 service 层，接收 service 层返回的数据，最后返回具体的页面和数据到客户端。

在 controller 目录下新建 DataController 类：

package ***.example.dream_house.controller;

import ***.example.dream_house.model.Data;
import ***.example.dream_house.service.DataService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.v3.oas.annotations.parameters.RequestBody;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.controller
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-17 17:17:36
 */

@Api(tags = "API接口")
@RestController
@CrossOrigin(origins = "*", maxAge = 3600)
public class DataController {
    @Autowired
    private DataService dataService;

    @ApiOperation("添加完整信息")
    @PostMapping("/insert")
    public String insert(@RequestBody Data data) {
        // @RequestBody注解用来绑定通过http请求中application/json类型上传的数据
        return dataService.insert(data.getIp(), data.getProvince(), data.getTime(), data.getStr(), data.getLikes());
    }

    @ApiOperation("查询id对应的信息")
    @GetMapping("/findById/{id}")
    public Data findById(@PathVariable int id) {
        return dataService.findById(id);
    }

    @ApiOperation("更新信息")
    @PutMapping("/update")
    public void update(@RequestBody Data data) {
        dataService.update(data);
    }

    @ApiOperation("删除指定id的信息")
    @DeleteMapping("/delete/{id}")
    public void deleteUser(@PathVariable int id) {
        dataService.delete(id);
    }

}

相关注解的作用：

  • @Api：Swagger 的注解之一，用于对 API 接口进行注释和说明。tags 属性是 Swagger 文档中的一个重要属性，可以用来将 API 接口进行分类，方便管理和查找。

  • @RestController：Spring MVC 中的注解之一，用于标识该类是一个基于 RESTful 风格的 Web 服务类。

  • @CrossOrigin：Spring 中的一个注解，用于支持跨域请求。跨域请求通常指在一个域名下的页面中使用 AJAX 技术向不同的域名或端口号的 Web 服务发送请求。

  • @ApiOperation：Swagger 的注解之一，用于对 API 接口中的具体操作进行注释和说明。

  • @PostMapping：Spring MVC 中的注解之一，表示该方法接收 POST 请求。

  • @RequestBody：Spring MVC 中的注解之一，表示该方法接收的请求参数为请求体中的数据。

  • @GetMapping：Spring MVC 中的注解之一，表示该方法接收 GET 请求。

  • @PathVariable：Spring MVC 中的注解之一，表示该方法接收的请求参数为路径参数。

  • @PutMapping：Spring MVC 中的注解之一，表示该方法接收 PUT 请求。

  • @DeleteMapping：Spring MVC 中的注解之一，表示该方法接收 DELETE 请求。

这里要引入 Spring Web，不然在使用这些注解的时候报错无法解析。

测试

预先设置一些数据库内容：

在把上面的四层架构都处理完之后，我们直接启动项目。

运行 DreamHouseApplication，或者运行它的 main 方法。

踩坑 1：Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstre

切换“跳过测试”模式：

友情链接：解决:Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstre

踩坑点2：Consider defining a bean of type ‘***.example.dream_house.mapper.DataMapper’ in your configuration.

18:10:27.233 [Thread-1] DEBUG org.springframework.boot.devtools.restart.classloader.RestartClassLoader - Created RestartClassLoader org.springframework.boot.devtools.restart.classloader.RestartClassLoader@6d1a5149

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.7.6)

2023-12-17 18:10:27.843  INFO 11824 --- [  restartedMain] c.e.dream_house.DreamHouseApplication    : Starting DreamHouseApplication using Java 1.8.0_192 on LAPTOP-P25TKBR2 with PID 11824 (C:\Users\81228\Documents\Program\Java Project\DreamHouse\dream_house\target\classes started by 81228 in C:\Users\81228\Documents\Program\Java Project\DreamHouse\dream_house)
2023-12-17 18:10:27.844  INFO 11824 --- [  restartedMain] c.e.dream_house.DreamHouseApplication    : No active profile set, falling back to 1 default profile: "default"
2023-12-17 18:10:27.975  INFO 11824 --- [  restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable
2023-12-17 18:10:27.975  INFO 11824 --- [  restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG'
2023-12-17 18:10:29.551  WARN 11824 --- [  restartedMain] o.m.s.mapper.ClassPathMapperScanner      : No MyBatis mapper was found in '[***.example.dream_house]' package. Please check your configuration.
2023-12-17 18:10:30.264  INFO 11824 --- [  restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8087 (http)
2023-12-17 18:10:30.265  INFO 11824 --- [  restartedMain] o.a.catalina.core.AprLifecycleListener   : An older version [1.2.24] of the Apache Tomcat Native library is installed, while Tomcat re***mends a minimum version of [1.2.30]
2023-12-17 18:10:30.265  INFO 11824 --- [  restartedMain] o.a.catalina.core.AprLifecycleListener   : Loaded Apache Tomcat Native library [1.2.24] using APR version [1.7.0].
2023-12-17 18:10:30.265  INFO 11824 --- [  restartedMain] o.a.catalina.core.AprLifecycleListener   : APR capabilities: IPv6 [true], sendfile [true], a***ept filters [false], random [true], UDS [false].
2023-12-17 18:10:30.265  INFO 11824 --- [  restartedMain] o.a.catalina.core.AprLifecycleListener   : APR/OpenSSL configuration: useAprConnector [false], useOpenSSL [true]
2023-12-17 18:10:30.283  INFO 11824 --- [  restartedMain] o.a.catalina.core.AprLifecycleListener   : OpenSSL su***essfully initialized [OpenSSL 1.1.1g  21 Apr 2020]
2023-12-17 18:10:30.295  INFO 11824 --- [  restartedMain] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2023-12-17 18:10:30.295  INFO 11824 --- [  restartedMain] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.69]
2023-12-17 18:10:30.507  INFO 11824 --- [  restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2023-12-17 18:10:30.507  INFO 11824 --- [  restartedMain] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization ***pleted in 2531 ms
2023-12-17 18:10:30.645  WARN 11824 --- [  restartedMain] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'dataController': Unsatisfied dependency expressed through field 'dataService'; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'dataService': Unsatisfied dependency expressed through field 'dataMapper'; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type '***.example.dream_house.mapper.DataMapper' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}
2023-12-17 18:10:30.651  INFO 11824 --- [  restartedMain] o.apache.catalina.core.StandardService   : Stopping service [Tomcat]
2023-12-17 18:10:30.679  INFO 11824 --- [  restartedMain] ConditionEvaluationReportLoggingListener : 

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2023-12-17 18:10:30.751 ERROR 11824 --- [  restartedMain] o.s.b.d.LoggingFailureAnalysisReporter   : 

***************************
APPLICATION FAILED TO START
***************************

Description:

Field dataMapper in ***.example.dream_house.service.DataService required a bean of type '***.example.dream_house.mapper.DataMapper' that could not be found.

The injection point has the following annotations:
	- @org.springframework.beans.factory.annotation.Autowired(required=true)


Action:

Consider defining a bean of type '***.example.dream_house.mapper.DataMapper' in your configuration.

解决方法：在 dataService.java 的 private DataMapper dataMapper; 的上面的@Autowired 改成 @Autowired(required = false)。

友情链接：Consider defining a bean of type问题解决

运行成功后，在浏览器中访问 http://127.0.0.1:8087/doc.html 页面，该页面是 Swagger 生成的 API 文档经过 knife4j 美化过后的 API 文档页面。

点击左侧的 “API接口” 可以看到出现了四个熟悉的接口，就是我们刚刚写的 “增删改查” 对应的接口，该 API 文档的好处就是可以在线对接口进行测试。

首先测试添加接口，依次点击并填写数据信息：

然后点击发送，看到响应内容 su***eed 说明添加成功了：

我们前往 Navicat Premium 查看数据库内容有没有变化，刷新一下页面，可以看到在最下面的数据出现了我们刚刚添加进去的内容：

其次测试查询接口，依次点击并填写 id 信息，然后点击发送。

可以看到响应内容成功拿到数据：

然后测试更新接口，依次点击并填写信息，然后点击发送：

由于没有设置返回值，所以响应内容为空。

我们直接去看数据库的内容变化，刷新一下数据库，可以看到该条数据已经发生了变化：

最后测试删除接口，点击并填写 id 信息，然后点击发送：

由于没有设置返回值，所以还是直接前往数据库查看，刷新数据库，发现 id 为 4 的这条数据不见了，说明接口没问题：

经过测试，“增删改查”四个接口全部都能够正常使用。

实现项目功能接口

上面详细介绍了编写 “增删改查” 四个接口，下面给出其他项目功能接口。

代码

model 层之前写的一个 Data 的实体类就继续保留，我们再增加一个 getUser 类，用来作为前端从接口获取到的信息的类。

原理与 Data 类相同，这里就不再进行讲解了，直接上代码：

package ***.example.dream_house.model;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.NoArgsConstructor;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.model
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-17 22:25:14
 */

@lombok.Data
@NoArgsConstructor
@AllArgsConstructor
@ApiModel("获取信息内容")
public class getUser {

    @ApiModelProperty(value = "信息所属ID", required = true, example = "1")
    private int id;

    @ApiModelProperty(value = "信息来源所属省份", required = true, example = "湖北")
    private String province;

    @ApiModelProperty(value = "梦想内容", required = true, example = "环游世界")
    private String str;

    @ApiModelProperty(value = "点赞数", required = true, example = "52")
    private int likes;

}

其实就是 Data 类去掉了 ip 和 time。

mapper 层我们需要在 DataMapper 接口中添加新的内容，新增的方法有：

  • 查询点赞数前 50 名的信息。
  • 查询最新的 50 条信息。
  • 查询随机的 50 条信息。
  • 更新指定 id 的点赞数 + 1。
  • 更新指定 id 的点赞数 - 1。

方法的原理还是与之前相同，只是改变了 SQL 语句。

    /**
     * 查询点赞数前50名的信息
     */
    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "province", column = "province"),
            @Result(property = "str", column = "str"),
            @Result(property = "likes", column = "likes")
    })
    @Select("SELECT * FROM dream ORDER BY likes DESC LIMIT 50")
    List<getUser> findByLikes();

    /**
     * 查询最新的50条信息
     */
    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "province", column = "province"),
            @Result(property = "str", column = "str"),
            @Result(property = "likes", column = "likes")
    })
    @Select("SELECT * FROM dream ORDER BY time DESC LIMIT 50")
    List<getUser> findByTime();

    /**
     * 查询随机的50条信息
     */
    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "province", column = "province"),
            @Result(property = "str", column = "str"),
            @Result(property = "likes", column = "likes")
    })
    @Select("SELECT * FROM dream ORDER BY rand() DESC LIMIT 50")
    List<getUser> findByRand();

    /**
     * 更新指定id的点赞数+1
     */
    @Update("UPDATE dream SET likes = likes + 1 WHERE id = #{id}")
    void increaseLikesById(int id);

    /**
     * 更新指定id的点赞数-1
     */
    @Update("UPDATE dream SET likes = likes - 1 WHERE id = #{id}")
    void decreaseLikesById(int id);

service 层在这里增加的内容比较多，因为是业务逻辑层，需要完成功能设计。

首先在 service 目录下新建 getIP、getProvince、getTime 三个类，分别用来获取用户 IP 地址、用户所在省份、内容发送时间。

getIP 类代码如下，可以从用户的请求头中筛选出用户真实的IP地址：

package ***.example.dream_house.service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.service
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-18 09:12:22
 */
public class getIP {

    public String getIp(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("text/html;charset=utf-8");
        // 设置响应头允许ajax跨域访问，星号表示所有的异域请求都可以接受
        response.setHeader("A***ess-Control-Allow-Origin", "*");
        response.setHeader("A***ess-Control-Allow-Methods", "GET,POST");
        return getIpAddr(request);
    }

    public String getIpAddr(HttpServletRequest request) {
        // 获取请求头"x-forwarded-for"对应的value
        String ip = request.getHeader("x-forwarded-for");
        // 如果获取的ip值为空
        if (ip == null || ip.isEmpty() || "unknown".equalsIgnoreCase(ip)) {
            // 则获取请求头"Proxy-Client-IP"对应的value
            ip = request.getHeader("Proxy-Client-IP");
        }
        // 如果获取的ip值仍为空
        if (ip == null || ip.isEmpty() || "unknown".equalsIgnoreCase(ip)) {
            //则获取请求头"WL-Proxy-Client-IP"对应的value
            ip = request.getHeader("WL-Proxy-Client-IP");
        }
        // 如果以上方式获取的ip值都为空
        if (ip == null || ip.isEmpty() || "unknown".equalsIgnoreCase(ip)) {
            //则直接获取ip地址
            ip = request.getRemoteAddr();
        }
        // 返回ip地址
        return ip;
    }
}

getProvince 类代码如下，可以调用外部 API 来检测出用户 ip 地址所属的省份：

package ***.example.dream_house.service;

import ***.alibaba.fastjson.JSON;
import ***.alibaba.fastjson.JSONObject;
import org.springframework.http.ResponseEntity;
import org.springframework.web.client.RestTemplate;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.service
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-18 09:23:34
 */
public class getProvince {

    /**
     * @param ip
     * @return
     */
    public String get_Province(String ip) {
        // 设置api的url
        String url = "https://ip.useragentinfo.***/json?ip=" + ip;

        RestTemplate template = new RestTemplate();

        // 发起一个HTTP GET请求，获取指定URL的响应实体，String.class表示要获取的响应实体的类型是字符串类型
        ResponseEntity<String> response = template.getForEntity(url, String.class);

        // 将Spring类型转换为JSON类型
        JSONObject json = JSON.parseObject(response.getBody());
        // 取出json中的数据
        String province = json.getString("province");

        return province;
    }
}

getTime 类代码如下，直接调用 Java 自带的包就行：

package ***.example.dream_house.service;

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * @BelongsProject:dream_house
 * @BelongsPackage:***.example.dream_house.service
 * @Author:Uestc_Xiye
 * @CreateTime:2023-12-18 09:29:50
 */
public class getTime {

    public String get_Time() {
        // 设置日期格式
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        // 获取当前系统时间
        String date = simpleDateFormat.format(new Date());

        return date;
    }
}

接下来修改 DataService 类的内容，需要新增以下方法：

    /**
     * 获取用户数据并调用mapper层上传数据库
     *
     * @param request
     * @param response
     * @param str
     * @return
     */
    public String Add(HttpServletRequest request, HttpServletResponse response, String str) {

        getIP getIP = new getIP();
        getProvince getProvince = new getProvince();
        getTime getTime = new getTime();

        // 获取信息的IP地址
        String ip = getIP.getIp(request, response);
        // 获取信息所属省份
        String province = getProvince.get_Province(ip);
        // 获取当前时间
        String time = getTime.get_Time();
        // 设置当前点赞数为0
        int currentLikes = 0;
        // 上传数据
        dataMapper.insert(ip, province, time, str, currentLikes);

        return "su***eed";
    }

    /**
     * 查询点赞数排名前50的信息
     *
     * @return
     */
    public List<getUser> findByLikes() {
        return dataMapper.findByLikes();
    }

    /**
     * 查询最新的50条信息
     *
     * @return
     */
    public List<getUser> findByTime() {
        return dataMapper.findByTime();
    }

    /**
     * 查询随机的50条信息
     *
     * @return
     */
    public List<getUser> findByRand() {
        return dataMapper.findByRand();
    }

    /**
     * 更新指定id对应的点赞数+1
     *
     * @param id
     * @return
     */
    public String increaseLikesById(int id) {
        dataMapper.increaseLikesById(id);

        return "su***eed";
    }

    /**
     * 更新指定id对应的点赞数-1
     *
     * @param id
     * @return
     */
    public String decreaseLikesById(int id) {
        dataMapper.decreaseLikesById(id);

        return "su***eed";
    }

controller 层需要新增以下接口：

    @ApiOperation("上传信息接口")
    @PostMapping("/Add/{str}")
    public String Add(HttpServletRequest request, HttpServletResponse response, @PathVariable String str) {
        return dataService.Add(request, response, str);
    }

    @ApiOperation("查询点赞数前50名的信息")
    @GetMapping("/findByLikes")
    public List<getUser> findByLikes() {
        return dataService.findByLikes();
    }

    @ApiOperation("查询最新的50条信息")
    @GetMapping("/findByTime")
    public List<getUser> findByTime() {
        return dataService.findByTime();
    }

    @ApiOperation("查询随机的50条信息")
    @GetMapping("/findByRand")
    public List<getUser> findByRand() {
        return dataService.findByRand();
    }

    @ApiOperation("更新指定id对应的点赞数+1")
    @PutMapping("/increaseLikesById/{id}")
    public String increaseLikesById(@PathVariable int id) {
        return dataService.increaseLikesById(id);
    }

    @ApiOperation("更新指定id对应的点赞数-1")
    @PutMapping("/decreaseLikesById/{id}")
    public String decreaseLikesById(@PathVariable int id) {
        return dataService.decreaseLikesById(id);
    }

测试

启动项目，访问 API 文档页面 http://127.0.0.1:8087/doc.html，可以看到我们编写的接口都在这里：

发现问题：上传信息接口无效。

原因是 service 层的 get_Province 函数中的：

String url = "https://ip.useragentinfo.***/json?ip=" + ip;

我们去 https://ip.useragentinfo.*** 这个网址看看：

查询一下，确实能用，但是和代码里的不同，注意这里的网址：

我们把代码改一下：

String url = "https://ip.useragentinfo.***/?ip=" + ip;

还是不行，原因是这个网站已经不支持带参数查询了（悲）。

我们只能按下面的方法修改 get_IP、getIpAddr 和 getProvince 函数。

友情链接：java实现获取IP及归属地

其他测试了都没什么大问题。

有个小问题就是，测试上传信息接口的时候，是能上传，但是 IP 地址是 0:0:0:0:0:0:0:0:1。

友情链接：手把手教你用Java获取IP归属地

这里面说，在本地环境调用获取 IP，要么是 0:0:0:0:0:0:0:1，或者是局域网IP。

局域网IP是以192.168.x.x开头，或者是127.0.0.1的IP。

所以需要部署到外网服务器才能获取到公网地址，部署到外网服务器才能成功获取 IP 地址。

再查了一下，在本地测试时，这个是无解的。

要是在局域网中运行，访问时使用本身的 IP 访问。这时候请求会通过路由器转发，因此服务器获取的就是本机的局域网内 IP，在 Java 中获取的 IP 就是局域网 IP，不是 localhost 或者 127.0.0.1 这种东西。

友情链接：java获取IP为0:0:0:0:0:0:0:1的情况

详细解释：

0:0:0:0:0:0:0:1是属于 ipv6，后来我又进行另一台电脑做测试，发现这种情况只有在服务器和客户端都在同一台电脑上才会出现（例如用 localhost 访问的时候才会出现），这是hosts配置文件的问题。

友情链接：

  1. request.getRemoteAddr()获取ip地址时得到的值是[0:0:0:0:0:0:0:1]原因和解决方法
  2. 查询本地ip地址为0:0:0:0:0:0:0:1

总结：

因为电脑优先把 localhost 解析成了 IPv6，用 localhost 测试，返回 IPv6 地址，get_Province 能解析到省份。

用 127.0.0.1 测试，返回本机 IPv4 地址，get_Province 不能解析到省份，是“本机地址”。

创建 Vue 前端

安装 Node.js

Node.js 简介：Node.js 入门 ｜ 青训营笔记

官网下载安装：https://nodejs.org/zh-***/

调出终端，输入指令 node -v，显示版本号说明 node 安装好了。

输入指令 npm -v，显示版本号，说明 npm 可以正常使用。

配置 npm 镜像

npm 默认的仓库地址在国外，访问速度较慢，我们切换成国内的淘宝镜像。

输入指令安装：npm install -g ***pm --registry=https://registry.npm.taobao.org

输入指令 ***pm -v，显示版本号说明 ***pm 安装好了。

前端代码在 Visual Studio Code 上写，在它上面再测一下：

安装脚手架

终端输入指令 ***pm i -g @vue/cli 或 npm i -g @vue/cli 全局安装。

安装细节很长，这样就算成功了：

创建并配置项目

在任意位置新建一个文件夹用来放置项目。

终端中通过 cd 指令跳转到这个文件夹（我这里已经到项目文件夹了）。

输入指令 vue create dream_house 创建项目。

  • 上下键：表示选择
  • 回车键：表示确认

选择 Manually select features 手动配置。

选择需要安装的插件，勾选如下插件，按空格键选择：

  • Babel：解析 es6 转 es5 的插件
  • TypeScript：TypeScript 插件
  • Progressive Web App (PWA) Support：渐进式 Web 应用程序（PWA）支持
  • Router：vue 路由插件
  • Vuex：Vuex 插件
  • CSS Pre-processors：css 预处理插件
  • Linter/Formatter：格式化程序
  • Unit Testing：单元测试
  • E2E Testing：端到端（end-to-end）

回车（Enter）确认。

版本选择：选 2.x。

路由模式：选择是否为 history 模式，y 表示是，n 表示使用 hash 模式，这里选择的是 n。

  • history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）
    *hash： 浏览器 url 址栏中的 # 符号（如这个 URL：http://love.byzy.love/#/SuiJi ，hash 的值为“ #/SuiJi ”），hash 不被包括在 HTTP 请求中，所以对后端完全没有影响。因此改变 hash 不会重新加载页面，更容易进行打包上传服务器。

选择 CSS 预处理器：选第一个

选择编码规则：

  • ESLint with error prevention only：只配置使用 ESLint 官网的推荐规则

  • ESLint + Airbnb config：官网推荐的规则 + Airbnb 第三方的配置

  • ESLint + Standard config：使用 ESLint 官网推荐的规则 + Standard 第三方的配置

  • ESLint + Prettier：使用 ESLint 官网推荐的规则 + Prettier 第三方的配置

建议初学者（就是我）选择第一项，表示只有报错时才会验证。

检测条件：

  • Lint on save：保存就检测

  • Lint and fix on ***mit：fix 和 ***mit 时候检查

选 Lint on save。

存放配置：

  • In dedicated config files：独立文件放置
  • In package.json：放 package.json 里

选 In package.json。

最后输入 y：

保存配置并命名：

包管理器就选 npm：

等下载完成，显示出如下界面说明配置完成：

输入指令 cd dream_house 进入项目。

项目结构

Visual Studio Code 打开项目文件夹，观察左侧项目目录。

项目结构说明如下：

  • node_modules： 包含所有安装的 npm 包。
  • public：包含所有不需要经过 Webpack 处理的静态文件，如：index.html、favicon.ico等。
    • favicon.ico
    • index.html
  • src：包含所有源代码
    • assets：存放静态资源文件，如图片、样式表等
      • logo.png
    • ***ponents：存放 Vue 组件
      • HelloWorld.vue
    • router：存放 Vue 路由
      • index.js
    • store：存放 Vuex 状态管理相关的代码
      • index.js
    • views：存放页面级别的 Vue 组件
      • AboutView.vue
      • HomeView.vue
    • App.vue：Vue应用程序的根组件
    • main.js：Vue应用程序的入口文件
  • .gitignore：Git 忽略文件列表，告诉 Git 哪些文件和目录应该被忽略，不被纳入版本控制中。
  • babel.config.js：Babel 配置文件，用于转换 ES6+ 代码到 ES5，以便它们能够在更旧的浏览器中运行。
  • jsconfig.json：用于配置 Vusial Studio Code 的 JavaScript 语言服务的 JSON 配置文件。它可以用来设置JS项目的编译选项、路径别名、自动引入模块等选项。
  • package-lock.json：记录当前项目的依赖项及其版本信息，确保不同计算机或者环境下的依赖项保持一致。
  • package.json：Vue.js 项目的元数据文件，包含项目的名称、版本、作者、依赖项等信息。其中，dependencies 字段记录的是项目的运行时依赖项，而 devDependencies 字段记录的是项目的开发时依赖项。
  • README.md：项目的说明文档，描述项目的目的、功能、使用方法等等。
  • vue.config.js：Vue.js 项目的配置文件，包含了一些 Vue CLI 的默认配置，可以用于自定义 Webpack 配置、开发环境的代理设置等等。使用 vue-cli-service 命令时，它将自动被加载并应用于项目配置。

Vue 组件结构

一个 Vue 组件分为三个部分，分别是：template 部分、script 部分、style 部分。

  • template：组件的模板部分，用来定义组件的 html 结构。
    必须在里面放置一个 html 标签来包裹所有的代码，例如 <div></div> 标签。
  • script：组件的 JavaScript 代码部分，用来定义组件的逻辑和属性。
  • style：组件的样式部分，它用来定义组件的样式。

Vue 组件调用与传值

我们就从官方的例子中来理解 Vue 组件间的传值与调用。由于 HelloWorld.vue 中的内容过多，所以我进行了删减。

观察下面的两段 Vue 代码。

HomeView.vue：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Wel***e to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/***ponents/HelloWorld.vue'

export default {
  name: 'HomeView',
  ***ponents: {
    HelloWorld
  }
}
</script>

HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

可以看到 HomeView.vue 组件中 template 部分有一个 HelloWorld 标签，这个就是我们自定义的 HelloWorld 组件，在这个标签中，我们将一串字符串赋值给 msg 传递了过去。

在 script 部分中，使用 ES6 的 import 语法引入了 “@/***ponents/HelloWorld.vue” 文件，并将其赋值给 HelloWorld 变量。

  • export default：使用 ES6 的 export 语法导出一个默认的对象，该对象包含了组件的各种属性和方法。

  • name：定义了组件的名称，可以在代码中用来引用这个组件。

  • ***ponents：定义了组件所包含的子组件。在这里，我们将 HelloWorld 子组件注册为了 HomeView 组件的一个子组件，以便在 HomeView 组件的模板中使用 HelloWorld 组件。

接下来看 HelloWorld.vue 组件中的 script 部分，我们可以看到 props 属性，这个属性定义了该组件的数据属性，也就是它的输入。在这里，我们定义了一个名为 msg 的属性，它是一个字符串类型。该属性可以从组件外部传递进来，在组件内部使用。

然后在 template 部分，<h1>{{ msg }}</h1> 调用了该值。

Vue 组件的生命周期

Vue组件的生命周期是指在组件实例化时，从开始到结束，不同阶段会自动执行的一些函数。Vue提供了一些钩子函数，让我们在这些生命周期阶段执行我们的自定义逻辑。Vue组件的生命周期可以分为以下三个阶段：

  1. 创建阶段：包括组件实例化、数据观测、模板编译和挂载等过程。
    具体的生命周期函数有：

    • beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用，此时data和methods 等组件属性还未初始化。

    • created：在实例创建完成后被立即调用，此时 data 和 methods 等组件属性已经初始化，但是 DOM 节点还未挂载。

    • beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但是还未渲染成 DOM。

    • mounted：在挂载完成后被调用，此时组件已经挂载到 DOM 上，可以进行 DOM 操作和异步数据请求等操作。

  2. 更新阶段：更新阶段包括数据更新和重新渲染等过程。
    具体的生命周期函数有：

    • beforeUpdate：在数据更新之前被调用，此时组件还未重新渲染。

    • updated：在数据更新之后被调用，此时组件已经重新渲染。

  3. 销毁阶段：销毁阶段包括组件销毁和清理等过程。
    具体的生命周期函数有：

    • beforeDestroy：在实例销毁之前被调用，此时组件还未销毁，可以进行一些清理工作。

    • destroyed：在实例销毁之后被调用，此时组件已经完全销毁，不再可用。

在组件的生命周期中，我们可以使用这些生命周期函数来执行一些初始化、清理和动态更新等操作。例如，在 created 生命周期函数中可以发起异步请求获取数据，在 beforeDestroy 生命周期函数中可以清理定时器或取消订阅等操作。

测试 Vue 程序

我们先看看默认的 Vue 程序如何运行。

第一步：npm install

第二步：npm run serve

第三步：打开浏览器，进入 http://localhost:8080/

友情链接：如何运行vue项目(超详细图解）

需求分析

整理需求：

  1. 一个导航栏
  2. 三个页面
  3. 页面中显示每个用户发出的内容
  4. 可以给内容点赞
  5. 可以发送内容
  6. 先把整体页面的框架模型搭建起来，然后再进行修饰

在了解了需求之后，就可以开始动手操作了。

实现项目页面

框架搭建

在 views 目录下新建 LikesSortedView.vue、NewestView.vue、RandomView.vue。

在 ***ponents 目录下新建 UserList.vue、InputText.vue。

LikesSortedView.vue、NewestView.vue、RandomView.vue 三个组件作为三个页面，内容包括所有的 UserList.vue 组件排列起来。

UserList.vue 组件作为单个用户发送的内容，上面显示省份与点赞等内容。

InputText.vue 组件作为发送内容的组件，包括一个输入框和一个发送按钮。

项目配置

我们需要把项目运行端口更改一下，不然默认是 8080 端口。在 vue.config.js 文件中更改：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  devServer: {
    port: 8086, // 此处修改你想要的端口号
  },
  
})

然后在项目中我们会用到 Axios 以及 Element ，所以需要下载相关依赖并在 main.js 中引入。

  • 安装 Axios 指令：npm install axios。

  • 安装 Element 指令：npm install element-ui。

安装好以后，修改 main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';                      // 引入element-ui
import 'element-ui/lib/theme-chalk/index.css';           // element-ui的css样式要单独引入

import axios from 'axios'

Vue.prototype.$axios = axios

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

主界面设计

主页面的设计在根组件 App.vue 中进行，主要负责一些全局内容的显示。

在 template 部分为一个标题，一个导航栏，一个 InputText 组件，一条每页都需要显示的提示文字。

<template>
  <div id="app">
    <h1 class="MyName">Dream House</h1>
    <nav>
      <router-link to="/">排行</router-link> |
      <router-link to="/Newest">最新</router-link> |
      <router-link to="/Random">随机</router-link>
    </nav>
    <router-view />
    <InputText />
    <div class="newText">该列表仅显示50条内容！</div>
  </div>
</template>

在 script 部分引入 InputText.vue 组件。

<script>
import InputText from '@/***ponents/InputText.vue'

export default {
  name: 'App',
  ***ponents: {
    InputText
  },
}
</script>

在 style 部分设置该组件的样式，以及一些全局效果。

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 20px;
  font-size: 30px;
  font-family: pyt;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

  a {
    text-decoration: none;
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      -webkit-tap-highlight-color: transparent; //清除蓝框
      text-decoration: none;
      color: #42b983;
    }
  }
}

.MyName {
  font-family: pyt;
  font-size: 60px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #41ffa9, rgba(79, 168, 252, 0.6));
  margin: 20px 10px 0px 10px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); //文本阴影
}
body {
  background: rgb(244, 189, 255);
  background: linear-gradient(
    90deg,
    rgb(183, 180, 255) 0%,
    rgb(255, 255, 255) 50%,
    rgb(165, 240, 255) 100%
  );
}

// 设置全局滚动条
body::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #c4ffe4;
}

.newText {
  height: 80px;
  margin: 10px auto;
  font-size: 13px;
}
</style>

设置路由

在 router 目录下的 index.js 中设置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '排行',
    ***ponent: () => import('../views/LikesSortedView.vue')
  },
  {
    path: '/Newest',
    name: '最新',
    // route level code-splitting
    // this generates a separate chunk (Newest.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    ***ponent: () => import(/* webpackChunkName: "about" */ '../views/NewestView.vue')
  },
  {
    path: '/Random',
    name: '随机',
    ***ponent: () => import('../views/RandomView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

内容组件设计

UserList.vue 的 template 部分如下，显示一个主要内容，在左下角显示省份，右下角显示点赞数和一个图片按钮。

<template>
  <div class="UserList">
    <div class="box">
      <div class="box1">
        <div class="str">{{str}}</div>
      </div>
      <div class="box2">
        <div class="province">{{province}}</div>
        <div class="likes">{{likes}}</div>
        <img
          :src="imagePath"
          @click="toggleImage"
          class="img-btn"
        />
      </div>
    </div>
  </div>
</template>

style 部分如下，设置对应的标签显示的位置，以及样式等。

<!-- 添加“scoped作用域”属性以将 CSS 限制为此组件 -->
<style scoped lang="scss">
.UserList {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 4px #ddd;
  padding: 10px;
  display: flex;
  flex-direction: column; //将 flex 子元素沿竖直方向排列
  align-items: center; //将 flex 子元素在纵轴上居中对齐
  margin: 5px;
  width: 500px;
  transition: all 0.3s ease; //面板放大
}

.box:hover {
  transform: scale(1.04); //面板放大
}

.box1 {
  width: 100%;
  float: left;
  margin: 5px;
}

.str {
  flex: 1;
  text-align: center;
  font-size: 20px;
  //font-family:wpyt;
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.box2 {
  width: 100%;
  display: flex;
}

.province {
  text-align: center;
  font-size: 14px;
  width: 120px;
  height: 20px;
  display: flex;
}

.likes {
  text-align: center;
  font-size: 14px;
  width: 100px;
  height: 20px;
  margin: auto 5px auto auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.img-btn {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease; // 设置按钮元素的过渡效果
}
</style>

script 部分如下，获取从上级页面传来的数据，在 created() 钩子函数中判断是否给这个内容点过赞，并将图片按钮初始化。

<script>
import axios from 'axios'

export default {
  name: 'UserList',
  props: {
    Obj: Object
  },
  data() {
    return {
      imagePath: require("@/assets/点赞-no.png"),
      str: this.Obj.str,
      province: this.Obj.province,
      likes: this.Obj.likes
    };
  },
  created() {
    if (localStorage.getItem(`isLiked${this.Obj.id}`)) {
      this.imagePath = require("@/assets/点赞-yes.png");
    }
  },
  methods: {
    toggleImage() {
      // 判断是否点赞过
      if (this.imagePath === require("@/assets/点赞-no.png")) {

        // 获取按钮元素
        const imgBtn = this.$el.querySelector('.img-btn');
        // 给按钮元素应用缩放和旋转的样式
        imgBtn.style.transform = 'scale(1.2) rotate(-10deg)';
        // 设置计时器，在 300 毫秒之后给按钮元素应用新的样式
        setTimeout(() => {
          imgBtn.style.transform = 'scale(1) rotate(10deg)';
          setTimeout(() => {
            imgBtn.style.transform = 'scale(1) rotate(0deg)';
          }, 300);
        }, 300);

        this.likes++;

        // 将图片替换为已点赞的图片
        this.imagePath = require("@/assets/点赞-yes.png");
        // 将已点赞的状态存入 localStorage
        localStorage.setItem(`isLiked${this.Obj.id}`, true);

        //向服务器发送发送put请求
        axios.put(`http://localhost:8087/increaseLikesById/${this.Obj.id}`)
          .then(res => {

            console.log(res.data);

          })
          .catch(error => {
            console.log("点赞出错！")
            console.error(error);
          });

      } else {

        this.likes--;

        // 否则将图片替换为未点赞的图片
        this.imagePath = require("@/assets/点赞-no.png");
        // 并且删除已点赞的状态
        localStorage.removeItem(`isLiked${this.Obj.id}`);

        // 向服务器发送发送put请求
        axios.put(`http://localhost:8087/decreaseLikesById/${this.Obj.id}`)
          .then(res => {
            console.log(res.data);
          })
          .catch(error => {
            console.log("取消点赞出错！")
            console.error(error);
          });
      }
    }
  }

}
</script>

按钮绑定 toggleImage() 函数，通过点击按钮触发此函数，触发图片按钮的动作，以及更换图片，并且向服务器发出 put 请求，更新数据库中的数据，更新页面中显示的数据。

assets 文件夹下要放图片：

友情链接：阿里巴巴矢量图标库

发送组件设计

InputText.vue 的 template 部分如下，只有一个输入框以及一个图片按钮。

<template>
  <div class="InputText">
    <input
      type="text"
      maxlength="15"
      v-model="inputValue"
      placeholder="发送你的梦想！"
    />
    <img
      src="../assets/send.png"
      class="submit-btn"
    />
  </div>
</template>

style 部分如下，依然是设置整个发送组件的样式。

<style scoped lang="scss">
.InputText {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: transparent;
  width: 300px;
  margin: 0 auto;
  //设置 z-index 值为 999,显示为最顶部
  z-index: 999;
}

input[type="text"] {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 0 10px #42b983;
  transition: all 0.3s ease-in-out;
}

input[type="text"]:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(24, 144, 255, 0.8);
}

.submit-btn {
  height: 40px;
  padding: 2px 0px 0px 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.submit-btn:hover {
  transform: scale(1.2);
}
</style>

script 部分如下，通过点击按钮触发 submit() 函数，播放按钮的动画，以及获取输入框的内容，发送到服务器上。

<script>
import axios from 'axios'

export default {
  name: 'InputText',

  // 定义数据
  data() {
    return {
      isAnimating: false, // 用于标识动画是否正在播放
      inputValue: ''
    };
  },
  methods: {
    // 定义提交方法
    submit() {

      // 如果动画正在播放，直接返回
      if (this.isAnimating) return;

      //向服务器发送发送post请求
      axios.post(`http://localhost:8087/Add/${this.inputValue}`)
        .then(res => {

          console.log(res.data);
          this.inputValue = '';

          this.$message({
            message: '发送成功！',
            type: 'su***ess',
            duration: 2000 // 自动关闭延迟时间，单位毫秒
          });
        })
        .catch(error => {

          this.$message({
            message: '发送失败！',
            type: 'error',
            duration: 2000 // 自动关闭延迟时间，单位毫秒
          });

          console.log("发送信息出错！")
          console.error(error);
        });

      this.isAnimating = true; // 标记动画正在播放
      // 获取提交按钮元素
      const btn = this.$el.querySelector(".submit-btn");
      // 记录提交按钮的原始 transform 值
      const originalTransform = btn.style.transform;
      // 设置提交按钮的 transform 值，使其向右上方移动
      btn.style.transform = "translate(100%, -100%)";

      // 设置动画播放完成后的回调函数
      setTimeout(() => {
        // 将提交按钮的 transform 值设置为原始值
        btn.style.transform = originalTransform;
        // 标记动画已经播放完毕
        this.isAnimating = false;
      }, 500);

    }
  },
  mounted() {
    // 在组件挂载完成后，给提交按钮元素绑定 click 事件
    this.$el.querySelector(".submit-btn").addEventListener("click", this.submit);
  }
};
</script>

assets 文件夹下要放图片：

分页面设计

三个分页面的作用是向数据库发出请求，获取到内容数据，再调用内容组件将各个内容排列显示在页面上。

排行页面 LikesSortedView.vue

template 部分如下，在该部分中只使用了一个自定义组件 UserList ，使用 Vue 的模板语法动态的生成一个组件列表。

<template>
  <div class="PaiHang">
    <UserList
      v-for="(item, index) in Obj"
      :key="index"
      :Obj="item"
    />
  </div>
</template>

解释：

  • v-for="(item, index) in Obj"指令表示对 Obj 对象进行遍历，生成对应数量的 组件。

  • :key="index"属性用于标识每个组件的唯一性，使 Vue 能够更高效地管理组件的状态。

  • :Obj="item"属性将当前元素的值 item 传递给 组件，作为组件的参数之一。

script 部分如下，在该页面被初始化的的时候会调用 getList() 方法从服务器拿到数据，然后将 json 数据传入对应的 UserList 组件中。

<script>
// @ 是 /src 的别名
import UserList from '@/***ponents/UserList.vue'
import axios from 'axios'

export default {
  name: 'LikesSortedView',
  ***ponents: {
    UserList
  },

  data() {
    return {
      Obj: []
    }
  },

  // ***puted会缓存结果，methods每次都会重新计算
  methods: {
    getList() {
      let list = [];
      let newObjects = {};

      axios.get('http://localhost:8087/findByLikes')
        .then(res => {
          list = res.data;

          for (let i = 0; i < list.length; i++) {
            newObjects[i] = list[i];
          }
          console.log(newObjects);
          this.Obj = newObjects;
        })
        .catch(error => {
          this.$message({
            message: '获取页面内容失败！',
            type: 'error',
            duration: 2000
          });
          console.log("获取排行出错！")
          console.error(error);
        });

    }

  },

  created() {
    this.getList();
  }

}
</script>
最新页面 NewestView.vue

最新页面基本上与排行页面相同，唯一不同的地方就是请求的参数不同，所以只需要把请求的 url 改一下就行了，改成 API 定义的对应的接口。

url：http://(接口IP地址):8087/findByTime

然后就是本组件的名字需要改一下。

<template>
    <div class="Newest">
      <UserList
        v-for="(item, index) in Obj"
        :key="index"
        :Obj="item"
      />
    </div>
  </template>
  
  <script>
  // @ 是 /src 的别名
  import UserList from '@/***ponents/UserList.vue'
  import axios from 'axios'
  
  export default {
    name: 'NewestView',
    ***ponents: {
      UserList
    },
  
    data() {
      return {
        Obj: []
      }
    },
  
    // ***puted会缓存结果，methods每次都会重新计算
    methods: {
      getList() {
        let list = [];
        let newObjects = {};
  
        axios.get('http://localhost:8087/findByTime')
          .then(res => {
            list = res.data;
  
            for (let i = 0; i < list.length; i++) {
              newObjects[i] = list[i];
            }
            console.log(newObjects);
            this.Obj = newObjects;
          })
          .catch(error => {
            this.$message({
              message: '获取页面内容失败！',
              type: 'error',
              duration: 2000
            });
            console.log("获取排行出错！")
            console.error(error);
          });
  
      }
  
    },
  
    created() {
      this.getList();
    }
  
  }
  </script>
随机页面 RandomView.vue

同理，改一下请求的 url 就行。

url：http://(接口IP地址):8087/findByRand

<template>
    <div class="Random">
      <UserList
        v-for="(item, index) in Obj"
        :key="index"
        :Obj="item"
      />
    </div>
  </template>
  
  <script>
  // @ 是 /src 的别名
  import UserList from '@/***ponents/UserList.vue'
  import axios from 'axios'
  
  export default {
    name: 'RandomView',
    ***ponents: {
      UserList
    },
  
    data() {
      return {
        Obj: []
      }
    },
  
    // ***puted会缓存结果，methods每次都会重新计算
    methods: {
      getList() {
        let list = [];
        let newObjects = {};
  
        axios.get('http://localhost:8087/findByRand')
          .then(res => {
            list = res.data;
  
            for (let i = 0; i < list.length; i++) {
              newObjects[i] = list[i];
            }
            console.log(newObjects);
            this.Obj = newObjects;
          })
          .catch(error => {
            this.$message({
              message: '获取页面内容失败！',
              type: 'error',
              duration: 2000
            });
            console.log("获取排行出错！")
            console.error(error);
          });
  
      }
  
    },
  
    created() {
      this.getList();
    }
  
  }
  </script>

项目启动

在终端中输入指令：npm run serve。

可以看到如下界面，说明项目成功运行：

根据提示访问本地地址 http://localhost:8086/。

发现所有功能都正常使用，页面正常排布。

经测试，点赞按钮和发送按钮动画正常播放，页面数据正常更新，梦想内容正常发布，各功能使用正常。

至此，“梦想屋” 小项目成功完成。

源码下载

GitHub：https://github.***/UestcXiye/DreamHouse

CSDN：DreamHouse.zip

转载请说明出处内容投诉
CSS教程_站长资源网 » 从 0 开始实现一个 SpringBoot + Vue 项目
dd凯

dd凯

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买