末影小黑xh

硅谷课堂-智慧星球 Day 15~Day 16——尚硅谷项目笔记 2022 年

文章目录

硅谷课堂-智慧星球 Day 15~Day 16——尚硅谷项目笔记 2022 年
- Day 15-直播管理模块和微信分享
- - 一、后台系统-直播管理模块
  - - 1、直播课程管理前端整合
    - - 1.1、service-vod 添加方法
      - 1.2、router/index.js 路由
      - 1.3、定义调用接口
      - 1.4、创建直播页面
      - 1.4.1、list.vue
        
        1.4.2、config.vue
  - 二、公众号直播对接
  - - 1、用户观看端集成
    - - 1.1、获取用户 access_token
      - 1.2、下载前端 SDK
      - 1.3、使用快捷模板
      - 1.4、与前端项目结合
      - 1.5、补充接口
  - 三、微信分享
  - - 1、实现目标
    - 2、微信分享实现方式
    - - 2.1、绑定域名
      - 2.2、公众号测试号配置
      - 2.3、引入 JS 文件
      - 2.4、封装分享 js
      - 2.5、服务器端接口
      - 2.6、点播课程详情分享
      - 2.7、测试
- Day 16-腾讯云部署
- - 一、项目部署方案
  - - 1、原始部署方式
    - 2、整合 Jenkins
    - 3、整合 CODING
  - 二、腾讯云 CODING DevOps 概述
  - - 1、产品简介
    - - 1.1、CODING DevOps 是什么
      - 1.2、CODING DevOps 优势
      - 1.3、CODING DevOps 功能特性
    - 2、使用流程概述
    - - 2.1、创建或加入团队
      - 2.2、新建项目
      - 2.3、开始项目协同
      - 2.4、使用代码仓库
      - 2.5、启动代码扫描
      - 2.6、编译构建
      - 2.7、管理制品
      - 2.8、实施持续部署
      - 2.9、管理测试用例
      - 2.10、管理项目文档
  - 三、开通 CODING DevOps
  - - 1、搜索 CODING DevOps
    - 2、开通账号
    - 3、创建团队
  - 四、使用 CODING DevOps
  - - 1、创建项目
    - - 1.1、点击创建项目
      - 1.2、选择项目模板
      - 1.3、填写项目基本信息
      - 1.4、完成创建
    - 2、项目协同
    - - 2.1、项目协同初始化
      - 2.2、项目协同具体实现
    - 3、代码仓库
    - - 3.1、添加仓库
      - 3.2、克隆代码仓库到本地
      - 3.3、推送本地代码至 CODING 仓库
      - 3.4、推送项目到代码仓库
    - 4、持续集成
    - - 4.1、创建构建计划
      - 4.2、选择类型
      - 4.3、设置构建信息
      - 4.4、修改流程配置
      - 4.5、立即构建
      - 4.6、构建完成
    - 5、持续部署（绑定云账号）
    - - 5.1、输入账号名称
      - 5.2、创建集群，开放外网 ip
      - 5.3、复制凭证
    - 6、持续部署（Kubernetes）
    - - 6.1、创建部署
      - 6.2、集群配置
      - 6.2.1、集群配置
        
        6.2.2、镜像配置
        
        6.2.3、应用部署
      - 6.3、等待发布
      - 6.4、获取发布地址
      - 6.5、访问测试
    - 7、持续部署（腾讯云弹性伸缩）
    - - 7.1、创建应用
      - 7.2、创建流程
      - 7.3、启动执行
      - 7.4、集群查看

Day 15-直播管理模块和微信分享

一、后台系统-直播管理模块

1、直播课程管理前端整合

1.1、service-vod 添加方法

（1）CourseController 添加方法。

package com.myxh.smart.planet.vod.controller;

import com.myxh.smart.planet.model.vod.Course;
import com.myxh.smart.planet.result.Result;
import com.myxh.smart.planet.vod.service.CourseService;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author MYXH
 * @date 2023/10/8
 *
 * 
 * 课程 前端控制器
 * 
 */
@Tag(name = "课程接口", description = "课程管理接口")
@RestController
@RequestMapping("/admin/vod/course")
public class CourseController
{
    @Autowired
    private CourseService courseService;

    /**
     * 查询所有课程
     *
     * @return Result 全局统一返回结果
     */
    @Operation(summary = "查询所有课程", description = "查询所有课程")
    @GetMapping("find/all")
    public Result<List<Course>> findAll()
    {
        List<Course> courseList = courseService.findlist();

        return Result.ok(courseList);
    }
}

（2）CourseService 实现方法。

package com.myxh.smart.planet.vod.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.myxh.smart.planet.model.vod.Course;
import com.myxh.smart.planet.vod.mapper.CourseMapper;
import com.myxh.smart.planet.vod.service.CourseService;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author MYXH
 * @date 2023/10/8
 *
 * 
 * 课程 服务实现类
 * 
 */
@Service
public class CourseServiceImpl extends ServiceImpl<CourseMapper, Course> implements CourseService
{
    /**
     * 查询所有课程
     *
     * @return courseList 所有课程列表
     */
    @Override
    public List<Course> findlist()
    {
        List<Course> courseList = baseMapper.selectList(null);

        courseList.stream().forEach(this::getTeacherAndSubjectName);

        return courseList;
    }
}

1.2、router/index.js 路由

  // 直播管理
  {
    path: "/live",
    component: Layout,
    redirect: "/live/liveCourse/list",
    name: "Live",
    meta: {
      title: "直播管理",
      icon: "el-icon-bangzhu",
    },
    alwaysShow: true,
    children: [
      {
        path: "liveCourse/list",
        name: "liveCourseList",
        component: () => import("@/views/live/liveCourse/list"),
        meta: { title: "直播列表" },
      },
      {
        path: "liveCourse/config/:id",
        name: "liveCourseConfig",
        component: () => import("@/views/live/liveCourse/config"),
        meta: { title: "直播配置" },
        hidden: true,
      },
      {
        path: "liveVisitor/list/:id",
        name: "liveVisitor",
        component: () => import("@/views/live/liveVisitor/list"),
        meta: { title: "观看记录" },
        hidden: true,
      },
    ],
  },

1.3、定义调用接口

import request from "@/utils/request";

const LIVE_COURSE_API = "/admin/live/live/course";

export default {
  /**
   * 直播课程分页列表
   *
   * @param {number} current 当前页码
   * @param {number} limit 每页记录数
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  getPageList(page, limit) {
    return request({
      url: `${LIVE_COURSE_API}/find/query/page/${page}/${limit}`,
      method: "get",
    });
  },

  /**
   * 添加直播课程
   *
   * @param {Object} liveCourse 直播课程
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  save(liveCourse) {
    return request({
      url: `${LIVE_COURSE_API}/save`,
      method: "post",
      data: liveCourse,
    });
  },

  /**
   * 删除直播课程
   *
   * @param {number} id id
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  removeById(id) {
    return request({
      url: `${LIVE_COURSE_API}/remove/${id}`,
      method: "delete",
    });
  },

  /**
   * 根据 id 查询直播课程基本信息和描述信息
   *
   * @param {number} id id
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  getById(id) {
    return request({
      url: `${LIVE_COURSE_API}/get/info/${id}`,
      method: "get",
    });
  },

  /**
   * 根据 id 修改直播课程
   *
   * @param {Object} liveCourse 直播课程
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  updateById(liveCourse) {
    return request({
      url: `${LIVE_COURSE_API}/update`,
      method: "put",
      data: liveCourse,
    });
  },

  /**
   * 获取直播账号信息
   *
   * @param {number} id id
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  getLiveCourseAccount(id) {
    return request({
      url: `${LIVE_COURSE_API}/get/live/course/account/${id}`,
      method: "get",
    });
  },

  /**
   * 获取直播配置信息
   *
   * @param {number} id id
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  getCourseConfig(id) {
    return request({
      url: `${LIVE_COURSE_API}/get/course/config/${id}`,
      method: "get",
    });
  },

  /**
   * 修改直播配置信息
   *
   * @param {Object} liveCourseConfigVo 直播配置信息
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  updateConfig(liveCourseConfigVo) {
    return request({
      url: `${LIVE_COURSE_API}/update/config`,
      method: "put",
      data: liveCourseConfigVo,
    });
  },

  /**
   * 获取最近的直播
   *
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  findLatelyList() {
    return request({
      url: `${LIVE_COURSE_API}/find/lately/list`,
      method: "get",
    });
  },

  /**
   * 批量删除直播课程
   *
   * @param {Array}idList id 数组，Json 数组 [1,2,3,...]
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  removeRows(idList) {
    return request({
      url: `${LIVE_COURSE_API}/remove/batch`,
      method: "delete",
      data: idList,
    });
  },
};

import request from "@/utils/request";

const COURSE_API = "/admin/vod/course";

export default {
  /**
   * 查询所有课程
   *
   * @returns {Promise} 返回一个 Promise 对象，表示操作的异步结果
   */
  findAll() {
    return request({
      url: `${COURSE_API}/find/all`,
      method: "get",
    });
  },
};

1.4、创建直播页面

1.4.1、list.vue

