Springboot项目创建！！！接口测试！！！（零基础也能完成！！！直接速通！！！统一返回结果！！！Swagger集成Knife4j！！微信支付测试！！）前端Vue！！！（快速创建项目）

原创已于 2024-12-19 16:08:59 修改 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #后端 #java

于 2024-11-14 10:47:19 首次发布

程序员随笔同时被 2 个专栏收录

144 篇文章

订阅专栏

支付

5 篇文章

订阅专栏

下面是我在idea重写一遍，跟着下面的步骤即可完成，其它不懂的地方不用管，先体验流程，如果想了解更多知识，请从下面文章开始学习Java零基础入门(纯小白也能入门，速通Java，知识点归纳超级全面！！！2024版后端成仙起始篇！！！！）_入门学习java-CSDN博客

可以直接clone项目，如果不会git，可以参考文章Git最新最新详细教程、安装（从入门到精通！！！！企业级实战！！！工作必备！！！结合IDEA、Github、Gitee实战！！！！速通Git！！！GitLab入门）-CSDN博客

项目地址：payment-demo: Springboot项目创建！！！接口测试！！！（零基础也能完成！！！直接速通！！！统一返回结果！！！Swagger集成Knife4j！！微信支付测试！！）

一、idea创建启动项目

第一步，点击左侧Spring Initializr创建springboot项目，右侧填写相应内容，然后点击下一步

(这里com.atguigu)

【这里直接改脚手架就可以用jdk1.8

其实这个server url 是可以打开的
spring官方的server url：https://start.spring.io
阿里云的 server url：https://start.aliyun.com】

注意：这里包名改为com.atguigu，为了后面统一

选择 Spring Boot版本2.4.2，因为我是Spring Web，所以选择勾选，然后点击完成即可

如果你是jdk17版本，下面教你改为1.8版本（可以不用看）

注意：这里我全部改了jdk版本为1.8，

和

然后还要改pom中springboot版本下面写错了，是2.4.2

和

设置端口和应用的名字

然后写一个接口测试一下！！！创建controller包！！及ProductController类

代码如下;

package com.example.paymentdemo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/product")
public class ProductController {
    @GetMapping("/test")
    public String test(){
        return "hello";
    }
    
}

然后直接点击运行！！！！

运行成功！！！

打开浏览器，访问端口8090！！！(localhost:8090/api/product/test)

项目测试完成！！！！

后续想学习更多知识可以继续看！！！

二、引入Swagger

 <!--Swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

创建config包

package com.atguigu.paymentdemo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class Swagger2Config {
    @Bean
    public Docket docket(){
        return new Docket(DocumentationType.SWAGGER_2);
    }
}

然后重新启动项目，如果报错记得跳过测试在打包一下(如果报错，springboot版本改为2.5.6

访问

http://localhost:8090/swagger-ui.html

刚刚写过一个接口，

点击下面展示看一下信息

还可以给这个文档做进一步的配置，如标题，说明等如下：

代码:

package com.example.paymentdemo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class Swagger2Config {
    @Bean
    public Docket docket(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder().title("微信支付案例接口文档").build());
    }
}

刷新一下

在类和方法上添加

package com.example.paymentdemo.controller;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@Api(tags = "商品管理")
@RestController
@RequestMapping("/api/product")
public class ProductController {
    @ApiOperation("测试接口")
    @GetMapping("/test")
    public String test(){
        return "hello";
    }
    
}

目前的pom文件参考一下可以

<?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>
    <groupId>com.example</groupId>
    <artifactId>payment-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>payment-demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.4.2</spring-boot.version>
    </properties>
    <dependencies>
        <!--Swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>
        <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>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring-boot.version}</version>
                <configuration>
                    <mainClass>com.example.paymentdemo.PaymentDemoApplication</mainClass>
                    <skip>true</skip>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

三、定义统一结果

作用：定义统一响应结果，为前端返回标准格式的数据。

package com.example.paymentdemo.vo;

import java.util.HashMap;
import java.util.Map;

public class R {

    private Integer code;
    private String message;
    private Map<String,Object> data=new HashMap<>();
}

3.1、引入lombok依赖

简化实体类的开发,因为被spring统一管理，不用加版本号！！！（可能还需要安装idea lombok插件）

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

3.2、创建Result类

创建统一结果类（接上面写完整）

package com.example.paymentdemo.vo;

import lombok.Data;


import java.util.HashMap;
import java.util.Map;
@Data
public class R {

    private Integer code;
    private String message;
    private Map<String,Object> data=new HashMap<>();

