[JavaScript处理JSON条件读取...]的搜索结果

...的代码示例： 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开发者！

... HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili 菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com) 一、获取表单 <!-- 获取表单(前两种常用)1. document.getElementById("id属性值");通过form标签的id属性值获取表单对象2.document.表单的nane属性值:通过表单的name属性值获取表单对象3.document.forms[下标]: 通过指定下标获取表单元素4.document.forms[表单的name属性值];通过表单的name属性值获取表单对象document.forms:获取HTML文档中所有的表单对象--> <form id="myform1" name= "myform1" action=""></form><form id="myform2" name= "myform2" action=""></form><script type="text/javascript">// 1. document.getElementById("id属性值");console.log(document.getElementById("myform1"));// 2. document.表单的name属性值; console.log(document.myform2);console.log("----------------");//获取所有的表单对象console.log(document.forms); // 3. document.forms[下标];console.log(document.forms[0]);// 4. document.forms[表单的name属性值]; console.log(document.forms["myform2"]);</script> 运行效果截图： 二、获取表单元素 获取表单元素1.获取input元素1. document.getElementById("id属性值"): 通过元素的id属性值获取表单元素对象2.表单对象.表单元素的name属性值;通过表单对象中对应的元素的name属性值获取3. document.getELementsByName("name属性值");通过表单元素的name属性值获取4. document.getELementsByTagName("标签名/元素名");通过标签名获取表单元素对象2.获取单选按钮注:相同的一组单选按钮，需要设置相同的name属性值1. document.getElementByName("name属性值");通过name属性值获取2.判断单选按钮是否选中checked选中状态在JS代码中checked=true表示选中checked=false表示不选中在HTML标签中checked=checked或checked表示选中不设置checked属性表示不选中3.获取单选按钮的值元表.value;3.获取多选按钮与单选按钮相同4.获取下拉选项1.获取下拉框对象var对象 = document.getElementById("id属性值");2.获取下拉框的下拉选项列表var options = 下拉框对象.options;3.获取下拉框被选中项的索引var index = 下拉框对象.selectedIndex;4.获取下拉框被选中项的值var 值 = 下拉框对象.value;5.通过选中项的下标获取下拉框被选中项的值var 值 = 下拉框对象.options[index].value;6.获取下拉框被选中项的文本var文本值一下拉框对象.options[index].text;注:1.获取下拉框选中项的值时: (value)如果option标签设置了value属性值，则获取value属性对应的值;如果option标签未设置value属性值，则获取的是option双标签中的文本值2.下拉框的选中状态:选中状态: selected = selected、 selected、 selected = true未选中状态:不设置selected属性、 selected=false; <form id='myform' name="myform" action="" method="get">姓名:<input type="text" id="uname" name="uname" value="zs"/><br />密码:<input type= "password" id="upwd" name="upwd" value= "1234"/><br /><input type="hidden" id= "uno" name="uno" value="隐藏域"/>个人说明:<textarea name="intro" ></textarea><br><button type="button" onclick="getTxt();" >获取元素内容</button><hr><br><input type="text" name="inputName" class="test" value="aaa" /><input type="radio" name="rad" class="test" value="1" /> 男<input type="radio" name="rad" class="test" value="2" /> 女<button type="button" onclick="getRadio()">获取单选按钮</button><br><hr><br>全选/全不选: <input type="checkbox" id="control" onclick="checkAllOrNot()" /><button type="button" onclick= "checkFan()">反选</button><br><input type="checkbox" name= "hobby" value="sing" />唱歌<input type="checkbox" name= "hobby" value="dance" />跳舞<input type="checkbox" name= "hobby" value="rap" />说唱<button type="button" onclick="getCheckBox()">获取多选按钮</button><br><hr><br>来自:<select id="ufrom" name= "ufrom" ><option value = "" >请选择</option><option value = "Beijing" selected="selected" >北京</option><option value = "Shanghai">上海</option><option value = "Hangzhou">杭州</option></select><button type="button" onclick= "getSelect()" >获取下拉选项</button></form><script type=" text/javascript">function getTxt() {// 1. document.getElementById("id属性值");var uname = document.getElementById("uname").value;console.log(uname);// 2.表单对象.表单元表的name属性值;var pwd = document.getElementById("myform").upwd.value;console.log(pwd);// 3. document.getELementsByName("name属性值");var uno = document.getElementsByName("uno")[0].value;console.log(uno);// 4. document.getELementsByTagName("标签名/元素名");var intro = document.getElementsByTagName("textarea")[0].value;console.log(intro);}function getSelect() {//获取下拉框对象var ufrom = document.getElementById("ufrom");console.log(ufrom);//获取下拉框的下拉选项列表var opts = ufrom.options;console.log(opts);//获取下拉框被选中项的索引var index = ufrom.selectedIndex;console.log("选中项的下标:" + index);//获取下拉框被选中项的值var val = ufrom.value;console.log("被选中项的值：" + val);//通过选中项的下标获取下拉框被选中项的值var val2 = ufrom.options[index].value;console.log("被选中项的值:"+ val2);//获取下拉框被选中项的文本var txt=ufrom.options[index].text; console.log("被选中项的文本:"+ txt);}</script> 运行效果截图： 三、提交表单 提交表单一、使用普通按钮type="button"1.给按钮绑定click点击事件，绑定函数2.在函数中，进行表单校验(非空校验、 合法性校验等)3.如果校验通过，则手动提交表单表单对象.submit();二、使用提交按钮type="submit"1.给按钮绑定click点击事件，绑定函数2.函数需要有返回值，返回true或false (如果return false, 则表单不会提交:如果return true，则提交表单）onclick="return 函数名()"3.在函数中，进行表单校验(非空校验、 合法性校验等)4.如果校验通过，返回true;如果校验不通过，则返回false, 则表单不会提交:如果return true，则提交表单）三、使用提交按钮type="submit"1.给表单form元素绑定submit提交事件，绑定函数2.函数需要有返回值，返回true或false (如果return false, 则表单不会提交;如果return trueonsubmit="return函数名()" 3.在函数中，进行表单校验(非空校验、 合法性校验等)4.如果校验通过，返回true;如果校验不通过，则返回false <!--使用普逍按钮 type= "button"--><form id= 'myform' name= "myform" action="http://www.baidu.com" method="get" >姓名: <input name= "uname" id="uname"/>  <span id = "msg" style="font-s1ze: 12px; color: red;"></span><br /><button type="button" onclick="submitForm1()">提交</button></form><!--使用提交按钮 type= "submit"--><form id= 'myform2' name= "myform2" action="http://www.baidu.com" method="get" >姓名: <input name= "uname2" id="uname2"/>  <span id = "msg2" style="font-s1ze: 12px; color: red;"></span><br /><button type="submit" onclick="return submitForm2()">提交</button></form><!--使用提交按钮 type= "submit"--><form id= 'myform3' name= "myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">姓名: <input name= "uname3" id="uname3"/>  <span id = "msg3" style="font-s1ze: 12px; color: red;"></span><br /><button type="submit">提交</button></form><script type="text/javascript">// 表单校验// 提交表单function submitForm1() {//得到文本框的值var uname = document.getElementById("uname").value;//判断是否为空if (isEmpty(uname)) { //为空//设置提示信息(设置span元素的值)document.getElementById("msg").innerHTML="性名不能为空!" ;//阻止表单提交return;}//手动提交表单document.getElementById("myform").submit(); }function submitForm2() {//得到文本框的值var uname2 = document.getElementById("uname2").value;//判断是否为空if (isEmpty(uname2)) { //为空//设置提示信息(设置span元素的值)document.getElementById("msg2").innerHTML="性名不能为空!" ;//阻止表单提交return false;}return true;}function submitForm3() {//得到文本框的值var uname3 = document.getElementById("uname3").value;//判断是否为空if (isEmpty(uname3)) { //为空//设置提示信息(设置span元素的值)document.getElementById("msg3").innerHTML="性名不能为空!" ;//阻止表单提交return false;}return true;}/ 判断字符串是否为空如果为空，返回true如果非空，返回falsetrim() :字符串方法， 去除字符串前后空格@param {Object} str/function isEmpty(str) {//判断是否为空if (str == null || str.trim() == "") {return true;}return false;}</script> 运行效果截图： 四、原生Ajax实现流程 <!-- Ajax 异步无刷新技术原生Ajax的实现流程1.得到XMLHttpRequest对象var xhr = new XMLHttpRequest();2.打开请求xhr.open(method, uri, async) ;method:请求方式，通常是GEI|POSTurl:请求地址async:是否异步。如果是true表示异步，false表示同步3.发送请求xhr.send(params);params:请求时需要传递的参数如果是GET请求，设置nu11。 (GET请求的参数设置在url后面)如果是POST请求，无参数设置为null，有参数则设置参数4.接收响应xhr.status响应状态(200=响应成功， 404=资源末找到，500=服务器异常)xhr.responseText 得到响应结果 --> <script type="text/javascript">// 同步请求function text01() {// 1.得到XMLHttpRequest对象var xhr = new XMLHttpRequest();// 2.打开请求xhr.open("get", "js/date.json", false);// 3.发送请求xhr.send(null);// 4.判断响应状态if (xhr.status == 200) {console.log("响应成功");} else {console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)}console.log("同步请求...");}text01();// 异步请求function text02() {// 1.得到XMLHttpRequest对象var xhr = new XMLHttpRequest();// 2.打开请求xhr.open("get", "js/date.json", true);// 3.发送请求xhr.send(null);// 由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果// 遇过监听readyState的变化来得知后面的处理状态 4=完全处理xhr.onreadystatechange = function(){if(xhr.readyState == 4){// 4.判断响应状态if (xhr.status == 200) {// 得到响应结果 console.log(xhr.responseText);} else {console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)} }}console.log("异步请求...");}text02();</script> 运行效果截图： 本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_61507413/article/details/122895643。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