<template>
  <div class="app-container">
    <head>
      
      <meta name="referrer" content="no-referrer" />
    head>

    
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px">i>
      <span style="margin-top: 5px">数据列表span>
      <el-button class="btn-add" size="mini" @click="add">添 加el-button>
    el-card>

    
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column label="序号" width="50" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        template>
      el-table-column>
      <el-table-column label="封面" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" width="100%" />
        template>
      el-table-column>
      <el-table-column prop="courseName" label="直播名称" />
      <el-table-column prop="startTime" label="直播时间">
        <template slot-scope="scope">
          {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
        template>
      el-table-column>
      <el-table-column prop="endTime" label="直播结束时间" />
      <el-table-column prop="param.teacherName" label="直播教师" />
      <el-table-column label="头衔" width="90">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.param.teacherLevel === 1"
            type="success"
            size="mini"
            >高级教师el-tag
          >
          <el-tag v-if="scope.row.param.teacherLevel === 0" size="mini"
            >首席教师el-tag
          >
        template>
      el-table-column>
      <el-table-column prop="createTime" label="创建时间" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="edit(scope.row.id)"
            >修改el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="removeDataById(scope.row.id)"
            >删除el-button
          >
          <el-button type="text" size="mini" @click="showAccount(scope.row)"
            >查看账号el-button
          >
          <router-link :to="'/live/liveCourse/config/' + scope.row.id">
            <el-button type="text" size="mini" style="margin-left: 10px"
              >配置el-button
            >
          router-link>
          <router-link :to="'/live/liveVisitor/list/' + scope.row.id">
            <el-button type="text" size="mini">观看记录el-button>
          router-link>
        template>
      el-table-column>
    el-table>

    
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />

    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="60%">
      <el-form
        ref="flashPromotionForm"
        label-width="150px"
        size="small"
        style="padding-right: 40px"
      >
        
        <el-form-item label="直播教师">
          <el-select v-model="liveCourse.teacherId" placeholder="请选择">
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"
            />
          el-select>
        el-form-item>
        <el-form-item label="直播教师登录密码" v-if="liveCourse.id === ''">
          <el-input v-model="liveCourse.password" />
        el-form-item>
        <el-form-item label="直播名称">
          <el-input v-model="liveCourse.courseName" />
        el-form-item>
        <el-form-item label="直播开始时间">
          <el-date-picker
            v-model="liveCourse.startTime"
            type="datetime"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        el-form-item>
        <el-form-item label="直播结束时间">
          <el-date-picker
            v-model="liveCourse.endTime"
            type="datetime"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        el-form-item>
        <el-form-item label="直播封面">
          <el-upload
            :show-file-list="false"
            :on-success="handleCoverSuccess"
            :before-upload="beforeCoverUpload"
            :on-error="handleCoverError"
            :action="BASE_API + '/admin/vod/file/upload?module=cover'"
            class="cover-uploader"
          >
            <img v-if="liveCourse.cover" :src="liveCourse.cover" width="60%" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          el-upload>
        el-form-item>
        <el-form-item label="直播详情">
          <el-input v-model="liveCourse.description" type="textarea" rows="5" />
        el-form-item>
      el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消el-button>
        <el-button type="primary" @click="saveOrUpdate()" size="small"
          >确 定el-button
        >
      span>
    el-dialog>

    <el-dialog
      title="查看账号"
      :visible.sync="accountDialogVisible"
      width="60%"
    >
      <el-form
        ref="accountForm"
        label-width="150px"
        size="small"
        style="padding-right: 40px"
      >
        <div style="margin-left: 40px">
          <h4>主播帮助信息h4>
          <el-row style="height: 35px">
            <el-co>
              <span class="spd-info">主播登录链接：span>
              <span class="spd-info"
                >https://live.zhibodun.com/live/courseLogin.php?course_id={{
                liveCourseAccount.courseId }}&role=adminspan
              >
            el-co>
          el-row>
          <el-row style="height: 35px">
            <el-col>
              <span class="spd-info"
                >主播登录密码：{{ liveCourseAccount.anchorKey }}span
              >
            el-col>
          el-row>
        div>
        <div style="margin-left: 40px">
          <h4>主播客户端账号信息h4>
          <el-row style="height: 35px">
            <el-col>
              <span class="spd-info"
                >主播登录账户：{{ liveCourseAccount.anchorAccount }}span
              >
            el-col>
          el-row>
          <el-row style="height: 35px">
            <el-col>
              <span class="spd-info"
                >主播登录密码：{{ liveCourseAccount.anchorPassword }}span
              >
            el-col>
          el-row>
        div>

        <div style="margin-left: 40px">
          <h4>助教信息h4>
          <el-row style="height: 35px">
            <el-co>
              <span class="spd-info">助教登录连接：span>
              <span class="spd-info"
                >https://live.zhibodun.com/live/courseLogin.php?course_id={{
                liveCourseAccount.courseId }}&role=adminspan
              >
            el-co>
          el-row>
          <el-row style="height: 35px">
            <el-col>
              <span class="spd-info"
                >主播登录密码：{{ liveCourseAccount.adminKey }}span
              >
            el-col>
          el-row>
        div>
        <div style="margin-left: 40px">
          <h4>学生观看信息h4>
          <el-row style="height: 35px">
            <el-co>
              <span class="spd-info">观看连接：span>
              <span class="spd-info"
                >http://smartplanetmobile.free.idcfengye.com/#/live/info/{{
                liveCourseAccount.courseId }}span
              >
            el-co>
          el-row>
          <el-row style="height: 35px">
            <el-col>
              <span class="spd-info"
                >观看二维码：<img src="@/assets/SmartPlanet.png" width="80px"
              />span>
            el-col>
          el-row>
        div>
      el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="accountDialogVisible = false" size="small"
          >关 闭el-button
        >
      span>
    el-dialog>
  div>
template>

<script>
  import liveCourseAPI from "@/api/live/liveCourse";
  import teacherAPI from "@/api/vod/teacher";

  const defaultForm = {
    id: "",
    courseName: "",
    startTime: "",
    endTime: "",
    teacherId: "",
    password: "",
    description: "",
    cover: "https://img-blog.csdnimg.cn/b9f45932f6cf471aa53ee24e5555d9c2.png",
  };

  export default {
    data() {
      return {
        BASE_API: "http://localhost:8333",
        // BASE_API: "http://smartplanet.free.idcfengye.com",

        // 数据是否正在加载
        listLoading: true,

        // banner 列表
        list: null,

        // 数据库中的总记录数
        total: 0,

        // 默认页码
        page: 1,

        // 每页记录数
        limit: 10,

        // 查询表单对象
        searchObj: {},

        // 教师列表
        teacherList: [],

        dialogVisible: false,
        liveCourse: defaultForm,
        saveBtnDisabled: false,
        accountDialogVisible: false,

        liveCourseAccount: {
          courseId: "",
        },
      };
    },

    // 生命周期函数：内存准备完毕，页面尚未渲染
    created() {
      console.log("list created...");
      this.fetchData();

      // 获取教师列表
      this.initTeacherList();
    },

    // 生命周期函数：内存准备完毕，页面渲染成功
    mounted() {
      console.log("list mounted...");
    },

    methods: {
      // 当页码发生改变的时候
      changeSize(size) {
        console.log(size);
        this.limit = size;
        this.fetchData(1);
      },

      // 加载 banner 列表数据
      fetchData(page = 1) {
        console.log("翻页..." + page);

        // 异步获取远程数据（ajax）
        this.page = page;

        liveCourseAPI.getPageList(this.page, this.limit).then((response) => {
          this.list = response.data.records;
          this.total = response.data.total;

          // 数据加载并绑定成功
          this.listLoading = false;
        });
      },

      // 获取教师列表
      initTeacherList() {
        teacherAPI.list().then((response) => {
          this.teacherList = response.data;
        });
      },

      // 重置查询表单
      resetData() {
        console.log("重置查询表单");
        this.searchObj = {};
        this.fetchData();
      },

      // 根据 id 删除数据
      removeDataById(id) {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 点击确定，远程调用ajax
            return liveCourseAPI.removeById(id);
          })
          .then((response) => {
            this.fetchData(this.page);

            if (response.code) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },

      add() {
        this.dialogVisible = true;
        this.liveCourse = Object.assign({}, defaultForm);
      },

      edit(id) {
        this.dialogVisible = true;
        this.fetchDataById(id);
      },

      fetchDataById(id) {
        liveCourseAPI.getById(id).then((response) => {
          this.liveCourse = response.data;
        });
      },

      saveOrUpdate() {
        // 防止表单重复提交
        this.saveBtnDisabled = true;

        if (!this.liveCourse.teacherId) {
          this.$message.error("请选择直播教师");
          this.saveBtnDisabled = false;

          return;
        }

        if (!this.liveCourse.id && !this.liveCourse.password) {
          this.$message.error("请输入直播教师登录密码");
          this.saveBtnDisabled = false;

          return;
        }

        if (!this.liveCourse.courseName) {
          this.$message.error("请输入直播名称");
          this.saveBtnDisabled = false;

          return;
        }

        if (!this.liveCourse.courseName) {
          this.$message.error("请输入直播名称");
          this.saveBtnDisabled = false;

          return;
        }

        if (!this.liveCourse.startTime) {
          this.$message.error("请选择直播开始时间");
          this.saveBtnDisabled = false;

          return;
        }

        if (!this.liveCourse.endTime) {
          this.$message.error("请选择直播结束时间");
          this.saveBtnDisabled = false;

          return;
        }

        // 验证开始时间和结束时间的合法性
        if (!this.validateDateRange()) {
          return;
        }

        if (!this.liveCourse.description) {
          this.$message.error("请输入直播详情");
          this.saveBtnDisabled = false;

          return;
        }

        if (!this.liveCourse.id) {
          this.saveData();
        } else {
          this.updateData();
        }
      },

      // 验证开始时间和结束时间的合法性
      validateDateRange() {
        if (
          this.liveCourse.startTime &&
          this.liveCourse.endTime &&
          this.liveCourse.startTime > this.liveCourse.endTime
        ) {
          this.$message.error("开始时间不能晚于结束时间");
          return false;
        }

        const startDateTime = new Date(this.liveCourse.startTime);
        const endDateTime = new Date(this.liveCourse.endTime);
        const durationInMilliseconds = endDateTime - startDateTime;
        const durationInHours = durationInMilliseconds / (1000 * 60 * 60);

        if (durationInHours > 24) {
          this.$message.error("直播时间不能超过24小时");
          return false;
        }

        return true;
      },

      // 新增
      saveData() {
        liveCourseAPI.save(this.liveCourse).then((response) => {
          if (response.code) {
            this.$message({
              type: "success",
              message: response.message,
            });

            this.dialogVisible = false;
            this.fetchData(this.page);
          }
        });
      },

      // 根据 id 更新记录
      updateData() {
        liveCourseAPI.updateById(this.liveCourse).then((response) => {
          if (response.code) {
            this.$message({
              type: "success",
              message: response.message,
            });

            this.dialogVisible = false;
            this.fetchData(this.page);
          }
        });
      },

      // 根据 id 查询记录
      fetchDataById(id) {
        liveCourseAPI.getById(id).then((response) => {
          this.liveCourse = response.data;
        });
      },

      showAccount(row) {
        this.accountDialogVisible = true;
        liveCourseAPI.getLiveCourseAccount(row.id).then((response) => {
          this.liveCourseAccount = response.data;
          this.liveCourseAccount.courseId = row.courseId;
        });
      },

      // 上传成功回调
      handleCoverSuccess(res, file) {
        this.liveCourse.cover = res.data;
      },

      // 上传校验
      beforeCoverUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error("上传直播封面只能是 JPG 或 PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传直播封面大小不能超过 2MB!");
        }

        return (isJPG || isPNG) && isLt2M;
      },

      // 错误处理
      handleCoverError() {
        console.log("error");
        this.$message.error("上传失败");
      },
    },
  };
