关键词：
文章目录
案例项目的创建
步骤：
- 创建SpringBoot项目（Java、SpringBoot、SpringMVC、RESTful、json）
- 引入Swagger（接口文档和测试页面生成工具）
- 定义统一结果（让前后端数据通信更规范）
- 创建和连接数据库（MySQL、IDEA内置的数据库管理工具）
- 集成MyBatis-Plus（MyBatis）
- 搭建前端环境（了解HTML和CSS、熟悉JavaScript、了解Vue）
- 认识 Vue.js
- SpringBoot+Vue
- Java、MyBatis-Plus、MySQL、HTML
- JavaScript、Vue
1、创建SpringBoot项目
1.1、新建项目
注意：Java版本选择8，选择maven
spring Boot版本2.3.X.RELEASE
1.2、添加依赖
添加SpringBoot web依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
1.3、配置application.yml文件
server:
port: 8090 # 服务端口
spring:
application: # 应用的名字
name: payment
1.4、创建controller
创建controller包，创建ProductController类
package com.ymj.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")
@CrossOrigin //跨域
public class ProductController
@GetMapping("/test")
public String test()
return "hello";
修改Swagger2Config文档标题
package com.ymj.payment.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.ApiSelectorBuilder;
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());
1.5、测试
访问：http://localhost:8090/api/product/test
2、引入Swagger
作用：自动生成接口文档和测试页面。
2.1、引入依赖
<!--swagger-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<!--swagger ui-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
2.2、Swagger配置文件
创建confifig包，创建Swagger2Confifig类
package com.ymj.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());
2.3、Swagger注解
controller中可以添加常用注解
@Api(tags="商品管理") //用在类上
@ApiOperation("测试接口") //用在方法上
2.4、测试
访问：http://localhost:8090/swagger-ui.html
3、定义统一结果
作用：定义统一响应结果，为前端返回标准格式的数据。
3.1、引入lombok依赖
简化实体类的开发
<!--实体对象工具类：低版本idea需要安装lombok插件-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
3.2、创建R类
创建统一结果类
package com.ymj.paymentdemo.vo;
import lombok.NoArgsConstructor;
import lombok.Setter;
import java.util.HashMap;
import java.util.Map;
@Data //生成set、get等方法
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
package com.ymj.payment.controller;
import com.ymj.payment.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、配置json时间格式
server:
port: 8090 # 服务端口
spring:
application: # 应用的名字
name: payment
jackson: # json时间格式
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
3.5、Swagger测试
4、创建数据库
4.1、创建数据库
mysql -uroot -p
mysql> create database payment_demo;
4.2、IDEA配置数据库连接
（1）打开数据库面板
（2）添加数据库
（3）配置数据库连接参数
4.3、执行SQL脚本
payment_demo.sql
CREATE TABLE `t_order_info` (
`id` bigint(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '订单id',
`title` varchar(256) DEFAULT NULL COMMENT '订单标题',
`order_no` varchar(50) DEFAULT NULL COMMENT '商户订单编号',
`user_id` bigint(20) DEFAULT NULL COMMENT '用户id',
`product_id` bigint(20) DEFAULT NULL COMMENT '支付产品id',
`total_fee` int(11) DEFAULT NULL COMMENT '订单金额(分)',
`code_url` varchar(50) DEFAULT NULL COMMENT '订单二维码连接',
`order_status` varchar(10) DEFAULT NULL COMMENT '订单状态',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
/*Table structure for table `t_payment_info` */
CREATE TABLE `t_payment_info` (
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '支付记录id',
`order_no` varchar(50) DEFAULT NULL COMMENT '商户订单编号',
`transaction_id` varchar(50) DEFAULT NULL COMMENT '支付系统交易编号',
`payment_type` varchar(20) DEFAULT NULL COMMENT '支付类型',
`trade_type` varchar(20) DEFAULT NULL COMMENT '交易类型',
`trade_state` varchar(50) DEFAULT NULL COMMENT '交易状态',
`payer_total` int(11) DEFAULT NULL COMMENT '支付金额(分)',
`content` text COMMENT '通知参数',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
/*Table structure for table `t_product` */
CREATE TABLE `t_product` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '商品id',
`title` varchar(20) DEFAULT NULL COMMENT '商品名称',
`price` int(11) DEFAULT NULL COMMENT '价格（分）',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
/*Data for the table `t_product` */
insert into `t_product`(`title`,`price`) values ('Java课程',1);
insert into `t_product`(`title`,`price`) values ('大数据课程',1);
insert into `t_product`(`title`,`price`) values ('前端课程',1);
insert into `t_product`(`title`,`price`) values ('UI课程',1);
/*Table structure for table `t_refund_info` */
CREATE TABLE `t_refund_info` (
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '退款单id',
`order_no` varchar(50) DEFAULT NULL COMMENT '商户订单编号',
`refund_no` varchar(50) DEFAULT NULL COMMENT '商户退款单编号',
`refund_id` varchar(50) DEFAULT NULL COMMENT '支付系统退款单号',
`total_fee` int(11) DEFAULT NULL COMMENT '原订单金额(分)',
`refund` int(11) DEFAULT NULL COMMENT '退款金额(分)',
`reason` varchar(50)搭建一个简单的springboot+vue+mysql|(集成mybatis-pluslombokswagger)(代码片段)
文章目录案例项目的创建1、创建SpringBoot项目1.1、新建项目1.2、添加依赖1.3、配置application.yml文件1.4、创建controller1.5、测试2、引入Swagger2.1、引入依赖2.2、Swagger配置文件2.3、Swagger注解2.4、测试3、定义统一结果3.1、引入lombok依赖3... 查看详情
搭建一个简单的springboot+vue+mysql|(集成mybatis-pluslombokswagger)(代码片段)
文章目录案例项目的创建1、创建SpringBoot项目1.1、新建项目1.2、添加依赖1.3、配置application.yml文件1.4、创建controller1.5、测试2、引入Swagger2.1、引入依赖2.2、Swagger配置文件2.3、Swagger注解2.4、测试3、定义统一结果3.1、引入lombok依赖3... 查看详情
vue.js+iview+springboot搭建一个前后端分离登陆demo(代码片段)
一、前端（vue.js+iview）在上一篇的文章《基于Idea从零搭建一个最简单的vue项目》中，我们简单的讲解了如何用Idea搭建一个最简单的vue.js。所以今天这篇文章中不做过多讲解，只是简单的一笔带过，不明白的可以参考上一篇文章... 查看详情
用springboot简单搭建一个微服务项目
...进行具体介绍之前，我们会对SpringCloud微服务的基础SpringBoot进行介绍。SpringBoot是Spring一套快速配置开发的脚手架，可以基于SpringBoot快速集成开发单个Spring应用。SpringCloud是基于Spr 查看详情
springboot+springcloud+vue管理系统前端搭建（六完善登录流程）
这里我们简单做一个登录界面,界面如图：话不多说直接上代码首先我们修改登录界面login.vue<template> <el-form:model="loginForm":rules="fieldRules"ref="loginForm"label-position="left&# 查看详情
轻松搭建基于springboot+vue的web商城应用
背景介绍 首先介绍下在本文出现的几个比较重要的概念：函数计算（FunctionCompute）:函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹... 查看详情
轻松搭建基于springboot+vue的web商城应用
背景介绍首先介绍下在本文出现的几个比较重要的概念：函数计算（FunctionCompute）:函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸... 查看详情
springboot学习之构建简单项目搭建
...erties文件，构建一个项目还是挺复杂的，在这种情况下，springboot应运而生，他能够快速的构建spring项目，而且让项目正常运行起来的配置文件非常少，甚至只需要几个注解就可以运行整个项目。 总的说来，springboot项目可以... 查看详情
手把手教你基于springboot+vue搭建个人博客网站(代码片段)
...;一个超会写bug的程序猿！利用国庆期间做了一个基于springboot+vue的前后端分离的个人博客网站，今天在这里将开发过程和大家分享一下，手把手教你搭建一个自己专属的个人博客。完整源码放置在Gitee上了，【... 查看详情
vue-cli入门-----搭建一个简单的登录页面
参考技术A新建一个文件夹,使用cmd切换到该目录下,接下来在该目录下新建一个test2的项目命令:vueinitwebpacktest2(这里的test2是项目名称)项目目录结构:重启项目以后,界面如下:上面只是演示了使用vue-cli开发项目的基本流程,更多的是... 查看详情
springboot入门--快速搭建一个springboot框架
原文出处 前言在开始之前先简单介绍一下springboot，springboot作为一个微框架，它本身并不提供Spring框架的核心特性以及扩展功能，只是用于快速、敏捷地开发新一代基于Spring框架的应用程序，总的来说springboot不是为了要替代... 查看详情
如何利用springboot+vue实现一个简单的登录功能？(代码片段)
一、设计数据库DROPTABLEIFEXISTS`user`;CREATETABLE`user`(`id`int(11)NOTNULLAUTO_INCREMENT,`username`varchar(255)CHARACTERSETutf8COLLATEutf8_general_ciNOTNULL,`password` 查看详情
vue.js快速搭建图书管理平台
...期简单讲解了vue的基本语法，这一次我们做一个小项目，搭建一个简单的图书管理平台，能够让我们更深刻的理解这门语言的妙用。 1、DEMO样式 首先我们需要搭建一个简单的demo样式，推荐大家使用bootstrap，可以很快... 查看详情
springboot环境搭建
今天给大家介绍一下springBootMVC，让我们学习一下如何利用SpringBoot快速的搭建一个简单的web应用。 博客地址：http://junxiao.applinzi.com/wordpress/index.php/2017/01/16/springboot1/ 查看详情
springboot快速入门
...装和使用1.1、下载IDESpringToolSuiteEclipse1.2、介绍maven是学习SpringBoot必备之一SpringToolSuite可快速搭建SpringBoot项目1.3、SpringBoot项目结构预览2、RESTfullAPI简单项目的快速搭建2.1、搭建一个简单的RESTfullAPI接口项目2.2、引入spring-boot-starter... 查看详情
微服务从0开始springboot简单搭建一个微服务项目
...服务，一起学习一起进步。👀本期介绍主要介绍Springboot与SpringCloud的关系 查看详情
《springboot+dubbo+zookeeper整合搭建简单的分布式应用》(代码片段)
为什么要使用分布式系统？容错减少延迟/提高性能可用性负载均衡总而言之，其实目的只有一个，”用户体验“。什么是分布式系统？分布式系统是由使用分发中间件连接的自治计算机组成的网络。它们有助于共享不同的资源... 查看详情
springboot+vue前后端分离学习路线
我整理了SpringBoot+vue前后端分离的学习路线。这篇博客是一个规划，之后，会按照这篇的顺序对每一个节点进行详细的知识汇总。其中包括资料，代码实践，以及我对此的理解。1.ssm框架的配置，以及应用，2.SpringBoot的介绍，如... 查看详情