    public static R ok(){
        R r=new R();
        r.setCode(0);
        r.setMessage("成功");
        return r;
    }
    public static R error(){
        R r=new R();
        r.setCode(-1);
        r.setMessage("失败");
        return r;
    }
    public  R data(String key,Object value){
        this.data.put(key, value);
        return this;
    }
}

3.3、修改controller

修改test方法，返回统一结果

package com.example.paymentdemo.controller;

import com.example.paymentdemo.vo.R;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Date;

@Api(tags = "商品管理")
@RestController
@RequestMapping("/api/product")
public class ProductController {
    @ApiOperation("测试接口")
    @GetMapping("/test")
    public R test(){
        
        return R.ok()
                .data("message","hello")
                .data("now",new Date());
    }
    
}

重新启动，结果如下：

3.4、修改时间格式

# 应用服务 WEB 访问端口
server:
  port: 8090
spring:
  application:
    name: payment-demo
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

再启动：

四、创建数据库

4.1、创建数据库

（想学习mysql更多知识，请关注博主学习后续知识）

或者

mysql -uroot -p

select version();

create database payment_demo;

4.2、IDEA配置数据库连接

依此点击

然后右边

然后连接

查看

ctrl+A全选，点击运行

执行SQL脚本，生成如下表，脚本下载，后续会讲到这四张表

t_product商品表

t_payment_info支付信息表

t_refund_info退款信息表

t_order_info订单信息表

五、集成MyBatis-Plus

不懂的可以参考01MybatisPlus（SpringCloud入门必学！！！！微服务！！项目实战！！深度理解MP用法！！！）-CSDN博客

5.1、引入依赖

如果你的mysql是8版本，用第一个

mysql是5版本用第二个

         <!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>
        <!--mybaits-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>

<!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        <!--mybatis_plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>

5.2、配置数据库连接

配置之前请参考文章：com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver 的区别！！！！（为什么有时候需要加cj）-CSDN博客

# 应用服务 WEB 访问端口
server:
  port: 8090
spring:
  application:
    name: payment-demo
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/payment_demo?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456

5.3、定义实体类

下载实体类，直接复制即可，我这里先copy了三个（我这里爆红是前面的包名应该改为com.atguigu)

BaseEntity是父类，其他类继承BaseEntity（因为所有的表都有这三个字段）

@TableName("t_order_info")做表名的映射
在mp中，驼峰和下划线默认对应

5.4、定义持久层

定义Mapper接口继承 BaseMapper<>，

定义xml配置文件

5.5、定义MyBatis-Plus的配置文件

在config包中创建配置文件 MybatisPlusConfig

为什么有时候不用加@Mapper注解！！！！-CSDN博客

package com.atguigu.paymentdemo.config;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@Configuration
@MapperScan("com.atguigu.paymentdemo.mapper")
@EnableTransactionManagement //启用事务管理
public class MybatisPlusConfig {

}

5.6、定义接口方法查询所有商品

在 public class ProductController 中添加一个方法

package com.atguigu.paymentdemo.controller;

import com.atguigu.paymentdemo.entity.Product;
import com.atguigu.paymentdemo.service.ProductService;
import com.atguigu.paymentdemo.vo.R;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.Date;
import java.util.List;

@Api(tags = "商品管理")
@RestController
@RequestMapping("/api/product")
public class ProductController {
    @Resource
    private ProductService productService;
    @ApiOperation("测试接口")
    @GetMapping("/test")
    public R test(){

        return R.ok()
                .data("message","hello")
                .data("now",new Date());
    }
    @GetMapping("/list")
    public R list(){
        List<Product> list = productService.list();
        return R.ok().data("productList",list);

    }
    
}

启动程序，测试

做一个简单的补充：

在mapper层没有添加具体的xml的配置：

我们看应用程序编译后的target目录：只有接口的编译文件，没有xml的配置文件

原因是默认情况下maven工具针对我们的java目录的非java文件不会执行编译的操作，所以丢失了这个xml文件，因为目前还没有用到这些xml文件，所以可以正常执行，未来如果用到就会出现找不到配置文件的这个现象（其实这个xml也可以放到resources目录下面）

解决这个问题，两个步骤：

1、在pom.xml配置一个build节点，项目打包时会将java目录中的*.xml文件也打包