script>

1.4.2、config.vue

<template>
  <div class="app-container">
    <el-form label-width="120px" size="small">
      <div
        style="
          background-color: #e0e0e0;
          width: 100%;
          padding: 1px 10px;
          margin: 10px 0;
        "
      >
        <h3>功能设置   h3>
      div>
      <el-form-item label="界面模式">
        <el-radio-group v-model="liveCourseConfigVo.pageViewMode">
          <el-radio :label="1">全屏模式el-radio>
          <el-radio :label="0">二分屏el-radio>
          <el-radio :label="2">课件模式el-radio>
        el-radio-group>
      el-form-item>
      <el-form-item label="观看人数开关">
        <el-radio-group v-model="liveCourseConfigVo.numberEnable">
          <el-radio :label="1">是el-radio>
          <el-radio :label="0">否el-radio>
        el-radio-group>
      el-form-item>
      <el-form-item label="商城开关:">
        <el-radio-group v-model="liveCourseConfigVo.storeEnable">
          <el-radio :label="1">是el-radio>
          <el-radio :label="0">否el-radio>
        el-radio-group>
      el-form-item>

      <div
        style="
          background-color: #e0e0e0;
          width: 100%;
          padding: 1px 10px;
          margin: 10px 0;
        "
      >
        <h3>
          商品列表   
          <el-button type="" size="mini" @click="addCourse()"
            >添加 / 更新el-button
          >
        h3>
      div>
      <el-table
        v-loading="listLoading"
        :data="liveCourseConfigVo.liveCourseGoodsList"
        stripe
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope"> {{ scope.$index + 1 }} template>
        el-table-column>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.img" width="80px" />
          template>
        el-table-column>
        <el-table-column prop="name" label="名称" width="100" />
        <el-table-column prop="price" label="价格" width="100" />
        <el-table-column prop="originalPrice" label="原价" />
      el-table>

      <el-dialog
        title="添加 / 更新课程"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-form
          :inline="true"
          label-width="150px"
          size="small"
          style="padding-right: 40px"
        >
          <el-table
            v-loading="listLoading"
            :data="courseList"
            stripe
            border
            style="width: 100%; margin-top: 10px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" width="70" align="center">
              <template slot-scope="scope"> {{ scope.$index + 1 }} template>
            el-table-column>
            <el-table-column label="分类">
              <template slot-scope="scope">
                {{ scope.row.param.subjectParentTitle }} > {{
                scope.row.param.subjectTitle }}
              template>
            el-table-column>
            <el-table-column prop="title" label="课程名称" width="150" />
            <el-table-column prop="lessonNum" label="课时" width="100" />
            <el-table-column prop="param.teacherName" label="教师" />
          el-table>
          <el-form-item style="margin-top: 10px">
            <el-button type="" @click="dialogVisible = false">取消el-button>
            <el-button type="" @click="selectCourse()">保存el-button>
          el-form-item>
        el-form>
      el-dialog>

      <br /><br />
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">保存el-button>
        <el-button @click="back">返回el-button>
      el-form-item>
    el-form>
  div>
template>

<script>
  import liveCourseAPI from "@/api/live/liveCourse";
  import courseAPI from "@/api/vod/course";

  const defaultForm = {
    id: "",
    liveCourseId: "",
    pageViewMode: 1,
    numberEnable: 1,
    storeEnable: 1,
    storeType: 1,
    liveCourseGoodsList: [],
  };

  export default {
    data() {
      return {
        // 数据是否正在加载
        listLoading: true,

        liveCourseConfigVo: defaultForm,
        saveBtnDisabled: false,
        dialogVisible: false,
        courseList: [],

        // 批量选择中选择的记录列表
        multipleSelection: [],
      };
    },

    // 监听器
    watch: {
      $route(to, from) {
        console.log("路由变化...");
        console.log(to);
        console.log(from);
        this.init();
      },
    },

    // 生命周期方法（在路由切换，组件不变的情况下不会被调用）
    created() {
      console.log("form created...");
      this.init();
    },

    methods: {
      // 表单初始化
      init() {
        this.liveCourseConfigVo.liveCourseId = this.$route.params.id;
        this.fetchDataById(this.liveCourseConfigVo.liveCourseId);
        this.fetchCourseList();
      },

      back() {
        this.$router.push({ path: "/live/liveCourse/list" });
      },

      // 根据 id 查询记录
      fetchDataById(id) {
        liveCourseAPI.getCourseConfig(id).then((response) => {
          if (null !== response.data.id) {
            this.liveCourseConfigVo = response.data;
          }

          this.listLoading = false;
        });
      },

      fetchCourseList() {
        courseAPI.findAll().then((response) => {
          this.courseList = response.data;
        });
      },

      handleSelectionChange(selection) {
        console.log(selection);
        this.multipleSelection = selection;
      },

      addCourse() {
        this.dialogVisible = true;
      },

      selectCourse() {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: "warning",
            message: "请选择对应课程!",
          });

          return;
        }

        let list = [];

        this.multipleSelection.forEach((item) => {
          var obj = {
            liveCourseId: this.liveCourseConfigVo.liveCourseId,
            goodsId: item.id,
            name: item.title,
            img: item.cover,
            price: item.price,
            originalPrice: item.price,
            tab: "1",
            url:
              "http://smartplanetmobile.free.idcfengye.com/#/course/info/" +
              item.id,
            putaway: "1",
            pay: "1",
            qrcode: "",
          };

          list.push(obj);
        });

        this.liveCourseConfigVo.liveCourseGoodsList = list;
        this.dialogVisible = false;
      },

      saveOrUpdate() {
        liveCourseAPI.updateConfig(this.liveCourseConfigVo).then((response) => {
          this.$message({
            type: "success",
            message: response.message,
          });

          this.$router.push({ path: "/live/liveCourse/list" });
        });
      },
    },
  };
script>

二、公众号直播对接

1、用户观看端集成

接口文档：https://open.talk-fun.com/docs/js/index.html

1.1、获取用户 access_token

用户要观看直播，必须获取对应的用户 access_token，通过 access_token 获取观看的直播课程；

接口参数：直播 id，用户 id。

（1）创建 LiveCourseApiController。

package com.myxh.smart.planet.live.api;

import com.alibaba.fastjson2.JSONObject;
import com.myxh.smart.planet.live.service.LiveCourseService;
import com.myxh.smart.planet.order.AuthContextHolder;
import com.myxh.smart.planet.result.Result;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author MYXH
 * @date 2023/10/28
 */
@Tag(name = "直播课程 API", description = "直播课程 API 接口")
@RestController
@RequestMapping("api/live/live/course")
public class LiveCourseApiController
{
    @Resource
    private LiveCourseService liveCourseService;

    /**
     * 获取用户 access_token
     *
     * @param id 直播课程 id
     * @return Result 全局统一返回结果
     */
    @Operation(summary = "获取用户 access_token", description = "获取用户 access_token")
    @GetMapping("get/play/auth/{id}")
    public Result<JSONObject> getPlayAuth(@PathVariable("id") Long id)
    {
        JSONObject accessToken = liveCourseService.getAccessToken(id, AuthContextHolder.getUserId());

        return Result.ok(accessToken);
    }
}

（2）LiveCourseService 添加方法。

package com.myxh.smart.planet.live.service;

import com.alibaba.fastjson2.JSONObject;
import com.baomidou.mybatisplus.extension.service.IService;
import com.myxh.smart.planet.model.live.LiveCourse;

/**
 * @author MYXH
 * @date 2023/10/26
 *
 * 
 * 直播课程 服务类
 * 
 */
public interface LiveCourseService extends IService<LiveCourse>
{
    /**
     * 获取用户 access_token
     *
     * @param id     id 直播课程 id
     * @param userId 用户 id
     * @return accessToken 访问令牌
     */
    JSONObject getAccessToken(Long id, Long userId);
}

（3）LiveCourseServiceImpl 实现方法。

package com.myxh.smart.planet.live.service.impl;

import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONObject;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.myxh.smart.planet.client.user.UserInfoFeignClient;
import com.myxh.smart.planet.exception.SmartPlanetException;
import com.myxh.smart.planet.live.mapper.LiveCourseMapper;
import com.myxh.smart.planet.live.mtcloud.CommonResult;
import com.myxh.smart.planet.live.mtcloud.MTCloud;
import com.myxh.smart.planet.live.service.LiveCourseService;
import com.myxh.smart.planet.model.live.LiveCourse;
import com.myxh.smart.planet.model.user.UserInfo;
import lombok.SneakyThrows;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;