JSON条件读取：深入理解与实践探索 JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，广泛应用于Web服务和API接口中。这篇小文呢，咱要唠的就是“JSON条件读取”这码事儿。我会尽量说人话，用大伙都能秒懂的语言，再配上一堆实实在在的代码实例，手把手带你摸清怎么按照自个儿的需求，从JSON这座信息山里头精准挖出想要的数据宝贝。 1. JSON基础回顾 在我们深入探讨条件读取之前，先简单回顾一下JSON的基础知识。JSON是一种文本格式，用来表示键值对的集合，支持数组、对象等复杂结构。例如： json { "users": [ { "id": 1, "name": "Alice", "age": 25, "city": "New York" }, { "id": 2, "name": "Bob", "age": 30, "city": "San Francisco" } ] } 在这个例子中，我们有一个包含多个用户信息的JSON对象，每个用户信息也是一个JSON对象，包含了id、name、age和city属性。 2. JSON条件读取初识 JSON条件读取是指基于预先设定的条件，从JSON数据结构中提取满足条件的特定数据。比如，我们要从这个用户列表里头找出所有年龄超过28岁的大哥大姐们，这就得做个条件筛选了。 2.1 JavaScript中的JSON条件读取 在JavaScript中，我们可以使用循环和条件语句实现JSON条件读取。下面是一个简单的示例： javascript var jsonData = { "users": [ // ... ] }; for (var i = 0; i < jsonData.users.length; i++) { var user = jsonData.users[i]; if (user.age > 28) { console.log(user); } } 这段代码会遍历users数组，并打印出年龄大于28岁的用户信息。 2.2 使用现代JavaScript方法 对于更复杂的查询，可以利用Array.prototype.filter()方法简化条件读取操作： javascript var olderUsers = jsonData.users.filter(function(user) { return user.age > 28; }); console.log(olderUsers); 这里我们使用了filter()方法创建了一个新的数组，其中只包含了年龄大于28岁的用户。 3. 进阶 深度条件读取与JSONPath 在大型或嵌套结构的JSON数据中，可能需要进行深度条件读取。这时，JSONPath（类似于XPath在XML中的作用）可以派上用场。虽然JavaScript原生并不直接支持JSONPath，但可通过第三方库如jsonpath-plus来实现： javascript const jsonpath = require('jsonpath-plus'); var data = { ... }; // 假设是上面那个大的JSON对象 var result = jsonpath.query(data, '$..users[?(@.age > 28)]'); console.log(result); // 输出所有年龄大于28岁的用户 这个例子展示了如何使用JSONPath表达式去获取深层嵌套结构中的满足条件的数据。 4. 总结与思考 JSON条件读取是我们在处理大量JSON数据时不可或缺的技能。用各种语言技巧和工具灵活“玩转”，我们就能迅速找准并揪出我们需要的信息，这样一来，无论是数据分析、应用开发还是其他多种场景，我们都能够提供更棒的支持和服务。随着技术的不断进步，未来没准会出现更多省时省力的小工具和高科技手段，帮咱们轻轻松松解决JSON条件读取这个难题。因此，不断学习、紧跟技术潮流显得尤为重要。让我们一起在实践中不断提升对JSON条件读取的理解和应用能力吧！

JSON是一种小巧的资料交换格式，其扩展名为.json。 在开发过程中，我们经常将资料保存到JSON格式的文档内，并利用程序加载这些资料。 // 加载JSON文件例子 var fs = require('fs'); var data = fs.readFileSync('data.json'); var jsonData = JSON.parse(data); console.log(jsonData); 加载JSON文件时，必须利用fs（FS模块）模块的readFileSync方法，将文件路径传递作为参数，加载文件内容。接着我们利用JSON.parse方法，将文件内容转换为JavaScript对象。 在开发中，JSON文件是一种非常常用的资料保存方式。无论是保存一些配置信息，还是保存用户资料，JSON文件都可以胜任。由于JSON格式的资料比较简洁，网络传输成本较低，因此在前端开发中也大量利用JSON格式的资料进行接口交互。 总之，JSON扩展名为.json，是一种非常常用的资料保存方式，在前端开发中扮演着重要的角色。

...负责将Java对象与JSON数据之间进行序列化和反序列化的操作。在本文的上下文中，ObjectMapper实例被用来将Java Bean对象转换为JSON字符串（序列化），以及将JSON字符串转换回Java对象（反序列化）。通过调用其writeValue和readValue方法，开发者能够高效地处理JSON数据与Java实体类之间的相互转换。 JsonFactory , JsonFactory是Jackson库中的另一个关键组件，它主要用于创建JsonGenerator和JsonParser等用于处理JSON数据流的实例。在文章的示例代码中，JsonFactory被用来创建JsonGenerator对象，这个对象可以将Java对象写入到输出流中生成JSON格式的数据。JsonFactory在JSON数据的生成过程中起到了工厂类的作用，提供了生成JSON处理器的能力。 JSON , JavaScript Object Notation，是一种轻量级的数据交换格式。在本文语境下，JSON作为一种独立于语言、平台的数据交换格式，在Java开发环境中广泛应用，特别是在Web服务接口（如RESTful API）的数据传输、配置文件存储等方面。Jackson库提供的工具使得Java对象能方便快捷地与JSON数据进行互相转换，从而实现前后端数据交互或持久化存储需求。

在处理数据交换和存储的过程中，JSON（JavaScript Object Notation）因其简洁的语法和广泛的兼容性而备受青睐。然而，将JSON数据高效、准确地转换为数据库表格式是一项关键任务，特别是在大数据时代背景下，大量异构数据的整合与分析尤为重要。 近期，业界对于如何优化这一过程展开了深入研究和实践应用。例如，2023年春季，Google Cloud推出了一款名为“Dataflow for JSON”的服务，该服务能够自动解析复杂JSON结构，并智能映射到BigQuery等云数据库中，极大地简化了JSON至关系型数据库的转换流程，提升了数据集成效率。 同时，一些开源项目也在积极探索这一领域，如PostgreSQL的jsonb数据类型就支持直接存储JSON并进行高效的查询操作，使得JSON数据可以直接在数据库层面进行深度处理，无需预先转换成传统的表结构。 此外，针对嵌套层级较深或动态结构变化频繁的JSON数据，有学者提出了基于NoSQL数据库的解决方案，如MongoDB的文档模型能很好地适应JSON数据的特性，实现灵活且高性能的数据管理。 总的来说，随着技术的发展和应用场景的变化，JSON数据转换为数据库表格式的方法不断演进，无论是通过增强传统关系型数据库的功能，还是借助NoSQL数据库的优势，都在推动着更高效、便捷的数据处理方式的创新与发展。

JSON , JavaScript Object Notation，一种轻量级的数据交换格式，它基于JavaScript的一个子集，采用完全独立于语言的文本格式来存储和传输数据。JSON格式简洁、易于阅读和编写，同时也易于机器解析和生成。在文中，JSON被用于在不同系统或程序间进行数据交换，并且能够在JavaScript中直接转换为原生对象，或者将JavaScript对象转换为JSON字符串。 JSON.parse() , JavaScript内置方法，用于将一个JSON格式的字符串转换为JavaScript原生对象。例如，在文章中，通过JSON.parse(jsonStr)，可以将JSON字符串 name:Jack,age:20 解析成一个具有 name 和 age 属性的对象，从而可以在JavaScript中直接访问这些属性值。 JSON.stringify() , 与JSON.parse()相对应的JavaScript内置方法，用于将JavaScript对象或值转换为JSON格式的字符串。在文中举例说明，若有一个JavaScript对象 name: Jack , age: 20 ，使用JSON.stringify(obj)后会得到对应的JSON字符串 name: \ Jack\ , age: 20 ，这个字符串可以方便地在网络上传输或保存到文件中。 跨域问题（CORS） , 跨源资源共享（Cross-Origin Resource Sharing），是现代Web应用中浏览器实施的一种安全策略。由于同源策略限制，通常情况下，一个源（如网页所在的域名、协议和端口）中的脚本不能读取另一个源中的资源，除非明确允许。在处理JSON数据交互时，如果前后端属于不同的域名，就会触发跨域问题。为了解决这一问题，服务器需要设置Access-Control-Allow-Origin响应头部信息以允许特定或所有来源对资源的请求，从而实现跨域数据访问。 Access-Control-Allow-Origin , HTTP响应头部字段，用于指定哪些网站的请求可以获取当前资源。在解决JSON数据交换时的跨域问题时，服务器可以通过设置该头部信息，允许来自不同源的请求获取资源，从而实现跨域数据通信。例如，如果设置为Access-Control-Allow-Origin: ，则表示任何源都可以访问该资源；如果设置为具体的源地址，如Access-Control-Allow-Origin: https://example.com，则只有该源的请求才能成功获取资源。

JSON , JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于易于阅读和编写的人类可读文本，同时也易于机器解析和生成。在Web应用、API接口开发以及数据传输等领域广泛应用。其结构以键值对形式存在，可以表示简单的数据类型如字符串、数字、布尔值，也可以嵌套表示复杂的数据结构如数组和对象。 结构体（在Go语言中） , 在Go编程语言中，结构体是一种自定义复合数据类型，允许开发者组合多个不同类型的字段来创建新的数据类型。结构体成员可以是任何基本类型或自定义类型，甚至可以包含其他结构体作为其字段，形成嵌套结构。在处理JSON数据时，Go语言的结构体被用来映射JSON对象的结构，通过为结构体字段添加json标签，可以实现JSON数据与结构体字段之间的序列化和反序列化操作。 序列化与反序列化 , 序列化是将数据结构或对象转换为可以进行持久化存储或网络传输的形式（通常为字节流）的过程。在Go语言处理JSON时，结构体的序列化是指将结构体实例转化为JSON字符串；而反序列化则是相反的过程，即将JSON字符串解码恢复成相应的结构体实例。Go语言内置的encoding/json包提供了对JSON数据进行序列化和反序列化的支持，使得程序能够方便地与JSON格式的数据进行交互。

...下，我们都希望可以将JSON数据从客户端发送到服务器端，并且从服务器端返回响应的数据。这就是Ashx的一个强大功能。 2. 什么是Ashx Ashx是ASP.NET中的一个组件，它可以用于处理HTTP请求。通过Ashx，我们可以创建自己的HTTP处理程序，实现定制的业务逻辑。 3. JSON是什么？ JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的一个子集。它易于人阅读和编写，同时也易于机器解析和生成。 4. 如何使用Ashx处理JSON数据？ 首先，我们需要定义一个Ashx方法来处理我们的请求。这个方法呐，它得接收一个叫“request”的小家伙作为参数，其实呢，这玩意儿就是一个HttpApplicationRequest对象，里头装着这次请求的所有详细信息，一丁点儿也没落下。 csharp public void HandleHttpRequest(HttpContext context) { // 获取请求的内容 string requestContent = context.Request.InputStream.ReadToEnd(); // 将请求内容转换为JSON对象 dynamic jsonObject = JsonConvert.DeserializeObject(requestContent); // 在这里处理你的JSON数据... // 返回响应 context.Response.Write("处理成功"); } 在这个方法中，我们首先获取了请求的内容，然后使用JsonConvert.DeserializeObject方法将其转换为一个动态类型的JSON对象。这样，我们就可以方便地访问和操作JSON数据了。 5. 总结 Ashx是一个强大的工具，可以帮助我们在ASP.NET中处理各种HTTP请求。尤其是当我们碰上要处理JSON数据这事儿，用Ashx可是能帮咱们省不少力，让事情变得轻松简单多了。当你把请求的内容成功转换成JSON格式后，就等于把它变成一个我们熟悉的.NET对象，这样一来，处理JSON数据就跟玩普通.NET对象一样简单轻松，毫无压力啦！ 6. 深入探讨 然而，这只是一个基础的例子。实际上，我们可以使用Ashx做更多的事情。比如说，咱们可以在动手解析JSON数据之前，先给请求做个“体检”确认其靠谱性；又或者，在我们成功搞定数据之后，再添点额外的“小料”，让它更加饱满丰富。 此外，我们也需要注意安全问题。虽然“JsonConvert.DeserializeObject”这个小家伙能够自动挡下不少常见的JSON攻击招式，但我们仍然得瞪大眼睛，确保喂给它的数据确实是货真价实、没毛病的。 总的来说，Ashx是一个非常有用的工具，但我们也需要谨慎使用，以防止可能的安全问题。

...slate这个专门处理国际化的插件： javascript // 引入angular-translate库 var app = angular.module('myApp', ['pascalprecht.translate']); app.config(['$translateProvider', function ($translateProvider) { // 配置默认语言 $translateProvider.preferredLanguage('en'); // 加载语言资源文件 $translateProvider.useStaticFilesLoader({ prefix: 'languages/', suffix: '.json' }); // 允许模糊匹配，提高语言包利用率 $translateProvider.fallbackLanguage('en'); $translateProvider.useSanitizeValueStrategy('sanitize'); }]); 以上代码中，我们设置了默认语言为英语，并配置了静态文件加载器从指定路径加载JSON格式的语言资源文件。 3. 创建与使用语言资源文件 接下来，我们需要创建对应的语言资源文件，例如languages/en.json和languages/zh-cn.json： json // languages/en.json { "greeting": "Hello, world!", "buttonText": "Click me" } // languages/zh-cn.json { "greeting": "你好，世界！", "buttonText": "点击我" } 4. 在视图层应用国际化 在视图模板中，我们可以借助translate指令或过滤器来动态替换文本： html { { 'greeting' | translate } } 5. 动态切换语言 最后，为了实现用户界面语言的动态切换，可以在控制器中调用 $translate.use() 方法： javascript app.controller('MainCtrl', ['$scope', '$translate', function ($scope, $translate) { $scope.changeLanguage = function (langKey) { $translate.use(langKey); }; }]); 然后在HTML中添加一个语言选择器： html English 简体中文 到此为止，我们已经成功地实现了AngularJS单页应用的国际化支持。在整个这个过程中，AngularJS就像个超能小助手，它拥有无比灵活、强大，而且特别好懂的API接口，这可帮了我们大忙了！它把开发国际化功能的那些繁琐步骤给大大简化了，让我们的应用程序轻松突破语言障碍，飞向全球各地，无论哪个地区的用户，都能用自己习惯的语言来顺畅使用。这正是AngularJS让我们能够大显身手，轻松构建出跨越国界的强大Web应用的关键所在，它的价值简直不要太赞！

... 首先，我们需要通过JavaScript的window对象来调用localStorage的接口。然后，我们可以使用setItem()方法来向localStorage中添加新的键值对，也可以使用getItem()方法来获取指定键对应的值。 以下是一个简单的例子： javascript // 向localStorage中添加一个新的键值对 localStorage.setItem("username", "张三"); // 获取指定键对应的值 var username = localStorage.getItem("username"); console.log(username); // 输出：张三 2.2 使用sessionStorage进行本地存储 同样的，我们也可以通过JavaScript的window对象来调用sessionStorage的接口。不过，你得知道这么个事儿，sessionStorage里头的信息就像临时记事本一样，只在你当前浏览这个网站的这一整个过程，也就是“同一个会话”期间有效。打个比方，就像你看电影时买的一桶爆米花，电影结束，爆米花也就吃完了。同样道理，一旦你的这次会话或者访问结束，sessionStorage里存的所有数据都会被清空掉，不会留下任何痕迹。 以下是一个简单的例子： javascript // 向sessionStorage中添加一个新的键值对 sessionStorage.setItem("username", "李四"); // 获取指定键对应的值 var username = sessionStorage.getItem("username"); console.log(username); // 输出：李四 三、HTML5本地存储的应用场景 说了这么多，那么我们在实际开发中，应该如何利用这些本地存储功能呢？接下来，我就给大家分享一些常见的应用场景。 3.1 存储用户的登录状态 当我们需要让用户在多个页面之间保持登录状态时，就可以将用户的身份信息存储到localStorage中。这样，就算用户在各个页面之间跳来跳去，也能确保他们的登录状态始终稳稳当当的，不会无缘无故消失。 以下是一个简单的例子： javascript // 当用户成功登录后，将用户名和密码存储到localStorage中 localStorage.setItem("username", "张三"); localStorage.setItem("password", "123456"); // 在后续的页面中，可以从localStorage中读取用户的登录信息 var username = localStorage.getItem("username"); var password = localStorage.getItem("password"); 3.2 存储购物车的商品信息 在电商网站中，我们常常需要记录用户购物车中的商品信息。这时候，我们就能把您购物车里的商品信息存到localStorage这个小仓库里头，这样一来，您在各个页面之间穿梭时，都能随时查看和修改您的购物清单啦。 以下是一个简单的例子： javascript // 当用户将商品加入购物车后，将商品信息存储到localStorage中 localStorage.setItem("cart", JSON.stringify([{"id":1,"name":"苹果","price":5},{"id":2,"name":"香蕉","price":3}])); // 在后续的页面中，可以从localStorage中读取购物车中的商品信息 var cart = JSON.parse(localStorage.getItem("cart")); console.log(cart); 总结： 以上就是我为大家介绍的HTML5如何支持本地存储（localStorage）和会话存储（sessionStorage）功能的一些基础知识和常见应用场景。希望通过这篇接地气的文章，大家伙都能把这项牛逼哄哄的功能理解得明明白白，掌握得妥妥当当，这样一来，咱们的开发效率嗖嗖往上升，用户体验蹭蹭地优化，就贼棒啦！如果你有任何问题或者疑问，欢迎随时留言给我，我会尽力帮助你解决问题。最后，感谢大家的阅读和支持！

JSON对象里的数据取不到？一探究竟！ 在我们的日常开发中，JSON（JavaScript Object Notation）作为轻量级的数据交换格式，广泛应用于前后端交互、配置文件读写等多种场景。然而，有时候我们会遇到一个让人头疼的常见问题：那个JSON对象明明近在眼前，可就是没法顺利拿到我们想要的具体数据。本文将通过实例探讨和解析这个问题，力求帮你拨开迷雾，掌握JSON数据的正确获取方式。 1. JSON基础与问题概述 首先，我们来回顾一下JSON的基本结构。你知道JSON吗？它其实是一种特别实用的数据存储格式，就像咱们平时用的小字典一样，里边的内容都是一对一对的放着。这里的“一对”就是键值对，键呢，相当于字典里的词条名称，人家规定必须得是字符串形式的；而值呢，就灵活多啦，可以是字符串、数字（整数、小数都行）、布尔值（也就是真或假），还能是数组（也就是一组数据打包在一起）、null（表示空或者无值）或者是另一个包含这些元素在内的JSON对象。是不是感觉挺丰富多彩的呀？例如： javascript let json = { "name": "John", "age": 30, "city": "New York", "hobbies": ["reading", "gaming"] }; 当我们在尝试从这样的JSON对象中提取数据时，如果出现了“取不到”的情况，可能是以下几个原因导致的： - 键名拼写错误或大小写不匹配。 - 路径引用错误，特别是在处理嵌套的JSON对象时。 - 数据类型判断错误，比如误以为某个值存在但实际上为undefined或null。 2. 键名错误引发的数据取不到 假设我们要从上述json对象中获取name属性，正确的做法如下： javascript console.log(json.name); // 输出: John 但如果我们将键名写错，如： javascript console.log(json.nmae); // 输出: undefined 此时就会出现“取不到”数据的情况，因为实际上并不存在名为nmae的属性。所以，在你捣鼓JSON的时候，千万要留意键名可得整准确了，而且记住啊，在JavaScript这个小淘气里，对象的属性名那可是大小写“斤斤计较”的。 3. 嵌套对象路径引用错误 对于嵌套的JSON对象，我们需要明确地指定完整路径才能访问到内部属性。例如： javascript let complexJson = { "user": { "name": "Alice", "address": { "city": "San Francisco" } } }; // 正确的方式： console.log(complexJson.user.address.city); // 输出: San Francisco // 错误的方式： console.log(complexJson.user.city); // 输出: undefined 这里可以看到，如果我们没有正确地按照路径逐层深入，同样会导致数据无法获取。 4. 数据类型的判断与处理 有时，JSON中的某个属性可能并未赋值，或者被设置为null。在访问这些属性时，需要做适当的检查： javascript let partialJson = { "name": null, "age": 35 }; // 直接访问未定义或null的属性 console.log(partialJson.name); // 输出: null // 在访问前进行条件判断 if (partialJson.name !== undefined && partialJson.name !== null) { console.log(partialJson.name); } else { console.log('Name is not defined or null'); } 5. 结论与思考 面对JSON对象中的数据取不到的问题，关键在于理解其底层逻辑和结构，并结合实际应用场景仔细排查。记住，每一次看似无法获取的数据背后，都有可能是细节上的小差错在作祟。只有细致入微，才能真正把握住这看似简单的JSON世界，让数据在手中自由流转。下次再碰到这种问题，咱们可以先别急着一头栽进去，不如先把节奏放缓，把思路缕一缕，一步步抽丝剥茧地分析看看。这样说不定就能火速找准问题的症结所在，然后轻轻松松就把问题给解决了。

JSON线段格式：深入解析与实践应用 在当今的编程世界中，数据交换已经成为软件开发中的核心环节之一。你知道吗，这玩意儿叫JSON（JavaScript Object Notation），就像个轻量级的“数据快递员”，它超级给力的地方就在于那简单易懂的“语言”和书写起来贼方便的特点。正因为如此，这家伙在Web服务、前后端交流这些场合里，可以说是如鱼得水，大展身手，甚至在配置文件这块地盘上，也玩得风生水起，可厉害啦！嘿，伙计们，这次咱们要一起捣鼓点新鲜玩意儿——“JSON线段格式”，一种特别的JSON用法。我将通过一些实实在在的代码实例和咱们的热烈讨论，让你对它有更接地气、更深刻的领悟，保证你掌握起来得心应手！ 1. JSON线段格式简介 "JSON线段格式"这一概念并非JSON标准规范的一部分，但实际开发中，我们常会遇到需要按行分割JSON对象的情况，这种处理方式通常被开发者称为“JSON线段格式”。比如，一个日志文件就像一本日记本，每行记录就是一个独立的小故事，而且这个小故事是用JSON格式编写的。这样一来，我们就能像翻书一样，快速地找到并处理每一条单独的记录，完全没必要把整本日记本一次性全部塞进大脑里解析！ json {"time": "2022-01-01T00:00:00Z", "level": "info", "message": "Application started."} {"time": "2022-01-01T00:01:00Z", "level": "debug", "message": "Loaded configuration."} 2. 解析JSON线段格式的思考过程 当面对这样的JSON线段格式时，我们的首要任务是设计合理的解析策略。想象一下，你正在编写一个日志分析工具，需要逐行读取并解析这些JSON对象。首先，你会如何模拟人类理解这个过程呢？ python import json def parse_json_lines(file): with open(file, 'r') as f: for line in f: 去除末尾换行符，并尝试解析为JSON对象 parsed_line = json.loads(line.strip()) 对每个解析出的JSON对象进行操作，如打印或进一步处理 print(parsed_line) 调用函数解析JSON线段格式的日志文件 parse_json_lines('log.json') 在这个例子中，我们逐行读取文件内容，然后对每一行进行JSON解析。这就像是在模仿人的大脑逻辑：一次只聚焦一行文本，然后像变魔术一样把它变成一个富含意义的数据结构（就像JSON对象那样）。 3. 实战应用场景及优化探讨 在实际项目中，尤其是大数据处理场景下，处理JSON线段格式的数据可能会涉及到性能优化问题。例如，我们可以利用Python的ijson库实现流式解析，避免一次性加载大量数据导致的内存压力： python import ijson def stream_parse_json_lines(file): with open(file, 'r') as f: 使用ijson库的items方法按行解析JSON对象 parser = ijson.items(f, '') for item in parser: process_item(item) 定义一个函数来处理解析出的每个JSON对象 定义处理单个JSON对象的函数 def process_item(item): print(item) 调用函数流式解析JSON线段格式的日志文件 stream_parse_json_lines('log.json') 这样，我们就实现了更加高效且灵活的JSON线段格式处理方式，不仅节约了内存资源，还能实时处理海量数据。 4. 结语 JSON线段格式的魅力所在 总结起来，“JSON线段格式”以其独特的方式满足了大规模数据分块处理的需求，它打破了传统单一JSON文档的概念，赋予了数据以更高的灵活性和可扩展性。当你掌握了JSON线段格式的运用和理解，就像解锁了一项超能力，在解决实际问题时能够更加得心应手，让数据像流水一样顺畅流淌。这样一来，咱们的整体系统就能跑得更欢畅，效率和性能蹭蹭往上涨！ 所以，下次当你面临大量的JSON数据需要处理时，不妨考虑采用“JSON线段格式”，它或许就是你寻找的那个既方便又高效的解决方案。毕竟，技术的魅力就在于不断发掘和创新，而每一次新的尝试都可能带来意想不到的收获。

...实现在线学习页面动态读取章节对应的视频并进行播放。在线学习页面所需要的信息有两类： 课程计划信息 课程学习信息（视频地址、学习进度等） 如下图： 在线学习集成媒资管理的需求如下： 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。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

JSON（JavaScript对象表示法）是一种简洁的数据传递格式，用于以文本形式保存和传递数据。JSON以键值对映射的形式构建数据，兼容多种变量类型，例如文本、数值、逻辑值和列表等。 在Python中，我们可以使用json模块来读取JSON数据。json模块拥有loads()方法，可以将JSON对象变为Python中的关联数组（dictionary）或列表（list）。 import json JSON对象 json_str = '[1, 2, 3, 4, 5]' 将JSON对象变为列表 json_list = json.loads(json_str) print(json_list) [1, 2, 3, 4, 5] 在上面的代码中，我们首先导入了json模块。然后，我们声明了一个含有JSON对象的文本。最后，我们使用loads()方法将JSON对象变为Python列表。 如果JSON对象含有了多个字段和值，我们可以将JSON对象变为Python关联数组。 import json JSON对象 json_str = '{"name": "Tom", "age": 18, "gender": "male"}' 将JSON对象变为关联数组 json_dict = json.loads(json_str) print(json_dict) {'name': 'Tom', 'age': 18, 'gender': 'male'} 在上面的代码中，我们声明了一个含有多个字段和值的JSON对象。然后，我们使用loads()方法将JSON对象变为Python关联数组。 总的来说，将JSON变为Python中的列表或关联数组非常简单，只需要使用json模块中的loads()方法即可。

JSON , JavaScript Object Notation，是一种轻量级的数据交换格式，它基于文本，采用完全独立于语言的简洁语法设计，易于人阅读和编写，同时也易于机器解析和生成。在Web开发中广泛应用于服务器与客户端之间的数据传输，能够存储和表示简单值、数组、对象等多种类型的数据结构，并且可以支持嵌套，便于构建复杂的数据模型。 易语言 , 是一款国产的编程语言及其集成开发环境，具有全可视化编程、跨平台、面向对象等特点，旨在降低编程门槛，提高开发效率。易语言支持丰富的API接口调用和模块导入，使得开发者能够轻松实现各种功能，包括处理JSON数据等高级应用。 JSON模块 , 在易语言环境中，JSON模块是一个专门用于处理JSON数据的内置或第三方库，提供了将JSON字符串解析为易语言可操作的对象（如字典或数组）以及将易语言数据结构转换为JSON字符串的功能。通过调用JSON模块的相关函数，开发者能够便捷地读取、解析、创建和修改JSON数据，以满足Web开发中的数据交换需求。 文件操作模块 , 在易语言编程中，文件操作模块是一组预定义的功能组件，用于执行与文件相关的各种操作，例如打开文件、读取文件内容、写入文件、关闭文件等。结合JSON模块，文件操作模块可用于从JSON文件中读取数据，实现数据持久化存储和加载，进一步增强了易语言对JSON数据流处理的能力。

...、引言 在日常的数据处理过程中，地理位置信息是非常重要的一个部分。当我们在处理海量的地理数据时，想要迅速捞到我们需要的信息，就必须要对地理位置进行一种超级给力、高效的搜索查询才行。本文将介绍如何在MongoDB中实现高效的地理位置查询。 二、地理位置数据模型的设计 首先，我们需要设计一个好的地理位置数据模型。通常我们会将地理位置信息存储为经纬度坐标，也就是点状数据。例如： javascript { _id: ObjectId("5f6d72e83a91c798a5253d78"), location: { type: "Point", coordinates: [116.404, 39.915] } } 在这个数据模型中，location字段是一个包含经纬度坐标的JSON对象。在MongoDB这个数据库里，咱们完全可以把这个字段直接使上劲儿，用来做地理位置的查询哈，就像查地图找地点那样方便快捷。 三、地理位置查询的基本方法 在MongoDB中，我们可以通过使用$geoWithin操作符来进行地理位置查询。$geoWithin操作符可以用来查询满足某个地理位置范围内的文档。 例如，如果我们想要查询北京市的所有记录，我们可以这样做： javascript db.collection.find({ location: { $geoWithin: { $centerSphere: [[116.404, 39.915], 500] } } }) 这个查询将会返回所有距离北京中心500公里以内的记录。 四、地理位置查询的高级应用 除了基本的地理位置查询之外，MongoDB还提供了一些高级的应用功能。比如，我们能够用$near这个小工具，找出离得最近的那些文档；又或者，借助$geoIntersects这个神器，判断某个区域是否和其他区域有交集。 例如，如果我们想要查询最近的10个北京市的记录，我们可以这样做： javascript db.collection.find( { location: { $near: { $geometry: { type: "Point", coordinates: [116.404, 39.915] }, $maxDistance: 10000 } } } ) 这个查询将会返回所有距离北京中心不超过10公里的记录，并且按照距离从近到远排序。 五、结论 地理位置查询是MongoDB中的一个重要应用场景，正确使用地理位置查询可以帮助我们更高效地处理地理数据。设计一个贼棒的地理位置数据模型后，我们就能在MongoDB里轻轻松松地进行各种花式地理位置查找，就像探囊取物一样简单。而MongoDB的高级地理位置查询功能，如$near和$geoIntersects等，也可以帮助我们解决一些复杂的地理位置问题。

...数据结构，能够高效地处理二维表格型数据。在本文语境中，pandas库被用来读取json格式文件并转换为csv格式文件，其read_json()函数负责解析json数据，to_csv()函数则将数据写入csv文件。 JSON（JavaScript Object Notation） , JSON是一种轻量级的数据交换格式，基于文本且具有良好的可读性，易于人机编写和机器解析。在本文中，JSON作为原始数据格式，包含了需要转换为csv格式的信息，例如可以存储数组、对象、字符串、数字等各种类型的数据，并通过特定的语法进行组织。 CSV（Comma-Separated Values） , CSV是一种常见的文件格式，全称为逗号分隔值，用以存储表格数据，如电子表格或数据库中的信息。在文章中提到的场景下，CSV是目标文件格式，它的每一行代表一个记录，各个字段由逗号分隔，便于不同程序之间交换表格数据，以及进行进一步的数据分析或处理。 DataFrame , 虽然题目要求不少于三个名词解释，但DataFrame在此情境下十分重要，它是pandas库中的核心数据结构之一，可以理解为一个带有标签列的二维表格，可以容纳多种数据类型，方便进行统计分析、数据清洗等操作。在本文示例代码中，从json文件读取的数据首先被转化为DataFrame对象，然后再转换为csv文件格式输出。

在深入理解了JavaScript中XMLHttpRequest对象如何实现HTTP GET和POST请求后，我们可以进一步探索现代Web开发中的相关技术发展与实践。近年来，随着Fetch API的普及，它作为XMLHttpRequest的一个替代方案，提供了更简洁、强大的异步数据获取方式。Fetch API支持Promise规范，使得异步操作链式调用更为简便，并且内置了对Response对象的便捷处理方法，可以直接转换或读取JSON数据。 另外，在安全性方面，现代Web应用程序越来越注重数据传输的安全性。除了使用POST方法提交敏感信息外，HTTPS加密协议已成为网站标配，确保所有通信内容（包括GET请求）都被加密，防止中间人攻击。同时，为应对跨站请求伪造（CSRF）等安全威胁，开发者还需借助如CSRF token等机制增强防护。 此外，针对前后端交互模式的演进，RESTful API设计原则被广泛采纳，强调资源的表述性状态转移，使得API设计更加直观和易于维护。而随着前端框架如React、Vue.js等的发展，通过axios、fetch等库进行HTTP请求的操作变得更加方便，这些库通常封装了底层 XMLHttpRequest 或 Fetch API，提供了一致且易用的接口。 总的来说，从基础的XMLHttpRequest到如今丰富的前端工具链与安全策略，Web开发领域不断涌现出新的解决方案以优化HTTP请求的处理方式及提高数据传输安全性。因此，持续关注并掌握最新的网络请求技术和最佳实践对于现代Web开发者至关重要。

...耗费不少时间和精力去处理这些信息，这样一来，网页打开的速度就会变慢，咱们用户浏览网页的体验自然也就大打折扣啦。 为了解决这个问题，我们可以采取以下几种措施： 1. 数据分页 在处理大量数据时，我们可以将其分成多个部分，并在每个部分之间添加分页器。这样一来，用户每次瞧见的就只是一部分数据，而不是满满当当全部数据，这样一来，浏览器的压力也就减轻了，网页加载的速度自然就像火箭升空一样噌噌噌地提高了。 html { {item} } Next Page 2. 缓存数据 如果我们知道某个数据不会经常改变，我们可以将其缓存在浏览器中，以便下次访问时直接从缓存中读取，而不需要重新计算。 javascript var cachedData = {}; $http.get('data.json').then(function(response) { cachedData = response.data; }); $scope.items = cachedData; 3. 使用虚拟滚动 对于长列表，我们可以使用虚拟滚动来减少浏览器的负担。虚拟滚动是指只显示可见区域的数据，而不是全部数据。这种方法可以大大减少浏览器的负担，提高网页的加载速度。 css .scrollable { overflow-y: scroll; } .scrollable::-webkit-scrollbar { width: 8px; } .scrollable::-webkit-scrollbar-track { background-color: f1f1f1; } .scrollable::-webkit-scrollbar-thumb { background-color: 888; } .scrollable::-webkit-scrollbar-thumb:hover { background-color: 555; } 通过以上几种方法，我们可以有效地解决“ng-repeat”中的性能瓶颈问题，提高网页的加载速度和用户体验。同时，咱们也得留心优化代码这块儿，别让那些不必要的计算和内存消耗拖慢了网页速度，这样一来，咱就能更上一层楼，把网页性能提上去啦！ 总的来说， AngularJS 是一个非常强大的前端框架，它可以让我们轻松地创建出动态、交互式的网页应用程序。不过在实际用起来的时候，咱们也得留心优化代码这件事儿，别让性能瓶颈这类问题冒出来绊住咱们的脚。这样一来，才能更好地提升用户体验，让大家用得更顺溜、更舒心。希望通过这篇文章，能对你有所帮助！

...目的过程中，如何妥善处理Web应用的各种配置难题，比如路由咋整、静态文件目录又该怎么管好，这可是每个Go语言开发者都得正面硬刚、必须搞定的重要关卡。本文将深入探讨这些问题，并通过实例代码来阐述解决方案。 2. 路由配置 用Golang打造灵活的URL路由系统 在Golang中，我们通常会使用第三方库如Gin或Echo来实现复杂的路由配置。以Gin为例，它提供了直观且强大的中间件和路由功能： go package main import "github.com/gin-gonic/gin" func main() { r := gin.Default() // 定义一个简单的GET路由 r.GET("/", func(c gin.Context) { c.JSON(200, gin.H{ "message": "Hello, welcome to the home page!", }) }) // 定义带参数的路由 r.GET("/users/:username", func(c gin.Context) { username := c.Param("username") c.String(200, "Hello, %s!", username) }) // 启动服务 r.Run(":8080") } 上述代码展示了如何在Golang中使用Gin框架配置基础的路由规则，包括静态路径（"/"）和动态路径（"/users/:username"）。嘿，你知道吗？在这个地方，“:username”其实就是一个神奇的路由参数小能手，它可以在实际的请求过程中，把相应的那部分内容给抓过来，变成一个我们随时可以使用的变量值！就像是个灵活的小助手，在浩瀚的网络请求中为你精准定位并提取关键信息。 3. 静态文件目录 托管静态资源 在Web应用中，静态文件（如HTML、CSS、JavaScript、图片等）的托管也是重要的一环。Gin也提供了方便的方法来设置静态文件目录： go // 添加静态文件目录 r.Static("/static", "./public") // 现在，所有指向 "/static" 的请求都会被映射到 "./public" 目录下的文件 这段代码中，我们设置了"/static"为静态资源的访问路径前缀，而实际的静态文件则存储在项目根目录下的"public"目录中。 4. 深入思考与探讨 处理路由配置和静态文件目录的问题，不仅关乎技术实现，更体现了我们在设计Web架构时的灵活性和预见性。比如说，如果把路由设计得恰到好处，就仿佛给咱们的API铺上了一条宽敞明亮的大道，让咱能轻松梳理、便捷维护。再者，把静态文件资料收拾得井井有条，就像给应用装上了火箭助推器，嗖一下提升运行速度，还能帮服务器大大减压，让它喘口气儿。 当我们在编写Golang Web应用时，务必保持对细节的关注，充分理解并熟练运用各种工具库，这样才能在满足功能需求的同时，打造出既优雅又高效的程序。同时呢，咱们也得不断尝鲜、积极探索新的解决方案。毕竟，技术这家伙可是一直在突飞猛进，指不定啥时候就冒出来个更优秀的法子，让我们的配置策略更加优化、更上一层楼。 总结来说，Golang以其强大而又易用的特性，为我们搭建Web应用提供了一条顺畅的道路。要是咱们能把路由配置得恰到好处，再把静态资源打理得井井有条，那咱们的应用就能更上一层楼，无论多复杂、多变化的业务场景，都能应对自如，让应用表现得更加出色。让我们在实践中不断学习、不断进步，享受Golang带来的开发乐趣吧！

...须依赖HTML标签或JavaScript来进行class样式切换？本文将通过探讨和实践的方式，带你一起揭秘这个问题，并尝试寻找可能的Java解决方案。 1. CSS类与样式切换的基本理解 首先，让我们回顾一下CSS类（class）的作用。在做Web开发的时候，CSS类就像是给HTML元素穿上各种各样的衣服，这样我们就能方便地让多个元素共享同一套“穿搭”规则，实现样式复用，让页面更加丰富多彩。样式切换通常是指根据特定条件更改元素所应用的CSS类，从而实现视觉效果的变化。例如，一个按钮在被点击时可能会从“默认”样式切换到“激活”样式。 html Click me css .default-btn { background-color: grey; } .active-btn { background-color: green; } 理论上，这种样式切换的动作一般由JavaScript处理，而非Java。因为Java主要用于后端逻辑处理，而前端DOM操作则更依赖JavaScript。 2. Java在样式切换中的角色 那么，Java真的无法参与样式切换的过程吗？答案并非绝对。虽然Java自身并不亲手去摆弄DOM这个玩意儿，但它完全可以借助生成动态内容或者和JavaScript这位老伙计默契配合，来巧妙地达到切换样式的最终目的。 2.1 JSP/Servlet动态生成HTML 例如，在Java Servlet或JSP中，我们可以根据服务器端的业务逻辑动态生成HTML内容，包括带有不同CSS类的元素： java // 在Servlet中 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String status = "active"; // 假设这是根据业务逻辑获取的状态 response.getWriter().println("Click me"); } 2.2 使用AJAX与Java后端通信 另一方面，Java也可以通过提供API给前端调用来影响样式切换。在前端开发中，我们通过JavaScript玩个魔术，让AJAX小弟去给后端Java大哥发个请求。Java大哥收到请求后，麻溜地处理一番，然后把新鲜热乎的样式状态打包回传。接着，前端拿到这个反馈，就立马根据这些信息给DOM元素换上新的class属性，让它瞬间焕然一新。 javascript // 前端Ajax请求 var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/button-status'); xhr.onload = function() { if (xhr.status === 200) { var status = JSON.parse(xhr.responseText).status; document.querySelector('.default-btn').classList.add(status + '-btn'); document.querySelector('.default-btn').classList.remove('default-btn'); } }; xhr.send(); // 后端Java处理请求并返回状态 @WebServlet("/api/button-status") public class ButtonStatusServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String status = "active"; // 根据业务逻辑获取状态 response.setContentType("application/json"); response.getWriter().write("{\"status\":\"" + status + "\"}"); } } 3. 思考与讨论 尽管Java确实不能像JavaScript那样直接操纵DOM并执行样式切换，但它可以在Web开发流程中扮演重要的角色，尤其是在数据处理、业务逻辑控制以及与前端交互方面。其实呢，Java并不是偷懒不走样式切换这条路，而是巧妙地借助服务端的计算能力和前端的实时交流，间接地对样式切换施加影响、把握控制权。就像是它在幕后默默指挥，让样式切换这出戏更加流畅自然地进行。 总结起来，尽管在实现class样式切换的过程中，Java并不直接作用于DOM，但其在整个前后端交互过程中起到关键支撑作用。甭管是实时生成HTML内容，还是通过AJAX接口和前端兄弟联手干活儿，Java这家伙都以其特有的方式，实实在在地参与到各种样式切换的实际应用场景里头。