[数据绑定与响应式原理在Vue中的应用]的搜索结果

...代Web开发中的广泛应用，其重要性日益凸显。最近，一项关于API设计趋势的调查显示（来源：State of API 2022），JSON仍占据主导地位，成为API数据交换格式的首选，特别是在RESTful架构中。研究指出，尽管诸如Protocol Buffers和Apache Avro等二进制格式因其更优的性能受到部分关注，但在跨平台兼容性、易读性和社区支持方面，JSON依旧保持领先优势。 此外，近年来异步JavaScript框架如React和Vue.js的兴起，也进一步推动了JSON在前端数据管理中的应用深度。开发者们利用JSON Schema来定义数据结构，并结合GraphQL等查询语言优化数据获取过程，实现高效的数据交互和动态渲染。 值得注意的是，为了提高数据安全与隐私保护，业界开始探索JSON Web Tokens (JWT) 在身份验证和授权机制中的实践。JWT作为基于JSON的安全标准，通过加密的方式传输用户信息，确保了数据在传输过程中的安全性。 总之，JSON不仅在网站数据导入领域扮演着关键角色，还在API设计、前端框架以及安全认证等方面持续发挥重要作用。随着技术演进，理解并掌握JSON的最新应用场景和技术趋势，对于Web开发者来说愈发重要。

...ring Boot、Vue.js、React等前后端分离框架的崛起，其使用场景逐渐发生了变化。然而，对于学习Web开发基础和理解MVC模式的学生及开发者来说，深入理解和掌握JSP的工作原理仍然具有重要意义。 近期，有开发者回顾了使用JSP实现用户注册功能的经典案例，并指出其中存在的局限性，如单一用户注册处理与日期计算逻辑的不足。实际上，在实际项目中，为解决这些问题，可以引入数据库存储多用户信息，并利用Java 8的LocalDate类进行精准的日期处理，以适应闰年和平年的变化。 此外，为了提升用户体验和系统性能，现今推荐采用RESTful API设计原则，通过Ajax异步提交表单数据，后端用Spring MVC或Spring Boot框架接收并处理请求，前端则采用现代化的JavaScript库（例如Vue.js或React）实现实时验证和数据显示。 同时，为了确保数据安全，除了基本的字符编码设置避免乱码问题外，还需要对密码进行加密处理，并考虑XSS跨站脚本攻击和CSRF跨站请求伪造等安全风险，这在传统的JSP开发中往往需要借助额外的安全库来完成，而在现代框架中已内置了丰富的安全机制。 总之，尽管文中提到的基于JSP的用户注册页面在当下已不作为主流开发实践，但它为我们提供了理解Web开发流程的基础模型，而文中提及的问题改进方案恰好体现了现代Web开发技术的发展趋势——注重用户体验、数据安全以及前后端分离架构的设计理念。因此，无论是重温经典技术还是紧跟时代步伐，这篇文章都为我们提供了一个有价值的思考视角。

...际上，随着云计算、大数据、人工智能等领域的飞速发展，现代软件开发工程师所需掌握的技术栈正在不断拓宽和深化。 例如，对于服务端开发者而言，在熟悉了Java基础、数据库操作（如MySQL）及Spring框架后，进一步了解微服务架构及其相关技术（如Docker、Kubernetes）已成为行业趋势。同时，云原生应用开发也是目前热门的方向，学习和掌握阿里云、AWS或Google Cloud等主流云服务提供商的解决方案和技术将大大提升个人竞争力。 而对于前端开发者来说，除了HTML、CSS、JavaScript的基本功外，Vue.js、React或Angular等现代化前端框架的应用以及TypeScript等强类型语言的使用正逐渐成为标配。此外，随着WebAssembly的兴起，对底层性能优化的需求也在增加，理解浏览器工作原理以及如何运用Web Worker、Service Worker提升用户体验变得愈发重要。 与此同时，数据结构与算法始终是程序员的核心素养之一，无论面试还是实际工作中，扎实的算法基础都能使开发者在解决问题时更加游刃有余。因此，即使在快速掌握实战技能的同时，也不能忽视理论知识的学习，包括但不限于《算法导论》、LeetCode等经典资源。 总之，在持续探索编程世界的过程中，保持与时俱进、关注最新技术动态，并结合自身兴趣和发展方向深入学习，才是实现从初级到高级甚至专家级程序员蜕变的关键所在。