/**
 * @author MYXH
 * @date 2023/10/26
 *
 * 
 * 直播课程 服务实现类
 * 
 */
@Service
public class LiveCourseServiceImpl extends ServiceImpl<LiveCourseMapper, LiveCourse> implements LiveCourseService
{
    @Autowired
    private UserInfoFeignClient userInfoFeignClient;

    @Autowired
    private MTCloud mtCloudClient;

    /**
     * 获取用户 access_token
     *
     * @param id     id 直播课程 id
     * @param userId 用户 id
     * @return accessToken 访问令牌
     */
    @SneakyThrows
    @Override
    public JSONObject getAccessToken(Long id, Long userId)
    {
        // 根据课程 id 获取直播课程信息
        LiveCourse liveCourse = baseMapper.selectById(id);

        // 根据用户 id 获取用户信息
        UserInfo userInfo = userInfoFeignClient.getUserInfoById(userId);

        // 封装需要的参数
        HashMap<Object, Object> options = new HashMap<>();
        String res = mtCloudClient.courseAccess(liveCourse.getCourseId().toString(),
                userId.toString(),
                userInfo.getNickName(),
                MTCloud.ROLE_USER,
                80 * 80 * 80,
                options);
        System.out.println("res = " + res);
        CommonResult<JSONObject> commonResult = JSON.parseObject(res, CommonResult.class);

        if (Integer.parseInt(commonResult.getCode()) == MTCloud.CODE_SUCCESS)
        {
            JSONObject accessToken = commonResult.getData();
            System.out.println("access_token = " + accessToken.getString("access_token"));

            return accessToken;
        }
        else
        {
            throw new SmartPlanetException(20001, "获取失败");
        }
    }
}

1.2、下载前端 SDK

下载地址：https://open.talk-fun.com/docs/js/download.html

1.3、使用快捷模板

下载模板，修改 token 获取方式。

var url = window.location.search;
var token = url.split("=")[1];

1.4、与前端项目结合

（1）创建直播播放页面 live.html。

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>TalkFun Vod QuickStart - v2title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-family: "Microsoft YaHei", "STHeiti";
      }

      .flash-wran {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        padding: 5px 0;
        text-align: center;
        background: #fff6a2;
        border: 1px solid #ffd913;
      }

      .flash-wran a {
        color: red;
      }

      .wrapper {
        display: flex;
        padding: 10px;
      }

      #cameraPlayer,
      #pptPlayer {
        height: auto;
        flex: 1;
        text-align: center;
        font-size: 12px;
        overflow: hidden;
      }

      #pptPlayer {
        height: 300px;
        width: 100%;
      }

      #modPptPlayer,
      #modCameraPlayer {
        margin-top: 10px;
        border: 1px solid #c7c7c7;
      }

      .chat-wrap {
        padding: 5px;
        margin: 10px;
        border: 2px solid #cccccc;
        background: #f1f1f1;
      }

      .mod-chat-list {
        margin: 20px 0;
        border: 1px solid #cccccc;
        min-height: 100px;
        font-size: 12px;
        background: #dedede;
        padding: 5px;
        max-height: 200px;
        overflow-y: scroll;
      }

      .mod-chat-list li {
        padding: 2px 0;
        margin-bottom: 5px;
        border-bottom: 1px dotted #cccccc;
      }

      input {
        display: inline-block;
        width: 200px;
        padding: 5px;
      }

      button {
        display: inline-block;
        padding: 5px;
        margin-left: 5px;
      }

      #toast {
        padding: 20px;
        position: fixed;
        z-index: 100;
        display: none;
        background: rgba(212, 28, 28, 0.8);
        left: 50%;
        top: 30%;
        border-radius: 50em;
        font-size: 14px;
        color: #ffffff;
        box-shadow: 0 0 6px 0px #bb2d2d;
      }

      #talkfun-video-wrap,
      #talkfun-camera-wrap {
        position: relative;
        background: #000;
      }
    style>
    
    
    <script
      type="text/javascript"
      src="https://static-1.talk-fun.com/open/TalkFun_SDK_Pack/v7.0/TalkFunWebSDK-7.7.min.js"
    >script>
  head>

  <body>
    
    <div class="wrapper">
      
      <div id="videoPlayer">
        <p id="loadplayer">p>
      div>
    div>

    <script>
      // [第一步] 如何获取 access_token => http://open.talk-fun.com/docs/getstartV2/access_token.html
      // [第二步] 根据Api文档方法 监听 / 调用方法 JS Api => http://open.talk-fun.com/docs/js/sdk.js.getstart.html
      var url = window.location.search;
      var token = url.split("=")[1];

      // 更多配置项 => https://open.talk-fun.com/docs/js/sdk.js.getstart.html?h=%E9%85%8D%E7%BD%AE%E9%A1%B9

      var HT = new MT.SDK.main(
        token,
        {
          config: {
            // Safari 浏览器建议设置为 HLS
            techOrder: "FLV",
          },
        },

        function (data) {
          console.warn("sdk 加载完成", data);
        }
      );

      // 连接状态
      HT.on("connect", function () {
        console.log("TalkFun 通信 => 连接成功...");
      });

      // 课件播放器
      HT.whiteboardPlayer("pptPlayer", "docPlayer", function (player) {
        console.log("课件播放器 => 初始化成功");
        document.querySelector("#loadplayer").innerHTML = "画板模块加载完成";
      });

      // 视频插播 | 桌面分享
      HT.videoPlayer("videoPlayer", "modVideoplayer", function (player) {
        console.log("视频播放器 => 初始化成功");
        document.querySelector("#loadplayer").innerHTML = "视频插播加载完成";
      });

      // 摄像头播放器
      HT.camera("cameraPlayer", "modCameraPlayer", function () {
        console.log("摄像头播放器 => 初始化成功");
        document.querySelector("#loadcam").innerHTML = "摄像头模块加载完成";
      });

      // 接收聊天
      var receivedChat = function (chat) {
        var tpl = chat.nickname + ": " + chat.msg;
        var chatItem = document.createElement("li");
        chatItem.innerHTML = tpl;
        chatItem.className = "chat-" + chat.xid;
        document.querySelector("#chat-list").appendChild(chatItem);
      };

      // 接收聊天信息
      HT.on("chat:send", function (chat) {
        receivedChat(chat);
      });

      // 发送聊天信息
      document.querySelector("#chatSubmit").addEventListener(
        "click",
        function () {
          var chatIpt = document.querySelector("#chatVal");
          var chatValue = chatIpt.value;

          HT.emit("chat:send", { msg: chatValue }, function (res) {
            // 发送成功
            if (Number(res.code) === 0) {
              receivedChat(res.data);
              chatIpt.value = "";
            }
            // 发送失败
            else {
              console.warn(res.msg);
            }
          });
        },

        false
      );

      // Flash 插件异常
      HT.on("flash:load:error", function (obj) {
        if (!obj.flash) {
          document.querySelector("#flashTip").style.display = "block";
        }
      });

      // 课程错误信息
      HT.on("live:course:access:error", function (res) {
        console.error("错误信息 ==>", res);
      });

      // 课程错误信息
      HT.on("system:room:error", function (res) {
        var toast = document.querySelector("#toast");

        if (typeof res === "string") {
          toast.innerHTML = res.msg;
        } else if (res.msg) {
          toast.innerHTML = res.msg;
        }

        toast.style.display = "block";
        var _left = toast.clientWidth / 2;
        toast.style.marginLeft = -_left + "px";
      });
    script>
  body>
html>

观众在直播详情页面点击观看，获取通过接口获取 access_token，然后带上 access_token 参数跳转到直播观看页面即可，关键代码：

liveInfo.vue

<template>
  <div>
    <head>
      
      <meta name="referrer" content="no-referrer" />
    head>

    <van-image
      width="100%"
      height="200"
      src="https://img-blog.csdnimg.cn/b9f45932f6cf471aa53ee24e5555d9c2.png"
    />

    <h1 class="van-ellipsis course_title">{{ liveCourse.courseName }}h1>

    <div class="course_teacher_price_box">
      <div class="course_teacher_price">
        <div class="course_price">直播时间：div>
        <div class="course_price_number">
          {{ liveCourse.param.startTimeString }}至{{
          liveCourse.param.endTimeString }}
        div>
      div>
    div>
    <div class="course_teacher_price_box">
      <div class="course_teacher_box">
        <div class="course_teacher">教师： {{ teacher.name }}div>
        <van-image :src="teacher.avatar" round width="50px" height="50px" />
      div>
    div>

    <div class="course_contents">
      <div class="course_title_font">课程详情div>
      <van-divider :style="{ margin: '5px 0 ' }" />
      <div class="course_content" v-html="description">div>
    div>

    <van-goods-action>
      <van-goods-action-button type="danger" text="直播中" @click="play" />
    van-goods-action>

    <van-loading vertical="true" v-show="loading">加载中...van-loading>
  div>
template>

