[动态参数在Vue路由中的传递]的搜索结果

Vue.js是一个普遍的客户端框架，它的跳转系统$router是控制应用中不同页面的重要组成部分。在Vue.js中使用$router可以完成多页面应用的跳转和控制，同时还可以方便地完成单页面应用的互动和数据传递。 使用$router可以完成以下功能： //定义路由规则 const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] //创建路由实例 const router = new VueRouter({ routes // routes: routes 的简写 }) //把路由实例整合到根Vue实例中 const app = new Vue({ router }).$mount('app') VUE $router是可以动态改变路由的，可以完成在带路由参数情况下修改参数使页面更新，跳转新页面等操作。 // 跳转到其他页面 this.$router.push({ path: '/home' }) // 带参数跳转到其他页面 this.$router.push({ name: 'user', params: { userId: 123 } }) // 带请求参数跳转到其他页面 this.$router.push({ path: '/home', query: { name: 'jack' } }) // 带hash跳转到其他页面 this.$router.push({ path: '/home', hash: 'hash123' }) 总之，在Vue.js中使用$router可以完成应用中不同页面之间的平滑转换和跳转，同时还可以方便地解析参数和数据的传递，带给用户更加流畅和舒适的使用体验。

...发者们， 我们都知道Vue.js是一款非常强大的前端框架，它的易用性和灵活性深受大家喜爱。那么，今天我想和大家分享一些尚未开发的Vue.js项目，看看有没有哪些是你感兴趣、并且能够尝试去做的呢？ 一、响应式UI库 响应式设计是现代网页设计中的重要一环，而Vue.js正好具备这样的能力。嘿，伙计，咱们可以灵活运用Vue.js那个贼牛的数据驱动功能，还有双向数据绑定的黑科技，来亲手打造一个从头到脚都充满响应性的UI组件库，让你的用户界面动起来，活灵活现的！ 下面是一段简单的代码示例： css { { message } } 在这个例子中，我们创建了一个表单元素，并通过v-model指令绑定了message数据，当表单元素的值改变时，message的值也会相应地改变，从而实现了响应式设计。 二、动态路由 动态路由是指根据URL的变化，动态加载对应的页面内容。在使用Vue.js的时候，我们可以巧妙地借助路由守卫和动态参数这两样法宝，轻松实现这个功能。就像是武侠小说里那样，路由守卫就像是守护关卡的大侠，能帮我们在页面跳转的关键时刻进行拦截和判断；而动态参数嘛，就像是一把可以灵活变化的密钥，使得我们能够根据实际需要，传递并获取到实时变化的数据信息，从而更好地完成这个功能的操作。 下面是一个简单的代码示例： php-template { { item.name } } 在这个例子中，我们使用了动态参数来传递item对象的id属性，然后在动态路由页面中通过$route.params获取到这个id属性，从而动态加载对应的内容。 三、数据持久化 在很多情况下，我们需要保存用户的操作历史或者是登录状态等等。这时，我们就需要用到数据持久化功能。而在Vue.js中，我们可以利用localStorage来实现这个功能。 下面是一个简单的代码示例： javascript export default { created() { this.loadFromLocalStorage(); }, methods: { saveToLocalStorage(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, loadFromLocalStorage() { const data = localStorage.getItem(this.key); if (data) { this.data = JSON.parse(data); } } } } 在这个例子中，我们在created钩子函数中调用了loadFromLocalStorage方法，从localStorage中读取数据并赋值给data。接着，在saveToLocalStorage这个小妙招里，我们把data这位小伙伴变了个魔术，给它变成JSON格式的字符串，然后轻轻松松地塞进了localStorage的大仓库里。 四、文件上传 在很多应用中，我们都需要让用户上传文件，例如图片、视频等等。而在Vue.js中，我们可以利用FileReader API来实现这个功能。 下面是一个简单的代码示例： php-template 在这个例子中，我们使用了multiple属性来允许用户一次选择多个文件。然后在handleFiles方法中，我们遍历选定的文件数组，并利用FileReader API将文件内容读取出来。 以上就是我分享的一些尚未开发的Vue.js项目，希望大家能够从中找到自己的兴趣点，并且勇敢地尝试去做。相信只要你足够努力，你就一定能成为一名优秀的Vue.js开发者！

Vue , Vue.js（简称Vue）是一种渐进式的JavaScript框架，用于构建用户界面。在本文中，Vue被用来创建一个响应式、可定制主题色的圣诞树组件，并通过其组件化开发、props属性传递、计算属性等功能特性实现了网页元素的动态更新和丰富交互。 Props , Props是Vue中的一个核心概念，全称为“Properties”，即属性。在Vue组件化开发中，父组件可以通过props向下传递数据给子组件，实现组件间的数据通信。文章中，圣诞树组件接受themeColor和ornamentColor两个props参数，分别用于设置背景色和装饰球颜色，从而使得该组件可以根据外部传入的颜色值来展示不同的视觉效果。 计算属性（Computed Properties） , 在Vue中，计算属性是一种特殊的属性，它的值会基于其他依赖状态的变化而自动进行计算。在本文示例代码中，圣诞树组件定义了isRed、isYellow、isBlue三个计算属性，它们根据ornamentColor这个prop的值实时计算并返回布尔结果，以决定彩球显示为红色、黄色或蓝色，这样就实现了视图与状态间的绑定和自动更新。 生命周期钩子函数（Lifecycle Hooks） , Vue组件从创建到销毁有一系列预定义的生命周期钩子函数，允许开发者在特定的生命周期阶段注入自定义逻辑。虽然本文没有直接展示圣诞树组件使用生命周期钩子函数实现动画效果的具体代码，但在实际开发中，我们可以利用诸如created、mounted、updated等钩子函数，配合CSS transitions/animations或其他JavaScript动画库来制作各种动画效果，使网页元素更具生动性。

Vue Router , Vue Router是Vue.js官方提供的路由管理器，它为单页应用（SPA）提供了强大的路由功能。在Vue项目中，Vue Router通过定义和配置不同的路由规则，帮助实现页面之间的跳转、参数传递等功能，并支持多种模式如History和Hash模式，以适应不同服务器环境下的部署需求。 Single Page Application (SPA) , SPA是一种现代Web应用开发模式，特点是用户与应用交互过程中，大部分内容和视图变化无需重新加载整个页面，而是通过异步请求更新局部视图或数据。Vue.js构建的应用通常采用SPA形式，只需加载一次HTML文件后，后续的导航和交互都在同一页面内完成，极大地提高了用户体验和应用性能。 Nginx , Nginx是一款高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP代理服务器。在本文语境下，Nginx被用来托管和配置Vue项目部署后的静态资源服务。通过正确配置Nginx，可以处理Vue项目的SPA特性，将所有非静态资源请求重定向至index.html，从而避免因路由机制导致的404错误问题。

Vue处理401：从零开始，解决实际问题 大家好，我是你们的老朋友，一个热爱编程的技术宅。嘿，大家好！今天我想聊聊在做Vue项目时碰到的一个常见问题——怎么才能酷炫地解决HTTP 401未授权错误呢？这个问题看似简单，但处理起来却需要一些技巧。让我们一起深入探讨，看看如何让我们的应用更加健壮。 1. 什么是401错误？ 首先，我们得了解一下401到底是个什么鬼。在HTTP协议中，401是一个标准的状态码，表示请求需要用户认证。简单说吧，就是服务器跟你说：“哥们儿，你没权限看这个东西！”这种情况一般出现在你还没登录，或者是登录信息已经失效了。 2. 初次尝试 直接处理 我们先来看一个最简单的处理方式。假设我们在某个组件中发起了一次请求： javascript // 假设这是我们的axios配置 import axios from 'axios'; axios.get('/api/some-data') .then(response => { console.log('数据获取成功', response.data); }) .catch(error => { if (error.response.status === 401) { console.error('401错误：未授权'); // 这里可以跳转到登录页面 window.location.href = '/login'; } else { console.error('其他错误', error); } }); 这种方式虽然能解决问题，但每次请求都要重复这段代码，显得不够优雅。我们需要一个更通用的方法来处理这个问题。 3. 使用拦截器 一次设置，处处生效 Vue项目中，我们通常会使用axios作为HTTP客户端。Axios有个很酷的拦截器功能，让我们可以在请求发出前后做一些全局的处理，特别方便。我们可以在main.js中设置拦截器： javascript import Vue from 'vue'; import App from './App.vue'; import axios from 'axios'; import router from './router'; Vue.config.productionTip = false; // 设置axios的拦截器 axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { // 处理401错误 console.error('401错误：未授权'); // 跳转到登录页面 router.push({ name: 'Login' }); } return Promise.reject(error); } ); new Vue({ router, render: h => h(App) }).$mount('app'); 这样，无论你在项目的哪个地方发起请求，只要遇到401错误，都会自动跳转到登录页面。是不是很酷？ 4. 处理边缘情况 重新登录后跳转回原页面 但是，如果用户在登录后还想回到之前访问的页面怎么办？我们可以利用路由的参数来传递信息。例如，在跳转到登录页时，我们可以带上当前的路由路径： javascript router.push({ name: 'Login', query: { redirect: router.currentRoute.fullPath } }); 然后在登录成功的回调中，我们可以根据这个参数进行跳转： javascript methods: { login() { // 登录逻辑 axios.post('/api/login', this.credentials) .then(() => { const redirect = this.$route.query.redirect; if (redirect) { this.$router.push(redirect); } else { this.$router.push('/'); } }) .catch(error => { console.error('登录失败', error); }); } } 这样一来，用户在登录成功后就能返回到之前访问的页面了。 5. 总结与反思 通过以上的讨论，我们看到了如何在Vue项目中处理401未授权错误。从一开始的简单应对，到后来用axios拦截器，最后搞定那些特殊状况，每一步都让我们离那个完美的解决办法更近了点儿。在这过程中，我真是领悟到，编程可不只是敲代码那么简单，还得想到各种可能出现的状况，然后还得想出漂亮利索的解决办法。 希望这篇文章对你有所帮助，如果你有任何问题或更好的建议，欢迎在评论区留言交流！

一、引言 当我们使用Vue.js进行开发时，经常会遇到一些意想不到的问题。今天我要和大家分享的是一个在使用Vue proxy Table转发数据时总是报错504的问题。这个问题我也是在一段时间前遇到了，当时也花了不少时间去解决。然而，当我把这个问题给攻克之后，我真是打心眼里感受到了解决问题的那种爽歪歪的乐趣，而且实实在在地感觉自己技术水平也有了一个质的飞跃，就像升级打怪一样，level up了！ 二、问题背景 我们在进行Vue项目开发时，有时候需要将数据从后台获取到前端展示。这就需要用到proxyTable来进行数据转发。proxyTable是Vue-cli提供的一种用于开发环境的数据代理工具，它可以在本地模拟请求服务器端数据，让我们在没有实际服务器的情况下也能进行开发和调试。 然而，在使用proxyTable转发数据时，我们可能会遇到各种各样的问题。其中，最常见的问题就是报错504了。这个错误出现，多半是因为服务器“罢工”啦，它表示我们请求的时间太长，超出了它的忍耐限度——最大等待时间，于是乎，服务器就不得不狠心地把我们的请求给“拒之门外”了。 三、解决方案 对于这个问题，我们首先要做的就是找到问题的根源。一般来说，报错504的原因有两个：一是服务器响应时间过长；二是网络连接问题。这两个问题都需要我们一一排查。 首先，我们需要检查一下服务器的响应时间。这可以通过浏览器的开发者工具来查看。如果发现服务器的反应速度有点慢，就像个老人家在处理复杂问题似的磨磨蹭蹭，那我们就得琢磨琢磨了，是不是该给服务器“动个小手术”，提升一下它的性能呢？或者，也可能是请求参数设置得不太对劲儿，需要我们适当调整一下，让它变得更加灵活高效。 其次，我们需要检查一下网络连接。这可以通过ping命令或者traceroute命令来查看。如果发现网络连接有问题，那么我们就需要尝试修复网络连接。 四、实战演练 好了，理论讲完了，下面我们来通过一个具体的例子来看看如何解决这个问题。想象一下，如果我们从后台得到的数据打包成了一个JSON格式的小礼物，我们现在想要把这个小礼物传递给前端，让他们展示出来。下面是我使用的代码： java const router = new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home, meta: { requireAuth: true } }, { path: '/users', name: 'users', component: Users, meta: { requireAuth: true } }, { path: '/login', name: 'login', component: Login } ] }) 在这段代码中，我们可以看到我们在创建路由实例时，传入了一个名为router的变量。这个变量实际上是我们之前定义的一个Vue Router实例。 五、总结 总的来说，处理这个问题的关键是要找到问题的根源，并针对性地进行解决。如果你也碰到了类似的问题，不如就试试我刚刚说的那些办法吧，我打包票，你肯定能顺利解决掉这个问题哒！ 六、结语 通过这篇文章，我想让大家明白一个问题：编程不仅仅是编写代码，更重要的是解决问题。每一次解决问题都是一次学习的机会，都能让我们变得更加优秀。所以，甭管你在捣鼓编程的时候遇到啥头疼的问题，都千万别轻易举白旗投降啊！一定要咬紧牙关坚持到底，信我，到时候你绝对会发现，你付出的每一份努力，都会像种下的种子一样，结出满满的果实来回报你。

