src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import Index from '../components/Index.vue'
import Course from '../components/Course.vue'

?
Vue.use(VueRouter)
Vue.use(Vuex)
?
const videoDetail = () => import('../components/videoDetail.vue');
?
const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
    meta: {
      title: '首页'
    }
  },
  {
    path: '/Course',
    name: 'Course',
    component: Course,
    meta: {
      title: '课程简介页'
    }
  },
  {
    path: '/videoDetail',
    name: 'videoDetail',
    component: videoDetail,
    meta: {
      title: '视频播放页'
    }
  }
]
?
const router = new VueRouter({
  routes
})
?
export default router

首页显示全部课程和已购课程

src\components\Index.vue

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
export default {
  name: "Index",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      activeName: "allLesson",
      courseList: [], // 课程集合
      myCourseList: [], // 我购买过的课程列表
      isLogin: false, //登录状态
      user: null, // 已登录的用户对象信息
    };
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("user"));
    if (this.user != null) {
      this.isLogin = true; //已登录
      this.getMyCourseList(); // 调用查询我购买的课程方法
    }
?
    this.getCourseList(); //当组件创建完毕，就调用获取所有课程的方法
  },
  methods: {
    changeCourseTab(tabName) {
      this.classSelect = tabName;
      sessionStorage && sessionStorage.setItem("courseTab", tabName);
    },
    gotoDetail(item) {
      this.$router.push({ name: "Course", params: { course: item } });
    },
    getCourseList() {
      // 去dubbo服务获取全部课程的数据
      return this.axios
        .get("http://localhost:80/course/getAllCourse")
        .then((result) => {
          console.log(result);
          this.courseList = result.data;
        })
        .catch((error) => {
          this.$message.error("获取课程信息失败！");
        });
    },
    getMyCourseList() {
      return this.axios
        .get(
          "http://localhost:80/course/getCourseByUserId/" + this.user.content.id
        )
        .then((result) => {
          console.log(result);
          this.myCourseList = result.data;
        })
        .catch((error) => {
          this.$message.error("获取课程信息失败！");
        });
    },
  },
};
</script><!-- 课程信息展示开始 -->
<li
    class="course-li"
    v-for="(item, index) in courseList"
    :key="index"
    >
    <!-- 课程封面图 -->
    <img
         :src="item.courseImgUrl"
         class="teacher-portrait hover-pointer"
         />
    <!-- 课程文字信息 -->
    <div class="content-main">
        <!-- 课程标题 -->
        <div class="content-title hover-pointer">
            <div
                 class="p-title"
                 style="text-align: left"
                 @click="gotoDetail(item)"
                 >
                <span>
                    {{ item.courseName }}
                </span>
            </div>
            <!-- 作者和职称 -->
            <p class="p-title-buy text-overflow">
                <span class="p-author-span">
                    {{ item.teacher.teacherName }}
                </span>
                <span class="p-author-line" />
                <span class="p-author-span">
                    {{ item.teacher.position }}
                </span>
            </p>
            <p></p>
            <!-- 课程简单描述 -->
            <p class="p-describe" style="text-align: left">
                {{ item.brief }}
            </p>
        </div>
        <!-- 课程前两个章节信息 -->
        <ul class="content-course" style="text-align: left">
            <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
            <li
                class="content-course-lesson text-overflow"
                style="width: 300px"
                v-for="(lesson,
                       index) in item.courseSections[0].courseLessons.slice(0, 2)"
                :key="index"
                >
                <!-- 免费试看图标 -->
                <img
                     src="@/assets/course-list/free-course.png"
                     class="free-label hover-pointer"
                     />
                <span class="theme-span hover-pointer">
                    {{ lesson.theme }}
                </span>
            </li>
        </ul>
        <!-- 价格信息 -->
        <div class="content-price" style="text-align: left">
            <p class="content-price-p">
                <span class="content-price-orange-sm">￥</span>
                <span class="content-price-orange">{{
                    item.discounts
                    }}</span>
                <span class="current-price">
                    <span class="current-price-unite">￥</span>
                    {{ item.price }}
                </span>
                <span class="activity-name">成就自己</span>
                <span class="content-price-buy"
                      >{{ item.sales }}人购买</span
                    >
            </p>
            <div class="btn btn-green btn-offset">立即购买</div>
        </div>
    </div>
</li>
<!-- 课程信息结束 -->

登录

src\components\Header\Header.vue