<script>
  import liveAPI from "@/api/live";
  import shareAPI from "@/api/share";
  import wxShare from "@/utils/wxShare";

  export default {
    data() {
      return {
        loading: false,
        liveCourseId: null,
        liveCourse: { param: {} },
        description: "",
        teacher: {},
        liveStatus: 0,
        activeNames: ["1"],
      };
    },

    created() {
      this.liveCourseId = this.$route.params.liveCourseId;
      this.fetchData();
    },

    methods: {
      fetchData() {
        this.loading = true;
        liveAPI.getInfo(this.liveCourseId).then((response) => {
          console.log(response.data);
          this.liveCourse = response.data.liveCourse;
          this.description = response.data.description;
          this.teacher = response.data.teacher;
          this.liveStatus = response.data.liveStatus;
          this.loading = false;

          // 分享注册
          this.wxRegister();
        });
      },

      play() {
        liveAPI.getPlayAuth(this.liveCourseId).then((response) => {
          console.log(response.data);
          // this.$router.push({ path: '/live/online?token='+response.data.access_token })
          window.location = "./live.html?token=" + response.data.access_token;
          this.finished = true;
        });
      },

      wxRegister() {
        // 说明：后台加密 url 必须与当前页面 url 一致
        let url = window.location.href.replace("#", "smartplanet");
        shareAPI.getSignature(url).then((response) => {
          console.log(response.data);

          // 记录分享用户
          let link = "";

          if (window.location.href.indexOf("?") != -1) {
            link =
              window.location.href + "&recommend=" + response.data.userEedId;
          } else {
            link =
              window.location.href + "?recommend=" + response.data.userEedId;
          }

          let option = {
            title: this.liveCourse.courseName,
            desc: this.description,
            link: link,
            imgUrl: this.liveCourse.cover,
          };

          wxShare.wxRegister(response.data, option);
        });
      },
    },
  };
script>

<style lang="scss" scoped>
  .gap {
    height: 10px;
  }
  ::v-deep.van-image {
    display: block;
  }
  .course_count {
    background-color: #82848a;
    color: white;
    padding: 5px;
    text-align: center;
    border-right: 1px solid #939393;
    h1 {
      font-size: 14px;
      margin: 0;
    }
    p {
      margin: 0;
      font-size: 16px;
    }
  }

  .course_title {
    font-size: 20px;
    margin: 10px;
  }

  .course_teacher_price_box {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .course_teacher_price {
      display: flex;
      font-size: 14px;
      align-items: center;
      .course_price_number {
        color: red;
        font-size: 18px;
        font-weight: bold;
      }

      .course_teacher {
        margin-left: 20px;
      }
    }
    .course_teacher_box {
      display: flex;
      justify-content: center;
      align-items: center;

      .course_teacher {
        margin-right: 20px;
      }
    }
  }

  .course_contents {
    margin: 10px;
    .course_title_font {
      color: #68cb9b;
      font-weight: bold;
    }
    .course_content {
      margin-bottom: 20px;
    }
  }

  .course_chapter_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 14px;
    }
    p {
      margin: 0;
    }
  }
style>

http://localhost:8080/live.html 为直播观看访问方式。

1.5、补充接口

（1）LiveCourseApiController 类。

package com.myxh.smart.planet.live.api;

import com.myxh.smart.planet.live.service.LiveCourseService;
import com.myxh.smart.planet.result.Result;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.Parameter;
import io.swagger.v3.oas.annotations.tags.Tag;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**
 * @author MYXH
 * @date 2023/10/28
 */
@Tag(name = "直播课程 API", description = "直播课程 API 接口")
@RestController
@RequestMapping("api/live/live/course")
public class LiveCourseApiController
{
    @Resource
    private LiveCourseService liveCourseService;

    /**
     * 根据直播课程 id 查询直播课程信息
     *
     * @param liveCourseId 直播课程 id
     * @return Result 全局统一返回结果
     */
    @Operation(summary = "根据直播课程 id 查询直播课程信息", description = "根据直播课程 id 查询直播课程信息")
    @GetMapping("get/info/{liveCourseId}")
    public Result<Map<String, Object>> getInfo(@Parameter(name = "liveCourseId", description = "直播课程 ID", required = true)
                                               @PathVariable("liveCourseId") Long liveCourseId)
    {
        Map<String, Object> liveCourseInfo = liveCourseService.getInfoById(liveCourseId);

        return Result.ok(liveCourseInfo);
    }
}

（2）LiveCourseServiceImpl 实现。

package com.myxh.smart.planet.live.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.myxh.smart.planet.client.course.CourseFeignClient;
import com.myxh.smart.planet.live.mapper.LiveCourseMapper;
import com.myxh.smart.planet.live.service.LiveCourseDescriptionService;
import com.myxh.smart.planet.live.service.LiveCourseService;
import com.myxh.smart.planet.model.live.LiveCourse;
import com.myxh.smart.planet.model.live.LiveCourseDescription;
import com.myxh.smart.planet.model.vod.Teacher;
import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

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

/**
 * @author MYXH
 * @date 2023/10/26
 *
 * 
 * 直播课程 服务实现类
 * 
 */
@Service
public class LiveCourseServiceImpl extends ServiceImpl<LiveCourseMapper, LiveCourse> implements LiveCourseService
{
    @Autowired
    private CourseFeignClient teacherFeignClient;

    @Autowired
    private LiveCourseDescriptionService liveCourseDescriptionService;

    /**
     * 根据直播课程 id 查询直播课程信息
     *
     * @param liveCourseId 直播课程 id
     * @return liveCourseInfo 直播课程信息
     */
    @Override
    public Map<String, Object> getInfoById(Long liveCourseId)
    {
        LiveCourse liveCourse = this.getById(liveCourseId);
        liveCourse.getParam().put("startTimeString", new DateTime(liveCourse.getStartTime()).toString("yyyy年MM月dd HH:mm"));
        liveCourse.getParam().put("endTimeString", new DateTime(liveCourse.getEndTime()).toString("yyyy年MM月dd HH:mm"));
        Teacher teacher = teacherFeignClient.getTeacherLive(liveCourse.getTeacherId());
        LiveCourseDescription liveCourseDescription = liveCourseDescriptionService.getLiveCourseDescriptionByLiveCourseId(liveCourseId);
        Map<String, Object> liveCourseInfo = new HashMap<>();
        liveCourseInfo.put("liveCourse", liveCourse);
        liveCourseInfo.put("liveStatus", this.getLiveStatus(liveCourse));
        liveCourseInfo.put("teacher", teacher);

        if (liveCourseDescription != null)
        {
            liveCourseInfo.put("description", liveCourseDescription.getDescription());
        }
        else
        {
            liveCourseInfo.put("description", "");
        }

        return liveCourseInfo;
    }
}

三、微信分享

1、实现目标

1、点播课程详情页面分享。

2、微信分享实现方式

参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

2.1、绑定域名

先登录微信公众平台进入“设置与开发”，“公众号设置”的“功能设置”里填写“JS 接口安全域名”。

说明：本地测试设置内网穿透地址。

2.2、公众号测试号配置

2.3、引入 JS 文件

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
    />
    <title>智慧星球title>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />

    <script
      src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"
      type="text/javascript"
    >script>

    
    <link
      href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.min.css"
      rel="stylesheet"
    />

    
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/hls.min.1.1.6.js">script>

    
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/flv.min.1.6.3.js">script>

    
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js">script>

    
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js">script>
  head>

  <body>
    <script
      type="text/javascript"
      src="https://static-1.talk-fun.com/open/TalkFun_SDK_Pack/v7.0/TalkFunWebSDK-7.7.min.js"
    >script>

    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.strong
      >
    noscript>
    <div id="app">div>
    
  body>
html>

引入前端项目/public/index.html 文件。

2.4、封装分享 js

参考官方文档封装接口。

需要分享的页面有直播详情页、点播课程详情页等，因此把分享代码封装后，在对应的页面直接引入与调用即可。

新建 src/util/wxShare.js 文件。

/**
 * 微信 js-sdk
 * 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
const wxShare = {
  /**
   * [wxRegister 微信 Api 初始化]
   * @param  {Function} callback [ready 回调函数]
   */
  wxRegister(data, option) {
    // data 是微信配置信息，option 是分享的配置内容

    wx.config({
      // 开启调试模式
      debug: false,
      // 必填，公众号的唯一标识
      appId: data.appId,
      // 必填，生成签名的时间戳
      timestamp: data.timestamp,
      // 必填，生成签名的随机串
      nonceStr: data.nonceStr,
      // 必填，签名，见附录 1
      signature: data.signature,
      // 必填，需要使用的 JS 接口列表，所有 JS 接口列表见附录 2
      jsApiList: ["onMenuShareAppMessage"],
    });

    wx.ready(function () {
      wx.onMenuShareAppMessage({
        // 分享标题
        title: option.title,
        // 分享描述
        desc: option.desc,
        // 分享链接
        link: option.link,
        // 分享图标
        imgUrl: option.imgUrl,
        success() {
          // 用户成功分享后执行的回调函数
          //  option.success()
          console.log("ok");
        },
        cancel() {
          // 用户取消分享后执行的回调函数
          // option.error()
          console.log("cancel");
        },
      });
    });

    wx.error(function (res) {
      // config 信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的 debug 模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
      alert("error:" + JSON.stringify(res));
    });
  },
};

export default wxShare;

2.5、服务器端接口

新增 ShareController 类。

说明：微信分享要对当前 url 加密处理，由于 url 路由都是带“#”符号，服务器端接收不到，因此通过“smartplanet”单词代替了“#”。

package com.myxh.smart.planet.wechat.controller;

import com.myxh.smart.planet.order.AuthContextHolder;
import com.myxh.smart.planet.order.Base64Util;
import com.myxh.smart.planet.result.Result;
import com.myxh.smart.planet.vo.wechat.WeChatJsapiSignatureVo;
import lombok.extern.slf4j.Slf4j;
import me.chanjar.weixin.common.bean.WxJsapiSignature;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author MYXH
 * @date 2023/10/28
 */
@RestController
@RequestMapping("/api/wechat/share")
@Slf4j
public class ShareController
{
    @Autowired
    private WxMpService wxMpService;

    /**
     *  获取签名
     *
     * @param url url
     * @return Result 全局统一返回结果
     * @throws WxErrorException 微信错误异常
     */
    @GetMapping("/get/signature")
    public Result<WeChatJsapiSignatureVo> getSignature(@RequestParam("url") String url) throws WxErrorException
    {
        String currentUrl = url.replace("smartplanet", "#");
        WxJsapiSignature jsapiSignature = wxMpService.createJsapiSignature(currentUrl);
        WeChatJsapiSignatureVo wxJsapiSignatureVo = new WeChatJsapiSignatureVo();
        BeanUtils.copyProperties(jsapiSignature, wxJsapiSignatureVo);
        wxJsapiSignatureVo.setUserEedId(Base64Util.base64Encode(AuthContextHolder.getUserId() + ""));

        return Result.ok(wxJsapiSignatureVo);
    }
}