...的最新实践。 例如，Vue.js、React和Angular等主流前端框架均提供了强大且便捷的JSON数据绑定与处理机制。Vue.js利用其响应式的数据绑定特性，可以直接将JSON对象赋值给组件的状态（state），实现视图的自动更新；React通过setState方法更新状态，并结合JSX语法实现JSON数据到UI的渲染；Angular则凭借其强大的模板表达式和变更检测系统，让JSON数据操作变得直观高效。 此外，在Node.js后端环境中，诸如Express框架支持直接将JSON传递给路由处理器，并内建了中间件来解析JSON请求体。同时，使用诸如axios或fetch这类现代HTTP客户端库，可以更加优雅地发起异步请求并处理返回的JSON数据。 近期，ECMAScript标准也在JSON支持上进行了优化，如引入JSON.stringify()的第三个参数用于定制化序列化过程，以及JSON.parse()可选的reviver函数对反序列化结果进行深度处理。这些新特性的运用能够帮助开发者更精细地控制JSON数据在程序中的流转和表现形式。 总的来说，理解并熟练掌握JSON数据处理已经成为现代全栈开发者的必备技能，持续关注相关技术和最佳实践的发展，能更好地适应快速变化的Web开发环境，提升开发效率和代码质量。

Vue.js , Vue.js（通常简称为Vue）是一个开源的渐进式JavaScript框架，由尤雨溪创建，用于构建用户界面。在本文中，Vue被推荐为简化开发过程、提高代码可维护性的工具，并特别适用于博客制作场景。通过Vue，开发者可以快速构建现代化的单页应用，利用其独特的模板语法、响应式数据绑定机制和组件化系统实现高效的数据更新和视图渲染。 双向绑定技术 , 双向绑定是Vue.js中的核心特性之一，在前端开发中用于同步视图与模型的数据状态。在本文提供的Vue博客制作教程中，当我们在模板中使用 插值表达式时，实际上就是在利用Vue的双向绑定功能。这意味着当模型数据发生变化时，视图会自动更新；反之，如果视图层发生改变（如用户交互），也会相应地更新底层的数据模型。 v-for指令 , v-for是Vue.js中的一种迭代或遍历指令，它允许开发者基于数组或者对象的属性来循环渲染一个列表或多个元素。在上述博客示例代码中，v-for=\ post in posts\ 用于遍历定义在组件data对象中的posts数组，并为每一篇博客文章生成对应的HTML结构，如标题和内容部分。这极大地简化了动态列表渲染的过程，提升了开发效率和代码可读性。 路由管理（Vue Router） , Vue Router是Vue.js官方提供的路由库，专门用于Vue.js应用程序中的页面导航和路由控制。尽管在给出的文章片段中并未直接提到Vue Router，但在实际的博客网站开发过程中，它对于处理多页面切换、参数传递及页面间的联动逻辑等至关重要。通过Vue Router，开发者能够轻松构建包含多个视图、具有不同URL路径的现代Web应用。 状态管理（Vuex） , Vuex是Vue.js生态中的状态管理模式+库，它专为管理Vue应用中复杂的状态而设计。虽然文中未详细提及Vuex，但在复杂的博客项目中，全局状态管理是非常关键的一环。Vuex帮助开发者集中存储并管理所有组件共享的状态数据，提供了一套明确的规则保证状态以可预测的方式发生变化，从而使得大型应用的状态管理和维护变得更加简单和可控。

