谷粒学院16万字笔记+1600张配图(十七)——课程支付

短命女 2023-10-02 21:26 14阅读 0赞

> 项目源码与所需资料  
> 链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59  
> 提取码：8z59

#### 文章目录 ####

*  demo17-课程支付
 *   *  1.分析
     *   *  1.1两种情况
         *  1.2免费
         *  1.3收费
     *  2.新建订单微服务
     *   *  2.1创建子子模块service\_order
         *  2.2创建数据表
         *  2.3生成代码
         *  2.4配置application.properties
         *  2.5创建启动类
         *  2.6配置nginx
     *  3.后端就需要编写什么接口
     *  4.生成订单的接口
     *   *  4.1分析
         *  4.2控制层(service\_order)
         *  4.3业务层接口(service\_order)
         *  4.4创建实体类供service\_ucenter和service\_order共用
         *  4.5创建实体类供service\_edu和service\_order共用
         *  4.6控制层(service\_ucenter)
         *  4.7控制层(service\_edu)
         *  4.8检查工作
         *  4.9实现远程调用
         *  4.10创建工具类来生成订单号
         *  4.11业务层实现类(service\_order)
         *  4.12自动填充(service\_order)
     *  5.根据订单号查询订单信息的接口
     *  6.订单页面
     *   *  6.1页面样式修改
         *  6.2在api中定义方法
         *  6.3调用api中的方法来生成订单
         *  6.4创建订单页面
         *  6.5调用api中的方法来获取订单信息
         *  6.6测试
     *  7.生成二维码支付的接口
     *   *  7.1前言
         *  7.2老师提供的
         *  7.3控制层
         *  7.4业务层接口
         *  7.5添加依赖
         *  7.6创建工具类
         *  7.6业务层实现类
     *  8.查询订单支付状态的接口
     *   *  8.1控制层
         *  8.2业务层接口
         *  8.3业务层实现类
         *  8.4自动填充
     *  9.支付页面
     *   *  9.1在api中定义方法
         *  9.2订单页跳转至支付页
         *  9.3调用api中的方法来生成支付二维码
         *  9.4测试
         *  9.5定时器
         *  9.6测试
     *  10.课程详情页显示效果完善
     *   *  10.1分析
         *  10.2判断课程是否支付的接口
         *  10.3修改查询课程详情的接口
         *   *  10.3.1分析
             *  10.3.2创建接口
             *  10.3.3进行远程调用
             *  10.3.4关闭熔断器
         *  10.4修改js代码
         *  10.5课程详情页渲染
         *  10.6测试

## demo17-课程支付 ##

### 1.分析 ###

#### 1.1两种情况 ####

> 先说一下,课程支付模块最后是真实支付(钱应该是支付给了尚硅谷)所以建议去数据库将所有课程的价格都改为0.01

课程有两种状态:

*  免费
 *  收费

#### 1.2免费 ####

如果课程免费,那么在课程详情页可以直接点击"立即观看"来看课程

#### 1.3收费 ####

1.如果课程收费,那么在课程详情页点击课程大纲中的小节视频时就会提示需要先支付才能观看,用户需要点击课程详情页的"立即购买"

2.用户点击"立即购买"后我们要生成一个订单并跳转到**订单页面**。生成的订单中没有课程数量这个字段,因为课程不同于商品,用户买一个就够了,没必要买多个

3.用户在订单页点击"去支付"后我们需要生成二维码并展现在**支付页面**中供用户支付

4.用户成功支付后会跳转到**课程详情页**,此时页面中不再显示"立即购买"而是显示"立即观看",同时课程大纲中的小节视频也可以点击观看了

### 2.新建订单微服务 ###

#### 2.1创建子子模块service\_order ####

1.在service模块上右键选择New–>Module…

![在这里插入图片描述][69b1b3b00f734519b97e00492210437e.png_pic_center]

2.创建一个Maven项目

![在这里插入图片描述][254fbd8fd5264f27aee23ef0e0ad3ada.png_pic_center]

3.填写信息后点击"Finish"

![在这里插入图片描述][aa2f5a3b8ac745be9adfd8306564d0f5.png_pic_center]

#### 2.2创建数据表 ####

1.需要两张数据表:t\_order(订单表)和t\_pay\_log(支付日志记录表)

*  按照"1.3收费"说的那样,在课程详情页点击"立即购买"后就会在订单表插入这个订单的数据(字段:订单号、订单金额、订单状态…)
 *  按照"1.3收费"说的那样,在支付页面扫码支付后,就会在支付日志记录表插入一条数据(字段:订单号、支付金额、交易状态)
    
     *  交易状态字段的作用:当用户用微信扫码后,我们会调用微信官方的后台实现,但我们调微信后台实现支付可能反应比较慢,可能用户手机已经显示支付成功了而微信后台此时还没有支付成功,但我们必须要等支付成功后才可以做其它事情。所以就需要交易状态字段,来表示此时已成功支付还是正在支付(做完课程支付模块后发现这个字段用不上,无实际意义【仅个人认为】)

2…创建这两张表的脚本在资料的guli\_order.sql文件中

![在这里插入图片描述][856c4a265ecc4f5dae836a5419bd0f24.png_pic_center]

![在这里插入图片描述][7a505e09a7df484088cb29b6a3b8c266.png_pic_center]

3.将创建这两张表的脚本复制到数据库中执行