2.6、点播课程详情分享

页面：courseInfo.vue。

（1）引入分享。

import shareAPI from "@/api/share";
import wxShare from "@/utils/wxShare";

（2）代码实现。

关键代码。

<template>
  <div>
    <van-image width="100%" height="200" :src="courseVo.cover" />
    <van-row>
      <van-col span="8">
        <div class="course_count">
          <h1>购买数h1>
          <p>{{ courseVo.buyCount }}p>
        div>
      van-col>
      <van-col span="8">
        <div class="course_count">
          <h1>课时数h1>
          <p>{{ courseVo.lessonNum }}p>
        div>
      van-col>
      <van-col span="8">
        <div class="course_count">
          <h1>浏览数h1>
          <p>{{ courseVo.viewCount }}p>
        div>
      van-col>
    van-row>

    <h1 class="van-ellipsis course_title">{{ courseVo.title }}h1>

    <div class="course_teacher_price_box">
      <div class="course_teacher_price">
        <div class="course_price">价格：div>
        <div class="course_price_number">￥{{ courseVo.price }}div>
      div>
      <div>
        <van-button
          @click="see()"
          v-if="isBuy || courseVo.price == '0.00'"
          plain
          type="warning"
          size="mini"
          >立即观看van-button
        >
        <van-button @click="buy" v-else plain type="warning" size="mini"
          >立即购买van-button
        >
      div>
    div>
    <div class="course_teacher_price_box">
      <div class="course_teacher_box">
        <div class="course_teacher">教师： {{ teacher.name }}div>
        <van-image :src="teacher.avatar" round width="50px" height="50px" />
      div>
    div>

    <div class="course_contents">
      <div class="course_title_font">课程详情div>
      <van-divider :style="{ margin: '5px 0 ' }" />
      <div class="course_content" v-html="description">div>

      <div class="course_title_font">课程大纲div>
      <div class="gap">div>
      <van-collapse v-model="activeNames">
        <van-collapse-item
          :title="item.title"
          :name="item.id"
          v-for="item in chapterVoList"
          :key="item.id"
        >
          <ul
            class="course_chapter_list"
            v-for="child in item.children"
            :key="child.id"
          >
            <h2>{{ child.title }}h2>
            <p v-if="child.isFree == 1">
              <van-button @click="play(child)" type="warning" size="mini" plain
                >免费观看van-button
              >
            p>
            <p v-else>
              <van-button @click="play(child)" type="warning" size="mini" plain
                >观看van-button
              >
            p>
          ul>
        van-collapse-item>
      van-collapse>
    div>
    <van-loading vertical="true" v-show="loading">加载中...van-loading>
  div>
template>

<script>
  import courseAPI from "@/api/course";
  import shareAPI from "@/api/share";
  import wxShare from "@/utils/wxShare";

  export default {
    data() {
      return {
        loading: false,
        courseId: null,
        courseVo: {},
        description: "",
        teacher: {},
        chapterVoList: [],
        isBuy: false,
        activeNames: ["1"],
      };
    },

    created() {
      this.courseId = this.$route.params.courseId;
      this.fetchData();
    },

    methods: {
      fetchData() {
        this.loading = true;
        courseAPI.getInfo(this.courseId).then((response) => {
          console.log(response.data);
          this.courseVo = response.data.courseVo;
          this.description = response.data.description;
          this.isBuy = response.data.isBuy;
          this.chapterVoList = response.data.chapterVoList;
          this.teacher = response.data.teacher;
          this.loading = false;

          // 分享注册
          this.wxRegister();
        });
      },

      buy() {
        this.$router.push({ path: "/trade/" + this.courseId });
      },

      play(video) {
        let videoId = video.id;
        let isFree = video.isFree;

        if (isFree === 1 || this.isBuy || this.courseVo.price == "0.00") {
          this.$router.push({ path: "/play/" + this.courseId + "/" + videoId });
        } else {
          // this.$router.push({ path: "/play/" + this.courseId + "/" + videoId });

          if (window.confirm("购买了才可以观看, 是否继续？")) {
            this.buy();
          }
        }
      },

      see() {
        this.$router.push({ path: "/play/" + this.courseId + "/0" });
      },

      wxRegister() {
        // 说明：后台加密 url 必须与当前页面 url 一致
        let url = window.location.href.replace("#", "smartplanet");
        shareAPI.getSignature(url).then((response) => {
          console.log(response.data);
          // 记录分享用户
          let link = "";

          if (window.location.href.indexOf("?") != -1) {
            link =
              window.location.href + "&recommend=" + response.data.userEedId;
          } else {
            link =
              window.location.href + "?recommend=" + response.data.userEedId;
          }

          let option = {
            title: this.courseVo.title,
            desc: this.description,
            link: link,
            imgUrl: this.courseVo.cover,
          };

          wxShare.wxRegister(response.data, option);
        });
      },
    },
  };
script>

<style lang="scss" scoped>
  .gap {
    height: 10px;
  }
  ::v-deep.van-image {
    display: block;
  }
  .course_count {
    background-color: #82848a;
    color: white;
    padding: 5px;
    text-align: center;
    border-right: 1px solid #939393;
    h1 {
      font-size: 14px;
      margin: 0;
    }
    p {
      margin: 0;
      font-size: 16px;
    }
  }

  .course_title {
    font-size: 20px;
    margin: 10px;
  }

  .course_teacher_price_box {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .course_teacher_price {
      display: flex;
      font-size: 14px;
      align-items: center;
      .course_price_number {
        color: red;
        font-size: 18px;
        font-weight: bold;
      }

      .course_teacher {
        margin-left: 20px;
      }
    }
    .course_teacher_box {
      display: flex;
      justify-content: center;
      align-items: center;

      .course_teacher {
        margin-right: 20px;
      }
    }
  }

  .course_contents {
    margin: 10px;
    .course_title_font {
      color: #68cb9b;
      font-weight: bold;
    }
    .course_content {
      margin-bottom: 20px;
    }
  }

  .course_chapter_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 14px;
    }
    p {
      margin: 0;
    }
  }
style>

2.7、测试

（1）使用手机测试，其他端测试可能会出现错误问题。

Day 16-腾讯云部署

一、项目部署方案

1、原始部署方式

2、整合 Jenkins

完整 DevOps 示例如下：

3、整合 CODING

整合 CODING 实现 DevOps：

https://console.cloud.tencent.com/coding/container-devops

二、腾讯云 CODING DevOps 概述

腾讯云使用文档：

https://help.coding.net/docs/start/new.html

1、产品简介

DevOps 是 Development 和 Operations 的组合词，代表着重视「软件开发人员(Dev)」和「IT 运维技术人员(Ops)」之间沟通合作的文化；旨在透过自动化「软件交付」和「架构变更」的流程，使得构建、测试、发布软件的过程能够更加地快捷、频繁和可靠。Gartner 咨询公司认为 DevOps 代表了 IT 文化的变化趋势。

1.1、CODING DevOps 是什么

CODING DevOps 是面向软件研发团队的一站式研发协作管理平台，提供从需求到设计、开发、构建、测试、发布到部署的全流程协同及研发工具支撑。CODING 解决方案可助力企业实现代码的统一安全管控，并快速实践敏捷开发与 DevOps，提升软件交付质量与速度，降低企业研发成本，实现研发效能升级。

1.2、CODING DevOps 优势

一站式协作平台及研发工具链，提升研发效能。

CODING 与云端优势相结合，依托业界敏捷项目管理与 DevOps 体系方法融入到产品中，打通研发过程中的工具链孤岛及协作壁垒，覆盖敏捷开发全生命周期，帮助团队实现需求、迭代、开发、测试、持续集成、持续部署全方位研发管理，提升软件研发效能。
支持双态研发体系建设，满足多样化业务需求。

CODING 适用于不同规模的开发团队以及不同类型的软件开发模式（如瀑布模型、敏捷模型），满足多业务场景的协作需求。
项目工作流和度量数据可视化，项目管理更轻松。

CODING 提供可视化看板，支持对代码、项目进度、人员工作量等不同维度输出详尽的数据报告，为团队管理者提供决策依据，调整项目计划和合理安排研发人力。
丰富的扩展能力，无缝集成第三方平台。

CODING 支持无缝集成 GitHub、GitLab 等第三方代码库及各类常见的运维系统和云原生环境，让用户实现跨平台的无缝迁移。

1.3、CODING DevOps 功能特性

CODING DevOps 平台主要提供以下功能特性：

团队级功能：

团队管理：团队管理员通过可视化的仪表盘可以快速掌握团队成员工作数据、监控项目运行状态；通过团队目标助力团队成员聚焦组织目标，全方位协同执行，凝聚团队战斗力，让战略坚实落地；利用工作负载统一查看对比成员的工作量和工作安排；利用研发度量统计并分析团队成员在一段时间内的事项分布、事项概览、代码分布等数据，度量团队成员在周期内完成工作量与工作动态。

项目级功能：

