Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
dubbo分布式框架_如何搭建组织架构,希望能够帮助你!!!。

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..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

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。