CREATE TABLE `t_order` (
      `id` CHAR(19) NOT NULL DEFAULT '',
      `order_no` VARCHAR(20) NOT NULL DEFAULT '' COMMENT '订单号',
      `course_id` VARCHAR(19) NOT NULL DEFAULT '' COMMENT '课程id',
      `course_title` VARCHAR(100) DEFAULT NULL COMMENT '课程名称',
      `course_cover` VARCHAR(255) DEFAULT NULL COMMENT '课程封面',
      `teacher_name` VARCHAR(20) DEFAULT NULL COMMENT '讲师名称',
      `member_id` VARCHAR(19) NOT NULL DEFAULT '' COMMENT '会员id',
      `nickname` VARCHAR(50) DEFAULT NULL COMMENT '会员昵称',
      `mobile` VARCHAR(11) DEFAULT NULL COMMENT '会员手机',
      `total_fee` DECIMAL(10,2) DEFAULT '0.01' COMMENT '订单金额（分）',
      `pay_type` TINYINT(3) DEFAULT NULL COMMENT '支付类型（1：微信 2：支付宝）',
      `status` TINYINT(3) DEFAULT NULL COMMENT '订单状态（0：未支付 1：已支付）',
      `is_deleted` TINYINT(1) UNSIGNED NOT NULL DEFAULT '0' COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',
      `gmt_create` DATETIME NOT NULL COMMENT '创建时间',
      `gmt_modified` DATETIME NOT NULL COMMENT '更新时间',
      PRIMARY KEY (`id`),
      UNIQUE KEY `ux_order_no` (`order_no`),
      KEY `idx_course_id` (`course_id`),
      KEY `idx_member_id` (`member_id`)
    ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COMMENT='订单';
    CREATE TABLE `t_pay_log` (
      `id` CHAR(19) NOT NULL DEFAULT '',
      `order_no` VARCHAR(20) NOT NULL DEFAULT '' COMMENT '订单号',
      `pay_time` DATETIME DEFAULT NULL COMMENT '支付完成时间',
      `total_fee` DECIMAL(10,2) DEFAULT '0.01' COMMENT '支付金额（分）',
      `transaction_id` VARCHAR(30) DEFAULT NULL COMMENT '交易流水号',
      `trade_state` CHAR(20) DEFAULT NULL COMMENT '交易状态',
      `pay_type` TINYINT(3) NOT NULL DEFAULT '0' COMMENT '支付类型（1：微信 2：支付宝）',
      `attr` TEXT COMMENT '其他属性',
      `is_deleted` TINYINT(1) UNSIGNED NOT NULL DEFAULT '0' COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',
      `gmt_create` DATETIME NOT NULL COMMENT '创建时间',
      `gmt_modified` DATETIME NOT NULL COMMENT '更新时间',
      PRIMARY KEY (`id`),
      UNIQUE KEY `uk_order_no` (`order_no`)
    ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COMMENT='支付日志表';

![在这里插入图片描述][5aa1317b0d9047bbb14a3aed3d5acbd8.png_pic_center]

#### 2.3生成代码 ####

1.在service\_order模块的test包的java包下创建包demo

![在这里插入图片描述][0dd083adb9ab472f9aa5db77115490ba.png_pic_center]

2.将service\_edu模块的代码生成器CodeGenerator复制到上一步创建的demo包下

![在这里插入图片描述][b9ffd035152f4848a086e31145ba0a37.png_pic_center]

3.修改service\_order模块的代码生成器中的部分代码

![在这里插入图片描述][595bc1fe12bb4c2a92a975b4a542ee8a.png_pic_center]

截图中第67行的`pc.getModuleName()`改为`"t"`的作用:本来生成的实体类、控制器、业务层接口、业务层实现类名字的第一个字母都是T,我们在这里做了修改之后这些名字的第一个字母就不再是T了

4.在run方法上右键选择"Run ‘run()’"就可以生成代码了

![在这里插入图片描述][53b1081f84d74e1990218434b548dfe8.png_pic_center]

5.给生成的两个控制器OrderController和PayLogController都添加注解@CrossOrigin以实现跨域,并且给控制器PayLogController的请求路径中的`pay-log`改为`paylog`

![在这里插入图片描述][fed5337ffbfd4d5ba14d6b5adab79dbd.png_pic_center]

![在这里插入图片描述][44ece9027046402f95cc0f05c7933e93.png_pic_center]

#### 2.4配置application.properties ####

创建配置文件application.properties并编写配置

# 服务端口
    server.port=8007
    # 服务名
    spring.application.name=service-order
    
    # mysql数据库连接
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.url=jdbc:mysql://localhost:3306/guli?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    spring.datasource.username=root
    spring.datasource.password=root
    
    #返回json的全局时间格式
    spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
    spring.jackson.time-zone=GMT+8
    
    #配置mapper xml文件的路径
    mybatis-plus.mapper-locations=classpath:com/atguigu/eduorder/mapper/xml/*.xml
    
    #mybatis日志
    mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
    
    # nacos服务地址
    spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
    
    #开启熔断机制
    #feign.hystrix.enabled=true
    # 设置hystrix超时时间，默认1000ms
    #hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

![在这里插入图片描述][9c6b52c18081440d9395cff8ef74ceeb.png_pic_center]

#### 2.5创建启动类 ####

在eduorder包下创建启动类OrdersApplication

@SpringBootApplication
    @EnableDiscoveryClient
    @ComponentScan({
        "com.atguigu"}) //指定扫描位置
    @MapperScan("com.atguigu.eduorder.mapper")
    public class OrdersApplication {
        
        public static void main(String[] args) {
        
            SpringApplication.run(OrdersApplication.class, args);
        }
    }

![在这里插入图片描述][6d6e3657f28848ed95aead1ed8c58942.png_pic_center]

#### 2.6配置nginx ####

在nginx中配置8007端口并重启nginx

location ~ /eduorder/ {
    	proxy_pass http://localhost:8007;
    }

![在这里插入图片描述][3ae1b7902a014e1dbf2715d2910ad4f3.png_pic_center]

### 3.后端就需要编写什么接口 ###

*  用户在课程详情页点击"立即购买"后我们需要向订单表插入一条新数据,所以我们要编写一个接口来生成订单
 *  在订单页面要显示订单的信息,所以我们要编写一个接口来根据订单id查询订单信息
 *  用户在订单页面点击"去支付"后要生成一个订单二维码,所以我们要编写一个接口来生成微信支付二维码
 *  我们在"2.2创建数据表"的第1步说过,可能用户手机已经显示支付成功而微信后台此时还没有支付成功,所以我们要编写一个接口来查询订单支付状态

### 4.生成订单的接口 ###

#### 4.1分析 ####

向订单表插入数据时有三类字段我们特别拿出来说一下:

*  订单表中的order\_no字段(订单号)我们后面会通过一个规则来生成(在后面的"4.10创建工具类来生成订单号")
 *  订单表中有5个字段是课程信息:课程id、课程名称、课程封面、课程所属讲师名称、订单金额(我们在"1.3收费"的第2步说过,课程不同于商品,课程只能购买一个,所以订单表中的订单金额字段实际上就是课程表中的课程价格字段)
    
     *  其中课程id是从路由中获取的,其它4个字段的数据只有查询课程表才可以获得,所以我们想要获取这些信息需要:在service\_edu模块编写一个"根据课程id查询课程信息"的接口,然后在service\_order模块通过远程调用方式调用这个接口,进而就可以得到课程信息了
 *  订单表中有3个字段都是用户信息:用户id、用户昵称、用户手机号
    
     *  其中用户id是从cookie中获取的,其它2个字段只有查询用户表才可以获得(用户昵称其实也可以从cookie中获取,但我们项目中选择根据用户id从用户表查询用户昵称),所以我们想要获取这些信息需要:在service\_ucenter模块编写一个"根据用户id查询用户信息"的接口,然后在service\_order模块通过远程调用方式调用这个接口,进而就可以得到用户信息了

#### 4.2控制层(service\_order) ####

在service\_order模块的控制器OrderController中编写代码

@Autowired
    private OrderService orderService;
    
    //1.生成订单
    @PostMapping("createOder/{courseId}")
    public R saveOrder(
        @PathVariable String courseId,
        HttpServletRequest request) {
        
    
        //创建订单,返回订单号
        String orderNo = orderService.createOrders(
            courseId,
            JwtUtils.getMemberIdByJwtToken(request));
        return R.ok().data("orderId", orderNo);
    }

![在这里插入图片描述][45404a6c03ed47169386482532679da8.png_pic_center]

*  截图中第37行:在"demo14-注册、登录"的"7.15创建前端拦截器(登录功能)"的第1步的截图第15行我们把含有用户id、昵称的token字符串放到了请求头中,所以给工具类的getMemberIdByJwtToken方法传request对象就可以得到用户id
 *  截图中第38行的`return R.ok().data("orderNo", orderNo)`:因为后面要根据订单号支付,所以需要给前端返回订单号

#### 4.3业务层接口(service\_order) ####

在业务层接口OrderService中定义抽象方法

//1.生成订单
    String createOrders(String courseId, String memberIdByJwtToken);

![在这里插入图片描述][1287e5bc96e64649b93335b8fc9adb60.png_pic_center]

#### 4.4创建实体类供service\_ucenter和service\_order共用 ####

1.我们以前控制层都是给前端返回数据,为了返回的数据格式统一,我们在控制层返回的都是R对象,但我们目前编写的这个方法只是用来做远程调用获取用户信息,所以我们可以直接返回一个实体类对象这样的话我们我们后面取值直接从实体类中取就行了,方便取值(当然,返回R对象也是可以的,但是后面取值不方便)

2.那应该让控制层返回什么类型的实体类对象呢:

*  有人可能会说了,service\_ucenter模块不是有实体类UcenterMember来封装用户数据嘛,那我就可以让service\_ucenter的控制层返回这个实体类对象呀。这样做是不行的,因为我们没有在service\_ucenter模块引入service\_order的依赖,这两个模块是两个互不相干的微服务,也就是说在service\_ucenter模块根本就没有实体类UcenterMember
 *  有人可能又说了,那我把service\_ucenter的实体类UcenterMember复制粘贴到service\_order,这样的话在service\_order就有了实体类UcenterMember。这样做也是不行的,因为**虽然说这两个模块的实体类UcenterMember是一模一样的,但并不是同一个实体类**,这样的话在service\_order模块的业务层实现类OrderServiceImpl中就无法将service\_ucenter模块查询到的用户信息UcenterMember赋值给service\_order模块的实体类UcenterMember(在"4.11业务层实现类(service\_order)"的截图的第34行`UcenterMemberOrder userInfoOrder = ucenterClient.getUserInfoOrder(memberId)`)
 *  正确的解决方法是:我们知道,service模块引入了service\_base依赖,service\_base模块又引入了common\_utils依赖,所以service模块及service模块的所有子模块都有common\_utils依赖,那么我们在common\_utils模块创建的实体类就可以被service\_ucenter和service\_order共用。所以正确的做法是在common\_utils模块创建实体类

3.在common\_utils模块的commonutils包下创建包ordervo

![在这里插入图片描述][27d29bce314f41d5aaaae4bc725ae9fb.png_pic_center]

4.将service\_ucenter模块的实体类UcenterMember复制粘贴到上一步创建的ordervo包下(复制粘贴的过程只需要将实体类名字改为UcenterMemberOrder,其余的什么都不需要修改,名字其实不改也行)

![在这里插入图片描述][0e55064aa7ba4b6a838b2d6abf39721f.png_pic_center]

#### 4.5创建实体类供service\_edu和service\_order共用 ####

同理,我们将service\_edu模块的实体类CourseWebVo复制粘贴到common\_utils模块的ordervo包下(复制粘贴的过程只需要将实体类名字改为CourseWebVoOrder,其余的什么都不需要修改,名字其实不改也行)

![在这里插入图片描述][4b7ce14bf1224f42a65bf275f32daaf9.png_pic_center]

#### 4.6控制层(service\_ucenter) ####

在service\_ucenter模块的控制器UcenterMemberController中编写方法来根据用户id获取用户信息(该方法供远程调用使用)

//根据用户id获取用户信息(该方法供远程调用使用)
    @PostMapping("getUserInfoOrder/{id}")
    public UcenterMemberOrder getUserInfoOrder(@PathVariable String id) {
        
        UcenterMember member = memberService.getById(id);
        //把member对象里面的值复制给UcenterMemberOrder对象
        UcenterMemberOrder ucenterMemberOrder = new UcenterMemberOrder();
        BeanUtils.copyProperties(member, ucenterMemberOrder);
    
        return ucenterMemberOrder;
    }

![在这里插入图片描述][35592ee178fe4e7aab35fc1b4be812f4.png_pic_center]

#### 4.7控制层(service\_edu) ####

在service\_edu模块的控制器CourseFrontController中编写方法来根据课程id获取课程信息(该方法供远程调用使用)

//根据课程id获取课程信息(该方法供远程调用使用)
    @PostMapping("getCourseInfoOrder/{id}")
    public CourseWebVoOrder getCourseInfoOrder(@PathVariable String id) {
        
        CourseWebVo courseInfo = courseService.getBaseCourseInfo(id);
        //把courseInfo对象里面的值复制给courseWebVoOrder对象
        CourseWebVoOrder courseWebVoOrder = new CourseWebVoOrder();
        BeanUtils.copyProperties(courseInfo, courseWebVoOrder);
    
        return courseWebVoOrder;
    }

![在这里插入图片描述][9ab47a059936490390b522f49f89d7a8.png_pic_center]

#### 4.8检查工作 ####

*  检查service\_edu、service\_ucenter、service\_order这三个服务是否都已经在注册中心注册
    
     *  启动类上需要有注解`@EnableDiscoveryClient`
     *  配置文件需要配置`spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848`
 *  因为需要在service\_order模块远程调用其它服务的接口,所以需要在service\_order模块的启动类上添加注解`@EnableFeignClients`

![在这里插入图片描述][64778bf85a584962b072c18c903e6a86.png_pic_center]

#### 4.9实现远程调用 ####

在service\_order模块创建接口,指定调用的服务名称和接口地址,实现远程调用:

1.在service\_order模块的eduorder包下创建包client,然后在client包下创建接口EduClient

@Component
    @FeignClient("service-edu")
    public interface EduClient {
        
        //根据课程id获取课程信息(该方法供远程调用使用)
        @PostMapping("/eduservice/coursefront/getCourseInfoOrder/{id}")
        public CourseWebVoOrder getCourseInfoOrder(@PathVariable("id") String id);
    }

![在这里插入图片描述][9561f95557314806b09c94129de50f8c.png_pic_center]

2.在client包下创建接口UcenterClient

@Component
    @FeignClient("service-ucenter")
    public interface UcenterClient {
        
        //根据用户id获取用户信息(该方法供远程调用使用)
        @PostMapping("/educenter/member/getUserInfoOrder/{id}")
        public UcenterMemberOrder getUserInfoOrder(@PathVariable("id") String id);
    }

![在这里插入图片描述][6466a3f3d0eb4b81be0059612cb0326c.png_pic_center]

#### 4.10创建工具类来生成订单号 ####

1.订单号我们自己设计规则来生成,生成订单号的工具类OrderNoUtil资料中已经提供了

![在这里插入图片描述][f31970244d964028aac78952845f13f4.png_pic_center]

2.我们在service\_order模块的eduorder包下创建包utils,然后将资料中的工具类OrderNoUtil复制粘贴到utils包下

![在这里插入图片描述][9e43a2de4d4044aabb758234138fb891.png_pic_center]

#### 4.11业务层实现类(service\_order) ####

在service\_order模块的业务层实现类OrderServiceImpl中实现在"4.3业务层接口(service\_order)"定义的抽象方法:

@Autowired
    private EduClient eduClient;
    @Autowired
    private UcenterClient ucenterClient;
    
    //1.生成订单
    @Override
    public String createOrders(String courseId, String memberId) {
        
        //通过远程调用根据用户id获取用户信息
        UcenterMemberOrder userInfoOrder = ucenterClient.getUserInfoOrder(memberId);
        //通过远程调用根据课程id获取课程信息
        CourseWebVoOrder courseInfoOrder = eduClient.getCourseInfoOrder(courseId);
        //创建订单对象
        Order order = new Order();
        order.setOrderNo(OrderNoUtil.getOrderNo()); //订单号
        order.setCourseId(courseId); //课程id
        order.setCourseTitle(courseInfoOrder.getTitle()); //课程名称
        order.setCourseCover(courseInfoOrder.getCover()); //课程封面
        order.setTeacherName(courseInfoOrder.getTeacherName()); //课程所属讲师
        order.setTotalFee(courseInfoOrder.getPrice()); //订单金额(也就是课程价格)
        order.setMemberId(memberId); //用户id
        order.setMobile(userInfoOrder.getMobile());//用户手机号
        order.setNickname(userInfoOrder.getNickname()); //用户昵称
        order.setStatus(0); //支付状态(0:未支付 1:已支付)
        order.setPayType(1); //支付类型(1:微信 2:支付宝)
    
        baseMapper.insert(order);
        //返回订单号
        return order.getOrderNo();
    }

![在这里插入图片描述][d6cdfaf88bf2495894be942f40878d49.png_pic_center]

#### 4.12自动填充(service\_order) ####

给service\_order模块的实体类Order的gmtCreate属性和gmtModified属性都添加注解@TableField以实现自动填充

![在这里插入图片描述][ae1a100b86fa491a882308d844307582.png_pic_center]

### 5.根据订单号查询订单信息的接口 ###

在service\_order模块的控制器OrderController中编写方法来根据订单号查询订单信息

//2.根据订单号查询订单信息
    @GetMapping("getOrderInfo/{orderId}")
    public R getOrderInfo(@PathVariable String orderId) {
        
        QueryWrapper<Order> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no", orderId);
        Order order = orderService.getOne(wrapper);
        return R.ok().data("item", order);
    }

![在这里插入图片描述][5b62f6736ecf478ea703a9f025f2f31a.png_pic_center]

截图中第48行的`orderService.getOne(wrapper)`:因为**数据库中订单号是唯一的**,所以使用orderService的getOne方法来查询得到这个唯一的订单数据

### 6.订单页面 ###

#### 6.1页面样式修改 ####

1.新的assets在资料中已经提供

![在这里插入图片描述][eea71ce5b56a405abb7d93370b4213d1.png_pic_center]

2.我们使用新的assets文件覆盖掉vs1010–>vue-front-1010中旧的assets文件

![在这里插入图片描述][5764cd80f7dd4b7ca3393f9350dbbdd9.png_pic_center]

3.在layouts目录下的default.vue页面添加css样式

import '~/assets/css/base.css'
    import '~/assets/css/activity_tab.css'
    import '~/assets/css/bottom_rec.css'
    import '~/assets/css/nice_select.css'
    import '~/assets/css/order.css'
    import '~/assets/css/swiper-3.3.1.min.css'
    import "~/assets/css/pages-weixinpay.css"

![在这里插入图片描述][9bc7da1f4b0f4857a068f8fb5fcb1fe0.png_pic_center]

#### 6.2在api中定义方法 ####

在api目录下创建orders.js文件

import request from '@/utils/request'
    export default {
        
      //生成订单
      createOrders(courseId) {
        
        return request({
        
          url: `/eduorder/order/createOder/${
          courseId}`,
          method: 'post'
        })
      },
      //根据订单号查询订单信息
      getOrdersInfo(id) {
        
        return request({
        
          url: `/eduorder/order/getOrderInfo/${
          id}`,
          method: 'get'
        })
      }
    }

![在这里插入图片描述][eb54b634a74a4667a602de80bb22e930.png_pic_center]

#### 6.3调用api中的方法来生成订单 ####

1.暂且将course目录下的\_id.vue页面的下图两处的"立即观看"改为"立即购买"

![在这里插入图片描述][57af81af03054460b6a9733fbd810933.png_pic_center]

2.给课程详情页的a标签绑定事件

@click="createOrders()"

![在这里插入图片描述][33029ce9da7544dea1d580d51f502e9f.png_pic_center]

3.在课程详情页引入orders.js文件

import ordersApi from '@/api/orders'

![在这里插入图片描述][3af1296e554f41e39602a31726ca00c4.png_pic_center]

4.因为调用api中的createOrders方法创建订单时需要传参课程id,所以需要在asyncData方法中定义数据模型courseId并赋值

courseId: params.id

![在这里插入图片描述][bc784314a4cd4ec09a0c8dc531d664f1.png_pic_center]

5.在课程详情页的`export default {...}`中编写代码调用api中的方法

methods: {
        
      //生成订单
      createOrders() {
        
        ordersApi.createOrders(this.courseId)
          .then(response => {
        
            //生成订单后跳转到订单页面
            this.$router.push({
        path:'/orders/'+response.data.data.orderId})
          })
      }
    }

![在这里插入图片描述][91d26418a71f48f1a81e6fde0f671dff.png_pic_center]

#### 6.4创建订单页面 ####

1.在pages目录下创建文件夹orders,然后在orders文件夹下创建订单页面\_oid.vue

![在这里插入图片描述][5b77a3781f3143bea9294acc8ab1f9f0.png_pic_center]

2.将下述代码复制粘贴到在订单页面

<template>
      <div class="Page Confirm">
        <div class="Title">
          <h1 class="fl f18">订单确认</h1>
          <img src="~/assets/img/cart_setp2.png" class="fr">
          <div class="clear"></div>
        </div>
        <form name="flowForm" id="flowForm" method="post" action="">
          <table class="GoodList">
            <tbody>
            <tr>
              <th class="name">商品</th>
              <th class="price">原价</th>
              <th class="priceNew">价格</th>
            </tr>
            </tbody>
            <tbody>
            
            <tr>
              <td colspan="3" class="teacher">讲师：{
       {order.teacherName}}</td>
            </tr>
            <tr class="good">
              <td class="name First">
                <a target="_blank" :href="'https://localhost:3000/course/'+order.courseId">
                  <img :src="order.courseCover"></a>
                <div class="goodInfo">
                  <input type="hidden" class="ids ids_14502" value="14502">
                  <a target="_blank" :href="'https://localhost:3000/course/'+ order.courseId">{
       {order.courseTitle}}</a>
                </div>
              </td>
              <td class="price">
                <p>￥<strong>{
       {order.totalFee}}</strong></p>
                
              </td>
              <td class="red priceNew Last">￥<strong>{
       {order.totalFee}}</strong></td>
            </tr>
            <tr>
              <td class="Billing tr" colspan="3">
                <div class="tr">
                  <p>共 <strong class="red">1</strong> 件商品，合计<span
                    class="red f20">￥<strong>{
       {order.totalFee}}</strong></span></p>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="Finish">
            <div class="fr" id="AgreeDiv">
              
              <label for="Agree"><p class="on"><input type="checkbox" checked="checked">我已阅读并同意<a href="javascript:" target="_blank">《谷粒学院购买协议》</a></p></label>
            </div>
            <div class="clear"></div>
            <div class="Main fl">
              <div class="fl">
                <a :href="'/course/'+order.courseId">返回课程详情页</a>
              </div>
              <div class="fr">
                <p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strong
                  id="AllPrice">{
       {order.totalFee}}</strong></span></p>
              </div>
            </div>
            <input name="score" value="0" type="hidden" id="usedScore">
            <button class="fr redb" type="button" id="submitPay" @click="toPay()">去支付</button>
            <div class="clear"></div>
          </div>
        </form>
      </div>
    </template>

#### 6.5调用api中的方法来获取订单信息 ####

在订单页面编写如下代码

![在这里插入图片描述][27894fce64514a20b5a3ee10c95cc63f.png_pic_center]

截图中第76行的`params.oid`:因为我们的订单页面名字是\_oid.vue，所以获取路由中订单号的代码是`params.oid`

#### 6.6测试 ####

1.该启动的启动下,该重启的重启下,最好清空一下浏览器的cookie然后访问[http://localhost:8160/api/ucenter/wx/login][http_localhost_8160_api_ucenter_wx_login]使用微信扫码登录(使用手机号和密码登录也可以)

2.在课程详情页点击"立即购买"

![在这里插入图片描述][ddc3cf3e3ea34984aa57a75b23653f49.png_pic_center]

3.可以看到数据库中成功插入了订单数据,并且页面也展示了订单信息

![在这里插入图片描述][3a8860baf73b41caa75b954732b53f63.png_pic_center]

![在这里插入图片描述][29390a81f70f497482c6cc94e348d2dd.png_pic_center]

### 7.生成二维码支付的接口 ###

#### 7.1前言 ####

微信扫码登录时我们请求微信的接口后人家会给我们返回一个二维码供用户扫码,但是微信扫码支付时我们请求微信的接口人家给我们返回一个生成二维码的地址,我们需要根据vue的组件根据这个地址下载二维码供用户扫码支付

#### 7.2老师提供的 ####

微信支付也是商户才可以开通,老师把微信支付需要的一些信息已经提供给我们了

> appid(关联的公众号id)：wx74862e0dfcf69954
> 
> partner(商户号)：1558950191
> 
> partnerkey(商户key)：T6m9iK73b0kn9g5v426MKfHQH7X8rKwb
> 
> notifyurl(回调地址)：http://guli.shop/api/order/weixinPay/weixinNotify

#### 7.3控制层 ####

在service\_order模块的控制器PayLogController中编写方法来生成微信支付二维码

@Autowired
    private PayLogService payLogService;
    
    //1.生成微信支付二维码
    //参数是订单号
    @GetMapping("createNative/{orderNo}")
    public R createNative(@PathVariable String orderNo) {
        
        //业务层返回的信息中包含二维码地址,还有一些其它我们需要的信息
        Map map = payLogService.createNative(orderNo);
        return R.ok().data(map);
    }

![在这里插入图片描述][b1bcd857244b4593a22115c71af1e5ab.png_pic_center]

截图中第32行:业务层返回的信息中包含二维码地址,还有一些其它我们需要的信息,为了前端取值方便,我们用map集合来接收业务层返回的信息

#### 7.4业务层接口 ####

在业务层接口PayLogService中定义抽象方法

//1.生成微信支付二维码
    Map createNative(String orderNo);

![在这里插入图片描述][aaf7da6e16fa49c4a68c6ea1b9940fff.png_pic_center]

#### 7.5添加依赖 ####

接下来我们会在业务层实现类PayLogServiceImpl中编写业务逻辑,其中会有微信操作,所以我们需要在service\_order模块的pom.xml中引入相关依赖(别忘了刷新maven)

![在这里插入图片描述][185cbb826f01454bb4552580d45afd87.png_pic_center]

#### 7.6创建工具类 ####

1.微信规定了,向微信发送请求获取二维码时请求参数必须是xml格式,所以我们这里创建一个工具类来发送**xml格式参数**的请求

这个工具类的作用就是:可以发送**xml格式参数**的请求

2.工具类在资料中提供了

![在这里插入图片描述][2a096704be9f4edd835908dfddb85734.png_pic_center]

3.将这个工具类复制粘贴到service\_order模块的utils包下

![在这里插入图片描述][6b9778963f944e18955b8f251f457fba.png_pic_center]

#### 7.6业务层实现类 ####

在业务层实现类PayLogServiceImpl中实现上一步定义的抽象方法

具体的业务逻辑是固定的(注意业务逻辑中使用的HttpClient类是"7.6创建工具类"中我们创建的工具类HttpClient,别使用成别的包下的HttpClient)

@Autowired
    private OrderService orderService;
    
    //1.生成微信支付二维码
    @Override
    public Map createNative(String orderNo) {
        
        try {
        
            //1.根据订单号查询订单信息
            QueryWrapper<Order> wrapper = new QueryWrapper<>();
            wrapper.eq("order_no", orderNo);
            Order order = orderService.getOne(wrapper);
    
            //2.使用map集合设置生成二维码需要的参数
            Map m = new HashMap();
            m.put("appid", "wx74862e0dfcf69954"); //支付id
            m.put("mch_id", "1558950191"); //商户号
            m.put("nonce_str", WXPayUtil.generateNonceStr()); //生成随机唯一字符串,使得生成的每个二维码都不同
            m.put("body", order.getCourseTitle()); //生成的二维码显示什么名字
            m.put("out_trade_no", orderNo); //二维码的唯一标识,我们的订单号都是唯一的,所以一般赋值订单号
            m.put("total_fee", order.getTotalFee().multiply(new BigDecimal("100")).longValue()+""); //扫码的价格
            m.put("spbill_create_ip", "127.0.0.1"); //支付服务的ip地址(域名也行),我们这里是本地,所以赋值127.0.0.1
            m.put("notify_url", "http://guli.shop/api/order/weixinPay/weixinNotify\n");//支付后回调的地址,老师说目前用不到
            m.put("trade_type", "NATIVE"); //支付类型,NATIVE就表示根据价格生成一个支付二维码
    
            //3.发送httpclient请求,请求的参数是xml格式
            //3.1设置请求地址(请求地址是微信给的固定的)
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
            //3.2设置请求参数(xml格式)
            // generateSignedXml方法作用:根据商户key对map集合做加密并将加密后的map集合转为xml格式
            // setXmlParam方法作用:将得到的xml格式字符串设置为请求参数
            client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
            //3.3因为请求的地址是https的,默认无法请求,有了下面这行代码就可以请求了
            client.setHttps(true);
            //3.4执行发送请求(发送xml格式参数的请求)
            client.post();
    
            //4.获取请求返回的数据
            //4.1获取数据
            String xml = client.getContent();
            //4.2将xml数据转为map集合
            //发送请求后微信返回的内容是xml格式字符串,为了方便前端取值,我们把xml格式转换为map集合,把这个map集合返回给控制层
            Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);
    
            //5.最终返回数据的封装
            //但此时我们需要的其它数据并没有在resultMap集合中(如:订单号、课程id...),需要我们手动封装
            Map map = new HashMap<>();
            map.put("out_trade_no", orderNo); //订单号
            map.put("course_id", order.getCourseId()); //课程id
            map.put("total_fee", order.getTotalFee()); //订单金额
            map.put("result_code", resultMap.get("result_code")); //二维码操作状态码
            map.put("code_url", resultMap.get("code_url")); //二维码地址
    
            return map;
        } catch (Exception e) {
        
            throw new GuliException(20001, "生成支付二维码失败");
        }
    }

![在这里插入图片描述][22de2e5a3d854ac198843208afa9ad43.png_pic_center]

截图中第45-53行向map集合存数据时键名都是固定的,键名不能修改,因为截图中第61行的`WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb")`会将这个map集合转为为xml格式字符串,如果map集合的键名变了,那转换后的xml格式字符串就不是微信规定的字符串了,微信就无法识别

### 8.查询订单支付状态的接口 ###

#### 8.1控制层 ####

在控制器PayLogController中编写方法来查询订单支付状态

//查询订单支付状态
    //参数是订单号
    @GetMapping("queryPayStatus/{orderNo}")
    public R queryPayStatus(@PathVariable String orderNo) {
        
        //请求微信给的地址后返回很多数据,为了方便取值,这里我们也用map集合来接收
        Map<String, String> map = payLogService.queryPayStatus(orderNo);
        if (map == null) {
        
            return R.error().message("支付出错了");
        }
        //map不为空,那就从map中获取订单状态
        if (map.get("trade_state").equals("SUCCESS")) {
        
            //向t_pay_log(支付日志记录表)添加一条记录
            //并且修改t_order(订单表)的status字段为1(已支付)
            payLogService.updateOrderStatus(map);
            return R.ok().message("支付成功");
        }
        return R.ok().message("支付中");
    }

![在这里插入图片描述][2f2e4e9c102642bb911b8c4faebca965.png_pic_center]

截图中第46行的`map.get("trade_state")`:微信返回的xml格式数据中有一个键是trade\_state用来存储订单支付状态,我们后面会在业务层将这个xml格式数据转换为map集合(后面的"8.3业务层实现类"的截图的第112行),所以这里通过map.get(“trade\_state”)来获取订单支付状态

#### 8.2业务层接口 ####

在业务层接口PayLogService中定义两个抽象方法

//根据订单号查询订单支付状态
    Map<String, String> queryPayStatus(String orderNo);
    
    //向t_pay_log(支付日志记录表)添加一条记录
    //并且修改t_order(订单表)的status字段为1(已支付)
    void updateOrderStatus(Map<String, String> map);

![在这里插入图片描述][ea9aa969babf423da5d818d4b7d0ad75.png_pic_center]

#### 8.3业务层实现类 ####

在业务层实现类PayLogServiceImpl中实现上一步定义的两个抽象方法

//根据订单号查询订单支付状态
    @Override
    public Map<String, String> queryPayStatus(String orderNo) {
        
        try {
        
            //1.封装参数
            Map m = new HashMap<>();
            m.put("appid", "wx74862e0dfcf69954");
            m.put("mch_id", "1558950191");
            m.put("out_trade_no", orderNo);
            m.put("nonce_str", WXPayUtil.generateNonceStr());
    
            //2.发送httpclient请求
            HttpClient client = new HttpClient(
                "https://api.mch.weixin.qq.com/pay/orderquery");
            client.setXmlParam(WXPayUtil.generateSignedXml(
                m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
            client.setHttps(true);
            client.post();
    
            //3.获取微信返回的数据,并将xml格式数据转为map集合
            String xml = client.getContent();
            Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);
    
            return resultMap;
        } catch (Exception e) {
        
            return null;
        }
    }
    
    //向t_pay_log(支付日志记录表)添加一条记录
    //并且修改t_order(订单表)的status字段为1(已支付)
    @Override
    public void updateOrderStatus(Map<String, String> map) {
        
        //1.获取订单号
        String orderNo = map.get("out_trade_no");
    
        //2.根据订单号去订单表查询订单信息
        QueryWrapper<Order> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no", orderNo);
        Order order = orderService.getOne(wrapper);
    
        //3.修改t_order(订单表)的status字段为1(已支付)
        //3.1订单曾经已经支付了,不再需要做其它操作
        if(order.getStatus().intValue() == 1) return;
        //3.2订单曾经未支付
        order.setStatus(1); //1代表已支付
        orderService.updateById(order);
    
        //4.向支付日志记录表添加一条数据
        PayLog payLog=new PayLog();
        payLog.setOrderNo(order.getOrderNo()); //订单号
        payLog.setPayTime(new Date()); //支付时间
        payLog.setPayType(1); //支付类型(1代表微信)
        payLog.setTotalFee(order.getTotalFee()); //支付金额(分)
        payLog.setTradeState(map.get("trade_state")); //支付状态
        payLog.setTransactionId(map.get("transaction_id")); //交易流水号
        payLog.setAttr(JSONObject.toJSONString(map)); //其它属性
        baseMapper.insert(payLog);//插入到支付日志记录表
    
    }

![在这里插入图片描述][e7223df283d449f788e31ef48cc7bc3d.png_pic_center]

#### 8.4自动填充 ####

给service\_order模块的实体类PayLog的gmtCreate属性和gmtModified属性都添加注解@TableField以实现自动填充

![在这里插入图片描述][62f3b1d3e973412dad46ad2b8f43bb72.png_pic_center]

### 9.支付页面 ###

#### 9.1在api中定义方法 ####

在orders.js文件中定义方法调用后端接口

//生成二维码
    createNative(orderNo) {
        
      return request({
        
        url: `/eduorder/paylog/createNative/${
          orderNo}`,
        method: 'get'
      })
    },
    //查询订单状态
    queryPayStatus(orderNo) {
        
      return request({
        
        url: `/eduorder/paylog/queryPayStatus/${
          orderNo}`,
        method: 'get'
      })
    }

![在这里插入图片描述][7ea286c4f6a04e08a7d527be2d970b1d.png_pic_center]

#### 9.2订单页跳转至支付页 ####

1.在订单页(orders目录下的oid.vue)定义方法实现页面跳转

methods: {
        
      //跳转至支付页面
      toPay() {
        
        this.$router.push({
        path:'/pay/'+this.order.orderNo})
      }
    }

![在这里插入图片描述][419189f1b80e47a9900f588dad6a66e9.png_pic_center]

2.在pages目录下创建文件夹pay,然后在pay文件夹下创建支付页面\_pid.vue

![在这里插入图片描述][25eb14eb45d34939b2c6a2614b92dcf7.png_pic_center]

3.将下述代码复制粘贴到在支付页面

<template>
      <div class="cart py-container">
        
        <div class="checkout py-container  pay">
          <div class="checkout-tit">
            <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{
       {payObj.out_trade_no}}</span>
            </h4>
            <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{
       {payObj.total_fee}}</em></span>
            <div class="clearfix"></div>
          </div>
          <div class="checkout-steps">
            <div class="fl weixin">微信支付</div>
            <div class="fl sao">
              <p class="red">请使用微信扫一扫。</p>
              <div class="fl code">
                
                
                <qriously :value="payObj.code_url" :size="338"/>
                <div class="saosao">
                  <p>请使用微信扫一扫</p>
                  <p>扫描二维码支付</p>
                </div>
    
              </div>
    
            </div>
            <div class="clearfix"></div>
            
            
          </div>
        </div>
      </div>
    </template>

代码的第18行的`<qriously :value="payObj.code_url" :size="338"/>`:使用vue的vue-qriously组件根据地址生成二维码,这个组件我们在"demo14-注册、登录"的"7.1.1安装element-ui和vue-qriously"安装过了

#### 9.3调用api中的方法来生成支付二维码 ####

在支付页面添加如下代码来调用api中的方法

![在这里插入图片描述][190c90dbb37f413e8a666ca1e85f46fd.png_pic_center]

#### 9.4测试 ####

重启后端,保存前端修改,最好再清空一下浏览器的cookie,登录账号后随便找一个课程进入支付页面,可以看到成功生成了二维码

![在这里插入图片描述][67faf22854a048da9ad7826d3612743d.png_pic_center]

#### 9.5定时器 ####

1.生成支付二维码后我们要每隔一段时间就去查看一下订单支付状态,这就需要用到定时器。定时器写到created中不合适,因为我们在"9.3调用api中的方法来生成支付二维码"是通过异步调用来生成二维码,如果将写到created中,那可能此时还没有数据但已经开始执行定时器。正确做法是**将定时器写到mounted中**(和"demo16-讲师显示、课程显示"的"11.5创建播放器"的第1步是同理的)

2.在支付页面编写如下代码

data() {
        
        return {
        
            timer1: ''
        }
    },
    //每隔三秒调用一次查询订单的方法
    mounted() {
         //页面渲染之后执行
        this.timer1 = setInterval(() => {
        
            this.queryPayStatus(this.payObj.out_trade_no)
        },3000)
    },
    methods: {
        
        queryPayStatus(orderNo) {
        
            ordersApi.queryPayStatus(orderNo)
              .then(response => {
        
                  if (response.data.success) {
        
                      //支付成功,清除定时器
                      clearInterval(this.timer1)
                      //提示支付成功
                      this.$message({
        
                      type: 'success',
                      message: '支付成功!'
                      })
                      //跳转到课程详情页
                      this.$router.push({
        path: '/course/' + this.payObj.course_id})
                  }
              })
        }
    }

![在这里插入图片描述][9a954234b4984877a8be6136250bc475.png_pic_center]

截图中第63行的`clearInterval(this.timer1)`用来清除定时器:如果支付成功后不清除定时器,那么即使跳转到了课程详情页,定时器中的方法也会无休止地执行,除非终止前端项目。所以我们在支付成功后要清除定时器

3.有一个bug:按照我们目前的代码,如果此时是支付中,那么后端给前端返回的也是R.ok(),前端就会认为此时支付成功,就会清除定时器并跳转到课程详情页

![在这里插入图片描述][806d809001de4abd9de4a7accdd452ec.png_pic_center]

4.我们在"demo14-注册、登录"的"7.15创建前端拦截器(登录功能)"的第4步在request.js中创建过一个拦截器。这个拦截器我也看不懂,老师说的是有了这个拦截器,如果后端返回的状态码是25000,那么就视为订单支付中,那么就不做任何提示,不清除定时器,也不跳转到课程详情页,而是继续执行定时器

![在这里插入图片描述][cc3e6dc3877d4c8e8c4b1acfd5b623a4.png_pic_center]

5.所以我们将后端控制器PayLogController的queryPayStatus方法的订单支付中的状态码改为25000

![在这里插入图片描述][a4226dee3c0f409ea310a10c94157788.png_pic_center]

#### 9.6测试 ####

重启后端,保存前端修改,最好再清空一下浏览器的cookie,登录账号后自行测试。我测试时没问题

### 10.课程详情页显示效果完善 ###

#### 10.1分析 ####

*  当用户进入课程详情页时,如果该课程免费,则显示"立即观看",如果该课程收费,则显示"立即购买"
 *  当用户进入课程详情页时,如果该课程收费,但该用户已购买该课程,则显示"立即观看"

#### 10.2判断课程是否支付的接口 ####

根据课程id和用户id查询订单表status值是否为1(已支付)

在service\_order模块的控制器OrderController中编写方法

//3.根据课程id和用户id查询订单表status值是否为1(已支付)
    @GetMapping("isBuyCourse/{courseId}/{memberId}")
    public boolean isBuyCourse(
        @PathVariable String courseId,
        @PathVariable String memberId) {
        
        QueryWrapper<Order> wrapper = new QueryWrapper<>();
        wrapper.eq("course_id", courseId);
        wrapper.eq("member_id", memberId);
        wrapper.eq("status", 1); //1代表已经支付
        int count = orderService.count(wrapper);
        if (count > 0) {
         //已经支付
            return true;
        }
        //未支付
        return false;
    }

![在这里插入图片描述][b581362ada844615898d3625985557ae.png_pic_center]

这个方法可以像前面那样返回R对象,但为了后面调用后取值方便(后面的"10.3.3进行远程调用"的第2步的截图中的第56行),我们这里返回boolean类型

#### 10.3修改查询课程详情的接口 ####

##### 10.3.1分析 #####

1.因为是在课程详情页面显示立即观看或立即购买,所以我们要修改查询课程详情的接口:**给这个接口添加返回值,返回当前课程是否已被当前用户购买**

2.查询课程详情的接口是在service\_edu模块的,而查询课程是否已支付的接口是在service\_order模块的,所以这里需要用远程调用来实现

##### 10.3.2创建接口 #####

在service\_edu模块的client包下创建接口OrdersClient

@Component
    @FeignClient("service-order")
    public interface OrdersClient {
        
        //根据课程id和用户id查询订单表status值是否为1(已支付)
        @GetMapping("/eduorder/order/isBuyCourse/{courseId}/{memberId}")
        public boolean isBuyCourse(
                @PathVariable("courseId") String courseId,
                @PathVariable("memberId") String memberId);
    }

![在这里插入图片描述][8c6fccb722b747fcb0bfd235e5eacc0f.png_pic_center]

##### 10.3.3进行远程调用 #####

1.先在service\_edu模块的控制器CourseFrontController中注入OrdersClient

@Autowired
    private OrdersClient ordersClient;

![在这里插入图片描述][6b21af71806d44c7b23306eb9708f7f1.png_pic_center]

2.在service\_edu模块的控制器CourseFrontController的getFrontCourseInfo方法中添加如下三处代码

![在这里插入图片描述][262ca94b533b43d8b9ea7b86bbe02d2b.png_pic_center]

##### 10.3.4关闭熔断器 #####

如果使用了熔断器,那就还需要编写OrdersClient接口的一个实现类(具体操作看"demo12-课程管理"的"9.2在项目中整合熔断器"),我们这里省事了,不想再写接口实现类来使用熔断器了,只想单纯写一个接口供远程调用,所以我们这里就把service\_edu模块的配置文件application.properties中开启熔断器的代码注释掉

![在这里插入图片描述][707e5a96dc484dee9422f96a25d11644.png_pic_center]

#### 10.4修改js代码 ####

1.老师说课程详情页此时设计到显示立即购买还是立即观看,用异步调用可能会有问题(我一点也没听懂),老师说这里不再用异步调用,而是用以前的方式

2.将课程详情页下图红框圈起来的部分删掉

![在这里插入图片描述][85d8d02272b946fb8232c15b6c7b9683.png_pic_center]

3.将下述代码复制粘贴到上一步删除的位置

//异步调用(此时只用来获取路由中的课程id)
    asyncData({
          params, error }) {
        
      return {
        courseId: params.id}
    },
    data() {
        
      return {
        
        courseWebVo: {
        },
        chapterVideoList: [],
        isBuy: false
      }
    },
    created() {
        
      //查询课程详情
      this.initCourseInfo()
    },

![在这里插入图片描述][93a1a1476fe6400ab7aea9645ef53bda.png_pic_center]

4.在`methods: {...}`中编写查询课程详情的方法initCourseInfo

//查询课程详情
    initCourseInfo() {
        
      courseApi.getCourseInfo(this.courseId)
        .then(response => {
        
            this.courseWebVo = response.data.data.courseWebVo,
            this.chapterVideoList = response.data.data.chapterVideoList,
            this.isBuy = response.data.data.isBuy
        })
    },

![在这里插入图片描述][a114dc7a325744cf81fb205d9a0caba8.png_pic_center]

#### 10.5课程详情页渲染 ####

1.在课程详情页(course目录下的\_id.vue页面)将下图红框圈起来的部分删掉

![在这里插入图片描述][97d2d4a78c3d4444a567320fd3e77dc3.png_pic_center]

2.将下述代码复制粘贴到上一步删除的位置

![在这里插入图片描述][599473c204114d67a5c8661475667164.png_pic_center]

#### 10.6测试 ####

重启后端,保存前端修改,最好再清空一下浏览器的cookie,登录账号后自行测试。我测试时没问题

测试没问题,但是后端和前端会出现如下报错,我也不知道为啥

![在这里插入图片描述][8eb5587c2ac44cb2b46ce1ee1f7915aa.png_pic_center]

![在这里插入图片描述][f47a9a1cf72b48feaed8cdc2863a8379.png_pic_center]

[69b1b3b00f734519b97e00492210437e.png_pic_center]: https://img-blog.csdnimg.cn/69b1b3b00f734519b97e00492210437e.png#pic_center
[254fbd8fd5264f27aee23ef0e0ad3ada.png_pic_center]: https://img-blog.csdnimg.cn/254fbd8fd5264f27aee23ef0e0ad3ada.png#pic_center
[aa2f5a3b8ac745be9adfd8306564d0f5.png_pic_center]: https://img-blog.csdnimg.cn/aa2f5a3b8ac745be9adfd8306564d0f5.png#pic_center
[856c4a265ecc4f5dae836a5419bd0f24.png_pic_center]: https://img-blog.csdnimg.cn/856c4a265ecc4f5dae836a5419bd0f24.png#pic_center
[7a505e09a7df484088cb29b6a3b8c266.png_pic_center]: https://img-blog.csdnimg.cn/7a505e09a7df484088cb29b6a3b8c266.png#pic_center
[5aa1317b0d9047bbb14a3aed3d5acbd8.png_pic_center]: https://img-blog.csdnimg.cn/5aa1317b0d9047bbb14a3aed3d5acbd8.png#pic_center
[0dd083adb9ab472f9aa5db77115490ba.png_pic_center]: https://img-blog.csdnimg.cn/0dd083adb9ab472f9aa5db77115490ba.png#pic_center
[b9ffd035152f4848a086e31145ba0a37.png_pic_center]: https://img-blog.csdnimg.cn/b9ffd035152f4848a086e31145ba0a37.png#pic_center
[595bc1fe12bb4c2a92a975b4a542ee8a.png_pic_center]: https://img-blog.csdnimg.cn/595bc1fe12bb4c2a92a975b4a542ee8a.png#pic_center
[53b1081f84d74e1990218434b548dfe8.png_pic_center]: https://img-blog.csdnimg.cn/53b1081f84d74e1990218434b548dfe8.png#pic_center
[fed5337ffbfd4d5ba14d6b5adab79dbd.png_pic_center]: https://img-blog.csdnimg.cn/fed5337ffbfd4d5ba14d6b5adab79dbd.png#pic_center
[44ece9027046402f95cc0f05c7933e93.png_pic_center]: https://img-blog.csdnimg.cn/44ece9027046402f95cc0f05c7933e93.png#pic_center
[9c6b52c18081440d9395cff8ef74ceeb.png_pic_center]: https://img-blog.csdnimg.cn/9c6b52c18081440d9395cff8ef74ceeb.png#pic_center
[6d6e3657f28848ed95aead1ed8c58942.png_pic_center]: https://img-blog.csdnimg.cn/6d6e3657f28848ed95aead1ed8c58942.png#pic_center
[3ae1b7902a014e1dbf2715d2910ad4f3.png_pic_center]: https://img-blog.csdnimg.cn/3ae1b7902a014e1dbf2715d2910ad4f3.png#pic_center
[45404a6c03ed47169386482532679da8.png_pic_center]: https://img-blog.csdnimg.cn/45404a6c03ed47169386482532679da8.png#pic_center
[1287e5bc96e64649b93335b8fc9adb60.png_pic_center]: https://img-blog.csdnimg.cn/1287e5bc96e64649b93335b8fc9adb60.png#pic_center
[27d29bce314f41d5aaaae4bc725ae9fb.png_pic_center]: https://img-blog.csdnimg.cn/27d29bce314f41d5aaaae4bc725ae9fb.png#pic_center
[0e55064aa7ba4b6a838b2d6abf39721f.png_pic_center]: https://img-blog.csdnimg.cn/0e55064aa7ba4b6a838b2d6abf39721f.png#pic_center
[4b7ce14bf1224f42a65bf275f32daaf9.png_pic_center]: https://img-blog.csdnimg.cn/4b7ce14bf1224f42a65bf275f32daaf9.png#pic_center
[35592ee178fe4e7aab35fc1b4be812f4.png_pic_center]: https://img-blog.csdnimg.cn/35592ee178fe4e7aab35fc1b4be812f4.png#pic_center
[9ab47a059936490390b522f49f89d7a8.png_pic_center]: https://img-blog.csdnimg.cn/9ab47a059936490390b522f49f89d7a8.png#pic_center
[64778bf85a584962b072c18c903e6a86.png_pic_center]: https://img-blog.csdnimg.cn/64778bf85a584962b072c18c903e6a86.png#pic_center
[9561f95557314806b09c94129de50f8c.png_pic_center]: https://img-blog.csdnimg.cn/9561f95557314806b09c94129de50f8c.png#pic_center
[6466a3f3d0eb4b81be0059612cb0326c.png_pic_center]: https://img-blog.csdnimg.cn/6466a3f3d0eb4b81be0059612cb0326c.png#pic_center
[f31970244d964028aac78952845f13f4.png_pic_center]: https://img-blog.csdnimg.cn/f31970244d964028aac78952845f13f4.png#pic_center
[9e43a2de4d4044aabb758234138fb891.png_pic_center]: https://img-blog.csdnimg.cn/9e43a2de4d4044aabb758234138fb891.png#pic_center
[d6cdfaf88bf2495894be942f40878d49.png_pic_center]: https://img-blog.csdnimg.cn/d6cdfaf88bf2495894be942f40878d49.png#pic_center
[ae1a100b86fa491a882308d844307582.png_pic_center]: https://img-blog.csdnimg.cn/ae1a100b86fa491a882308d844307582.png#pic_center
[5b62f6736ecf478ea703a9f025f2f31a.png_pic_center]: https://img-blog.csdnimg.cn/5b62f6736ecf478ea703a9f025f2f31a.png#pic_center
[eea71ce5b56a405abb7d93370b4213d1.png_pic_center]: https://img-blog.csdnimg.cn/eea71ce5b56a405abb7d93370b4213d1.png#pic_center
[5764cd80f7dd4b7ca3393f9350dbbdd9.png_pic_center]: https://img-blog.csdnimg.cn/5764cd80f7dd4b7ca3393f9350dbbdd9.png#pic_center
[9bc7da1f4b0f4857a068f8fb5fcb1fe0.png_pic_center]: https://img-blog.csdnimg.cn/9bc7da1f4b0f4857a068f8fb5fcb1fe0.png#pic_center
[eb54b634a74a4667a602de80bb22e930.png_pic_center]: https://img-blog.csdnimg.cn/eb54b634a74a4667a602de80bb22e930.png#pic_center
[57af81af03054460b6a9733fbd810933.png_pic_center]: https://img-blog.csdnimg.cn/57af81af03054460b6a9733fbd810933.png#pic_center
[33029ce9da7544dea1d580d51f502e9f.png_pic_center]: https://img-blog.csdnimg.cn/33029ce9da7544dea1d580d51f502e9f.png#pic_center
[3af1296e554f41e39602a31726ca00c4.png_pic_center]: https://img-blog.csdnimg.cn/3af1296e554f41e39602a31726ca00c4.png#pic_center
[bc784314a4cd4ec09a0c8dc531d664f1.png_pic_center]: https://img-blog.csdnimg.cn/bc784314a4cd4ec09a0c8dc531d664f1.png#pic_center
[91d26418a71f48f1a81e6fde0f671dff.png_pic_center]: https://img-blog.csdnimg.cn/91d26418a71f48f1a81e6fde0f671dff.png#pic_center
[5b77a3781f3143bea9294acc8ab1f9f0.png_pic_center]: https://img-blog.csdnimg.cn/5b77a3781f3143bea9294acc8ab1f9f0.png#pic_center
[27894fce64514a20b5a3ee10c95cc63f.png_pic_center]: https://img-blog.csdnimg.cn/27894fce64514a20b5a3ee10c95cc63f.png#pic_center
[http_localhost_8160_api_ucenter_wx_login]: http://localhost:8160/api/ucenter/wx/login
[ddc3cf3e3ea34984aa57a75b23653f49.png_pic_center]: https://img-blog.csdnimg.cn/ddc3cf3e3ea34984aa57a75b23653f49.png#pic_center
[3a8860baf73b41caa75b954732b53f63.png_pic_center]: https://img-blog.csdnimg.cn/3a8860baf73b41caa75b954732b53f63.png#pic_center
[29390a81f70f497482c6cc94e348d2dd.png_pic_center]: https://img-blog.csdnimg.cn/29390a81f70f497482c6cc94e348d2dd.png#pic_center
[b1bcd857244b4593a22115c71af1e5ab.png_pic_center]: https://img-blog.csdnimg.cn/b1bcd857244b4593a22115c71af1e5ab.png#pic_center
[aaf7da6e16fa49c4a68c6ea1b9940fff.png_pic_center]: https://img-blog.csdnimg.cn/aaf7da6e16fa49c4a68c6ea1b9940fff.png#pic_center
[185cbb826f01454bb4552580d45afd87.png_pic_center]: https://img-blog.csdnimg.cn/185cbb826f01454bb4552580d45afd87.png#pic_center
[2a096704be9f4edd835908dfddb85734.png_pic_center]: https://img-blog.csdnimg.cn/2a096704be9f4edd835908dfddb85734.png#pic_center
[6b9778963f944e18955b8f251f457fba.png_pic_center]: https://img-blog.csdnimg.cn/6b9778963f944e18955b8f251f457fba.png#pic_center
[22de2e5a3d854ac198843208afa9ad43.png_pic_center]: https://img-blog.csdnimg.cn/22de2e5a3d854ac198843208afa9ad43.png#pic_center
[2f2e4e9c102642bb911b8c4faebca965.png_pic_center]: https://img-blog.csdnimg.cn/2f2e4e9c102642bb911b8c4faebca965.png#pic_center
[ea9aa969babf423da5d818d4b7d0ad75.png_pic_center]: https://img-blog.csdnimg.cn/ea9aa969babf423da5d818d4b7d0ad75.png#pic_center
[e7223df283d449f788e31ef48cc7bc3d.png_pic_center]: https://img-blog.csdnimg.cn/e7223df283d449f788e31ef48cc7bc3d.png#pic_center
[62f3b1d3e973412dad46ad2b8f43bb72.png_pic_center]: https://img-blog.csdnimg.cn/62f3b1d3e973412dad46ad2b8f43bb72.png#pic_center
[7ea286c4f6a04e08a7d527be2d970b1d.png_pic_center]: https://img-blog.csdnimg.cn/7ea286c4f6a04e08a7d527be2d970b1d.png#pic_center
[419189f1b80e47a9900f588dad6a66e9.png_pic_center]: https://img-blog.csdnimg.cn/419189f1b80e47a9900f588dad6a66e9.png#pic_center
[25eb14eb45d34939b2c6a2614b92dcf7.png_pic_center]: https://img-blog.csdnimg.cn/25eb14eb45d34939b2c6a2614b92dcf7.png#pic_center
[190c90dbb37f413e8a666ca1e85f46fd.png_pic_center]: https://img-blog.csdnimg.cn/190c90dbb37f413e8a666ca1e85f46fd.png#pic_center
[67faf22854a048da9ad7826d3612743d.png_pic_center]: https://img-blog.csdnimg.cn/67faf22854a048da9ad7826d3612743d.png#pic_center
[9a954234b4984877a8be6136250bc475.png_pic_center]: https://img-blog.csdnimg.cn/9a954234b4984877a8be6136250bc475.png#pic_center
[806d809001de4abd9de4a7accdd452ec.png_pic_center]: https://img-blog.csdnimg.cn/806d809001de4abd9de4a7accdd452ec.png#pic_center
[cc3e6dc3877d4c8e8c4b1acfd5b623a4.png_pic_center]: https://img-blog.csdnimg.cn/cc3e6dc3877d4c8e8c4b1acfd5b623a4.png#pic_center
[a4226dee3c0f409ea310a10c94157788.png_pic_center]: https://img-blog.csdnimg.cn/a4226dee3c0f409ea310a10c94157788.png#pic_center
[b581362ada844615898d3625985557ae.png_pic_center]: https://img-blog.csdnimg.cn/b581362ada844615898d3625985557ae.png#pic_center
[8c6fccb722b747fcb0bfd235e5eacc0f.png_pic_center]: https://img-blog.csdnimg.cn/8c6fccb722b747fcb0bfd235e5eacc0f.png#pic_center
[6b21af71806d44c7b23306eb9708f7f1.png_pic_center]: https://img-blog.csdnimg.cn/6b21af71806d44c7b23306eb9708f7f1.png#pic_center
[262ca94b533b43d8b9ea7b86bbe02d2b.png_pic_center]: https://img-blog.csdnimg.cn/262ca94b533b43d8b9ea7b86bbe02d2b.png#pic_center
[707e5a96dc484dee9422f96a25d11644.png_pic_center]: https://img-blog.csdnimg.cn/707e5a96dc484dee9422f96a25d11644.png#pic_center
[85d8d02272b946fb8232c15b6c7b9683.png_pic_center]: https://img-blog.csdnimg.cn/85d8d02272b946fb8232c15b6c7b9683.png#pic_center
[93a1a1476fe6400ab7aea9645ef53bda.png_pic_center]: https://img-blog.csdnimg.cn/93a1a1476fe6400ab7aea9645ef53bda.png#pic_center
[a114dc7a325744cf81fb205d9a0caba8.png_pic_center]: https://img-blog.csdnimg.cn/a114dc7a325744cf81fb205d9a0caba8.png#pic_center
[97d2d4a78c3d4444a567320fd3e77dc3.png_pic_center]: https://img-blog.csdnimg.cn/97d2d4a78c3d4444a567320fd3e77dc3.png#pic_center
[599473c204114d67a5c8661475667164.png_pic_center]: https://img-blog.csdnimg.cn/599473c204114d67a5c8661475667164.png#pic_center
[8eb5587c2ac44cb2b46ce1ee1f7915aa.png_pic_center]: https://img-blog.csdnimg.cn/8eb5587c2ac44cb2b46ce1ee1f7915aa.png#pic_center
[f47a9a1cf72b48feaed8cdc2863a8379.png_pic_center]: https://img-blog.csdnimg.cn/f47a9a1cf72b48feaed8cdc2863a8379.png#pic_center