...n系统上的开发环境及应用软件。 SSH服务（Secure Shell） , 一种网络协议，用于加密远程登录会话和命令执行过程，确保数据传输的安全性。在文中，通过启动SSH服务，用户可以在本地主机通过命令行工具安全地连接到deepin虚拟机进行远程操作和管理。 JDK（Java Development Kit） , Java开发工具包，包含了Java编译器、Java运行时环境（JRE）、以及一系列用于开发Java应用程序所需的工具和库文件。在文章中，安装JDK8是为了为deepin系统提供Java开发环境，支持基于Java语言的项目构建与运行。 Node.js , 一个开源、跨平台的JavaScript运行环境，允许开发者使用JavaScript编写服务器端代码，实现高性能、可伸缩的网络应用。文中提到安装Node.js，并配置淘宝源以优化npm包下载速度，为开发基于Node.js的后端服务或者全栈Web应用提供了基础条件。 Nginx , 一款高性能的HTTP和反向代理服务器，同时也可用作邮件代理服务器和负载均衡器。在该文场景下，Nginx被用作Web服务器，负责处理和分发来自客户端的HTTP请求，对于部署静态网站或作为Web应用的前端服务器非常适用。 PostgreSQL , 一种开源的关系型数据库管理系统，支持丰富的SQL标准和高级特性，如窗口函数、多版本并发控制等。在文中安装PostgreSQL是为了解决项目中的持久化存储需求，用于存放应用的数据。 Redis , 一个开源的、内存中的数据结构存储系统，常被用作数据库、缓存和消息中间件。在该篇文章里，Redis被安装和配置，用来提高应用的数据读写性能，尤其是在高并发场景下提供快速响应的能力。

...媒资信息 需求分析 数据模型 Dao Service 测试 0x03 Logstash：扫描课程计划媒资 创建索引 创建模板文件 配置 mysql.conf 启动 logstash.bat Logstash多实例运行 0x04 搜素服务：查询课程媒资接口 需求分析 Api接口定义 Service Controller 测试 三、在线学习：接口开发 0x01 需求分析 0x02 搭建开发环境 0x03 Api接口 0x04 服务端开发 需求分析 搜索服务注册Eureka 搜索服务客户端 自定义错误代码 Service Controller 测试 0x05 前端开发 需求分析 api方法 配置代理 视频播放页面 简单的测试 完整的测试 1、上传文件 一些问题 ~~方案1：删除本地分块文件重新尝试上传~~ 方案2：检查前端提交的MD5值是否正确 2、为课程计划选择媒资信息 3、前端门户测试 四、待完善的一些功能 😁 认识作者 一、学习页面：查询课程计划 0x01 需求分析 到目前为止，我们已可以编辑课程计划信息并上传课程视频，下一步我们要实现在线学习页面动态读取章节对应的视频并进行播放。在线学习页面所需要的信息有两类： 课程计划信息 课程学习信息（视频地址、学习进度等） 如下图： 在线学习集成媒资管理的需求如下： 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。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