<script>
// import wxlogin from 'vue-wxlogin'; // 引入
?
export default {
  name: "Header",
  components: {
    // wxlogin  // 声明引用的组件
  },
  props: {},
  data() {
    return {
      isLogin: false, // 登录状态，true：已登录，false：未登录
      userDTO: null, // 用来保存登录的用户信息
      isHasNewMessage: false, // 是否有新的推送消息
      dialogFormVisible: false, // 是否显示登录框，true：显示，false：隐藏
      phone: "", // 双向绑定表单 手机号
      password: "", // 双向绑定表单 密码
      // appid:"wxd99431bbff8305a0", // 应用唯一标识，在微信开放平台提交应用审核通过后获得
      // scope:"snsapi_login", // 应用授权作用域，网页应用目前仅填写snsapi_login即可
      // redirect_uri:"http://www.pinzhi365.com/user/wxlogin",  //重定向地址，(回调地址)
      x: null,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {
    // 当刷新页面，组件创建成功之后，立刻检测本地储存中是否存在用户对象
    this.userDTO = JSON.parse(localStorage.getItem("user"));
    if (this.userDTO != null) {
      this.isLogin = true; // 已登录
    } else {
      // 去检测微信是否登录过
      this.axios
        .get("http://localhost:80/user/checkWxStatus")
        .then((result) => {
          this.userDTO = result.data;
          this.phone = this.userDTO.content.phone;
          this.password = this.userDTO.content.password;
          this.login(); // 走普通登录
        })
        .catch((error) => {
          //this.$message.error("登录失败！");
        });
    }
?
    !(function (a, b, c) {
      function d(a) {
        var c = "default";
        a.self_redirect === !0
          ? (c = "true")
          : a.self_redirect === !1 && (c = "false");
        var d = b.createElement("iframe"),
          e =
            "https://open.weixin.qq.com/connect/qrconnect?appid=" +
            a.appid +
            "&scope=" +
            a.scope +
            "&redirect_uri=" +
            a.redirect_uri +
            "&state=" +
            a.state +
            "&login_type=jssdk&self_redirect=" +
            c +
            "&styletype=" +
            (a.styletype || "") +
            "&sizetype=" +
            (a.sizetype || "") +
            "&bgcolor=" +
            (a.bgcolor || "") +
            "&rst=" +
            (a.rst || "");
        (e += a.style ? "&style=" + a.style : ""),
          (e += a.href ? "&href=" + a.href : ""),
          (d.src = e),
          (d.frameBorder = "0"),
          (d.allowTransparency = "true"),
          (d.sandbox = "allow-scripts allow-top-navigation allow-same-origin"), // 允许多种请求
          (d.scrolling = "no"),
          (d.width = "300px"),
          (d.height = "400px");
        var f = b.getElementById(a.id);
        (f.innerHTML = ""), f.appendChild(d);
      }
      a.WxLogin = d;
    })(window, document);
  },
  methods: {
    goToSetting() {
      this.$router.push("/setting"); // 跳转个人设置页面
    },
    goToLogin() {
      this.dialogFormVisible = true; // 显示登录框
    },
    login() {
      // 前去登录
      return this.axios
        .get("http://localhost:80/user/login", {
          params: {
            phone: this.phone,
            password: this.password,
            nickname: "",
            headimg: "",
          },
        })
        .then((result) => {
          console.log(result);
          this.dialogFormVisible = false; //关闭登录框
          this.userDTO = result.data; // 保存返回数据中的用户对象信息
          this.isLogin = true; // 更新登录状态
          localStorage.setItem("user", JSON.stringify(this.userDTO)); // 将登录成功的对象信息保存到本地储存中
        })
        .catch((error) => {
          this.$message.error("登录失败！");
        });
    },
    // 微信登录
    goToLoginWX() {
      // 普通的登录表单隐藏
      document.getElementById("loginForm").style.display = "none";
      // 显示二维码的容器
      document.getElementById("wxLoginForm").style.display = "block";
?
      // 生成二维码
      // 待dom更新之后再用二维码渲染其内容
      this.$nextTick(function () {
        this.createCode(); // 直接调用会报错：TypeError: Cannot read property 'appendChild' of null
      });
    },
    // 生成二维码
    createCode() {
      var obj = new WxLogin({
        id: "wxLoginForm", // 挂载点，二维码的容器
        appid: "wxd99431bbff8305a0", // 应用唯一标识，在微信开放平台提交应用审核通过后获得
        scope: "snsapi_login", // 应用授权作用域，网页应用目前仅填写snsapi_login即可
        redirect_uri: "http://www.pinzhi365.com/user/wxlogin", //重定向地址，(回调地址)
        href:
          "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX1jcw0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30=", // 加载修饰二维码的css样式
      });
    },
    toToIndex() {
      this.$router.push("/"); //回到首页
    },
    toToNotic() {},
    //登出
    logout() {
      localStorage.setItem("user", null); // 将登录成功的对象信息保存到本地储存中
      this.isLogin = false; // 更新登录状态
      // alert("谢谢使用，再见");
      // 去检测微信是否登录过
      this.axios
        .get("http://localhost:80/user/logout")
        .then((result) => {})
        .catch((error) => {
          //this.$message.error("登录失败！");
        });
    },
  },
};
</script>

想了解更多，欢迎关注我的微信公众号：Renda_Zhang