<resources>
       <resource>
            <directory>src/main/java</directory>
               <includes>
                    <include>**/*.xml</include>
               </includes>
             <filtering>false</filtering>
        </resource>
</resources>

然后clean ，在编译文件如下：

但是程序在运行的时候还要能够找到这个xml文件，在配置文件添加

对应

# 应用服务 WEB 访问端口
server:
  port: 8090
spring:
  application:
    name: payment-demo
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/payment_demo?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:com/atguigu/paymentdemo/mapper/xml/*.xml

这里加sql日志，运行查询接口的时候可以看到：

六、搭建前端环境

下载地址

6.1、安装Node.js

Node.js是一个基于JavaScript引擎的服务器端环境，前端项目在开发环境下要基于Node.js来运行安装：node-v14.18.0-x64.msi

这是我的安装：

6.2、运行前端项目

将项目放在磁盘的一个目录中（可以将前后端放到一个目录中），cmd进入项目目录，运行下面的命令启动项目：

npm run serve

npm是安装nodejs一起安装的

直接访问浏览器打开，目前前后端还没有连接，所以有报错信息

因为我们前端项目在8080端口上，后端项目在8090端口上，所以这两个项目相当于是一个跨域，因为前后端通信的方式是ajax请求，在跨越的情况下前后端是没有办法直接访问的。

所以必须在后端的接口位置开放跨越【一般好像都是前端代理服务器解决跨越】

刷新前端，展示了四条记录

6.3、安装VSCode(code ./ name)

如果你希望方便的查看和修改前端代码，可以安装一个VSCode安装：VSCodeUserSetup-x64-1.56.2安装插件

打开文件夹：

七、Vue.js入门（了解）

官网：https://cn.vuejs.org/

Vue.js是一个前端框架，帮助我们快速构建前端项目。

使用vue有两种方式：

1、一个是传统的在 html 文件中引入 js 脚本文件的方式

2、另一个是脚手架的方式。

我们的项目，使用的是脚手架的方式。

默认是从中央仓库安装模块

npm install

7.1、安装脚手架

为了快速一点，配置淘宝镜像或者腾讯云

npm config set registry https://mirrors.cloud.tencent.com/npm/

npm config set registry https://registry.npm.taobao.org

#经过下面的配置，所有的 npm install 都会经过淘宝的镜像地址下载 npm config set registry https://registry.npm.taobao.org

全局安装脚手架

npm install -g @vue/cli

但是这个淘宝镜像好像现在有问题

1、查询当前源
npm get registry
2、更换源
npm config set registry https://mirrors.cloud.tencent.com/npm/
3、全局安装脚手架
npm install -g @vue/cli

7.2、创建一个项目

先进入项目目录（Ctrl + ~），然后创建一个项目

vue create vue-demo

我创建的时候有问题：

解决办法：

然后运行成功，创建vue2还是vue3【我这里是vue2，选择后回车】

然后

7.3、运行项目

npm run serve

默认启动端口8080，指定运行端口

npm run serve -- --port 8081

然后查看三部分：

7.4、数据绑定

然后小试牛刀：

<!-- 页面结构部分 -->
<template>
  <div>
    <h1>Vue案例</h1>
    <!-- 插值表达式 -->
    {{ course }}
  </div>
</template>


<!-- 页面脚本部分 -->
<script>
export default {
  data() {
    return {
      course: "微信支付",
    };
  },
};
</script>


<!-- 页面样式部分 -->
<style>
</style>

7.5、安装Vue调试工具

在Chrome的扩展程序中安装：Vue.jsDevtools.zip

解压

F12或者Fn+F12打开，

可以看到App组件

7.6、双向数据绑定

数据会绑定到组件，组件的改变也会影响数据定义

<!-- 页面结构部分 -->
<template>
  <div>
    <h1>Vue案例</h1>
    <!-- 插值表达式 -->
    {{ course }}
    <!-- 指令 -->
    <input type="text" v-model="course" />
  </div>
</template>


<!-- 页面脚本部分 -->
<script>
export default {
  data() {
    return {
      course: "微信支付",
    };
  },
};
</script>


<!-- 页面样式部分 -->
<style>
</style>

在文本框输入内容：

7.7、事件处理

<!-- 页面结构部分 -->
<template>
  <div>
    <h1>Vue案例</h1>
    <!-- 插值表达式 -->
    {{ course }}
    <!-- 指令 -->
    <input type="text" v-model="course" />

    <!-- 事件处理 -->
    <button @click="toPay">去支付</button>
  </div>
</template>


<!-- 页面脚本部分 -->
<script>
export default {
  data() {
    return {
      course: "微信支付",
    };
  },
  methods: {
    toPay() {
      console.log("去支付......");
    },
  },
};
</script>


<!-- 页面样式部分 -->
<style>
</style>