...react，但是作为vue2的一名coder，周末花了两天的时间，整理了一波vue3 + tsx + vite + axios 的开发模板，里面涵盖jest、tailwindcss、pinia、element-plus等一些日常工具包，以及加入了eslint、prettier保证日常开发代码质量工具，基本上能够保证大家能够开箱即用，下面附上模板代码地址，关于代码目录结构可以参考代码仓库的说明文档，喜欢的朋友可以转评赞给一个，点个收藏不丢失，下面呢我介绍一下基本构建思路； 1、关于项目中使用tsx   要想项目中运行tsx，我们就得考虑到tsx语法糖编译的问题，这里就得用到@vitejs/plugin-vue-jsx插件，详细用法参考github文档，安装后，在vite的plugin中直接调用即可； import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'// https://vitejs.dev/config/export default defineConfig({plugins: [vue(), vueJsx()]}) 2、安装tailwindcss   关于tailwindcss + vite方案，它的官网有了很友好的方案，这块大家按部就班的安装就够了，没有多少复杂度，参考地址，选择tailwindcss主要是它提供了一些快速样式，比如padding、margin、background等，如果我们项目是后台管理系统，tailwindcss会大大降低我们写css样式的工作，大家可以去学习一波在项目中用起来，熟悉了以后就觉得他是在是太方便了。   这里不做用法的介绍，就推荐一个vscode插件Tailwind CSS IntelliSense，安装后，在项目中我们就可以只能提示，如下所示： 3、关于eslint + prettier 代码统一规范   关于代码规范，一般小一点公司不太会做这方面的工程化配置，但是eslint等这些代码规范工具，会让我们团队的代码更规范，风格更统一，团队协作更加方便，我简单说一下配置eslint及prettier的办法 (1)首先安装eslint工具库 pnpm add eslint -D pnpm eslint --init (2)安装外部的语法eslint规范及import校验规范   选择对应的项目内容，这里我的项目用到（vue, typescript，browser）这个，当然有这个还不够，我们需要安装如下两个工具包 pnpm add eslint-plugin-import // 主要对于es与typescript import 路径的一个eslint校验 pnpm add eslint-config-airbnb-base // 这个是airbnb出的一套eslint语法规范的工具库，如果自己公司没有对应的代码规范，这个是很实用的一套 (3)编写vue3相关的规范   项目中我们用到的是eslint-plugin-vue这个vue代码校验规范工具，里面有很多内容及配置项功能，我们这里推荐大家在配置代码规范，可以参考官方的说明文档，链接放在这里； (4)安装和配置prettier   这个相对来讲比较简单一些，我们直接安装pnpm add eslint-plugin-prettier eslint-config-prettier prettier -D，这里我们需要注意的是prettier与eslint冲突问题；   上面是配置时候的基本流程，最终结果我将eslintrc文件及package.json文件放到这里，有需要的朋友，可以直接copy一份去配置，毕竟这个配置很臭很长，深入学习感觉又没有太大必要（23333~） {"name": "vue-tsx-template","private": true,"version": "0.0.0","scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build","preview": "vite preview","fix": "eslint --fix --ext .js,.jsx,.tsx,.vue src && prettier "},"dependencies": {"vue": "^3.2.25"},"devDependencies": {"@typescript-eslint/eslint-plugin": "^5.23.0","@typescript-eslint/parser": "^5.23.0","@vitejs/plugin-vue": "^2.3.3","@vitejs/plugin-vue-jsx": "^1.3.10","autoprefixer": "^10.4.7","eslint": "^8.15.0","eslint-config-airbnb-base": "^15.0.0","eslint-config-prettier": "^8.5.0","eslint-plugin-import": "^2.26.0","eslint-plugin-prettier": "^4.0.0","eslint-plugin-vue": "^8.7.1","postcss": "^8.4.13","prettier": "^2.6.2","sass": "^1.51.0","tailwindcss": "^3.0.24","typescript": "^4.5.4","vite": "^2.9.9","vue-eslint-parser": "^9.0.1","vue-tsc": "^0.34.7"} } 下面是.eslintrc.js文件 module.exports = {env: {browser: true,es2021: true,node: true,// 处理 defineProps 报错'vue/setup-compiler-macros': true,},extends: ['eslint:recommended','airbnb-base','prettier','plugin:prettier/recommended','plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended','plugin:import/recommended','plugin:import/typescript',],parser: 'vue-eslint-parser',parserOptions: {ecmaVersion: 'latest',parser: '@typescript-eslint/parser',sourceType: 'module',},plugins: ['vue', '@typescript-eslint'],rules: {// 防止prettier与eslint冲突'prettier/prettier': 'error',// eslint-plugin-import es module导入eslint规则配置，旨在规避拼写错误问题'import/no-unresolved': 0,'import/extensions': ['error',{js: 'never',jsx: 'never',ts: 'never',tsx: 'never',json: 'always',},],// 使用导出的名称作为默认属性（主要用作导出模块内部有 default， 和直接导出两种并存情况下，会出现default.proptry 这种问题从在的情况）'import/no-named-as-default-member': 0,'import/order': ['error', { 'newlines-between': 'always' }],// 导入确保是否在首位'import/first': 0,// 如果文件只有一个导出，是否开启强制默认导出'import/prefer-default-export': 0,'import/no-extraneous-dependencies': ['error',{devDependencies: [],optionalDependencies: false,},],/ 关于typescript语法校验 参考文档： https://www.npmjs.com/package/@typescript-eslint/eslint-plugin/'@typescript-eslint/no-extra-semi': 0,// 是否禁止使用any类型'@typescript-eslint/no-explicit-any': 0,// 是否对于null情况做非空断言'@typescript-eslint/no-non-null-assertion': 0,// 是否对返回值类型进行定义校验'@typescript-eslint/explicit-function-return-type': 0,'@typescript-eslint/member-delimiter-style': ['error', { multiline: { delimiter: 'none' } }],// 结合eslint 'no-use-before-define': 'off'，不然会有报错，需要关闭eslint这个校验，主要是增加了对于type\interface\enum'no-use-before-define': 'off','@typescript-eslint/no-use-before-define': ['error'],'@typescript-eslint/explicit-module-boundary-types': 'off','@typescript-eslint/no-unused-vars': ['error',{ignoreRestSiblings: true,varsIgnorePattern: '^_',argsIgnorePattern: '^_',},],'@typescript-eslint/explicit-member-accessibility': ['error', { overrides: { constructors: 'no-public' } }],'@typescript-eslint/consistent-type-imports': 'error','@typescript-eslint/indent': 0,'@typescript-eslint/naming-convention': ['error',{selector: 'interface',format: ['PascalCase'],},],// 不允许使用 var'no-var': 'error',// 如果没有修改值，有些用const定义'prefer-const': ['error',{destructuring: 'any',ignoreReadBeforeAssign: false,},],// 关于vue3 的一些语法糖校验// 超过 4 个属性换行展示'vue/max-attributes-per-line': ['error',{singleline: 4,},],// setup 语法糖校验'vue/script-setup-uses-vars': 'error',// 关于箭头函数'vue/arrow-spacing': 'error','vue/html-indent': 'off',},} 4、加入单元测试   单元测试，根据自己项目体量及重要性而去考虑是否要增加，当然单测可以反推一些组件 or 方法的设计是否合理，同样如果是一个稳定的功能在加上单元测试，这就是一个很nice的体验； 我们单元测试是基于jest来去做的，具体安装单测的办法如下，跟着我的步骤一步步来； 安装jest单测相关的依赖组件库 pnpm add @testing-library/vue @testing-library/user-event @testing-library/jest-dom @types/jest jest @vue/test-utils -D 安装完成后，发现还需要安装前置依赖 @testing-library/dom @vue/compiler-sfc我们继续补充 安装babel相关工具，用ts写的单元测试需要转义，具体安装工具如下pnpm add @babel/core babel-jest @vue/babel-preset-app -D，最后我们配置babel.config.js module.exports = {presets: ['@vue/app'],} 配置jest.config.js module.exports = {roots: ['<rootDir>/test'],testMatch: [// 这里我们支持src目录里面增加一些单层，事实上我并不喜欢这样做'<rootDir>/src//__tests__//.{js,jsx,ts,tsx}','<rootDir>/src//.{spec,test}.{js,jsx,ts,tsx}',// 这里我习惯将单层文件统一放在test单独目录下，不在项目中使用，降低单测文件与业务组件模块混合在一起'<rootDir>/test//.{spec,test}.{js,jsx,ts,tsx}',],testEnvironment: 'jsdom',transform: {// 此处我们单测没有适用vue-jest方式，项目中我们江永tsx方式来开发，所以我们如果需要加入其它的内容// '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest','^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest',},transformIgnorePatterns: ['<rootDir>/node_modules/','[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$','^.+\\.module\\.(css|sass|scss|less)$',],moduleFileExtensions: ['ts', 'tsx', 'vue', 'js', 'jsx', 'json', 'node'],resetMocks: true,}   具体写单元测试的方法，可以参考项目模板中的组件单元测试写法，这里不做过多的说明； 5、封装axios请求库   这里呢其实思路有很多种，如果有自己的习惯的封装方式，就按照自己的思路，下面附上我的封装代码，简短的说一下我的封装思路: 1、基础的请求拦截、相应拦截封装，这个是对于一些请求参数格式化处理等，或者返回值情况处理 2、请求异常、错误、接口调用成功返回结果错误这些错误的集中处理，代码中请求就不再做trycatch这些操作 3、请求函数统一封装（代码中的 get、post、axiosHttp） 4、泛型方式定义请求返回参数，定义好类型，让我们可以在不同地方使用有良好的提示 import type { AxiosRequestConfig, AxiosResponse } from 'axios'import axios from 'axios'import { ElNotification } from 'element-plus'import errorHandle from './errorHandle'// 定义数据返回结构体(此处我简单定义一个比较常见的后端数据返回结构体，实际使用我们需要按照自己所在的项目开发)interface ResponseData<T = null> {code: string | numberdata: Tsuccess: booleanmessage?: string[key: string]: any}const axiosInstance = axios.create()// 设定响应超时时间axiosInstance.defaults.timeout = 30000// 可以后续根据自己http请求头特殊邀请设定请求头axiosInstance.interceptors.request.use((req: AxiosRequestConfig<any>) => {// 特殊处理，后续如果项目中有全局通传参数，可以在这儿做一些处理return req},error => Promise.reject(error),)// 响应拦截axiosInstance.interceptors.response.use((res: AxiosResponse<any, any>) => {// 数组处理return res},error => Promise.reject(error),)// 通用的请求方法体const axiosHttp = async <T extends Record<string, any> | null>(config: AxiosRequestConfig,desc: string,): Promise<T> => {try {const { data } = await axiosInstance.request<ResponseData<T>>(config)if (data.success) {return data.data}// 如果请求失败统一做提示(此处我没有安装组件库，我简单写个mock例子)ElNotification({title: desc,message: ${data.message || '请求失败，请检查'},})} catch (e: any) {// 统一的错误处理if (e.response && e.response.status) {errorHandle(e.response.status, desc)} else {ElNotification({title: desc,message: '接口异常，请检查',})} }return null as T}// get请求方法封装export const get = async <T = Record<string, any> | null>(url: string, params: Record<string, any>, desc: string) => {const config: AxiosRequestConfig = {method: 'get',url,params,}const data = await axiosHttp<T>(config, desc)return data}// Post请求方法export const post = async <T = Record<string, any> | null>(url: string, data: Record<string, any>, desc: string) => {const config: AxiosRequestConfig = {method: 'post',url,data,}const info = await axiosHttp<T>(config, desc)return info} 请求错误（状态码错误相关提示） import { ElNotification } from 'element-plus'function notificat(message: string, title: string) {ElNotification({title,message,})}/ @description 获取接口定义 @param status {number} 错误状态码 @param desc {string} 接口描述信息/export default function errorHandle(status: number, desc: string) {switch (status) {case 401:notificat('用户登录失败', desc)breakcase 404:notificat('请求不存在', desc)breakcase 500:notificat('服务器错误，请检查服务器', desc)breakdefault:notificat(其他错误${status}, desc)break} } 6、关于vue-router 及 pinia   这两个相对来讲简单一些，会使用vuex状态管理，上手pinia也是很轻松的事儿，只是更简单化了、更方便了，可以参考模板项目里面的用法example，这里附上router及pinia配置方法，路由守卫，大家可以根据项目的要求再添加 import type { RouteRecordRaw } from 'vue-router'import { createRouter, createWebHistory } from 'vue-router'// 配置路由const routes: Array<RouteRecordRaw> = [{path: '/',redirect: '/home',},{name: 'home',path: '/home',component: () => import('page/Home'),},]const router = createRouter({routes,history: createWebHistory(),})export default router 针对与pinia，参考如下： import { createPinia } from 'pinia'export default createPinia() 在入口文件将router和store注入进去 import { createApp } from 'vue'import App from './App'import store from './store/index'import './style/index.css'import './style/index.scss'import 'element-plus/dist/index.css'import router from './router'// 注入全局的storeconst app = createApp(App).use(store).use(router)app.mount('app')   说这些比较枯燥，建议大家去github参考项目说明文档，下载项目，自己过一遍，喜欢的朋友收藏点赞一下，如果喜欢我构建好的项目给个star不丢失，谢谢各位看官的支持。 本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_37764929/article/details/124860873。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

...组件以及现代前端框架Vue.js、React中的各类插件库（如vue-autosuggest, react-autocomplete）也为开发者提供了丰富的实现搜索框智能提示功能的选择，大大降低了开发成本并提升了开发效率。 综上所述，搜索框智能提示功能的优化与发展已经成为提升用户体验、促进信息检索效率的关键所在。无论是大型科技公司还是独立开发者，都在这一领域投入精力进行创新研究和实践应用，不断推动着搜索技术的进步与用户体验的升级。

...广泛应用及其最新发展动态。随着前后端分离架构的普及，RESTful API设计原则备受推崇，JSON作为数据交换格式的重要性日益凸显。例如，近期各大云服务商如AWS、Azure等推出了一系列优化JSON数据传输性能的服务和工具，允许开发者以更低延迟、更高效率的方式处理JSON数据。 此外，针对JSON的安全性问题，Mozilla基金会发布了一项关于JSON安全漏洞的研究报告，提醒开发者注意防范由于不恰当的数据验证导致的XSS攻击，强调在解析JSON时进行严格的数据类型检查与过滤。同时，ECMAScript（ES）规范也在不断演进，例如ES2019引入了JSON.stringify()方法的可选参数replacer，它能提供更为精细的控制，使得开发者能够选择性地序列化JSON对象中的特定属性。 另外，在前端框架React、Vue.js中，JSON数据的处理也得到了深度集成，通过状态管理库如Redux、Vuex，开发者可以便捷地操作JSON数据并在组件间传递。这些框架通常会提供工具函数或API，简化对JSON数据的遍历、更新和响应式绑定。 综上所述，掌握JavaScript中遍历JSON数据的基本技巧仅仅是开始，了解JSON在现代Web开发中的前沿应用、安全风险以及相关技术的发展趋势，对于提升项目质量和开发效率具有重要意义。

Vue.js , Vue.js是一款开源的渐进式JavaScript框架，用于构建用户界面。在本文语境中，它是开发项目的主要技术栈，通过Vue.js可以创建交互式的Web应用，实现数据驱动视图的更新。 Element-UI , Element-UI是基于Vue.js的开源UI组件库，提供了丰富的可复用UI组件，如表格、按钮、输入框等，帮助开发者快速搭建企业级前端页面。在本文中，主要讨论了如何利用Element-UI的el-table组件来实现表格行点击展开/收起的效果。 row-click事件 , row-click是Element-UI el-table组件提供的一个原生事件，当用户点击表格中的某一行时会触发该事件，并将被点击行的数据作为参数传递给绑定的事件处理函数。在此应用场景下，通过监听row-click事件，开发者能够获取到用户点击的具体行数据，进而控制该行的展开或收起状态。 ARIA角色属性 , ARIA（Accessible Rich Internet Applications）角色属性是一种W3C标准，用于增强网页元素的语义和辅助功能信息，以便于辅助技术（如屏幕阅读器）识别和解释网页内容。在无障碍设计领域，为el-table组件添加合适的ARIA角色属性有助于确保其展开/收起功能对键盘操作友好，符合WCAG 2.1标准，使得所有用户都能顺畅地与具有此功能的数据表格进行交互。