资源介绍 该“简约数据平台后台管理模板”是一款专为企业后台管理需求打造的响应式网页模板，设计风格简洁高效，适用于各类公司自动化数据后台的搭建与管理。此模板下载后易于部署和自定义，提供丰富的功能模块以实现对企业的全方位、精细化管控，助力企业实现数据后台的自动化运营与维护，提升管理效率。 点我下载 文件大小：150.27 KB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...后台设计的HTML5响应式模板，采用清爽蓝色调，具备出色的自适应能力，可在不同设备上完美展示。该模板集成了图形统计功能，便于数据管理与分析，并涵盖了系统管理、更多后台管理选项，适用于各类企业级后台应用场景，为用户提供高效便捷的操作体验。 点我下载 文件大小：4.63 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...介绍 这款“蓝色简洁响应式后台管理系统网站模板”以清新蓝色为主调，设计风格简洁明快，具备优秀的响应式与自适应特性，完美兼容各类设备。它专为后台管理需求打造，不仅提供便捷的数据统计功能，还涵盖了全面的网站管理模块，实现一站式的高效运维。此模板适用于构建专业且操作友好的后台管理系统，满足更多用户对于网站后台管理的需求，是理想的后台模板选择。 点我下载 文件大小：642.09 KB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...板”是一款专为科技、数据与数码产品企业设计的HTML5响应式网站模板，适用于展示数据产品、项目案例及进行企业宣传。模板以现代科技风格构建，强调数据可视化和项目展示功能，方便用户下载后快速搭建专业且具有代理业务特色的商业网站，实现卓越的在线品牌形象塑造与信息传递效果。 点我下载 文件大小：5.81 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...rap框架构建的高效响应式模板，设计风格以简约和清爽为主，提供宽屏布局及左侧导航栏，实现自适应各类设备浏览。它专为后台管理系统的界面设计打造，具备丰富的数据统计功能，让信息呈现更为直观。此模板支持更多个性化定制，是搭建专业、易用且美观的网站后台的理想选择。 点我下载 文件大小：2.57 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 该“公司响应式Bootstrap3后台通用模板”是一款基于Bootstrap3框架设计的简约且高度自适应的企业级后台管理HTML模板，专为提升企业网站后台管理效率打造。它具备出色的响应式布局，可在不同设备上流畅展示，提供易管理、直观的操作界面与丰富的功能组件。此模板支持便捷下载，适用于构建和定制各类企业后台管理系统，助力实现更高效的数据统计与系统运维。 点我下载 文件大小：6.75 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 该“响应式物联网数据服务类企业前端模板”是一款专注于智能科技与数据监控的高品质前端CMS模板，专为物联网数据服务型企业打造。模板设计响应式布局，适配多种设备，实现无缝浏览体验。它集成了数据展示、服务介绍等功能模块，助力企业便捷搭建专业且高科技感十足的官方网站，同时提供一键下载服务，便于快速部署和应用，满足企业对前端界面高效构建与管理的需求。 点我下载 文件大小：11.95 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...造的高效、大气且富含数据统计功能的后台管理界面。设计上采用沉稳蓝色调，营造出专业的企业氛围。模板具备响应式与自适应特性，可在多种设备上完美展现。它集成了更多实用功能模块，适用于构建全面的网站后台管理系统，实现对企业运营数据的有效管理和展示，提升工作效率与体验。 点我下载 文件大小：934.77 KB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 该蓝色后台数据管理网站模板是一款基于HTML5与CSS技术的响应式自适应模板，专为各类企业打造高效、直观的数据管理系统。设计采用深邃的蓝色与黑色调，营造专业且富有科技感的后台界面。模板提供丰富图表统计功能，便于用户对业务数据进行实时分析和管理。其包含更多实用模块，如订单管理、账单统计等，并以清晰的布局展现，全面提升后台操作体验及工作效率。 点我下载 文件大小：3.86 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 响应式家禽养殖基地类企业前端模板是一款专为农业养殖企业设计的现代化网站模板，采用响应式布局，完美兼容各类设备和主流浏览器。该模板以基地养殖为主题，适用于展示家禽养殖、农产品生产与销售等多元化业务内容，实现数据即时同步更新，后台管理便捷高效。用户可一键下载安装，轻松搭建彰显品牌形象的专业养殖场官方网站。 点我下载 文件大小：16.96 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...s销售统计管理控制台响应式模板是一款专为高效管理销售数据而设计的后台界面模板。该模板具备高度的数据可视化功能，实时展现销售动态及变化趋势，简约明了，同时具有强大的统计管理与控制台功能，适用于多终端设备，实现响应式布局，助您全面掌握并深度分析销售业绩，提升业务洞察力与决策效率。此外，它还提供了更多实用功能模块以满足不同场景下的销售数据管理需求。" 点我下载 文件大小：3.99 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...rap框架开发的高效响应式后台管理模板，拥有两套独特风格的皮肤设计，适用于各类企业后台系统建设。该模板具备强大的数据统计功能和高度自适应布局，无论在桌面端还是移动端都能提供优质的用户体验。它集成了多种管理模块，满足多样化后台管理需求，同时以精美的界面设计与实用的功能布局，为用户打造专业且易用的后台管理系统。 点我下载 文件大小：12.28 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 这款“响应式金融交易图形统计后台网站模板”是一款专为金融交易数据管理与分析打造的HTML5自适应后台模板。它集成了后台管理、图形展示及统计功能，可实现对交易数据的实时动态可视化分析，并且具备优秀的响应式设计，能在不同设备上自动适配显示效果。适用于企业级后台管理系统，提供直观便捷的数据统计和交易信息管理界面，全面提升金融业务运营效率与决策质量。 点我下载 文件大小：1.75 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...质，同时具备自适应和响应式功能，确保在电脑端和手机端都能提供优质的用户体验。该模板兼顾简约与个性，尤其适合电商及大数据环境下的用户登录、注册流程，并且通用性强，能够满足不同企业的定制需求，是一款集美观与实用于一体的精品静态网页模板。 点我下载 文件大小：60.14 KB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

...该“绿色左边栏图形表数据统计后台网站模板”是一款专为企业后台管理设计的响应式网页模板，采用Bootstrap框架构建，以清新绿色为主题色。模板具有左侧导航栏布局，方便用户快捷访问各项管理功能。它主打数据统计展示，通过丰富的图形化界面实时更新并直观呈现业务数据动态。此模板自适应不同屏幕尺寸，提供流畅的用户体验，适合各类企业进行后台数据分析与管理工作。 点我下载 文件大小：1.75 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 这款“响应式医院病例管理系统模板下载”是一款基于Bootstrap框架设计的简约且功能全面的后台管理模板，专为医院及医疗机构打造。它集成了病人信息管理、企业信息管理等功能模块，提供直观易用的病例数据查看与管理界面。该模板具备响应式设计，可在不同设备上自适应展示，优化了医院后台操作体验。同时，其后台演示清晰，便于快速上手和部署，是构建高效、便捷的医院系统后台的理想选择。 点我下载 文件大小：873.38 KB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。

资源介绍 这款“精品响应式蓝色后台数据分析管理模板”是一款专为企业打造的高品质网站后台管理模板，采用流行的HTML5技术开发，设计风格以清爽的蓝色调为主，营造专业且高效的视觉体验。该模板具有高度响应式特性，可在不同设备上完美呈现，确保后台数据管理操作的便捷性与一致性。它深度整合了后台数据分析功能，方便企业进行各类业务数据的深度挖掘与可视化展示，是构建现代化企业管理平台的理想选择。 点我下载 文件大小：4.58 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。