01、SpringBoot + MyBaits-Plus 集成微信支付 --＞项目搭建

SpringBoot + MyBaits-Plus 集成微信支付 之 项目搭建

1、创建boot项目

创建SpringBoot项目，写一个测试方法，运行，成功则项目创建完成。

2、引入Swagger

作用：

自动生成接口文档和测试页面。

2-1、引入依赖

        <!--swagger  作用：自动生成接口文档和相关测试页面。-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <!--swagger ui  作用：展示具体的html页面、接口文档、测试页面-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

2-2、写配置文件进行测试

2-3、访问Swagger页面

2-4、注解优化显示

3、定义统一结果

作用：

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

3-1、引入lombok依赖

简化实体类的开发

3-2、写个统一结果的类–>R

链式操作–可以一直加data数据

R类的代码：

@Data
// 作用：让这个R对象可以进行链式操作，就是R.ok().setData(map) 这种
// 而且原本setData的返回值是void，加了这个注解，返回值就是R对象了
@Accessors(chain = true)
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、swagger的样子

顺便配置json日期格式

4、数据库连接

4-1、命令行创建数据库

win+r ，输入cmd 打开小黑窗

mysql -uroot -p

记得后面加分号

mysql> create database payment_demo;

在 navicat 可以看到已经创建出来的数据库

4-2、Idea 连接数据库

时区问题

直接点这个 set time zone，然后点 apply 应用

4-3、执行sql脚本

从navicat可以看出有这些表了

5、集成MyBatis-Plus

5-1、引入依赖

        <!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--持久层   mybatis-plus 是 mybatis 的增强-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>

5-2、配置文件配置数据库连接

在spring的节点下配置数据库连接

server:
  port: 8090  # 项目的服务端口

spring:
  application:
    name: payment-demo # 项目的名字
  jackson:
    # 日期格式
    date-format: yyyy-MM-dd HH:mm:ss
    # 时区
    time-zone: GMT+8
  datasource: # mysql数据库连接
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/payment_demo?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: 123456

5-3、定义实体类

拷贝导入这些基本代码 ：实体类、service、impl、mapper
这些是学习视频提供的基本代码，太多了就不展示出来了。有用到再截图

5-4、定义 MyBatis-Plus 的配置文件

创建一个 MyBatis-Plus 的配置文件

5-4-1、测试：获取所有商品数据

controller

方法中获取所有商品的list方法，有MyBatis-Plus提供

成功获取所有商品数据

5-4-2、target没有编译xml问题

maven 工具默认情况下，针对java目录下的非java文件不会执行编译的操作，所以就丢失了这个xml文件 ，因为目前还没有用到这些xml文件，所以项目可以正常运行，但是后面如果要写更复杂的持久层数据，需要用到这些xml文件，就会报错

5-4-3 解决方法

解决方法：两个步骤

步骤1：

因为maven工程在默认情况下 src/main/java 目录下的所有资源文件是不发布到 target 目录下的，我们在 pom 文件的 节点下配置一个资源发布过滤器

在 范围内

        <!-- 项目打包时会将java目录中的*.xml文件也进行打包 -->
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml
                
                false
            
        

测试步骤1：

先clean ，删掉 target 目录

然后重新编译，xml 目录就完整出现了

步骤2：

让运行环境能够找到这个target目录下的xml目录，
顺便添加个日志记录，只要执行到这些xml文件，就会打印出日志

测试步骤2：

测试这个sql 日志有没有生效：

访问下获取所有商品的接口

6、搭建前端环境

6-1、安装 Node.js 运行环境

除了更改安装地址，其他的直接下一步

6-2、检查版本号：

有版本号，说明安装这个 node 环境成功了

6-3、运行前端项目

这个项目是项目视频发布者提供的

命令行运行，如图，默认是8080端口

记得用管理员运行小黑窗

如图：基础页面

课程列表没有数据，因为跨域问题没解决，拿不到

6-4、前后端跨域

后端这里加个注解，前端的跨域代码还没看是怎么写的。

后端控制器类添加这个 @CrossOrigin，表示这个类的所有方法都支持跨域访问。
前端可以直接通过请求 http://localhost:8090/api/product/list 来获取数据，不需要再额外添加跨域相关的代码。

6-5、安装 Visual Studio Code 编译器

一直下一步安装就可以

6-5-1、修改背景颜色

6-5-2、修改左侧边框颜色

把代码改成这样，第一次改，拼拼凑凑，不知道对不对，反正左侧边框变白色了。

{
    
    "workbench.preferredDarkColorTheme": "Visual Studio Light",
      

    "workbench.colorCustomizations": {
        "[Default Light+]": {
            "activityBar.activeBackground": "#ffffff",
            "activityBar.background": "#eeeeee",
            "activityBar.foreground": "#000000"
        }
    },
    "workbench.colorTheme": "Default Light+",
    "editor.codeActionsOnSave": null
}

6-5-3、安装插件

安装这三个插件

使用这个编译器看前端的代码了

7、Vue.js 入门

Vue 就是一个渐进式 JavaScript 框架

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

使用vue有两种方式，一个是传统的在 html 文件中引入 js 脚本文件的方式，另一个是脚手架的方式。

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

7-1、安装脚手架

安装完成才可以创建项目。

7-1-1、配置淘宝镜像

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

7-1-2、全局安装脚手架

-g 的意思就是：全局安装脚手架 ，就是会安装在我们的操作系统中

npm install -g @vue/cli

安装完成就可以创建vue项目了。

7-2、创建项目

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

输入命令 ： vue create vue-demo ， 创建一个 vue-demo 的项目

vue 就是我们刚刚安装的脚手架的一个命令

创建vue项目

创建成功

ctrl+L 相当于 linux 的clear，直接腾出空间

7-3、启动项目

进入项目文件夹，启动项目

因为项目默认端口号是 8080 ， 所以这里可以指定其他的端口号

7-4、访问项目

打开项目的默认页面 App.vue

这个 Vue 项目默认是没有 Html 文件的， 开发阶段都是 .vue 格式的，但是项目部署到生产服务器上面的话，这些文件就都会被转换为 html文件和 js 文件

默认的代码如图：

删掉一些默认的页面组件，填充自己的内容，

删除成最原始的这个样子。

7-5、创建项目遇到的问题

vue项目创建不成功的解决方法

7-6、安装 Vue 调试工具

7-6-1谷歌

原本 F12是这样的，没有vue调试窗口

安装

再按 F12 就能出现这个调试功能了。

7-6-2微软

微软浏览器可以直接搜索，安装完，退出浏览器，重新打开就出现了

7-7、一点前端知识

7-7-1、数据绑定

插值表达式 – 用 双大括号来表示

7-7-2、双向数据绑定

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

7-7-3、事件处理

定义事件，调用事件

未完待续~~~