搭建一个简单的SpringBoot+Vue+MySQL | (集成MyBatis-Plus、lombok、Swagger)

创建SpringBoot项目（Java、SpringBoot、SpringMVC、RESTful、json）、引入Swagger（接口文档和测试页面生成工具）、定义统一结果（让前后端数据通信更规范）创建和连接数据库（MySQL、IDEA内置的数据库管理工具）集成MyBatis-Plus（MyBatis）搭建前端环境HTML和CSS、熟悉JavaScript、了解Vue）认识 Vue.js、Spri

明金同学

3381人浏览 · 2023-02-19 10:54:55

明金同学 · 2023-02-19 10:54:55 发布

案例项目的创建

步骤：

创建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) DEFAULT NULL COMMENT '退款原因',
  `refund_status` varchar(10) DEFAULT NULL COMMENT '退款状态',
  `content_return` text COMMENT '申请退款返回参数',
  `content_notify` 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;

5、集成MyBatis-Plus

5.1、引入依赖

<!--mysql驱动 默认8，5.7以上包名加cj-->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>
<!--持久层 Mybatis-Flus：是mybatis的增强-->
<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.3.1</version>
</dependency>

5.2、配置数据库连接

spring:
  datasource: # mysql数据库连接
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/payment?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: 123456

server:
  port: 8090 # 服务端口

spring:
  application: # 应用的名字
    name: payment

  jackson: # json时间格式
    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?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: 123456

5.3、定义实体类(entity)

BaseEntity是父类，其他类继承BaseEntity

BaseEntity.java

package com.ymj.payment.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.util.Date;

@Data
public class BaseEntity {

    //定义主键策略：跟随数据库的主键自增
    @TableId(value = "id", type = IdType.AUTO)
    private String id; //主键

    private Date createTime;//创建时间

    private Date updateTime;//更新时间
}

OrderInfo.java

package com.ymj.payment.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("t_order_info")
public class OrderInfo  extends BaseEntity{

    private String title;//订单标题

    private String orderNo;//商户订单编号

    private Long userId;//用户id

    private Long productId;//支付产品id

    private Integer totalFee;//订单金额(分)

    private String codeUrl;//订单二维码连接

    private String orderStatus;//订单状态
}

PaymentInfo.java

package com.ymj.payment.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("t_payment_info")
public class PaymentInfo extends BaseEntity{

    private String orderNo;//商品订单编号

    private String transactionId;//支付系统交易编号

    private String paymentType;//支付类型

    private String tradeType;//交易类型

    private String tradeState;//交易状态

    private Integer payerTotal;//支付金额(分)

    private String content;//通知参数
}

Product.java

package com.ymj.payment.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("t_product")
public class Product extends BaseEntity{

    private String title; //商品名称

    private Integer price; //价格（分）
}

RefundInfo.java

package com.ymj.payment.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("t_refund_info")
public class RefundInfo extends BaseEntity{

    private String orderNo;//商品订单编号

    private String refundNo;//退款单编号

    private String refundId;//支付系统退款单号

    private Integer totalFee;//原订单金额(分)

    private Integer refund;//退款金额(分)

    private String reason;//退款原因

    private String refundStatus;//退款单状态

    private String contentReturn;//申请退款返回参数

    private String contentNotify;//退款结果通知参数
}

5.4、定义持久层(mapper)

定义Mapper接口继承 BaseMapper<>，
定义xml配置文件

使用了mybatisplus继承BaseMapper

OrderInfoMapper.java

package com.ymj.payment.mapper;

import com.ymj.payment.entity.OrderInfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface OrderInfoMapper extends BaseMapper<OrderInfo> {
}

PaymentInfoMapper.java

package com.ymj.payment.mapper;

import com.ymj.payment.entity.PaymentInfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface PaymentInfoMapper extends BaseMapper<PaymentInfo> {
}

ProductMapper.java

package com.ymj.payment.mapper;

import com.ymj.payment.entity.Product;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface ProductMapper extends BaseMapper<Product> {

}

RefundInfoMapper.java

package com.ymj.payment.mapper;

import com.ymj.payment.entity.RefundInfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface RefundInfoMapper extends BaseMapper<RefundInfo> {

}

xml

OrderInfoMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ymj.payment.com.ymj.payment.mapper.OrderInfoMapper">

</mapper>

PaymentInfoMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ymj.payment.com.ymj.payment.mapper.PaymentInfoMapper">

</mapper>

ProductMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ymj.payment.com.ymj.payment.mapper.ProductMapper">

</mapper>

RefundInfoMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ymj.payment.com.ymj.payment.mapper.RefundInfoMapper">

</mapper>

5.5、定义业务层(service)

定义业务层接口继承 IService<>
定义业务层接口的实现类，并继承 ServiceImpl<,>

RefundInfoService.java

package com.ymj.payment.service;

import com.ymj.payment.entity.RefundInfo;
import com.baomidou.mybatisplus.extension.service.IService;

public interface RefundInfoService extends IService<RefundInfo> {

}

OrderInfoService.java