...的结合至关重要。诸如Vue.js、React等现代前端框架中的成熟分页组件，如Element UI Pagination、Ant Design Pagination等，能够很好地配合后端接口实现动态加载分页数据，提升用户体验。 4. 分页策略在大数据环境下的演进：在处理海量数据时，传统的一次性拉取所有分页信息的方法往往效率低下。此时，可以探讨采用无限滚动（Infinite Scroll）、懒加载（Lazy Load）等现代Web应用中常见的分页策略，并结合API的分页优化设计，实现更流畅的数据浏览体验。 5. 云数据库服务对分页查询的支持：随着云计算的发展，阿里云RDS、AWS Aurora等云数据库服务提供了丰富的分页查询优化方案。了解这些服务如何通过索引优化、读写分离、分布式存储等手段提高分页查询性能，对于构建高可用、高性能的应用系统具有指导意义。 综上所述，PHP与MySQL实现数据分页查询只是整个应用架构中的一部分，结合最新的数据库技术和前端框架，以及适应大数据环境的分页策略，将有助于开发者不断提升系统的稳定性和用户体验。

...实并删除相应内容。 Vue选项 什么是选项？ 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。 以上是官网对于选项的概念，简单的说，选项是一组由Vue定义好的对象，你可以将你的代码写在指定的选项中，从而获得一些 “特异功能” 。 注：由于选项是Vue规定好的，因此在使用中我们不能更改其名称，也不可以重复定义 常用选项 1. data选项 必须是一个函数，将组件需要使用的变量定义在此函数的返回值对象中，定义的变量将会获得一个“特异功能” ---- 响应式 <template><div><!-- 在这里使用插值表达式将name渲染到页面 -->{ { name } }</div></template><script>export default {// data选项data(){return{// name是响应式的name:"Jay",} },}</script> 上面例子中的name就是一个响应式数据，在值发生改变时，视图（页面）上的name也会发生变化，那我们便可以通过操作name的变化去使视图发生变化，而不用进行繁琐的DOM操作，这也体现着Vue框架的 数据驱动 这一核心思想。 为什么数据要定义在data函数的返回值中，而不是定义在一个对象中？ 将数据定义在函数返回值中，可以确保每产生一个组件实例，都会调用一次函数，并返回一个新的对象，开辟一块新的空间。 如果将数据定义在对象中，可能会出现类似于浅拷贝中出现的问题，即多个组件实例指向同一块空间，一个组件实例修改数据，则全部数据发生变化。 2. methods选项 此选项是一个对象，其中存放着该组件要使用的函数，比如事件的回调函数… <template><div><!-- 添加点击事件，事件回调函数在methods中定义 --><button @click="add">点击加一</button> <p>{ { count } }</p></div></template><script>export default {data(){return{count:0,} },// 在methods中定义函数（方法）methods:{add(){// 在函数中要使用data中的变量，需加thisthis.count++},} }</script> 通过点击事件改变count的值，从而使页面上的值随之变化，再次体现 数据驱动 的核心思想 3. computed 计算属性 计算属性，对象形式，顾名思义，在计算属性中保存着一系列需要经过运算得出的属性 <template><p>路程：{ { distance } } km</p><p>速度：{ { speed } } km/h</p><!-- 使用计算属性，与变量的使用相同 --><p>花费的时间：{ { time } } h</p></template><script>export default {data() {return {distance: 1000,speed: 50,} },computed: {// 定义计算属性，类似于函数的定义，返回值就是该计算属性的值time() {return this.distance / this.speed} }}</script> 计算属性内部所依赖的数据发生变化时, 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来。 计算属性内部所依赖的数据没有发生变化, 计算属性会直接返回上一次缓存的值。 因此上面例子中的distance（路程）与speed（速度）无论如何变化，time都会计算出正确的值。 4. directives 选项, 定义自定义指令( 局部指令 ) 在上节，我们学习了一些Vue内置指令，功能十分强大，那么我们可以自己定义一些指令吗？ 当然可以！我们可以在directives选项中创建自定义指令。 <template><!-- 使用自定义指令 --><div v-myshow="1"></div><div v-myshow="0"></div></template><script>export default {// 在directives中定义一个自定义指令，来模仿v-show的功能directives: {//el:添加自定义指令的元素；binding：指令携带的参数myshow(el, binding) {if (binding.value) {el.style.display = "block";} else {el.style.display = "none";} }} }</script><style scoped>div {width: 100px;height: 100px;background-color: red;margin: 10px;}</style> 像以上这种，在组件中定义的指令是局部指令，只能在本组件中使用，全局指令需要在main.js文件中定义，全局指令在任何.vue文件中都可使用。 注意: 当局部指令和全局指令冲突时, 局部指令优先生效. var app = createApp(App)//定义全局指令 app.directive("myshow", (el, binding) => {if (binding.value) {el.style.display = "block";} else {el.style.display = "none";} })// 全局指令可在任何组件使用 5. components组件选项（注册局部组件） 在一个组件中我们可能会使用到其他组件，在将组件引入后，需要在components中进行注册，才能使用。 <template><!-- 使用组件 --><Test /></template><script>// 引入组件import Test from './Test.vue'export default {// 注册组件components: {Test},}</script> 局部组件只能在当前组件内部使用，需要在任何组件中使用，需要在main.js文件中注册为全局组件 // 引入组件import Test from './Test.vue'// 注册全局组件，可在所有.vue文件中使用app.component('Test',Test); 6. 其他 filters 选项, 定义过滤器，vue2中使用，Vue3中已经弃用 mounted 等生命周期函数选项，我们在下节进行详细讲解… 本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_57714647/article/details/130878069。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

...JSP是一种用于构建动态网页的技术，它允许开发者将HTML、CSS、JavaScript与Java代码混合编写在同一个页面中。在本文的上下文中，JSP被用作创建用户注册页面的主要技术手段，通过在JSP页面中嵌入Java代码片段来处理用户输入数据、计算年龄以及实现页面间的数据传递等功能。 request对象 , 在Web应用程序中，request对象是Java Servlet规范提供的一个核心接口，代表客户端向服务器发送的HTTP请求信息。在文章中，request对象扮演着关键角色，用来从login.jsp表单获取用户的注册信息，如用户名、密码、性别等，并在result.jsp页面中进一步处理和显示这些信息。 POST参数 , 在HTTP协议中，POST方法是一种常见的数据提交方式，通常用于表单提交或者向服务器发送大量数据。在本文提到的场景中，当用户在login.jsp页面填写完注册信息并点击“注册”按钮后，浏览器会以POST方式将表单中的所有字段值作为参数一并发送给服务器。这些发送到服务器的参数就是所谓的POST参数，例如username、password等，在result.jsp页面中，开发人员通过request对象的getParameter方法来获取并处理这些POST参数。 闰年和平年 , 在日期处理部分，闰年和平年是一个重要的概念。平年是指公历年份不能被4整除的年份，全年有365天；闰年则是能被4整除且不能被100整除的年份，或者能被400整除的年份，全年有366天，其中2月份多出一天。在模拟出生日期选择时，为了准确计算年龄，需要考虑到这一差异，但在文中提到的JSP页面实现中，尚未考虑闰年对日期和年龄计算的影响，导致每月都默认设置为31天，这在实际应用中可能会导致年龄计算不准确。

...在不断进化。例如，在Vue.js、React等现代前端框架中，通过声明式的数据绑定和组件化的设计，开发者能够更便捷地管理和操作表单元素状态，同时结合最新的HTML5表单特性（如required属性进行非空验证、pattern属性进行自定义正则表达式合法性校验），进一步简化了表单验证的过程。 近期，GitHub上开源了一款名为“Formik”的库，专门针对React应用中的表单处理，它提供了一套完整的解决方案，包括字段管理、错误处理、异步提交和表单生命周期钩子等功能，极大地提升了开发效率和代码可读性。此外，随着Web API接口的丰富和完善，原生Ajax已经逐渐被Fetch API取代，Fetch提供了更强大的功能和更好的错误处理机制，使得前端与后端数据交互更为流畅。 对于想要进一步提升前端技能的开发者来说，紧跟时下热门的前端UI库如Ant Design、Element UI等对表单组件的封装与优化也是必不可少的学习内容。这些库不仅提供了丰富的表单样式，还内置了诸多实用的功能，如联动选择器、动态加载选项等，有助于打造更为复杂的业务场景表单。 综上所述，前端表单处理是一个持续演进的话题，从基础的DOM操作到利用现代框架和API提升开发体验，再到借鉴优秀开源项目的设计思想，都是值得前端开发者关注并深入探索的方向。

...们要实现在线学习页面动态读取章节对应的视频并进行播放。在线学习页面所需要的信息有两类： 课程计划信息 课程学习信息（视频地址、学习进度等） 如下图： 在线学习集成媒资管理的需求如下： 1、在线学习页面显示课程计划 2、点击课程计划播放该课程计划对应的视频 本章节实现学习页面动态显示课程计划，进入不同课程的学习页面右侧动态显示当前课程的课程计划。 0x02 Api接口 课程计划信息从哪里获取？ 在课程发布完成后会自动发布到一个 course_pub 的表中，logstash 会自动将课程发布后的信息自动采集到 ES 索引库中，这些信息也包含课程计划信息。 所以考虑性能要求，课程发布后对课程的查询统一从 ES 索引库中查询。 前端通过请求 搜索服务 获取课程信息，需要单独在 搜索服务 中定义课程信息查询接口。 本接口接收课程id，查询课程所有信息返回给前端。 我们在搜素服务 API 下添加以下方法 @ApiOperation("根据id搜索课程发布信息")public Map<String,CoursePub> getdetail(String id); 返回的课程信息为 json 结构：key 为课程id，value 为课程内容。 0x03 服务端开发 在搜索服务中开发查询课程信息接口。 Controller 在搜素服务下添加以下方法 / 根据id搜索课程发布信息 @param id 课程id @return JSON数据/@Override@GetMapping("/getdetail/{id}")public Map<String, CoursePub> getdetail(@PathVariable("id")String id) {return esCourseService.getdetail(id);} Service / 根据id搜索课程发布信息 @param id 课程id @return JSON数据/public Map<String, CoursePub> getdetail(String id) {//设置索引SearchRequest searchRequest = new SearchRequest(es_index);//设置类型searchRequest.types(es_type);//创建搜索源对象SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();//设置查询条件,根据id进行查询searchSourceBuilder.query(QueryBuilders.termQuery("id",id));//这里不使用source的原字段过滤,查询所有字段// searchSourceBuilder.fetchSource(new String[]{"name", "grade", "charge","pic"}, newString[]{});//设置搜索源对象searchRequest.source(searchSourceBuilder);//执行搜索SearchResponse searchResponse = null;try {searchResponse = restHighLevelClient.search(searchRequest);} catch (IOException e) {e.printStackTrace();}//获取搜索结果SearchHits hits = searchResponse.getHits();SearchHit[] searchHits = hits.getHits(); //获取最优结果Map<String,CoursePub> map = new HashMap<>();for (SearchHit hit: searchHits) {//从搜索结果中取值并添加到coursePub对象Map<String, Object> sourceAsMap = hit.getSourceAsMap();String courseId = (String) sourceAsMap.get("id");String name = (String) sourceAsMap.get("name");String grade = (String) sourceAsMap.get("grade");String charge = (String) sourceAsMap.get("charge");String pic = (String) sourceAsMap.get("pic");String description = (String) sourceAsMap.get("description");String teachplan = (String) sourceAsMap.get("teachplan");CoursePub coursePub = new CoursePub();coursePub.setId(courseId);coursePub.setName(name);coursePub.setPic(pic);coursePub.setGrade(grade);coursePub.setTeachplan(teachplan);coursePub.setDescription(description);//设置map对象map.put(courseId,coursePub);}return map;} 测试 使用 swagger-ui 或 postman 测试查询课程信息接口。 0x04 前端开发 配置NGINX虚拟主机 学习中心的二级域名为 ucenter.xuecheng.com ，我们在 nginx 中配置 ucenter 虚拟主机。 学成网用户中心server {listen 80;server_name ucenter.xuecheng.com;个人中心location / {proxy_pass http://ucenter_server_pool;} } 前端ucenterupstream ucenter_server_pool{server 127.0.0.1:7081 weight=10;server 127.0.0.1:13000 weight=10;} 在学习中心要调用搜索的 API，使用 Nginx 解决代理，如下图： 在 ucenter 虚拟主机下配置搜索 Api 代理路径 后台搜索（公开api）upstream search_server_pool{server 127.0.0.1:40100 weight=10;} 学成网用户中心server {listen 80;server_name ucenter.xuecheng.com;个人中心location / {proxy_pass http://ucenter_server_pool;}后端搜索服务location /openapi/search/ {proxy_pass http://search_server_pool/search/;} } 前端 API 方法 在学习中心 xc-ui-pc-leanring 对课程信息的查询属于基础常用功能，所以我们将课程查询的 api 方法定义在base 模块下，如下图： 在system.js 中定义课程查询方法： import http from './public'export const course_view = id => {return http.requestGet('/openapi/search/course/getdetail/'+id);} 前端 API 方法调用 在 learning_video.vue 页面中调用课程信息查询接口得到课程计划，将课程计划json 串转成对象。 xc-ui-pc-leanring/src/module/course/page/learning_video.vue 1、定义视图 课程计划 <!--课程计划部分代码--><div class="navCont"><div class="course-weeklist"><div class="nav nav-stacked" v-for="(teachplan_first, index) in teachplanList"><div class="tit nav-justified text-center"><i class="pull-left glyphicon glyphicon-th-list"></i>{ {teachplan_first.pname} }<i class="pull-right"></i></div><li v-if="teachplan_first.children!=null" v-for="(teachplan_second, index) in teachplan_first.children"><i class="glyphicon glyphicon-check"></i><a :href="url" @click="study(teachplan_second.id)">{ {teachplan_second.pname} }</a></li><!-- <div class="tit nav-justified text-center"><i class="pull-left glyphicon glyphicon-th-list"></i>第一章<i class="pull-right"></i></div><li ><i class="glyphicon glyphicon-check"></i><a :href="url" >第一节</a></li>--><!--<li><i class="glyphicon glyphicon-unchecked"></i>为什么分为A、B、C部分</li>--></div></div></div> 课程名称 <div class="top text-center">{ {coursename} }</div> 定义数据对象 data() {return {url:'',//当前urlcourseId:'',//课程idchapter:'',//章节Idcoursename:'',//课程名称coursepic:'',//课程图片teachplanList:[],//课程计划playerOptions: {//播放参数autoplay: false,controls: true,sources: [{type: "application/x-mpegURL",src: ''}]},} } 在 created 钩子方法中获取课程信息 created(){//当前请求的urlthis.url = window.location//课程idthis.courseId = this.$route.params.courseId//章节idthis.chapter = this.$route.params.chapter//查询课程信息systemApi.course_view(this.courseId).then((view_course)=>{if(!view_course || !view_course[this.courseId]){this.$message.error("获取课程信息失败，请重新进入此页面！")return ;} let courseInfo = view_course[this.courseId]console.log(courseInfo)this.coursename = courseInfo.nameif(courseInfo.teachplan){let teachplan = JSON.parse(courseInfo.teachplan);this.teachplanList = teachplan.children;} })}, 测试 在浏览器请求：http://ucenter.xuecheng.com//learning/4028e581617f945f01617f9dabc40000/0 4028e581617f945f01617f9dabc40000：第一个参数为课程 id，测试时从 ES索引库找一个课程 id 0：第二个参数为课程计划 id，此参数用于点击课程计划播放视频。 如果出现跨域问题，但是确定已经配置了跨域，请尝试结束所以 nginx.exe 的进程 和 清空浏览器缓存。 如果还没有解决？重启电脑试试。 二、学习页面：获取视频播放地址 0x01 需求分析 用户进入在线学习页面，点击课程计划将播放该课程计划对应的教学视频。 业务流程如下： 业务流程说明： 1、用户进入在线学习页面，页面请求搜索服务获取课程信息（包括课程计划信息）并且在页面展示。 2、在线学习请求学习服务获取视频播放地址。 3、学习服务校验当前用户是否有权限学习，如果没有权限学习则提示用户。 4、学习服务校验通过，请求搜索服务获取课程媒资信息。 5、搜索服务请求ElasticSearch获取课程媒资信息。 为什么要请求 ElasticSearch 查询课程媒资信息？ 出于性能的考虑，公开查询课程信息从搜索服务查询，分摊 mysql 数据库的访问压力。 什么时候将课程媒资信息存储到 ElasticSearch 中？ 课程媒资信息是在课程发布的时候存入 ElasticSearch，因为课程发布后课程信息将基本不再修改。 0x02 课程发布：储存媒资信息 需求分析 课程媒资信息是在课程发布的时候存入 ElasticSearch 索引库，因为课程发布后课程信息将基本不再修改，具体的业务流程如下。 1、课程发布，向课程媒资信息表写入数据。 1）根据课程 id 删除 teachplanMediaPub 中的数据 2）根据课程 id 查询 teachplanMedia 数据 3）将查询到的 teachplanMedia 数据插入到 teachplanMediaPub 中 2、Logstash 定时扫描课程媒资信息表，并将课程媒资信息写入索引库。 数据模型 在 xc_course 数据库创建课程计划媒资发布表： CREATE TABLE teachplan_media_pub (teachplan_id varchar(32) NOT NULL COMMENT '课程计划id',media_id varchar(32) NOT NULL COMMENT '媒资文件id',media_fileoriginalname varchar(128) NOT NULL COMMENT '媒资文件的原始名称',media_url varchar(256) NOT NULL COMMENT '媒资文件访问地址',courseid varchar(32) NOT NULL COMMENT '课程Id',timestamp timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT'logstash使用',PRIMARY KEY (teachplan_id)) ENGINE=InnoDB DEFAULT CHARSET=utf8 数据模型类如下： package com.xuecheng.framework.domain.course;import lombok.Data;import lombok.ToString;import org.hibernate.annotations.GenericGenerator;import javax.persistence.;import java.io.Serializable;import java.util.Date;@Data@ToString@Entity@Table(name="teachplan_media_pub")@GenericGenerator(name = "jpa-assigned", strategy = "assigned")public class TeachplanMediaPub implements Serializable {private static final long serialVersionUID = -916357110051689485L;@Id@GeneratedValue(generator = "jpa-assigned")@Column(name="teachplan_id")private String teachplanId;@Column(name="media_id")private String mediaId;@Column(name="media_fileoriginalname")private String mediaFileOriginalName;@Column(name="media_url")private String mediaUrl;@Column(name="courseid")private String courseId;@Column(name="timestamp")private Date timestamp;//时间戳} Dao 创建 TeachplanMediaPub 表的 Dao，向 TeachplanMediaPub 存储信息采用先删除该课程的媒资信息，再添加该课程的媒资信息，所以这里定义根据课程 id 删除课程计划媒资方法： public interface TeachplanMediaPubRepository extends JpaRepository<TeachplanMediaPub, String> {//根据课程id删除课程计划媒资信息long deleteByCourseId(String courseId);} 从TeachplanMedia查询课程计划媒资信息 //从TeachplanMedia查询课程计划媒资信息public interface TeachplanMediaRepository extends JpaRepository<TeachplanMedia, String> {List<TeachplanMedia> findByCourseId(String courseId);} Service 编写保存课程计划媒资信息方法，并在课程发布时调用此方法。 1、保存课程计划媒资信息方法 本方法采用先删除该课程的媒资信息，再添加该课程的媒资信息，在 CourseService 下定义该方法 //保存课程计划媒资信息private void saveTeachplanMediaPub(String courseId){//查询课程媒资信息List<TeachplanMedia> byCourseId = teachplanMediaRepository.findByCourseId(courseId);if(byCourseId == null) return; //没有查询到媒资数据则直接结束该方法//将课程计划媒资信息储存到待索引表//删除原有的索引信息teachplanMediaPubRepository.deleteByCourseId(courseId);//一个课程可能会有多个媒资信息,遍历并使用list进行储存List<TeachplanMediaPub> teachplanMediaPubList = new ArrayList<>();for (TeachplanMedia teachplanMedia: byCourseId) {TeachplanMediaPub teachplanMediaPub = new TeachplanMediaPub();BeanUtils.copyProperties(teachplanMedia, teachplanMediaPub);teachplanMediaPubList.add(teachplanMediaPub);}//保存所有信息teachplanMediaPubRepository.saveAll(teachplanMediaPubList);} 2、课程发布时调用此方法 修改课程发布的 coursePublish 方法： ....//保存课程计划媒资信息到待索引表saveTeachplanMediaPub(courseId);//页面urlString pageUrl = cmsPostPageResult.getPageUrl();return new CoursePublishResult(CommonCode.SUCCESS,pageUrl);..... 测试 测试课程发布后是否成功将课程媒资信息存储到 teachplan_media_pub 中，测试流程如下： 1、指定一个课程 2、为课程计划添加课程媒资 3、执行课程发布 4、观察课程计划媒资信息是否存储至 teachplan_media_pub 中 注意：由于此测试仅用于测试发布课程计划媒资信息的功能，可暂时将 cms页面发布的功能暂时屏蔽，提高测试效率。 测试结果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vrzs5589-1595567273126)(https://qnoss.codeyee.com/20200704_15/image7)] 0x03 Logstash：扫描课程计划媒资 Logstash 定时扫描课程媒资信息表，并将课程媒资信息写入索引库。 创建索引 1、创建 xc_course_media 索引 2、并向此索引创建如下映射 POST: http://localhost:9200/xc_course_media/doc/_mapping {"properties" : {"courseid" : {"type" : "keyword"},"teachplan_id" : {"type" : "keyword"},"media_id" : {"type" : "keyword"},"media_url" : {"index" : false,"type" : "text"},"media_fileoriginalname" : {"index" : false,"type" : "text"} }} 索引创建成功 创建模板文件 在 logstach 的 config 目录文件 xc_course_media_template.json 文件路径为 %ES_ROOT_DIR%/logstash6.8.8/config/xc_course_media_template.json %ES_ROOT_DIR% 为 ElasticSearch 和 logstash 的安装目录 内容如下： {"mappings" : {"doc" : {"properties" : {"courseid" : {"type" : "keyword"},"teachplan_id" : {"type" : "keyword"},"media_id" : {"type" : "keyword"},"media_url" : {"index" : false,"type" : "text"},"media_fileoriginalname" : {"index" : false,"type" : "text"} }},"template" : "xc_course_media"} } 配置 mysql.conf 在logstash的 config 目录下配置 mysql_course_media.conf 文件供 logstash 使用，logstash 会根据 mysql_course_media.conf 文件的配置的地址从 MySQL 中读取数据向 ES 中写入索引。 参考https://www.elastic.co/guide/en/logstash/current/plugins-inputs-jdbc.html 配置输入数据源和输出数据源。 input {stdin {} jdbc {jdbc_connection_string => "jdbc:mysql://localhost:3306/xc_course?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC" 数据库信息jdbc_user => "root"jdbc_password => "123123" MYSQL 驱动地址,修改为maven仓库对应的位置jdbc_driver_library => "D:/soft/apache-maven-3.5.4/repository/mysql/mysql-connector-java/5.1.40/mysql-connector-java-5.1.40.jar" the name of the driver class for mysqljdbc_driver_class => "com.mysql.jdbc.Driver"jdbc_paging_enabled => "true"jdbc_page_size => "50000"要执行的sql文件statement_filepath => "/conf/course.sql"statement => "select from teachplan_media_pub where timestamp > date_add(:sql_last_value,INTERVAL 8 HOUR)"定时配置schedule => " "record_last_run => truelast_run_metadata_path => "D:/soft/elasticsearch/logstash-6.8.8/config/xc_course_media_metadata"} } output {elasticsearch {ES的ip地址和端口hosts => "localhost:9200"hosts => ["localhost:9200","localhost:9202","localhost:9203"]ES索引库名称index => "xc_course_media"document_id => "%{teachplan_id}"document_type => "doc"template => "D:/soft/elasticsearch/logstash-6.8.8/config/xc_course_media_template.json"template_name =>"xc_course_media"template_overwrite =>"true"} stdout {日志输出codec => json_lines} } 启动 logstash.bat 启动 logstash.bat 采集 teachplan_media_pub 中的数据，向 ES 写入索引。 logstash.bat -f ../config/mysql_course_media.conf 课程发布成功后，Logstash 会自动参加 teachplan_media_pub 表中新增的数据，效果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ILPBxfXi-1595567273134)(https://qnoss.codeyee.com/20200704_15/image10)] Logstash多实例运行 由于之前我们还启动了一个 Logstash 对课程的发布信息进行采集，所以如果想两个 logstash 实例同时运行，因为每个实例都有一个.lock文件，所以不能使用同一个目录来存放数据，所以我们需要使用 --path.data= 为每个实例指定单独的数据目录，具体的代码如下： 该配置是在windows下进行的 课程发布实例 logstash_start_course_pub.bat @title logstash in course_publogstash.bat -f ..\config\mysql.conf --path.data=../data/course_pub 课程计划媒体发布实例 logstash_start_teachplan_media.bat @title logstash i n teachplan_media_publogstash.bat -f ../config/mysql_course_media.conf --path.data=../data/teachplan_media/ 同时运行效果如下 0x04 搜素服务：查询课程媒资接口 需求分析 搜索服务 提供查询课程媒资接口，此接口供学习服务调用。 Api接口定义 @ApiOperation("根据课程计划查询媒资信息")public TeachplanMediaPub getmedia(String teachplanId); Service 1、配置课程计划媒资索引库等信息 在 application.yml 中配置 xuecheng:elasticsearch:hostlist: ${eshostlist:127.0.0.1:9200} 多个结点中间用逗号分隔course:index: xc_coursetype: docsource_field: id,name,grade,mt,st,charge,valid,pic,qq,price,price_old,status,studymodel,teachmode,expires,pub_time,start_time,end_timemedia:index: xc_course_mediatype: docsource_field: courseid,media_id,media_url,teachplan_id,media_fileoriginalname 2、service 方法开发 在 课程搜索服务 中定义课程媒资查询接口，为了适应后续需求，service 参数定义为数组，可一次查询多个课程计划的媒资信息。 / 根据一个或者多个课程计划id查询媒资信息 @param teachplanIds 课程id @return QueryResponseResult/public QueryResponseResult<TeachplanMediaPub> getmedia(String [] teachplanIds){//设置索引SearchRequest searchRequest = new SearchRequest(media_index);//设置类型searchRequest.types(media_type);//创建搜索源对象SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();//源字段过滤String[] media_index_arr = media_field.split(",");searchSourceBuilder.fetchSource(media_index_arr, new String[]{});//查询条件,根据课程计划id查询(可以传入多个课程计划id)searchSourceBuilder.query(QueryBuilders.termsQuery("teachplan_id", teachplanIds));searchRequest.source(searchSourceBuilder);SearchResponse searchResponse = null;try {searchResponse = restHighLevelClient.search(searchRequest);} catch (IOException e) {e.printStackTrace();}//获取结果SearchHits hits = searchResponse.getHits();long totalHits = hits.getTotalHits();SearchHit[] searchHits = hits.getHits();//数据列表List<TeachplanMediaPub> teachplanMediaPubList = new ArrayList<>();for(SearchHit hit:searchHits){TeachplanMediaPub teachplanMediaPub =new TeachplanMediaPub();Map<String, Object> sourceAsMap = hit.getSourceAsMap();//取出课程计划媒资信息String courseid = (String) sourceAsMap.get("courseid");String media_id = (String) sourceAsMap.get("media_id");String media_url = (String) sourceAsMap.get("media_url");String teachplan_id = (String) sourceAsMap.get("teachplan_id");String media_fileoriginalname = (String) sourceAsMap.get("media_fileoriginalname");teachplanMediaPub.setCourseId(courseid);teachplanMediaPub.setMediaUrl(media_url);teachplanMediaPub.setMediaFileOriginalName(media_fileoriginalname);teachplanMediaPub.setMediaId(media_id);teachplanMediaPub.setTeachplanId(teachplan_id);//将对象加入到列表中teachplanMediaPubList.add(teachplanMediaPub);}//构建返回课程媒资信息对象QueryResult<TeachplanMediaPub> queryResult = new QueryResult<>();queryResult.setList(teachplanMediaPubList);queryResult.setTotal(totalHits);return new QueryResponseResult<TeachplanMediaPub>(CommonCode.SUCCESS,queryResult);} Controller / 根据课程计划id搜索发布后的媒资信息 @param teachplanId @return/@GetMapping(value="/getmedia/{teachplanId}")@Overridepublic TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId) {//为了service的拓展性,所以我们service接收的是数组作为参数,以便后续开发查询多个ID的接口String[] teachplanIds = new String[]{teachplanId};//通过service查询ES获取课程媒资信息QueryResponseResult<TeachplanMediaPub> mediaPubQueryResponseResult = esCourseService.getmedia(teachplanIds);QueryResult<TeachplanMediaPub> queryResult = mediaPubQueryResponseResult.getQueryResult();if(queryResult!=null&& queryResult.getList()!=null&& queryResult.getList().size()>0){//返回课程计划对应课程媒资return queryResult.getList().get(0);} return new TeachplanMediaPub();} 测试 使用 swagger-ui 和 postman 测试课程媒资查询接口。 三、在线学习：接口开发 0x01 需求分析 根据下边的业务流程，本章节完成前端学习页面请求学习服务获取课程视频地址，并自动播放视频。 0x02 搭建开发环境 1、创建数据库 创建 xc_learning 数据库，学习数据库将记录学生的选课信息、学习信息。 导入：资料/xc_learning.sql 2、创建学习服务工程 参考课程管理服务工程结构，创建学习服务工程： 导入：资料/xc-service-learning.zip 项目工程结构如下 0x03 Api接口 此 api 接口是课程学习页面请求学习服务获取课程学习地址。 定义返回值类型： package com.xuecheng.framework.domain.learning.response;import com.xuecheng.framework.model.response.ResponseResult;import com.xuecheng.framework.model.response.ResultCode;import lombok.Data;import lombok.NoArgsConstructor;import lombok.ToString;@Data@ToString@NoArgsConstructorpublic class GetMediaResult extends ResponseResult {public GetMediaResult(ResultCode resultCode, String fileUrl) {super(resultCode);this.fileUrl = fileUrl;}//媒资文件播放地址private String fileUrl;} 定义接口，学习服务根据传入课程 ID、章节 Id(课程计划 ID)来取学习地址。 @Api(value = "录播课程学习管理",description = "录播课程学习管理")public interface CourseLearningControllerApi {@ApiOperation("获取课程学习地址")public GetMediaResult getMediaPlayUrl(String courseId,String teachplanId);} 0x04 服务端开发 需求分析 学习服务根据传入课程ID、章节Id(课程计划ID)请求搜索服务获取学习地址。 搜索服务注册Eureka 学习服务要调用搜索服务查询课程媒资信息，所以需要将搜索服务注册到 eureka 中。 1、查看服务名称是否为 xc-service-search 注意修改application.xml中的服务名称：spring:application:name: xc‐service‐search 2、配置搜索服务的配置文件 application.yml，加入 Eureka 配置 如下： eureka:client:registerWithEureka: true 服务注册开关fetchRegistry: true 服务发现开关serviceUrl: Eureka客户端与Eureka服务端进行交互的地址，多个中间用逗号分隔defaultZone: ${EUREKA_SERVER:http://localhost:50101/eureka/,http://localhost:50102/eureka/}instance:prefer-ip-address: true 将自己的ip地址注册到Eureka服务中ip-address: ${IP_ADDRESS:127.0.0.1}instance-id: ${spring.application.name}:${server.port} 指定实例idribbon:MaxAutoRetries: 2 最大重试次数，当Eureka中可以找到服务，但是服务连不上时将会重试，如果eureka中找不到服务则直接走断路器MaxAutoRetriesNextServer: 3 切换实例的重试次数OkToRetryOnAllOperations: false 对所有操作请求都进行重试，如果是get则可以，如果是post，put等操作没有实现幂等的情况下是很危险的,所以设置为falseConnectTimeout: 5000 请求连接的超时时间ReadTimeout: 6000 请求处理的超时时间 3、添加 eureka 依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring‐cloud‐starter‐netflix‐eureka‐client</artifactId></dependency> 4、修改启动类，在class上添加如下注解： @EnableDiscoveryClient 搜索服务客户端 在 学习服务 创建搜索服务的客户端接口，此接口会生成代理对象，调用搜索服务： package com.xuecheng.learning.client;import com.xuecheng.framework.domain.course.TeachplanMediaPub;import org.springframework.cloud.openfeign.FeignClient;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;@FeignClient(value = "xc‐service‐search")public interface CourseSearchClient {@GetMapping(value="/getmedia/{teachplanId}")public TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId);} 自定义错误代码 我们在 com.xuecheng.framework.domain.learning.response 包下自定义一个错误消息模型 package com.xuecheng.framework.domain.learning.response;import com.xuecheng.framework.model.response.ResultCode;import lombok.ToString;@ToStringpublic enum LearningCode implements ResultCode {LEARNING_GET_MEDIA_ERROR(false,23001,"学习中心获取媒资信息错误！");//操作代码boolean success;//操作代码int code;//提示信息String message;private LearningCode(boolean success, int code, String message){this.success = success;this.code = code;this.message = message;}@Overridepublic boolean success() {return success;}@Overridepublic int code() {return code;}@Overridepublic String message() {return message;} } 该消息模型基于 ResultCode 来实现，代码如下 package com.xuecheng.framework.model.response;/ Created by mrt on 2018/3/5. 10000-- 通用错误代码 22000-- 媒资错误代码 23000-- 用户中心错误代码 24000-- cms错误代码 25000-- 文件系统/public interface ResultCode {//操作是否成功,true为成功，false操作失败boolean success();//操作代码int code();//提示信息String message(); 从 ResultCode 中我们可以看出，我们约定了用户中心的错误代码使用 23000，所以我们定义的一些错误信息的代码就从 23000 开始计数。 Service 在学习服务中定义 service 方法，此方法远程请求课程管理服务、媒资管理服务获取课程学习地址。 package com.xuecheng.learning.service.impl;import com.netflix.discovery.converters.Auto;import com.xuecheng.framework.domain.course.TeachplanMediaPub;import com.xuecheng.framework.domain.learning.response.GetMediaResult;import com.xuecheng.framework.exception.ExceptionCast;import com.xuecheng.framework.model.response.CommonCode;import com.xuecheng.learning.client.CourseSearchClient;import com.xuecheng.learning.service.LearningService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class LearningServiceImpl implements LearningService {@AutowiredCourseSearchClient courseSearchClient;/ 远程调用搜索服务获取已发布媒体信息中的url @param courseId 课程id @param teachplanId 媒体信息id @return/@Overridepublic GetMediaResult getMediaPlayUrl(String courseId, String teachplanId) {//校验学生权限,是否已付费等//远程调用搜索服务进行查询媒体信息TeachplanMediaPub mediaPub = courseSearchClient.getmedia(teachplanId);if(mediaPub == null) ExceptionCast.cast(CommonCode.FAIL);return new GetMediaResult(CommonCode.SUCCESS, mediaPub.getMediaUrl());} } Controller 调用 service 根据课程计划 id 查询视频播放地址： @RestController@RequestMapping("/learning/course")public class CourseLearningController implements CourseLearningControllerApi {@AutowiredLearningService learningService;@Override@GetMapping("/getmedia/{courseId}/{teachplanId}")public GetMediaResult getMediaPlayUrl(@PathVariable String courseId, @PathVariable String teachplanId) {//获取课程学习地址return learningService.getMedia(courseId, teachplanId);} } 测试 使用 swagger-ui 或postman 测试学习服务查询课程视频地址接口。 0x05 前端开发 需求分析 需要在学习中心前端页面需要完成如下功能： 1、进入课程学习页面需要带上 课程 Id参数及课程计划Id的参数，其中 课程 Id 参数必带，课程计划 Id 可以为空。 2、进入页面根据 课程 Id 取出该课程的课程计划显示在右侧。 3、进入页面后判断如果请求参数中有课程计划 Id 则播放该章节的视频。 4、进入页面后判断如果 课程计划id 为0则需要取出本课程第一个 课程计划的Id，并播放第一个课程计划的视频。 进入到模块 xc-ui-pc-leanring/src/module/course api方法 let sysConfig = require('@/../config/sysConfig')let apiUrl = sysConfig.xcApiUrlPre;/获取播放地址/export const get_media = (courseId,chapter) => {return http.requestGet(apiUrl+'/api/learning/course/getmedia/'+courseId+'/'+chapter);} 配置代理 在 Nginx 中的 ucenter.xuecheng.com 虚拟主机中配置 /api/learning/ 的路径转发，此url 请转发到学习服务。 学习服务upstream learning_server_pool{server 127.0.0.1:40600 weight=10;}学成网用户中心server {listen 80;server_name ucenter.xuecheng.com;个人中心location / {proxy_pass http://ucenter_server_pool;}后端搜索服务location /openapi/search/ {proxy_pass http://search_server_pool/search/; }学习服务location ^~ /api/learning/ {proxy_pass http://learning_server_pool/learning/;} } 视频播放页面 1、如果传入的课程计划id为0则取出第一个课程计划id 在 created 钩子方法中完成 created(){//当前请求的urlthis.url = window.location//课程idthis.courseId = this.$route.params.courseId//章节idthis.chapter = this.$route.params.chapter//查询课程信息systemApi.course_view(this.courseId).then((view_course)=>{if(!view_course || !view_course[this.courseId]){this.$message.error("获取课程信息失败，请重新进入此页面！")return ;}let courseInfo = view_course[this.courseId]console.log(courseInfo)this.coursename = courseInfo.nameif(courseInfo.teachplan){console.log("准备开始播放视频")let teachplan = JSON.parse(courseInfo.teachplan);this.teachplanList = teachplan.children;//开始学习if(this.chapter == "0" || !this.chapter){//取出第一个教学计划this.chapter = this.getFirstTeachplan();console.log("第一个教学计划id为 ",this.chapter);this.study(this.chapter);}else{this.study(this.chapter);} }})}, 取出第一个章节 id，用户未输入课程计划 id 或者输入为 0 时，播放第一个。 //取出第一个章节getFirstTeachplan(){for(var i=0;i<this.teachplanList.length;i++){let firstTeachplan = this.teachplanList[i];//如果当前children存在，则取出第一个返回if(firstTeachplan.children && firstTeachplan.children.length>0){let secondTeachplan = firstTeachplan.children[0];return secondTeachplan.id;} }return ;}, 开始学习： //开始学习study(chapter){// 获取播放地址courseApi.get_media(this.courseId,chapter).then((res)=>{if(res.success){let fileUrl = sysConfig.videoUrl + res.fileUrl//播放视频this.playvideo(fileUrl)}else if(res.message){this.$message.error(res.message)}else{this.$message.error("播放视频失败，请刷新页面重试")} }).catch(res=>{this.$message.error("播放视频失败，请刷新页面重试")});}, 2、点击右侧课程章节切换播放 在原有代码基础上添加 click 事件，点击调用开始学习方法（study）。 <li v‐if="teachplan_first.children!=null" v‐for="(teachplan_second, index) inteachplan_first.children"><i class="glyphicon glyphicon‐check"></i><a :href="url" @click="study(teachplan_second.id)">{ {teachplan_second.pname} }</a></li> 3、地址栏路由url变更 这里需要注意一个问题，在用户点击课程章节切换播放时，地址栏的 url 也应该同步改变为当前所选择的课程计划 id 4、在线学习按钮 将 learnstatus 默认更改为 1，这样就能显示出马上学习的按钮，方便我们后续的集成测试。 文件路径为 xc-ui-pc-static-portal/include/course_detail_dynamic.html 部分代码块如下 <script>var body= new Vue({ //创建一个Vue的实例el: "body", //挂载点是id="app"的地方data: {editLoading: false,title:'测试',courseId:'',charge:'',//203001免费,203002收费learnstatus: 1 ,//课程状态，1：马上学习，2：立即报名、3：立即购买course:{},companyId:'template',company_stat:[],course_stat:{"s601001":"","s601002":"","s601003":""} }, 简单的测试 访问在线学习页面：http://ucenter.xuecheng.com//learning/课程id/课程计划id 通过 url 传入两个参数：课程id 和 课程计划id 如果没有课程计划则传入0 测试项目如下： 1、传入正确的课程id、课程计划id，自动播放本章节的视频 2、传入正确的课程id、课程计划id传入0，自动播放第一个视频 3、传入错误的课程id 或 课程计划id，提示错误信息。 4、通过右侧章节目录切换章节及播放视频。 访问： http://ucenter.xuecheng.com//learning/4028e58161bcf7f40161bcf8b77c0000/4028e58161bd18ea0161bd1f73190008 传入正确的课程id、课程计划id，自动播放本章节的视频 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ef0xxym7-1595567273153)(https://qnoss.codeyee.com/20200704_15/image17)] 传入正确的课程id、课程计划id传入0，自动播放第一个视频 访问 http://ucenter.xuecheng.com//learning/4028e58161bcf7f40161bcf8b77c0000/0 识别出第一个课程计划的 id 需要注意的是这里的 chapter 参数是我自己在 study 函数里加上去的，可以忽略。 传入错误的课程id或课程计划id，提示错误信息。 通过右侧章节目录切换章节及播放视频。 点击章节即可播放，但是点击制定章节后 url 没有发生改变，这个问题暂时还没有解决，关注笔记后面的内容。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOGdxwb4-1595567273158)(https://qnoss.codeyee.com/20200704_15/image20)] 完整的测试 准备工作 启动 RabbitMQ，启动 Logstash、ElasticSearch 建议把所有后端服务都开起来 启动 前端静态门户、启动 nginx 、启动课程管理前端 我们整理一下测试的流程 上传两个媒资视频文件，用于测试 进入到课程管理，为课程计划选择媒资信息 发布课程，等待 logstash 将数据采集到 ElasticSearch 的索引库中 进入学成网主页，点击课程，进入到搜索门户页面 搜索课程，进入到课程详情页面 点击开始学习，进入到课程学习页面，选择课程计划中的一个章节进行学习。 1、上传文件 首先我们使用之前开发的媒资管理模块，上传两个视频文件用于测试。 第一个文件上传成功 一些问题 在上传第二个文件时，发生了错误，我们来检查一下问题出在了哪里 在媒体服务的控制台中可以看到，在 mergeChunks 方法在校验文件 md5 时候抛出了异常 我们在 MD5 校验这里打个断点，重新上传文件，分析一下问题所在。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpEMZGI8-1595567273166)(https://qnoss.codeyee.com/20200704_15/image23)] 单步调试后发现，合并文件后的MD5值与用户上传的源文件值不相等 方案1：删除本地分块文件重新尝试上传 考虑到可能是在用户上传完 视频的分块文件时发生了一些问题，导致合并文件后与源文件的大小不等，导致MD5也不相同，这里我们把这个视频上传到本地的文件全部删除，在媒资上传页面重新上传文件。 对比所有分块文件的字节大小和本地源文件的大小，完全是相等的 删除所有文件后重新上传，md5值还是不等，考虑从调试一下文件合并的代码。 方案2：检查前端提交的MD5值是否正确 在查阅是否有其他的MD5值获取方案时，发现了一个使用 windows 本地命令获取文件MD5值的方法 certutil -hashfile .\19-在线学习接口-集成测试.avi md5 惊奇的发现，TM的原来是前端那边转换的MD5值不正确，后端这边是没有问题的。 从前面的图可以看出，本地和后端转换的都是以一个 f6f0 开头的MD5值 那么问题就出现在前端了，还需要花一些时间去分析一下，这里暂时就先告一段落，因为上传了几个文件测试中只有这一个文件出现了问题。 2、为课程计划选择媒资信息 进入到一个课程的管理页面 http://localhost:12000//course/manage/baseinfo/4028e58161bcf7f40161bcf8b77c0000 将刚才我们上传的媒资文件的信息和课程计划绑定 选择效果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-epKaqzCD-1595567273178)(https://qnoss.codeyee.com/20200704_15/image29)] 2、发布课程，等待 logstash 从 course_pub 以及 teachplan_media_pub 表中采集数据到 ElasticSearch 当中 发布成功后，我们可以从 teachplan_media_pub 表中看到刚才我们发布的媒资信息 再观察 Logstash 的控制台，发现两个 Logstash 的实例都对更新的课程发布信息进行了采集 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hTUve2ik-1595567273183)(https://qnoss.codeyee.com/20200704_15/image32)] 3、前端门户测试 打开我们的门户主站 http://www.xuecheng.com/ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4wZe9R84-1595567273185)(https://qnoss.codeyee.com/20200704_15/image33)] 点击导航栏的课程，进入到我们的搜索门户页面 如果无法进入到搜索门户，请检查你的 xc-ui-pc-portal 前端工程是否已经启动 进入到搜索门户后，可以看到一些初始化时搜索的课程数据，默认是搜索第一页的数据，每页2个课程。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJ1AKoJb-1595567273187)(https://qnoss.codeyee.com/20200704_15/image34)] 我们可以测试搜索一下前面我们选择媒资信息时所用的课程 点击课程，进入到课程详情页面，然后再点击开始学习。 点击马上学习后，会进入到该课程的在线学习页面，默认自动播放我们第一个课程计划中的视频。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tcuLWnf2-1595567273193)(https://qnoss.codeyee.com/20200704_15/image37)] 我们可以在右侧的目录中选择第二个课程计划，会自动播放所选的课程计划所对应的媒资视频播放地址，该 播放地址正是我们刚才通过 Logstash 自动采集到 ElasticSearch 的索引信息，效果图如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cvi9Dr0Y-1595567273195)(https://qnoss.codeyee.com/20200704_15/image38)] 四、待完善的一些功能 课程发布前，校验课程计划里面是否包含二级课程计划 课程发布前，校验课程计划信息里面是否全部包含媒资信息 删除媒资信息，并且同步删除ES中的索引 在获取该课程的播放地址时校验用户的合法、 在线学习页面，点击右侧目录中的课程计划同时改变url中的课程计划地址 视频文件 19-在线学习接口-集成测试.avi 前端上传时提交的MD5值不正确 😁 认识作者 作者：👦 LCyee ，全干型代码🐕 自建博客：https://www.codeyee.com 记录学习以及项目开发过程中的笔记与心得，记录认知迭代的过程，分享想法与观点。 CSDN 博客：https://blog.csdn.net/codeyee 记录和分享一些开发过程中遇到的问题以及解决的思路。 欢迎加入微服务练习生的队伍，一起交流项目学习过程中的一些问题、分享学习心得等，不定期组织一起刷题、刷项目，共同见证成长。 本篇文章为转载内容。原文链接：https://blog.csdn.net/codeyee/article/details/107558901。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

...框架（如React、Vue和Angular）的崛起，jQuery的使用场景正在发生变化。例如，许多新项目更倾向于选择模块化、组件化的开发方式，这使得诸如React等库能够提供更为精细的DOM操作与状态管理。 尽管如此，jQuery在处理浏览器兼容性问题以及实现基础动画效果等方面依然具有不可替代的优势。比如，对于一些小型项目或需要快速实现动态交互效果的场景，jQuery的fadeIn()、fadeOut()等方法依然表现出高效便捷的一面。此外，jQuery UI库为开发者提供了丰富的可定制UI组件和高级动画工具，进一步扩展了jQuery的功能边界。 近期，jQuery团队仍在持续维护和更新该库，以适应现代Web标准的发展趋势。例如，在最新的版本中，jQuery优化了对ES6+特性的支持，并确保在不同浏览器环境下的稳定运行。同时，社区也在积极探讨如何将jQuery的经典功能更好地融入到现代前端开发流程中。 总的来说，无论是在旧项目的维护升级，还是在特定场景下的快速开发，jQuery仍有其独特的应用价值。与此同时，了解并掌握包括jQuery在内的多种前端技术，有助于开发者在实际工作中灵活选择最合适的工具，以实现最佳的开发效率和用户体验。

...解和掌握如何正确使用参数传递仅是其功能的一部分。实际上，随着PHP版本的不断更新迭代，对于魔术方法的运用也有了新的实践和规范。 近期，在PHP 8.0版本中，新增了对构造器属性 promotion 的支持，这意味着在类构造函数中可以更直接地初始化并声明私有属性，这一改变可能会影响到诸如__callStatic()等魔术方法的使用场景。同时，官方文档也强烈建议开发者谨慎对待魔术方法的使用，避免因过度依赖导致代码可读性和维护性降低。 另外，对于__callStatic()在框架设计与实现中的应用，例如在Laravel、Symfony等知名PHP框架中，开发者们是如何借助此方法实现动态路由、服务容器绑定等功能的深入解读，也能帮助我们进一步理解其实际价值和潜在问题。 因此，除了基本的参数传递知识外，作为PHP开发者，关注最新语言特性、学习行业最佳实践，并结合经典框架源码进行研究，都是提升对__callStatic()以及其他魔术方法驾驭能力的有效途径。在享受其带来的便利性的同时，务必确保代码的健壮性和可维护性，从而构建出高效、稳定的软件系统。

...常会在网页中看到一些动态更新的内容，这些内容通常是通过AJAX或者类似的技术从服务器端获取的。而其中一种比较常见的技术就是jQuery中的get()方法。不过呢，在用这个方法捞内容的时候，我们还必须得拿到当前网页的地址，这样在有需要的时候，才能对它做出相应的处理。 序号二：jQuery中的get()方法 首先，我们需要了解jQuery中的get()方法是如何工作的。这个方法的基本语法如下： javascript $.get(url, [data], [callback]); 其中，url参数是要获取内容的服务器地址，data参数是一个可选的键值对，用于传递额外的数据给服务器，而callback参数则是在请求完成后被调用的一个函数。 序号三：如何获取当前的URL地址 那么，如何在使用get()方法加载内容的同时，也能够获取当前的URL地址呢？其实这很简单，我们只需要在get()方法中添加一个额外的参数即可。这个参数其实就是$.param()函数啦，它的作用超级实用，就是能把一堆键值对打包整理，然后变成URL那种格式的查询字符串，就像咱们平常上网时在网址后面看到的那种“？”后面跟着一串“key=value&key2=value2”的样子。这样，当我们点击调用get()这个小功能的时候，就能顺道把当前网页的URL地址给轻松拿到手啦！具体的代码如下： javascript var url = $.param({ key1: 'value1', key2: 'value2' }); $.get(url, function(data) { // 处理返回的内容 }, 'json'); 在这个例子中，我们首先定义了一个包含两个键值对的对象，并将其转换成了URL格式的查询字符串。然后，我们将这个查询字符串作为参数传递给了get()方法。最后呢，当请求顺利完成，进入到那个回调函数里头，我们就可以直接用这个data参数，来处理它返回的具体内容哈。 序号四：总结 总的来说，通过使用jQuery的get()方法，我们可以在获取动态内容的同时，也很容易地获取到当前的URL地址。这对我们在进行那些依赖于当前网页链接的操作时，可真是帮了大忙啦！因此，掌握这种技巧对于提高我们的前端开发能力是非常有益的。

...种智能化机制，它能够动态地发现并添加新的监控对象（如服务器进程端口）。通过预定义的规则和脚本，系统能定期扫描目标设备或服务以获取实时状态信息，并自动生成相应的监控项，确保对不断变化的环境进行有效、及时的监控。 宏值 PROCESS , 在Zabbix监控系统中，宏是一种特殊变量，可用于传递动态参数并在多个地方引用。文章中的宏值 PROCESS 是在设置监控项自动发现规则时生成的一个特定键值，用于唯一标识每个被监控的服务进程端口。通过将netstat命令获取到的端口号赋给这个宏值，在创建监控项原型时可以引用此宏，从而实现为每个不同的端口分别创建对应的监控项。 JSON格式输出 , JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。在本文提到的场景中，通过编写shell脚本discovery_process.sh，将netstat命令查询到的所有运行服务进程的端口信息转换成JSON格式数据输出。这样做的好处是，Zabbix可以方便地解析这种结构化数据，根据JSON对象中的键值关系来创建和关联相应的监控项，进而实现实时监控每台服务器上不同服务进程的端口状态。

...建API”，因此对于动态路由和参数捕获的支持尤为强大。在这篇文章里，咱们会手把手、实实在在地通过几个实例，一起摸清楚怎么在Go Gin这个框架中把那些功能给玩转起来。 二、动态路由的实现 在实际开发中，我们可能会遇到需要根据请求路径的不同部分来决定处理函数的情况。这时候就需要使用到动态路由了。在使用Gin的时候，我们可以这样设置动态路由：Router.GET("/path/:param", func(c gin.Context) { ... })，就像跟朋友聊天那样说，就是给Router安排个任务，当GET请求遇到"/path/后面跟着任意参数"这种路径时，就执行那个匿名函数，这个函数会接收一个gin.Context参数，然后你就可以在这个函数里面自由发挥，对不同的参数做出不同的响应啦。 例如，如果我们想要创建一个可以接收GET请求的接口，当路径为"/users/:id"时，返回用户信息，我们可以这样做： go r := gin.Default() r.GET("/users/:id", func(c gin.Context) { id := c.Param("id") // 从数据库或其他数据源获取用户信息 user, err := getUserById(id) if err != nil { c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()}) return } c.JSON(http.StatusOK, gin.H{"user": user}) }) 三、参数捕获 在动态路由中，我们已经看到如何通过:param来捕获路径中的参数。除了这种方式，Gin还提供了其他几种方法来捕获参数。 1. 使用c.Params 这个变量包含了所有的参数，包括路径上的参数和URL查询字符串中的参数。例如： go r := gin.Default() r.GET("/users/:id", func(c gin.Context) { id := c.Params.ByName("id") // 获取by name的方式 fmt.Println("User ID:", id) user, err := getUserById(id) if err != nil { c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()}) return } c.JSON(http.StatusOK, gin.H{"user": user}) }) 2. 使用c.Request.URL.Query().Get(":param")：这种方式只适用于查询字符串中的参数。例如： go r := gin.Default() r.GET("/search/:query", func(c gin.Context) { query := c.Request.URL.Query().Get("query") // 获取query的方式 fmt.Println("Search Query:", query) results, err := search(query) if err != nil { c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()}) return } c.JSON(http.StatusOK, gin.H{"results": results}) }) 四、总结 通过这篇文章，我们了解了如何在Go Gin中实现动态路由和参数捕获。总的来说，Gin这玩意儿就像个神奇小帮手，它超级灵活地帮咱们处理那些HTTP请求，这样一来，咱们就能把更多的精力和心思花在编写核心业务逻辑上，让工作变得更高效、更轻松。如果你正在寻觅一款既简单易上手，又蕴藏着强大功能的web框架，我强烈推荐你试试看Gin，它绝对会让你眼前一亮，大呼过瘾！