项目协同：软件开发团队可自由选择适合的研发管理模式，支持多项目管理、敏捷迭代管理、需求管理、缺陷跟踪、多维度报表数据等功能。
代码仓库：提供企业级的 Git/SVN 代码管理服务，支持精细化权限管控、多分支并行开发、多版本管理等功能。
代码扫描：提供针对不同编程语言的代码扫描方案，支持对扫描规则、度量规则等进行自定义配置。根据代码扫描测试结果，开发人员可及时发现代码缺陷并作出修正，有效管控代码质量。
持续集成：提供基于云端的自动化代码构建、测试、分析和部署工作流服务，支持通过模板快速创建构建任务并进行可视化编排，极大提高软件开发团队的构建效率。
持续部署：提供全自动化软件部署，可持续、可控地把软件制品在线发布到服务集群中，支持蓝绿分发布、灰度发布（金丝雀发布）等多种发布策略。
制品管理：提供云端构建产物管理服务，支持云端构建和本地构建推送，可快速索引存档构建物、进行版本控制。
测试管理：提供面向敏捷团队的测试一站式云端测试平台，支持可视化的测试规划和多维度的测试报告，满足敏捷团队对测试过程的多样化需求。
文档管理：提供灵活易用的文档管理服务，可用于记录整个项目的来龙去脉，展示当前项目状态，也可让项目成员更好地进行文档书写及协作。

2、使用流程概述

以下流程图展示了 CODING DevOps 软件开发平台的基本操作流程，您可以按照实际需求有选择性阅读。

2.1、创建或加入团队

如要开始使用 CODING DevOps，您需要先注册创建或接受邀请后加入一个团队。

2.2、新建项目

加入团队之后，您可以在团队内创建项目或受他人邀请加入别的项目。“项目”是核心单元，几乎大部分工作都需要在项目中展开。

2.3、开始项目协同

项目创建之后，项目经理、开发、测试等不同的项目角色可通过项目协同实现简单高效的项目协作，包含迭代管理、需求管理、任务管理等。

2.4、使用代码仓库

完成项目规划之后，可利用代码仓库管理项目代码。该功能提供企业级的基于 Git 的云端代码管理服务，支持精细化权限管控、多分支并行开发、多版本管理等功能。

2.5、启动代码扫描

对于使用 CODING 代码仓库管理的代码，开发者可使用代码扫描功能进行代码检查，以便及时发现代码缺陷并作出修正，有效管控代码质量。

2.6、编译构建

项目代码开发完成之后，可通过持续集成功能快速创建构建任务，将项目代码编译打包成软件包。

2.7、管理制品

在您将项目代码构建好之后，可以使用制品管理功能管理构建产物。CODING 支持多种制品库类型，包括 Docker、Maven、Helm 和 npm。

2.8、实施持续部署

当您的项目代码已经完成构建，可使用持续部署把控构建之后的项目发布与部署到生产环境中去。

2.9、管理测试用例

当您在 CODING 平台创建项目之后，您可以使用面向敏捷团队的测试管理功能来管理项目内的测试活动，确保产品的高质量交付。

2.10、管理项目文档

在项目进行中，必然会产生大量的信息，并且需要对这些信息进行记录、传递、分享。文档管理功能提供灵活易用的文档管理服务，可用于记录整个项目的来龙去脉。

三、开通 CODING DevOps

1、搜索 CODING DevOps

（1）腾讯云搜索 CODING-DevOps。

（2）进入界面。

2、开通账号

（1）第一次进入没有账号，去开通。

（2）产品授权。

（3）输入信息，邮箱验证。

3、创建团队

（1）输入团队名称提交。

（2）开通成功。

（3）点击立即使用，进入。

（4）进入工作台。

四、使用 CODING DevOps

1、创建项目

在 CODING DevOps 平台建立团队之后，团队内成员可按需创建项目。只有项目创建之后，项目成员才能按需使用项目协同、代码仓库、持续集成、持续部署等功能。

1.1、点击创建项目

1.2、选择项目模板

1.3、填写项目基本信息

1.4、完成创建

2、项目协同

2.1、项目协同初始化

（1）前往初始化。

（2）配置并开启项目协同。

选择经典项目管理。

2.2、项目协同具体实现

（1）点击右上角创建迭代。

（2）填写迭代信息。

（3）点击创建并规划，创建需求。

（4）点击查看详情。

（5）设置迭代详情信息。

（6）效果。

3、代码仓库

3.1、添加仓库

（1）填写仓库信息。

（2）克隆仓库。

点击克隆。

3.2、克隆代码仓库到本地

（1）在 Git 客户端中输入克隆命令。

git clone <您克隆的代码仓库地址>

首次拉取后会提示填写凭据，此处填写在注册 CODING 时所使用的邮箱与密码即可。

命令操作提示成功之后，你可以在本地代码仓库中进行代码修改。

3.3、推送本地代码至 CODING 仓库

（1）在 Git 客户端，运行以下三条命令将代码推送到 CODING 平台上的代码仓库。

git add .
git commit -m "<您对本次提交备注的信息>"
git push git仓库地址

（2）创建提交文件。

（3）进入 cmd 窗口执行。

（4）查看所有的提交记录。

3.4、推送项目到代码仓库

（1）复制两个文件到项目目录。

（2）项目路径 cmd 窗口执行。

（3）查看效果。

4、持续集成

4.1、创建构建计划

4.2、选择类型

4.3、设置构建信息

4.4、修改流程配置

根据具体需要，自定义执行流程。

4.5、立即构建

4.6、构建完成

5、持续部署（绑定云账号）

5.1、输入账号名称

5.2、创建集群，开放外网 ip

（1）创建集群。

在容器服务中创建集群。

（2）开放外网。

5.3、复制凭证

（1）复制集群凭证。

（2）复制到云账户。

6、持续部署（Kubernetes）

6.1、创建部署

6.2、集群配置

6.2.1、集群配置

6.2.2、镜像配置

1、选择示例镜像用于测试使用。

2、可以选择 CODING Docker 仓库里面自己创建的镜像。

6.2.3、应用部署

6.3、等待发布

6.4、获取发布地址

6.5、访问测试

7、持续部署（腾讯云弹性伸缩）

7.1、创建应用

（1）在部署控制台创建应用，选择腾讯云弹性伸缩。

7.2、创建流程

（1）点击创建流程。

（2）选择流程。

（3）修改流程内容。

7.3、启动执行

7.4、集群查看

（1）执行成功后，集群中查看。

你可能感兴趣的:(项目笔记,Spring,Cloud,Spring,Boot)

