• [技术干货] 大前端搜索技术之Nuxt.js
    一、搜索前端技术需求Nuxt.js 是 Vue.js 生态下专注解决 SEO 问题的服务端渲染(SSR)框架,专为需搜索引擎优化的前端场景设计,可兼顾 Vue 开发体验与服务端渲染优势。其核心价值在于破解 Vue 客户端渲染的 SEO 短板 —— 客户端渲染中搜索引擎爬虫难以解析 JS 生成的内容,而 Nuxt.js 部署于 Node.js,接收请求后先从服务端获取数据,完成 HTML 渲染再响应给浏览器,生成的完整 DOM 能被爬虫高效抓取。1.1 需求描述采用vue.js开发搜索界面则SEO不友好,需要解决SEO的问题  1.2 了解SEOSEO,也就是搜索引擎优化的逻辑,其实是非常简单的。这就像是在大学里的学生会主席,你要让投票者给你更多的选票。那么,你需要先「自我优化」,无论是外表还是能力;此外,你还需获得更多意见领袖的推荐,才可以让更多普通选民支持你。同样的,你要让搜索引擎在无数的文章,把你的文章排到前面。你首先需要先做:1. 内部优化:也就是提高文章本身的质量2. 外部优化:也就是让你的文章曝光在更多权威网站上总结:seo是网站为了提高自已的网站排名,获得更多的流量,对网站的结构及内容进行调整优化,以便搜索引擎 (百度,google等)更好抓取到更优质的网站的内容。下图是搜索引擎爬取网站页面的大概流程图:(搜索引擎的工作流程很复杂,下图只是简单概括)  从上图可以看到SEO是网站自己为了方便spider抓取网页而作出的网页内容优化,常见的SEO方法比如:对url链接的规范化,多用restful风格的url,多用静态资源url;注意title、keywords的设置。由于spider对javascript支持不好,对于网页跳转用href标签。 。。。 1.3 服务端渲染和客户端渲染采用什么技术有利于SEO?要解答这个问题需要理解服务端渲染和客户端渲染。什么是服务端渲染?我们用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html的内容,这个过程就是服务端渲染,如下图:  服务端渲染的特点:在服务端生成 html 网页的dom元素。客户端(浏览器)只负责显示dom元素内容。当初随着web2.0的到来,AJAX技术兴起,出现了客户端渲染:客户端(浏览器) 使用AJAX向服务端发起http请 求,获取到了想要的数据,客户端拿着数据开始渲染html网页,生成Dom元素,并最终将网页内容展示给用户, 如下图:  客户端渲染的特点:在服务端只是给客户端响应的了数据,而不是html网页客户端(浏览器)负责获取服务端的数据生成Dom元素。两种方式各有什么优缺点?客户端渲染:缺点 不利于网站进行SEO,因为网站大量使用javascript技术,不利于spider抓取网页。优点 客户端负责渲染,用户体验性好,服务端只提供数据不用关心用户界面的内容,有利于提高服务端的开发效率。适用场景 对SEO没有要求的系统,比如后台管理类的系统,如电商后台管理,用户管理等。 服务端渲染:优点有利于SEO,网站通过href的url将spider直接引到服务端,服务端提供优质的网页内容给spider。缺点服务端完成一部分客户端的工作,通常完成一个需求需要修改客户端和服务端的代码,开发效率低,不利于系统的稳定性。适用场景 对SEO有要求的系统,比如:门户首页、商品详情页面等二、 Nuxt.js介绍2.1 Nuxt.js介绍移动互联网的兴起促进了web前后端分离开发模式的发展,服务端只专注业务,前端只专注用户体验,前端大量运 用的前端渲染技术,比如流行的vue.js、react框架都实现了功能强大的前端渲染。但是,对于有SEO需求的网页如果使用前端渲染技术去开发就不利于SEO了,有没有一种即使用vue.js、react的前 端技术也实现服务端渲染的技术呢?其实,对于服务端渲染的需求,vue.js、react这样流行的前端框架提供了服务 端渲染的解决方案。  从上图可以看到: react框架提供next.js实现服务端渲染。 vue.js框架提供Nuxt.js实现服务端渲染2.2 Nuxt.js工作原理下图展示了从客户端请求到Nuxt.js进行服务端渲染的整体的工作流程  用户打开浏览器,输入网址请求到Node.js部署在Node.js的应用Nuxt.js接收浏览器请求,并请求服务端获取数据Nuxt.js获取到数据后进行服务端渲染Nuxt.js将html网页响应给浏览器Nuxt.js使用了哪些技术?Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件,如下图:  Babel 是一个js的转码器,负责将ES6的代码转成浏览器识别的ES5代码。 Webpack是一个前端工程打包工具。 Vue.js是一个优秀的前端框架。Nuxt.js的特性有哪些?基于 Vue.js自动代码分层服务端渲染强大的路由功能,支持异步数据静态文件服务ES6/ES7 语法支持打包和压缩 JS 和 CSSHTML头部标签管理本地开发支持热加载集成ESLint支持各种样式预处理器: SASS、LESS、 Stylus等等总结Nuxt.js 是 Vue.js 生态下专注解决 SEO 问题的服务端渲染(SSR)框架,专为需搜索引擎优化的前端场景设计,可兼顾 Vue 开发体验与服务端渲染优势。其核心价值在于破解 Vue 客户端渲染的 SEO 短板 —— 客户端渲染中搜索引擎爬虫难以解析 JS 生成的内容,而 Nuxt.js 部署于 Node.js,接收请求后先从服务端获取数据,完成 HTML 渲染再响应给浏览器,生成的完整 DOM 能被爬虫高效抓取。架构上以 “约定优于配置” 为核心,基于 Vue.js、Webpack、Babel 构建,具备自动路由生成、代码分层等特性,无需手动配置路由,支持异步数据加载与 HTML 头部标签管理。同时内置 SEO 优化能力,可自动生成 meta 标签、XML 站点地图,规范 URL 处理,比手动配置更高效。适用场景聚焦内容密集型网站(如博客、商品详情页)及 SEO 关键项目,能平衡开发效率与性能,既保留前端开发灵活性,又通过服务端渲染提升页面收录与排名表现。
  • [问题求助] 提交地图新组件id重复
    地图提交新的  提示Id重复  也修改不了
  • [技术干货] JavaScript Lodash 工具库
    Lodash官网为:cid:link_0Lodash库在JavaScript中是一个广泛使用的实用工具库,它提供了大量的函数来简化JavaScript编程的复杂性。以下是Lodash库的主要用途和特点:简化编程任务:Lodash提供了丰富的函数集,用于处理数组、对象、字符串、数字等常见的数据类型。这些函数涵盖了映射、过滤、归约、合并、防抖、节流等多种操作,可以大大简化日常开发中的编码工作。高性能:Lodash专注于提供高性能的函数,这些函数经过优化以在各种JavaScript运行环境中提供最佳性能。这意味着使用Lodash可以加快代码的执行速度,提高应用程序的性能。模块化:Lodash采用了模块化的架构,允许开发者按需导入需要的函数。这种模块化设计可以减小项目的体积,提高代码的复用性和可维护性。跨浏览器兼容性:Lodash在各种现代浏览器和Node.js等JavaScript运行环境中都能正常工作,并提供了对ES6+特性的良好支持。这使得Lodash成为了一个跨平台的解决方案,可以在不同的环境中使用。易于学习和使用:Lodash的API设计简洁清晰,易于学习和记忆。开发者可以快速掌握Lodash的使用方法,并将其应用到实际项目中。具体来说,Lodash中的一些常用函数包括:_.get(object, path, [defaultValue]):获取对象指定路径上的值,如果路径不存在则返回默认值。_.set(object, path, value):设置对象指定路径上的值。_.cloneDeep(value):深拷贝一个对象或数组。_.isEmpty(value):判断一个值是否为空,包括空对象、空数组、空字符串以及undefined和null。_.isEqual(value, other):比较两个值是否相等,支持比较对象和数组。_.debounce(func, wait, [options]):创建一个函数,该函数在调用时最多只会执行一次(或者在wait时间内只会执行一次),可以用来处理频繁触发的事件。_.throttle(func, wait, [options]):创建一个函数,该函数在一段时间内最多只会执行一次,可以用来限制函数的执行频率。这些函数只是Lodash提供的一部分功能,实际上Lodash还包含了许多其他实用的函数和方法,可以帮助开发者更高效地编写JavaScript代码。总的来说,Lodash是一个功能强大、易于使用的JavaScript工具库,值得开发者在项目中使用。
  • [技术干货] 华为跨端、跨框架的 UI 组件库OpenTiny
    一、前言在华为开发者大会2023上,官方正式进行发布了 OpenTiny,这是华为云出品的企业级设计体系统,一套前端 UI 组件库。适配 PC 端/移动端等多端,完成度很高。组件库地址为:cid:link_0它不仅支持 Angular,还支持 Vue,通用性做的很好二、OpenTiny组件库概述OpenTiny是华为云开源的Web应用前端开发套件,经过九年的持续打磨,服务于华为内外部上千个项目。它适配PC端/移动端等多端,涵盖Vue2/Vue3/Angular多技术栈,拥有主题配置系统/中后台模板/CLI命令行等工具库,是一套企业级、跨框架、跨版本的前端组件库。三、OpenTiny组件库的核心特点跨端跨框架:OpenTiny采用Renderless无渲染组件设计架构,实现了一套代码同时支持Vue2/Vue3,PC/Mobile端。这使得开发者可以在不同的平台和框架之间无缝切换,大大提高了开发效率。 组件丰富:OpenTiny提供了150+企业级组件,包括80+PC端组件和30+移动端组件,满足各种复杂业务场景的需求。同时,它还内置了虚拟滚动等优化技术,保证大数据场景下的流畅体验。 支持配置式组件:OpenTiny的组件支持模板式和配置式两种使用方式,适合在低代码平台中使用。开发者无需进行二次封装,即可快速构建高效、美观的前端应用。 周边生态齐全:OpenTiny不仅提供了不同框架的组件库,还提供了一系列开发工具,如CLI脚手架工具、中后台模板、主题配置系统等。这些工具覆盖了前端开发的全流程,帮助开发者提高开发效率和质量。四、OpenTiny组件库的优势稳定性与可靠性:OpenTiny经过九年的持续打磨和华为内外部上千个项目的实践验证,具有极高的稳定性和可靠性。它能够满足华为内部IT系统对功能、性能、可信的极致要求。 灵活性与可定制性:OpenTiny支持函数级别的逻辑定制和全模板替换,具有极高的灵活性和可定制性。开发者可以根据自己的需求快速定制出符合业务场景的前端应用。 良好的社区支持:OpenTiny作为华为云开源项目之一,得到了广泛的社区支持和关注。开发者可以在社区中分享经验、提出问题、获取帮助,共同推动OpenTiny的发展。五、应用场景OpenTiny组件库适用于各种企业级前端应用场景,如企业门户、后台管理系统、CRM系统、ERP系统等。它可以帮助开发者快速构建高效、美观、稳定的前端应用,提升用户体验和业务效率。六、结语OpenTiny组件库凭借其跨端跨框架、组件丰富、支持配置式组件和周边生态齐全等核心特点,成为了企业级前端开发的新选择。随着前端技术的不断发展和应用场景的不断拓展,OpenTiny将继续发挥其在前端开发领域的优势,为开发者提供更加高效、稳定、可靠的前端开发工具。
  • [应用性能] app无法在鸿蒙设备上实现开机自动启动
    app监听了android.intent.action.BOOT_COMPLETED消息,在android系统中能收到并实现开机启动启动,但app在鸿蒙电视收不到这个广播消息。可以帮忙解答下吗?
  • [高校开发者专区] 基于“华为云”技术的SpringBoot项目实践设计———房屋租赁系统
    基于“华为云”技术的SpringBoot项目实践设计———房屋租赁系统华为云是华为的云服务品牌,将华为30多年在ICT领域的技术积累和产品解决方案开放给客户,提供稳定可靠、安全可信、可持续发展的云服务。华为云致力于让云无处不在,让智能无所不及,共建智能世界的云底座。OBS是什么?对象存储服务 OBS对象存储服务(Object Storage Service)是一款稳定、安全、高效、易用的云存储服务,具备标准Restful API接口,可存储任意数量和形式的非结构化数据 实践项目介绍本项目(房屋租赁系统)以实际运用为背景,基于华为云和SpringBoot开发,目的是为满足用户查询房屋、预约看房、房屋租赁的需求。关键词:Spring Boot框架,华为云项目架构:B/S结构B/S(浏览器/服务器)结构是目前主流的网络化的结构模式,它能够把系统核心功能集中在服务器上面,可以帮助系统开发人员简化操作,便于维护和使用。它能够结合Web浏览器技术,ActiveX技术以及多种脚本语言等技术。帮助程序开发者节约开发成本。 项目源码下载https://www.aliyundrive.com/t/HM6nVyH6QLXy5oOmf9in系统功能分析本赁系统主要分管理员和租客两大功能模块,下面将详细介绍管理员和租客分别实现的功能。租客功能————租客进入本系统可查看系统信息,包括网站首页、公告信息以及房屋信息,注册登录主要功能模块包括个人中心、看房申请管理、租赁合同管理、收租信息管理、报修信息管理 管理员功能————————管理员可登录系统后台,登录后可对系统进行全面管理,包括个人中心、公告信息管理、租客管理、户主管理、房屋信息管理、看房申请管理、租赁合同管理、收租信息管理、报修信息管理、收租统计管理以及维修数据管理功能简要展示1、主界面 2、租客注册与登录 租客可选择房屋查看房屋详情信息,登录可进行看房申请操作,房屋详情界面展示 租客登录后还可查看租赁合同信息,租赁合同界面展示 租客可进入收租信息界面查看收租信息,收租信息界面展示 2、管理员登陆 管理员可对租户进行管理,处理租户发起的看房、维修申请,以及对租赁合同信息进行增删改查。 管理员可增删改查房屋信息,房屋信息管理界面展示如图5-11所示。——————————————大致功能及结构演示完毕———————————————基于华为云obs实现文件上传下载1.进入obs控制台2.创建桶3.点击创建桶4.获得obs工具参数必要参数罗列 代码如下(示例) private static final String endPoint = "obs.cn-east-3.myhuaweicloud.com"; private static final String ak = "G4NKS1KU4V0Z7Q6RGOCV"; private static final String sk = "RCypypmqmYA4Dv8VHjdgS7mPTwGEx5Hkngmrv71L"; public static String BUCKET_NAME = "myclude-test";//你创建的桶名Maven的获取<dependency> <groupId>com.huaweicloud</groupId> <artifactId>esdk-obs-java</artifactId> <version>3.20.6.2</version> </dependency> 分析工具类文件上传方法//文件上传 public void ObsUpload(String bucketName, String key, InputStream inputStream) throws IOException { // 创建ObsClient实例 ObsClient obsClient = new ObsClient(ak, sk, endPoint); obsClient.putObject(bucketName, key, inputStream); obsClient.close(); }该方法需要桶名,key,输入流Inputstream输入流介绍表示有序的字节流,换句话说,可以将 InputStream 中的数据作为有序的字节序列读取。 这在从文件读取数据或通过网络接收时非常有用。 InputStream 通常连接到某些数据源,如文件,网络连接,管道等 看如下代码片段: public class InputStreamExample { public static void main(String[] args) throws IOException { InputStream inputStream = new FileInputStream("D:\\out.txt"); //do something with data... int data = inputStream.read(); while (data != -1) { System.out.print((char) data); data = inputStream.read(); } inputStream.close(); } } 注意:为了代码清晰,这里并没有考虑处理异常的情况,IO 异常处理有专门的介绍。 文件下载方法 ```java //控制层可调用该方法实现文件下载 public void dowloadFile(HttpServletResponse response, InputStream inputStream, String fileName) { response.setHeader("content-type", "application/octet-stream"); response.setContentType("application/octet-stream"); try { response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName, "UTF-8")); } catch (Exception e) { e.printStackTrace(); } byte[] items = new byte[1024 * 10]; int i = 0; try { BufferedInputStream bufferedInputStream = new BufferedInputStream(inputStream); OutputStream outputStream = response.getOutputStream(); BufferedOutputStream outputStream1 = new BufferedOutputStream(outputStream); while ((i = bufferedInputStream.read(items)) != -1) { outputStream1.write(items, 0, i); outputStream1.flush(); } outputStream1.close(); outputStream.close(); bufferedInputStream.close(); inputStream.close(); } catch (Exception e1) { e1.printStackTrace(); } }### 具体逻辑实现 文件上传 创建一个前端页面,用于获取文件,这里我们要用到bootstrap,js,css等等 ```java <%-- Created by IntelliJ IDEA. User: 28571 Date: 2021/9/7 Time: 1:13 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我的text</title> </head> <body> <div> <form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data"> <input type="submit" class="btn btn-outline-danger" onclick="return checkfile()" value="上传文件"/> <input class="btn btn-outline-primary" type="file" onchange="checkfile()" id="fileupload" name="file" onpropertychange="getFileSize(this.value)"/><br/> </form> </div> </body> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> var tipMsg = "建议使用chrome firefox ie等浏览器"; var browserCfg = {}; //下面一段鉴别使用者的浏览器 var ua = window.navigator.userAgent; if (ua.indexOf("MSIE") >= 1) { browserCfg.ie = true; } else if (ua.indexOf("Firefox") >= 1) { browserCfg.firefox = true; } else if (ua.indexOf("Chrome") >= 1) { browserCfg.chrome = true; } function checkfile() { try { var obj_file = document.getElementById("fileupload"); var isvip = ${isvip}; if (obj_file.value == "") { alert("请先选择上传文件"); return; } var filesize = 0; if (browserCfg.firefox || browserCfg.chrome) { filesize = obj_file.files[0].size; //chrome等浏览器支持这个方法拿到文件大小 } else if (browserCfg.ie) { var obj_img = document.getElementById('tempimg'); obj_img.dynsrc = obj_file.value; filesize = obj_img.fileSize; } else { alert(tipMsg); return false; } if (filesize == -1) { alert(tipMsg); return false; } else { return true; } } catch (e) { alert(e); return false; } } </script> </html>创建一个控制层FileController,用于获得前端响应设置工具中的全局变量 private static final Logger LOGGER = LoggerFactory.getLogger(OBSUtils.class); private static final String endPoint = "obs.cn-north-4.myhuaweicloud.com"; private static final String ak = "G4NKS1KU4V0Z7Q6RGOCV"; private static final String sk = "RCypypmqmYA4Dv8VHjdgS7mPTwGEx5Hkngmrv71L"; public static String BUCKET_NAME = "myteacher-test";在FilesController创建方法package com.example.demo.Controller; import com.example.demo.Util.OBSUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.commons.CommonsMultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.io.IOException; import java.io.InputStream; import static java.lang.System.out; @Controller public class FilesController { //文件下载页面路由 @RequestMapping("/text") public String load(){ return "upfile";//返回upfile.html } //前端请求路由 @RequestMapping("/upload") public String upload(@RequestParam("file") CommonsMultipartFile file, HttpSession Session, HttpServletRequest req) throws IOException { if(file==null) return "/upload"; //将文件存入obs OBSUtils obs = new OBSUtils(); String Key = file.getOriginalFilename(); // out.println(Key); InputStream inputStream = file.getInputStream(); obs.ObsUpload("myteacher-test",Key,inputStream); out.println("上传成功"+Key); return "upfile";//返回upfile.html } }启动项目并测试接下来我们将该项目部署到华为云上1.华为云控制台 -> 我的资源 -> 云服务器以此找到华为云分配的公网IP地址入口2.添加端口添加8080端口(你Sprig Boot项目启动时的端口,如果Spring Boot项目没有设置,默认是8080)添加3308端口(你华为云服务器设置的Mysql端口) 3.测试远程连接是否成功下载 Mysql WorkBench。cid:link_0新建连接 -> 输入Mysql数据库远程地址、端口号、用户名、密码 4.修改Spring Boot项目关于Mysql的连接配置5.编译后端项目为jar文件将后端项目使用Maven进行编译6.上传项目jar文件到云服务器在根目录新建一个文件夹,命名为projects, 然后单击右键上传文件。 上传成功后,运行项目既将房屋租赁系统部署到华为云上完毕使用CodeArts开通CodeArts服务:登陆华为云账号购买CodeArts点击“新建项目”(如果这里已有项目,那我们就点击已又的项目) 选择模版(这里我们选择常用的Scrum) 填写完成后进入项目 CodeArts的功能CodeArts全系列工具,包括需求管理、代码托管、编译构建、代码测试、流水线等的关键特性,开发者在掌握前沿研发理念的同时,也能深度了解CodeArts是如何融合华为在软件开发领域的丰富经验以及开发工具上的能力积累。在团队开发过程中我们可以使用CodeArts为我们整合的功能进行团队合作,协同开发。CodeArts的功能的具体使用这里我们以代码托管为例 新建项目 这就是项目界面 点击右上角“克隆/下载”点击密钥管理查看密钥,(这里我们选择HTTPS) 记下来此密钥,带回Push时要用使用git将代码推入CodeArts远程仓库这里我们以Mac系统的IDEA为例点击菜单栏【VCS】—>【Import into Version Control】—>【Create git Repository】,选择本地项目 这时项目旁边显示Master即表示成功接下来就可以用git来管理了接下来我们将项目推入CodeArts远程仓库点击push填入我们远程仓库的路径之后根据提示填入我们前文保留的用户名和密码Push之后,查看idea提示:即为成功推入。以上便是基于华为云技术,团队协同使用一站式软件开发生产线 CodeArts和华为云obs,并将项目部署的云服务器上的项目实践开发全过程。总结————————————从使用CodeArts进行项目创建,接入华为云obs,到将项目部署到华为云服务器,以及开发过程中团队协同使用CodeArts进行项目构建、代码托管、代码检查以及测试环节。 为新接触华为全套软件发开相关服务的高校学生团队提供一个完整的项目开发模版,帮助其了解全套开发流程,使其能够借助华为云全套软件开发服务为其团队构建起一个完成流畅的工作流。同时也助其减少实际开发工作和高校课程之间的“代沟”,为将来步入实际开发环境打下基础。
  • [问题求助] uniapp对接appsflyer然后埋点?
    uniapp怎么对接appsflyer然后埋点?