package com.ymj.payment.service;

import com.ymj.payment.entity.OrderInfo;
import com.baomidou.mybatisplus.extension.service.IService;

public interface OrderInfoService extends IService<OrderInfo> {

}

PaymentInfoService.java

package com.ymj.payment.service;

public interface PaymentInfoService {

}

ProductService.java

package com.ymj.payment.service;

import com.ymj.payment.entity.Product;
import com.baomidou.mybatisplus.extension.service.IService;

public interface ProductService extends IService<Product> {

}

impl

OrderInfoServiceImpl.java

package com.ymj.payment.service.impl;

import com.ymj.payment.entity.OrderInfo;
import com.ymj.payment.mapper.OrderInfoMapper;
import com.ymj.payment.service.OrderInfoService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class OrderInfoServiceImpl extends ServiceImpl<OrderInfoMapper, OrderInfo> implements OrderInfoService {

}

PaymentInfoServiceImpl.java

package com.ymj.payment.service.impl;

import com.ymj.payment.entity.PaymentInfo;
import com.ymj.payment.mapper.PaymentInfoMapper;
import com.ymj.payment.service.PaymentInfoService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class PaymentInfoServiceImpl extends ServiceImpl<PaymentInfoMapper, PaymentInfo> implements PaymentInfoService {

}

ProductServiceImpl.java

package com.ymj.payment.service.impl;

import com.ymj.payment.entity.Product;
import com.ymj.payment.mapper.ProductMapper;
import com.ymj.payment.service.ProductService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class ProductServiceImpl extends ServiceImpl<ProductMapper, Product> implements ProductService {

}

RefundInfoServiceImpl.java

package com.ymj.payment.service.impl;

import com.ymj.payment.entity.RefundInfo;
import com.ymj.payment.mapper.RefundInfoMapper;
import com.ymj.payment.service.RefundInfoService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class RefundInfoServiceImpl extends ServiceImpl<RefundInfoMapper, RefundInfo> implements RefundInfoService {

}

5.6、定义yml配置文件

为了方便调试，在配置中加上SQL日志(添加持久层日志和xml文件位置的配置)

mybatis-plus:
	configuration: # sql日志
		log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
	mapper-locations: classpath:com/ymj/payment/mapper/xml/*.xml

完整的配置：

server:
  port: 8090 # 服务端口

spring:
  application: # 应用的名字
    name: payment

  jackson: # json时间格式
    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?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: 123456

mybatis-plus:
  configuration: # sql日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:com/ymj/payment/mapper/xml/*.xml

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

在confifig包中创建配置文件 MybatisPlusConfifig

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.ymj.payment.mapper") //持久层扫描
@EnableTransactionManagement //启用事务管理
public class MybatisPlusConfig {
    
}

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

ProductController中添加一个查询商品列表的接口进行测试

package com.ymj.payment.controller;

import com.ymj.payment.entity.Product;
import com.ymj.payment.service.ProductService;
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 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());
    }
    @ApiOperation("商品列表")
    @GetMapping("/list")
    public R list(){

        List<Product> list = productService.list();
        return R.ok().data("productList",list);
    }

}

在 public class ProductController 中添加一个方法

@Resource
    private ProductService productService;
@ApiOperation("商品列表")
    @GetMapping("/list")
    public R list(){
    List<Product> list = productService.list();
    return R.ok().data("productList", list);
}

**5.9、Swagger中测试 **

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

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

6、搭建前端环境

6.1、安装Node.js

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

6.2、运行前端项目

将项目放在磁盘的一个目录中，例如 D:\demo\payment-demo-front
进入项目目录，运行下面的命令启动项目

npm run serve

6.3、安装VSCode

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

7、Vue.js入门

官网：https://cn.vuejs.org/
Vue.js是一个前端框架，帮助我们快速构建前端项目。
使用vue有两种方式，一个是传统的在 html 文件中引入 js 脚本文件的方式，另一个是脚手架的方式。
我们的项目，使用的是脚手架的方式。

7.1、安装脚手架

配置淘宝镜像

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

全局安装脚手架

npm install -g @vue/cli

7.2、创建一个项目

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

7.3、运行项目

npm run serve

指定运行端口

npm run serve – --port 8888

7.4、数据绑定

修改 src/App.vue

<!--定义页面结构-->
<template>
  <div>
    <h1>Vue案例</h1>
    <!-- 插值 -->
    <p>{{course}}</p>
  </div>
</template>
<!--定义页面脚本-->
<script>
  export default {
    // 定义数据
    data () {
      return {
        course: '微信支付'
      }
    }
  }
</script>

7.5、安装Vue调试工具

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

（2）扩展程序的使用

7.6、双向数据绑定

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

<p>
  <!-- 指令 -->
  <input type="text" v-model="course">
</p>

7.7、事件处理

（1）定义事件

// 定义方法
methods: {
  toPay(){
  console.log('去支付')
  }
}

（2）调用事件

<p>
	<!-- 事件 -->
	<button @click="toPay()">去支付</button>
</p>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^