SpringBlade dict-biz/list 接口 SQL 注入漏洞文章永久免费只为良心 oracle 数据库
SpringBladedict-biz/list接口SQL注入漏洞POC:构造请求包查看返回包你的网址/api/blade-system/dict-biz/list?updatexml(1,concat(0x7e,md5(1),0x7e),1)=1漏洞概述在SpringBlade框架中，如果dict-biz/list接口的后台处理逻辑没有正确地对用户输入进行过滤或参数化查询（PreparedSta
spring如何整合druid连接池？惜.己 spring spring junit 数据库 java idea 后端 xml
目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
SpringCloudAlibaba—Sentinel(限流) 菜鸟爪哇
前言：自己在学习过程的记录，借鉴别人文章，记录自己实现的步骤。借鉴文章：https://blog.csdn.net/u014494148/article/details/105484410Sentinel介绍Sentinel诞生于阿里巴巴，其主要目标是流量控制和服务熔断。Sentinel是通过限制并发线程的数量（即信号隔离）来减少不稳定资源的影响，而不是使用线程池，省去了线程切换的性能开销。当资源
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Spring MVC 全面指南：从入门到精通的详细解析一杯梅子酱技术栈学习 spring mvc java
引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
Spring Boot中实现跨域请求 BABA8891 spring boot 后端 java
在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
RabbitMQ生产者重复机制与确认机制 java炒饭小能手 java-rabbitmq rabbitmq java
重复机制生产者发送消息时，出现了网络故障，导致与MQ的连接中断。为了解决这个问题，SpringAMQP提供的消息发送时的重试机制。即：当RabbitTemplate与MQ连接超时后，多次重试。需要修该发送端模块的application.yaml文件，添加下面的内容：spring:rabbitmq:connection-timeout:1s#设置MQ的连接超时时间template:retry:ena
非对称加密算法————RSA理论及详情 hu19930613
转自：https://www.kancloud.cn/kancloud/rsa_algorithm/48484一、一点历史1976年以前，所有的加密方法都是同一种模式：（1）甲方选择某一种加密规则，对信息进行加密；（2）乙方使用同一种规则，对信息进行解密。由于加密和解密使用同样规则（简称"密钥"），这被称为"对称加密算法"（Symmetric-keyalgorithm）。这种加密模式有一个最大弱点
加载资源时报错-ERR_CONNECTION_RESET，需要多次请求才能拿到资源的有效解决方案 Mebius1916 前端开发前端 javascript react.js 前端框架 typescript vue.js
初次加载资源时无法正常加载，需要多次刷新、请求才能拿到资源的有效解决方案前言在使用cloudinary进行图片上传并获取图片链接作为用户头像时发现，图片链接网址初次加载会报错：ERR_CONNECTION_RESET必须刷新几次才能获取到，原因可能是cloudinary没有国内的节点，而我用的是在新加坡的节点，所以会导致初次加载的时候被重定向。而这个错误会直接导致用户头像无法加载，因为在img中此
【Java】已解决：org.springframework.jdbc.datasource.lookup.DataSourceLookupFailureException 屿小夏 java 开发语言
文章目录一、分析问题背景问题背景描述出现问题的场景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：org.springframework.jdbc.datasource.lookup.DataSourceLookupFailureException在使用Spring框架进行开发时，数据源的配置和使用是非常关键的一环。然而，有时候我们可能会遇到org.springframewo
SpringBoot和SpringMVC是什么关系?SpringBoot替代SpringMVC了吗? 瑞金彭于晏 spring boot 后端 java MVC spring 数据库
SpringBoot和SpringMVC都是SpringFramework生态系统中的一部分，但它们各自扮演着不同的角色和提供不同的功能集。理解它们之间的关系，首先需要了解SpringFramework本身。SpringFrameworkSpringFramework是一个全面的、开源的应用程序开发框架，它提供了广泛的功能来支持企业应用开发的几乎所有方面。SpringFramework的核心特性之
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
Java -jar 如何在后台运行项目 vincent_hahaha
撸了今年阿里、头条和美团的面试，我有一个重要发现.......>>>说到运行jar包通常我们都会以下面的方式运行:java-jarspringboot-0.0.1-SNAPSHOT.jar这样运行的话会有一个问题，就是我们一关闭当前窗口就会停止运行项目，要想解决这个问题，就需要在后台运行。nohupjava-jarbabyshark-0.0.1-SNAPSHOT.jar >log.file 2>&
spring security中几大组件的作用和执行顺序阿信在这里 java spring
springsecurity中几大组件的作用和执行顺序在SpringSecurity中，AuthenticationProvider、GroupPermissionEvaluator、PermissionEvaluator、AbstractAuthenticationProcessingFilter、DefaultMethodSecurityExpressionHandler和ManageSecu
探索Zebra4J：构建高效企业级Web应用的微服务框架叶准鑫Natalie
探索Zebra4J：构建高效企业级Web应用的微服务框架ZebraZebra4J/Zebra4Js基于SpringBoot的JavaWeb/Nodejs框架项目地址:https://gitcode.com/gh_mirrors/zebra/Zebra项目介绍在当今快速发展的技术环境中，构建高效、可扩展的企业级Web应用是每个开发团队的追求。Zebra4J作为一款基于SpringBoot的全新微服务
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台网顺技术团队成品程序项目 java vue.js 汽车课程设计 spring boot
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
如何重启Linux服务器？老男孩IT教育 git linux 运维
在Linux操作系统中，提供了多种方法用于重启服务器，那么Linux服务器如何重启?以下列举了常用的几种方法，希望对大家有所帮助，快来看看吧。重启Linux服务器有以下几种方法：1、使用命令行使用reboot命令reboot使用shutdown命令shutdown-rnow2、使用systemctl使用以下命令：systemctlreboot3、使用web界面大多数现代Linux发行版本都提供一个
Java面试笔记记录6 今天背八股了吗 java 面试笔记
1.Spring是什么？特性？有哪些模块？Spring是一个轻量级、非入侵式的控制反转Ioc和面向切面AOP的框架。特性：1.Ioc和DISpring的核心就是一个大的工厂容器，可以维护所有对象的创建和依赖关系，Spring工厂用于生成Bean，并且管理Bean的生命周期，实现高内聚低耦合的设计理念。2.AOP编程Spring提供面向切面编程，可以方便实现对程序进行权限拦截、运行监控等切面功能。3
小米嵌入式面试题目RTOS面试题目嵌入式面试题目好家伙VCC 面试杂谈杂谈面试职场和发展
第一章-非RTOSbootloader工作流程MCU启动流程通信协议，SPIIICMCU怎么选型，STM32F1和F4有什么区别外部RAM和内部RAM区别，怎么分配外部总线和内部总线区别MCU上的固件，数据是怎么分配的MCU启动流程IAP是怎么升级的，突然断电怎么办挑了麦轮项目（因为大疆RM也是麦轮，面试官看样子比较感兴趣）为什么用的CAN总线你说一下spi和i2c和UART的各自的工作方式优缺点
Sentinel 眼泪落在琴弦 springcloud java java
Sentinel（服务熔断降级限流）1.引入spring-cloud-starter-alibaba-sentinel2.下载sentinel服务器3.配置application地址信息4.在控制台调整参数【默认所以流控设置保存在内存中，重启失效】5.想实时监控需每个微服务导入actuator，并配置application暴露所有端口6.自定义sentinel流控返回数据7.配置sentinel类
Spring @Async 深度解读：默认线程池执行器的配置与优化小码快撩 spring java 前端
在Spring中，@Async注解用于异步执行方法。默认情况下，@Async注解的任务是由一个线程池执行的。然而，这个默认的线程池是如何初始化的呢？本文将深入探讨这一过程，帮助你理解Spring异步任务背后的线程池执行器的初始化原理。1.@Async的基本使用首先，让我们快速回顾一下@Async的基本用法。@Async通常用于标注在需要异步执行的方法上，比如：@Servicepublicclass
Sentinel实时监控不展示问题朱杰jjj sentinel sentinel
问题官方插件Endpoint支持，可以实时统计出SpringBoot的健康状况和请求的调用信息在使用Endpoint特性之前需要在Maven中添加spring-boot-starter-actuator依赖，并在配置中允许Endpoints的访问。SpringBoot1.x中添加配置management.security.enabled=false。暴露的endpoint路径为/sentinelS
36. MyBatis如何支持多数据库操作？如何配置不同的数据源？这孩子叫逆 Mybatis笔记 mybatis 数据库
在许多企业级应用中，可能需要访问多个数据库。MyBatis可以通过配置多个数据源和动态切换数据源来支持多数据库操作。下面介绍如何在MyBatis中配置和使用多个数据源。1.多数据源的基本配置1.1配置多个数据源要支持多个数据源，首先需要在Spring或SpringBoot中配置不同的数据源。假设我们要连接两个数据库db1和db2，可以通过以下步骤进行配置。SpringBoot示例：applicat
Cloud Native Weekly | 华为云抢先发布Redis5.0，红帽宣布收购混合云提供商 weixin_34302561 数据库 devops 大数据
1——华为云抢先发布Redis5.02——DigitalOceanK8s服务正式上线3——红帽宣布收购混合云提供商NooBaa4——微软发布多项AzureKubernetes服务更新1华为云抢先发布Redis5.012月17日，华为云在DCS2.0的基础上，快人一步，抢先推出了新的Redis5.0产品，这是一个崭新的突破。目前国内在缓存领域的发展普遍停留在Redis4.0阶段，华为云率先发布了Re
Halo 开发者指南——容器私有化部署 SHENHUANJIE Docker Halo 华为云 SWR Registry
华为云SWR私有化部署镜像构建dockerbuild-thalo-dev/halo:2.20.0.上传镜像镜像标签sudodockertag{镜像名称}:{版本名称}swr.cn-south-1.myhuaweicloud.com/{组织名称}/{镜像名称}:{版本名称}sudodockertaghalo-dev/halo:2.20.0swr.cn-south-1.myhuaweicloud.co
SpringBoot整合ES搜索引擎实现网站热搜词及热度计算码踏云端 springboot Elasticsearch spring boot elasticsearch 后端热搜词热度计算 java
博主简介：历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s，热衷于探索科技的边界，并将理论知识转化为实际应用。保持对新技术的好奇心，乐于
Spring Security静态资源过滤（11）小黑屋说YYDS spring
在一个实际项目中，并非所有的请求都需要经过SpringSecurity过滤器，有一些特殊的请求，例如静态资源等，一般来说并不需要经过SpringSecurity过滤器链，用户如果访问这些静态资源，直接返回对应的资源即可。回顾关于WebSecurity的讲解，提到它里边维护了一个ignoredRequests变量,该变量，记录的就是所有需要被忽略的请求，这些被忽略的请求将不再经过SpringSecu
Spring Security定义多个过滤器链（10）小黑屋说YYDS spring
在SpringSecurity中可以同时存在多个过滤器链，一个WebSecurityConfigurerAdapter的实例就可以配置一条过滤器链。我们来看如下一个案例：@ConfigurationpublicclassSecurityConfig{@BeanUserDetailsServiceus(){InMemoryUserDetailsManagerusers=newInMemoryUser
Linux的Initrd机制被触发 linux
Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
maven本地仓库路径修改 bitcarter maven
默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法： 1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml 2.找到
XSD和XML中的命名空间 darrenzhu xml xsd schema namespace 命名空间
http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
Java 求素数运算周凡杨 java 算法素数
网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：原理: 6N(+-)1法任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)
java 单例模式 g21121 java
想必单例模式大家都不会陌生，有如下两种方式来实现单例模式： class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
Linux下Mysql源码安装 510888780 mysql
1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录解压缩下载的源码包，目录结构，特殊指定的目录除外：
32位和64位操作系统墙头上一根草 32位和64位操作系统
32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
一、问题提问： → 请简单介绍一下什么是轻量级？轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。
mongodb 环境搭建及简单CURD antlove Web Install curd NoSQL mongo
一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
数据字典和动态视图百合不是茶 oracle 数据字典动态视图系统和对象权限
数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭数据字典中包含数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
多线程编程一般规则 bijian1013 java thread 多线程 java多线程
如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linux unix scp
一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径
【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。示例数据：地址表： CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
cookie状态判断引发的查找问题 bitcarter form cgi
先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
看别人的博客，觉得心情很好 Cb123456 博客心情
以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客: 职业规划: http://www.iteye.com/blogs/subjects/zhiyeguihua android学习: 1.http://byandby.i
[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
JS常用的事件及方法 cwqcwqmax9 js
事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
正则表达式验证日期格式 dashuaifu 正则表达式 IT其它 java其它
正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
public array rules () {return} array 要调用 validate() 时应用的有效性规则。返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
判断一个数是质数的几种方法 EmmaZhao Math python
质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
SpringSecurity工作原理小解读坏我一锅粥 SpringSecurity
SecurityContextPersistenceFilter ConcurrentSessionFilter WebAsyncManagerIntegrationFilter HeaderWriterFilter CsrfFilter LogoutFilter Use
JS实现自适应宽度的Tag切换 ini JavaScript html Web css html5
效果体验：http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
Hbase Rest API : 数据查询 kane_xie REST hbase
hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。启动命令：./bin/hbase rest s
JQuery实现鼠标拖动元素移动位置（源码+注释）明子健 jquery js 源码拖动鼠标
欢迎讨论指正！ print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
Postgresql 连表更新字段语法 update qifeifei PostgreSQL
下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
将redis,memcache结合使用的方案? tcrct redis cache
公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
开发中遇到的诡异的bug wudixiaotie bug
今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key