前端技术
HTML
CSS
Javascript
前端框架和UI库
VUE
ReactJS
AngularJS
JQuery
NodeJS
JSON
Element-UI
Bootstrap
Material UI
服务端和客户端
Java
Python
PHP
Golang
Scala
Kotlin
Groovy
Ruby
Lua
.net
c#
c++
后端WEB和工程框架
SpringBoot
SpringCloud
Struts2
MyBatis
Hibernate
Tornado
Beego
Go-Spring
Go Gin
Go Iris
Dubbo
HessianRPC
Maven
Gradle
数据库
MySQL
Oracle
Mongo
中间件与web容器
Redis
MemCache
Etcd
Cassandra
Kafka
RabbitMQ
RocketMQ
ActiveMQ
Nacos
Consul
Tomcat
Nginx
Netty
大数据技术
Hive
Impala
ClickHouse
DorisDB
Greenplum
PostgreSQL
HBase
Kylin
Hadoop
Apache Pig
ZooKeeper
SeaTunnel
Sqoop
Datax
Flink
Spark
Mahout
数据搜索与日志
ElasticSearch
Apache Lucene
Apache Solr
Kibana
Logstash
数据可视化与OLAP
Apache Atlas
Superset
Saiku
Tesseract
系统与容器
Linux
Shell
Docker
Kubernetes
[断点设置策略]的搜索结果
这里是文章列表。热门标签的颜色随机变换,标签颜色没有特殊含义。
点击某个标签可搜索标签相关的文章。
点击某个标签可搜索标签相关的文章。
Kotlin
...理器是指开发者为视图设置的onClickListener、onTouchListener等监听器,用于响应特定的触摸事件。 事件分发机制 , Android系统的事件分发机制是其UI框架中一个核心概念,主要指代系统如何将触摸事件从顶级视图开始,按照视图层级结构自上而下或自下而上地传递和处理的过程。具体来说,当触摸事件发生时,系统首先会调用ViewGroup(父视图)的onInterceptTouchEvent()方法来判断是否拦截事件,如果不拦截,则继续向下传递至子视图的onTouchEvent()方法进行处理。如果某个视图消耗了事件(返回true),则该事件不会向上继续传递。 MotionEvent , MotionEvent是Android SDK中的一个类,它封装了用户对屏幕进行触摸操作时产生的所有运动信息,包括触摸点的位置、动作类型(如按下、移动、抬起等)、时间戳等。在解决父子视图点击事件冲突问题时,通过重写onTouchEvent()方法并接收MotionEvent参数,可以精确获取并分析用户的触摸行为,从而实现对事件的恰当处理。例如,在文章示例代码中,通过检查MotionEvent对象的getX()和getY()方法获取触摸点坐标,以判断点击是否发生在子视图区域内。
2023-01-16 08:15:07
373
桃李春风一杯酒_t
c++
...rupt()方法来设置线程的中断标志,并通过周期性检查std::this_thread::interruption_point()来响应中断请求。 3. 实现ThreadInterruptedException示例 下面,让我们通过一段示例代码来看看如何在C++中模拟ThreadInterruptedException: cpp include include include include // 自定义异常类,模拟ThreadInterruptedException class ThreadInterruptedException : public std::runtime_error { public: ThreadInterruptedException(const std::string& what_arg) : std::runtime_error(what_arg) {} }; // 模拟长时间运行的任务,定期检查中断点 void longRunningTask() { try { while (true) { // 做一些工作... std::cout << "Working...\n"; // 检查中断点,若被中断则抛出异常 if (std::this_thread::interruption_requested()) { throw ThreadInterruptedException("Thread interrupted by request."); } // 短暂休眠 std::this_thread::sleep_for(std::chrono::seconds(1)); } } catch (const ThreadInterruptedException& e) { std::cerr << "Caught exception: " << e.what() << '\n'; } } int main() { std::thread worker(longRunningTask); // 稍后决定中断线程 std::this_thread::sleep_for(std::chrono::seconds(5)); worker.interrupt(); // 等待线程结束(可能是因为中断) worker.join(); std::cout << "Main thread finished.\n"; return 0; } 在这个例子中,我们首先创建了一个自定义异常类ThreadInterruptedException,当检测到中断请求时,在longRunningTask函数内部抛出。然后,在main函数中启动线程执行该任务,并在稍后调用worker.interrupt()发起中断请求。在运行的过程中,线程会时不时地瞅一眼自己的中断状态,如果发现那个标志被人悄悄设定了,它就会立马像个急性子一样抛出异常,然后毫不犹豫地跳出循环。 4. 思考与探讨 虽然C++标准库并未内置ThreadInterruptedException,但我们能够通过上述方式模拟其行为,这为程序提供了更为灵活且可控的线程管理手段。不过,这里要敲个小黑板强调一下,线程中断并不是什么霸道的硬性停止手段,它更像是个君子协定。所以在开发多线程应用的时候,咱们程序员朋友得把这个线程中断机制吃得透透的,合理地运用起来,确保线程在关键时刻能够麻溜儿地、安全无虞地退出舞台哈。 总结来说,理解和掌握线程中断异常对于提升C++多线程编程能力至关重要。想象一下,如果我们模拟一个ThreadInterruptedException,就像是给线程们安排了一个默契的小暗号,当它们需要更好地协同工作、同步步伐时,就可以更体面、更灵活地处理这些情况。这样一来,我们的程序不仅更容易维护,也变得更加靠谱,就像一台精密的机器,每个零件都恰到好处地运转着。
2023-03-08 17:43:12
814
幽谷听泉
Bootstrap
...trap原有的响应式断点设置可能无法完美适应。 近期,Bootstrap团队正积极应对这一变化,考虑在未来的版本中引入更细致、灵活的响应式设计机制以支持更多元化的屏幕尺寸。同时,前端开发社区也围绕如何优化和扩展Bootstrap栅格系统展开了深入探讨与实践,比如采用CSS Grid布局结合Bootstrap进行响应式设计,或者研发专门针对新兴设备形态的自定义框架。 此外,对于用户体验的极致追求也促使设计师们更加关注内容优先、性能优化以及无障碍访问等方面。因此,在自定义Bootstrap响应式布局算法时,不仅要关注断点调整,还要考虑不同设备上的加载速度、交互体验及视觉一致性等问题,确保在满足个性化需求的同时,能够提供优质的跨平台、跨设备用户体验。 总之,紧跟前端技术发展步伐,了解并掌握最新的设计理念与实践方法,将有助于我们更好地利用Bootstrap进行响应式布局定制,创造出更具前瞻性和包容性的网页界面。
2023-06-28 11:25:46
499
青山绿水
Beego
... 2.3 解决策略 检查代码是否遵循了正确的编程规范,确保所有的依赖都已初始化。同时,使用调试工具(如Beego的内置日志)来追踪错误,找出问题所在。 四、异常处理与调试 3.1 异常捕获 在任务函数中添加适当的错误处理,可以让你更好地追踪到问题。例如: go func DailyReport() error { // ... if db == nil { return errors.New("数据库连接未初始化") } // ... } 3.2 调试技巧 使用beego.BeeApp.SetDebug(true)开启调试模式,这将显示详细的错误堆栈信息。另外,你还可以利用Go的断点和日志功能进行调试。 五、总结与展望 定时任务是现代应用不可或缺的一部分,但它们的稳定性和准确性同样重要。通过理解Cron表达式和任务代码,我们可以避免很多常见的问题。你知道的,哥们,遇到麻烦别急,就像侦探破案一样,冷静分析,一步一步来,答案肯定会出现的!在Beego的天地里,搞定定时任务就像演奏一曲动听的交响乐,得把每个细节、每一步都精准地安排好,就像指挥家挥舞着魔杖,让时间的旋律流畅自如。祝你在探索Beego定时任务的道路上越走越远!
2024-06-14 11:15:26
425
醉卧沙场
Ruby
...byebug进行断点调试 byebug是Ruby社区广泛使用的源码级调试器,可以让你在代码任意位置设置断点并逐行执行代码以观察运行状态。 首先确保已经安装了byebug gem: bash gem install byebug 然后在你的代码中插入byebug语句: ruby def calculate_average(array) total = array.reduce(:+) size = array.size byebug 设置断点 average = total / size.to_f average end numbers = [1, 2, 3, 4, 5] calculate_average(numbers) 运行到byebug处,程序会暂停并在控制台启动一个交互式调试环境,你可以查看当前上下文中的变量值,执行单步调试,甚至修改变量值等。 3. 使用IRB(Interactive Ruby Shell) IRB是一个强大的工具,允许你在命令行环境中实时编写和测试Ruby代码片段。在排查问题时,可以直接在IRB中模拟相关场景,快速验证假设。 比如,对于某个方法有疑问,可以在IRB中加载环境并尝试调用: ruby require './your_script.rb' 加载你的脚本文件 some_object = MyClass.new some_object.method_in_question('test_input') 4. 利用Ruby的异常处理机制 Ruby异常处理机制也是调试过程中的重要工具。通过begin-rescue-end块捕获和打印异常信息,有助于我们快速定位错误源头: ruby begin risky_operation() rescue => e puts "An error occurred: {e.message}" puts "Backtrace: {e.backtrace.join("\n")}" end 总结 调试Ruby代码的过程实际上是一场与代码逻辑的对话,是一种抽丝剥茧般探求真理的过程。从最基础的用puts一句句敲出结果,到高端大气上档次的拿byebug设置断点一步步调试,再到在IRB这个互动环境中实现实时尝试和探索,甚至巧妙借助异常处理机制来捕获并解读错误信息,这一系列手段相辅相成,就像是Ruby开发者手中的多功能工具箱,帮助他们应对各种编程挑战,无往不利。只有真正把这些调试技巧学得透彻,像老朋友一样熟练运用,才能让你在Ruby开发这条路上走得顺溜儿,轻轻松松解决各种问题,达到事半功倍的效果。
2023-08-22 23:37:07
126
昨夜星辰昨夜风
Javascript
...的深度解析与实战解决策略 在我们日常的Web开发过程中,JavaScript作为浏览器端的主要编程语言,其运行状况直接影响着网页的功能表现。当你打开浏览器的开发者工具,发现蹦出个“Script did not run”的错误提示时,这就像是在悄悄告诉你:哎呀,你的JavaScript脚本好像没有正常运行。本文将从实际场景出发,通过详细的代码示例和深入探讨,帮你理解和解决这个常见的问题。 1. 错误概述 “Script did not run”的含义 首先,“Script did not run”是一个相对宽泛的错误提示,它可能指向多种情况,比如脚本文件加载失败、语法错误导致脚本无法执行、或者是由于某些特定条件未满足,使得脚本逻辑跳过或中断执行等。下面我们将逐一分析并给出实例说明。 示例1:脚本加载失败 javascript // 假设我们在HTML中引用了一个不存在的JS文件 在此例中,当浏览器尝试加载non_existent_script.js但找不到该文件时,就会出现“Script did not run”的错误提示。 2. 语法错误导致脚本无法执行 语法错误是初学者最常见的问题之一,也是引发“Script did not run”报错的原因。 javascript // 一个带有语法错误的示例 function test() { console.log("Hello, world!" } test(); // 缺少闭合括号,因此脚本无法执行 在上述例子中,由于函数体内的字符串没有正确闭合,JavaScript引擎在解析阶段就会抛出错误,从而导致整个脚本停止执行。 3. 脚本逻辑错误与异常处理不当 有时,即使脚本文件成功加载且语法无误,也可能因为内部逻辑错误或者异常未被捕获而触发“Script did not run”。 javascript // 逻辑错误示例,试图访问null对象的属性 let obj = null; console.log(obj.property); // 抛出TypeError异常,脚本在此处终止执行 // 异常处理改进方案: try { console.log(obj.property); } catch (error) { console.error('An error occurred:', error); } 在这个案例中,当尝试访问null对象的属性时,JavaScript会抛出TypeError异常。要是不处理这种异常情况,脚本就可能会被迫“撂挑子”,然后闹出个“脚本没运行起来”的状况。 4. 解决策略与思考过程 面对“Script did not run”的问题,我们的解决步骤可以归纳为以下几点: - 检查资源加载:确保所有引用的JavaScript文件都能正常加载,路径是否正确,文件是否存在。 - 审查语法:使用文本编辑器的语法高亮功能或IDE的错误提示,快速定位并修复语法错误。 - 调试逻辑:利用浏览器的开发者工具(如Chrome DevTools),通过断点、步进、查看变量值等方式,逐步排查程序逻辑中的问题。 - 善用异常处理:在可能出现错误的地方使用try...catch结构,对异常进行妥善处理,避免脚本因未捕获的异常而终止执行。 总的来说,“Script did not run”虽是一个看似简单的错误提示,但它背后隐藏的问题却需要我们根据具体情况进行细致入微的排查和解决。希望以上的代码实例和讨论能真正帮到你,让你对这个问题有个更接地气的理解,然后在实际操作时,能够迅速找到解题的“灵丹妙药”。在寻找答案、解决难题的过程中,咱们得拿出十足的耐心和细致劲儿,就像那侦探查案一样,得像剥洋葱那样一层层揭开谜团,最后,真相总会大白于天下。
2023-03-26 16:40:33
374
柳暗花明又一村
SeaTunnel
...采用多线程并发传输、断点续传、错误重试策略等方法,也能有效提高SeaTunnel对接SFTP或其他类似服务的健壮性和可靠性。通过理论与实战相结合的方式,不断优化数据传输流程,从而适应快速变化的大数据时代需求。
2023-12-13 18:13:39
269
秋水共长天一色
转载文章
... API,允许用户在断点续传的基础上上传大文件,并支持跨域请求。而Tus协议作为一项开放标准,为实现可靠的大文件传输提供了规范化的解决方案,它允许多个片段同时上传且能自动处理网络中断后的续传。 此外,对于企业级应用场景,阿里云、腾讯云等国内外大型云服务商也纷纷推出了基于HTTP/3和QUIC协议优化的大文件上传服务。这些服务不仅提升了上传速度,还通过灵活的分块策略确保了数据安全性和完整性,使开发者能够轻松应对大规模数据迁移或备份的需求。 同时,在前端性能优化方面,Webpack 5等现代构建工具引入了更精细的模块分割功能,结合HTTP/2服务器推送技术,可以在一定程度上改善大资源如视频、音频等文件的加载体验,间接影响着用户上传大文件时的整体流畅度。 总之,无论是前端脚本库的不断迭代更新,还是云服务提供商对大文件上传功能的深度优化,都表明在这个数据爆炸的时代,高效稳定地上传大容量文件已成为互联网基础设施建设的重要一环,值得广大开发者持续关注并深入研究。
2023-12-19 09:43:46
127
转载
转载文章
...ng 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。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-12-16 12:41:01
73
转载
JQuery插件下载
...核心特性在于其对缓存策略的自动管理,无需开发者手动设置cache选项。它能够自动判断是否有必要更新数据,只有在数据已过期或有新的变动时,才会从服务器获取最新内容。这不仅减轻了服务器负担,也减少了网络延迟,使得网页在用户频繁交互时仍能保持快速响应。Smartjax的易用性体现在其无缝集成到jQuery的ajax流程中,只需简单调用插件提供的方法,即可享受到高效的数据缓存带来的好处。这对于经常需要更新数据但希望提供快速加载体验的Web应用来说,是一个理想的解决方案。总之,Smartjax是一款实用且高效的前端工具,能显著提升现代网站的性能和用户交互效率。 点我下载 文件大小:40.96 KB 您将下载一个JQuery插件资源包,该资源包内部文件的目录结构如下: 本网站提供JQuery插件下载功能,旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容,请立即告知我们,我们将迅速响应并删除相关内容。 免责声明:站内所有资源仅供个人学习研究及参考之用,严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果,由使用者承担责任。
2024-06-16 20:53:38
41
本站
JQuery插件下载
...览功能,还支持自定义设置,允许开发者根据项目需求调整动画效果、过渡时间、图片加载策略等参数,以优化用户体验。同时,它兼容主流的现代浏览器,确保广泛的兼容性和性能。此外,“响应式全屏滚动式jQuery图片画廊插件”注重性能优化,旨在减少资源消耗,加快页面加载速度,这对于提高网站整体性能和用户满意度至关重要。对于希望快速构建美观、互动性强且功能全面的图片展示区的开发者而言,这款插件无疑是一个高效而便捷的解决方案。总之,这款插件以其强大的功能、易用性、响应式设计和性能优化等特点,成为了构建全屏滚动式图片画廊的理想选择,能够帮助开发者快速、高效地实现项目目标,提升用户的浏览体验。 点我下载 文件大小:1.35 MB 您将下载一个JQuery插件资源包,该资源包内部文件的目录结构如下: 本网站提供JQuery插件下载功能,旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容,请立即告知我们,我们将迅速响应并删除相关内容。 免责声明:站内所有资源仅供个人学习研究及参考之用,严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果,由使用者承担责任。
2024-09-01 21:25:01
79
本站
JQuery插件下载
...件的核心功能在于通过设置一个自定义的断点值,使得当用户设备屏幕尺寸小于该断点时,侧边栏将自动隐藏,而显示一个汉堡图标作为菜单导航的入口。这种设计既保持了侧边栏在大屏幕上的可用性和信息展示效率,又在移动设备上优化了空间使用和导航体验。Bamboo.js的实现简洁高效,基于jQuery这一流行的JavaScript库,使得其易于集成到现有的项目中,无需复杂的配置或额外的学习成本。插件支持多种自定义选项,包括但不限于颜色主题、动画效果以及响应式断点的调整,以适应不同设计风格和用户偏好。在实际应用中,Bamboo.js可广泛应用于各类需要侧边栏导航的场景,如电子商务网站、在线文档系统、社交媒体平台等。通过提供一个直观且功能强大的导航工具,它不仅帮助用户快速访问所需内容,还能有效提升页面加载速度和整体交互流畅性,从而增强用户的满意度和忠诚度。总之,Bamboo.js作为一款响应式固定侧边栏插件,通过其简洁的设计、灵活的配置选项以及与jQuery的无缝整合,为开发者和用户提供了一个高效、易用且高度可定制的解决方案,旨在优化网页布局和提升用户体验。 点我下载 文件大小:47.36 KB 您将下载一个JQuery插件资源包,该资源包内部文件的目录结构如下: 本网站提供JQuery插件下载功能,旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容,请立即告知我们,我们将迅速响应并删除相关内容。 免责声明:站内所有资源仅供个人学习研究及参考之用,严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果,由使用者承担责任。
2024-10-15 21:26:44
123
本站
JQuery插件下载
...、过渡效果以及响应式策略等,允许用户根据具体需求进行个性化设置,实现高度定制化的图片网格布局。Pinto的使用方法直观简单,只需通过简单的HTML结构和jQuery调用即可激活插件功能。开发者可以轻松地将图片网格布局融入到自己的项目中,无论是博客、电商网站还是内容分享平台,都能展现出独特的视觉风格和用户体验。总之,Pinto作为一款优秀的瀑布流布局插件,以其轻巧、响应式的特性,以及高度的灵活性和易用性,成为构建现代、动态图片展示界面的理想选择。它不仅能够提升用户浏览图片时的沉浸感,还能显著增强网站的整体美观度和互动性。 点我下载 文件大小:1.71 MB 您将下载一个JQuery插件资源包,该资源包内部文件的目录结构如下: 本网站提供JQuery插件下载功能,旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容,请立即告知我们,我们将迅速响应并删除相关内容。 免责声明:站内所有资源仅供个人学习研究及参考之用,严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果,由使用者承担责任。
2024-10-06 10:37:43
81
本站
Docker
...称,可以根据需要自行设置。执行上述指令后,Docker将会新建一个新的虚拟网卡,并将其添加到网络结构桥接器中。 接下来,可以使用以下指令在Docker容器中绑定新的虚拟网卡: docker run --net=[新网卡名称] [容器名称] 这里,--net参数指定要使用的网络结构,即新建的虚拟网卡名称。执行以上指令后,Docker容器就会使用该虚拟网卡进行网络结构通信。 通过上述步骤,就能够在Docker中增加虚拟网卡并将其与容器绑定,从而更好地管理容器网络结构。这一特性在实际运用中非常有用,可以根据具体需求进行灵活运用。
2024-04-03 15:29:47
436
数据库专家
JQuery
...disabled属性设置为true,从而禁止该按键的按下事件。 // 启用按键按下事件 $("button").prop("disabled", false); 如果需要启用该按键的按下事件,只需将disabled属性设置为false即可。 除了使用prop()方法之外,还可以使用removeAttr()方法来移除按键的disabled属性: // 移除按键禁止按下 $("button").removeAttr("disabled"); 总的来说,通过jquery实现按键禁止按下非常简单,只需选择需要禁用的按键并设置disabled属性即可。
2023-06-09 14:51:42
158
键盘勇士
CSS
...一步丰富了我们的对齐策略。 值得注意的是,在实际项目中,选择哪种居中方法还需考虑项目的具体需求、浏览器兼容性和维护性等因素。持续关注W3C标准的发展以及各大浏览器对新特性的支持情况,可以帮助开发者与时俱进,掌握最新、最高效的布局技术,从而构建出体验更佳的Web界面。此外,深入研究诸如“Flexbox与Grid布局实战”、“响应式设计进阶指南”等专业资料,也能帮助我们深化理解并合理运用这些布局技术。
2023-11-16 08:03:48
439
电脑达人
MySQL
...际应用中如何优化权限设置有了更深入的兴趣。近期,随着数据安全问题愈发凸显,MySQL的权限管理机制备受关注。 2022年,MySQL官方发布了8.0版本的重要更新,其中包含了更多精细化的权限管理功能,如资源组管理和动态权限变更等特性。这些新特性使得管理员可以根据业务需求更为灵活地为不同用户分配和调整权限,从而提升整个系统的安全性(来源:MySQL官网公告)。 此外,信息安全研究机构近期发布了一份关于数据库权限滥用导致的数据泄露案例分析报告。报告指出,在许多数据泄露事件中,攻击者往往利用的是内部或外部用户权限配置不当这一弱点,因此,正确理解和实施MySQL用户的权限管理显得至关重要(来源:知名信息安全研究机构报告)。 同时,业界专家建议在实际操作中,应遵循最小权限原则,即每个用户仅拥有完成其任务所需的最少权限,避免因权限过大而造成潜在的安全风险。对于特定场景下的权限设置策略与最佳实践,可以参考《MySQL 5.7 Administrator's Bible》等权威书籍或相关技术博客的深度解读文章。 综上所述,深入了解MySQL用户权限管理不仅有助于日常运维工作,更能有效提升数据库层面的信息安全保障能力。持续关注MySQL官方更新动态,结合行业实践经验和专业指导,将使您的数据库管理工作更加得心应手。
2023-04-12 13:59:00
92
软件工程师
转载文章
...y的$.ajax方法设置HTTP请求头后,我们进一步探讨其在现代Web开发中的实际应用场景与重要性。 随着API驱动架构的普及和跨域资源共享(CORS)需求的增长,正确设置请求头成为了开发者必备技能。例如,在OAuth 2.0授权机制中,客户端需携带access_token等信息在请求头Authorization字段中以验证用户身份。如同文章示例中的sso_token,它是实现单点登录(SSO)的关键环节,确保了服务端能够识别并信任发起请求的客户端。 此外,随着JSON Web Tokens (JWT) 的广泛应用,请求头中的Authorization常用于传递经过签名的JSON令牌,实现无状态、安全的身份验证。而Accept头部则用来指示服务器返回数据的格式,如本文所展示的"application/json; charset=utf-8",确保客户端能正确解析响应内容。 最近,Fetch API逐渐替代传统的XMLHttpRequest成为前端异步通信的新标准。在使用Fetch时,设置请求头的方式略有不同,但原理相似,例如: javascript fetch(base_path + 'aa/getList', { method: 'GET', headers: new Headers({ 'Accept': 'application/json; charset=utf-8', 'Authorization': 'Bearer ' + jwtToken }) }) .then(response => response.json()) .catch(error => console.error('Error:', error)); 因此,无论是jQuery的$.ajax还是原生Fetch API,对请求头的精准控制都是提升应用性能、保证数据安全、优化用户体验的重要手段。随着HTTP/2和HTTP/3协议的推广,未来可能还会出现更多针对请求头的优化策略和技术实践,值得广大开发者关注和学习。
2023-09-09 19:34:00
62
转载
JSON
...路径字符串动态获取或设置JSON任意层级的数据成为可能,大大提升了开发效率及代码可读性。 同时,针对安全性考量,在实际项目中处理JSON时应确保进行有效的数据验证和错误处理,防止因恶意构造或意外损坏的JSON数据导致的安全漏洞。例如,使用AJV等JSON Schema验证库,可以在数据解析前对其进行严格校验,从而降低潜在风险。 综上所述,对JSON数组名值获取的基础理解是前端乃至全栈开发者的必备技能之一,而随着技术发展和安全需求的提升,掌握更多先进的JSON处理策略与工具将为开发者应对各种复杂应用场景提供有力支持。
2023-10-30 12:28:39
512
编程狂人
MySQL
...,了解索引原理与实践策略至关重要。例如,选择合适的索引类型(B树、哈希、全文等),合理设计表结构以减少JOIN操作的复杂度,以及定期分析并优化执行计划,都是提升MySQL数据库性能的关键手段。 此外,随着数据安全问题日益凸显,MySQL的安全配置和权限管理同样值得深入研究。学习如何设置复杂的密码策略、实现用户访问审计、利用SSL加密传输数据,以及对备份与恢复策略进行定制化设计,是确保数据库系统稳定运行和数据安全的重要步骤。 综上所述,在掌握了MySQL数据库的基础创建操作后,持续关注MySQL最新动态,深入了解数据库性能调优和安全管理领域,将极大地助力您在实际项目中构建更加健壮、高效的数据库架构。
2023-08-12 18:53:34
138
码农
JQuery
...针对网站优化及SEO策略,合理地设置a标签href属性对于提升网页质量和搜索引擎排名至关重要。比如,为图片添加详细的alt属性和正确的href链接,确保当图片无法加载时,用户仍可以通过链接访问目标资源,同时也利于搜索引擎理解图片内容。 再者,从安全角度出发,JavaScript在处理href属性时应格外注意防范XSS(跨站脚本攻击),通过encodeURIComponent等函数对用户输入进行转码,避免恶意代码注入。 综上所述,虽然本文着重于jQuery在修改a标签href属性中的应用,但在实际开发过程中,我们需要关注更广泛的议题,包括但不限于DOM操作性能优化、前后端数据交互、用户体验优化以及网站安全性保障等,以适应不断变化的Web开发需求。
2023-11-18 19:01:21
335
数据库专家
CSS
...始采用底部对齐的布局策略来优化移动端长页面滚动体验,特别是在新闻、博客和社交媒体应用中,确保关键内容如评论区、加载更多按钮等始终固定在屏幕底部,提升了用户的交互性和阅读流畅度。 同时,对于SVG图形和动画在网页设计中的整合,精确的定位控制显得尤为重要。通过结合bottom属性与其他CSS属性(如transform),设计师能够实现诸如动态背景、跟随滚动效果等复杂布局,大大丰富了网页视觉表现力。 另外,CSS的新特性Subgrid也在逐步得到浏览器支持,它允许子网格项目继承父网格项目的列或行大小,并能独立于父网格进行定位,这为根据底部定位元素提供了更为精细且强大的解决方案。 总的来说,无论是在传统的基于bottom定位方法,还是新兴的CSS布局技术中,理解和掌握元素定位原理都是提升网页设计质量的关键要素,值得广大前端开发者持续关注并深入研究。
2023-03-13 10:55:41
529
代码侠
站内搜索
用于搜索本网站内部文章,支持栏目切换。
知识学习
实践的时候请根据实际情况谨慎操作。
随机学习一条linux命令:
chown user:group file.txt
- 改变文件的所有者和组。
推荐内容
推荐本栏目内的其它文章,看看还有哪些文章让你感兴趣。
2023-04-28
2023-08-09
2023-06-18
2023-04-14
2023-02-18
2023-04-17
2024-01-11
2023-10-03
2023-09-09
2023-06-13
2023-08-07
2023-03-11
历史内容
快速导航到对应月份的历史文章列表。
随便看看
拉到页底了吧,随便看看还有哪些文章你可能感兴趣。
时光飞逝
"流光容易把人抛,红了樱桃,绿了芭蕉。"