关于spa:原生JavaScript实现的SPA单页应用hash路由

什么叫做SPA单页利用单页Web利用 (single page web application,SPA) ,就是只有一张Web页面的利用,是加载单个HTML 页面并在用户与应用程序交互时动静更新该页面的Web应用程序。 单页利用的说法是在JavaScript和AJAX技术比拟成熟当前才呈现的,指的是通过浏览器拜访一个网站时,只须要加载一个入口页面,尔后显示的内容和数据都不会再刷新浏览器页面。有了单页利用之后,传统的网站就被称为多页利用了。 单页利用的长处• 1. 前端负责界面显示,后端负责数据存储和计算,各司其职。• 2. 用户体验好、快,内容的扭转不须要从新加载,晋升了用户体验;而且同一套后端程序代码,不必批改就能够用于Web界面、手机、平板等多种客户端;• 3. 加重服务器压力,服务器只用出数据就能够,不必管展现逻辑和页面合成,吞吐能力会进步几倍。 单页利用的实现原理其实很容易了解,就是在一个HTML页面当中只有一个div节点,通过后端获取到数据,而后js操作DOM来创立、删除、更新节点以达到批改页面内容,所以页面是没有被刷新的,只是DOM节点产生了扭转,所以HTML产生了扭转。 目前有十分多开发单页利用的优良框架,常见的有Vue、React、Svelte、Angular,然而这些框架都须要依赖十分轻便的Node模块、打包工具、开发环境、以及各种组件。有没有一种传统的开发方式去实现单页利用呢?本文正是解决方案! 上代码index.html <html><head> <title>原生JS实现的单页利用</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <script src="./static/js/index.js"></script> <link rel="stylesheet" href="./static/css/index.css"></head><body> <div id="app"></div></body></html>static/css/index.css *{ padding: 0; margin: 0;}body{ background: #eee;}#app .topBar{ width: 100%; height: 50px; background: #fff; margin-bottom: 20px; line-height: 50px;}#app .topBar a{ display: block; float: left; padding:0 10px; text-decoration: none; color: #333;}#app .contentView a{ display: block; text-decoration: none; line-height: 40px; background: #fff; width: 90%; margin: 0 auto 10px; padding: 5px 10px; color: #333; font-size: 15px; border-radius: 10px;}static/js/index.js ...

March 22, 2023 · 2 min · jiezi

关于spa:将您的基于-Accelerator-的-SAP-电商云-Storefront-迁移到-Spartacus-Storefront

原文:Migrate Your Accelerator-based Storefront to Project Spartacus 如果您已浏览过“迁徙到 Spartacus javascript storefront 我的项目的五个起因”和“SAP Commerce Cloud Project Spartacus 入门”这两篇文章,您可能想要迁徙到基于无状态高性能架构的 storefront, 并且想晓得如何理论筹备 migration。 本文将探讨一种实用于小型 storefront的迁徙办法,但其流程也能够帮忙大型项目迁徙。不过对于后者,倡议齐全从新施行。 To Migrate or Not?只管倡议将迁徙到 Spartacus 作为从新开始和重新考虑您的店面体验的机会,但您可能须要迁徙到 Spartacus 并放弃雷同的体验。依据自定义基于加速器的店面的数量和办法,您发现尝试将现有体验迁徙到 Spartacus 变得简略或艰难。如果您不确定,您能够应用以下步骤进行练习,以确定更改的数量,而不用花工夫施行。这能够让您理解迁徙与从绿地办法开始相比可能须要多少工作。 正如“SAP Commerce Cloud Project Spartacus 入门”中所述,您能够同时运行 Accelerator 和 Spartacus 店面以升高危险,但倡议不要长时间这样做。在两个技术堆栈上保护两个店面会使开发和测试变得十分艰难,更不用说您可能会依据客户点击的店面页面给他们带来不统一的用户体验。 Prerequisites建议您在降级到 SAP Commerce 1905 或更高版本后开始迁徙到 Spartacus 店面,因为 Omni Commerce Connect (OCC) 应用程序编程接口 (API) 的装置形式已失去简化(它们当初可用作扩大 extensions 而不是附加组件 addon)。 要开始应用,您还须要以下内容: 初始设置查看 Spartacus 的发行阐明和路线图,以确保您理解哪些性能具备等同性,哪些可能已更改,哪些可能缺失降级您现有的店面以至多应用 SAP Commerce 1905任何现有的 OCC 插件都已转换为惯例扩大(如果应用 SAP Commerce 2005 或更高版本)您已实现“构建和部署您的第一个 SAP Commerce Cloud 我的项目”的步骤。 您可能还须要查看装置 SAP Commerce Cloud 2005 以与 Spartacus 一起应用中涵盖的内容,并确保您已配置并执行了 Spartacus 我的项目设置。Front-End Team前端团队将构建由布局和 Angular 模块组成的店面用户界面。 开发人员的外围技能将是: ...

July 27, 2021 · 4 min · jiezi

关于spa:SAP-Spartacus-Reference-App-Structure

https://sap.github.io/spartac... 该概念在 SAP Spartacus 3.1 版本引入。 这个 Reference App Structure 是 SAP 举荐客户在搭建本人的 Spartacus Storefront 时所用的参考。 Spartacus 蕴含若干能够 lazy load 的 feature libraries. Customizations and third-party code add further complexity, and you can end up with modules that are difficult to maintain because they mix too many of these elements together.定制化和第三方代码进一步减少了我的项目复杂度,如果解决不得当,很容易呈现堆砌了大量 module,难于保护的状况。 This can be solved by defining and adhering to a standardized structure, such as the Spartacus reference app structure.而遵循 Spartacus reference app structure 来开发,就能防止此类问题呈现。 ...

June 5, 2021 · 2 min · jiezi

SPA项目开箱即用的SEO解决方案

前言本文章写于 2019-07-05 请注意时效性。 有关 SPA 项目的 SEO 友好的解决方案其实不多, 常见的解决手段如下: 将 SPA 项目改为 SSR 渲染使用预渲染前者非常稳定但是对于已有的 SPA 项目进行改造需要注意的问题有很多而且耗时长与重写一个没有太大区别,后者只能对于那些"无论是哪种用户访问返回的结果都一样"的页面合适不免十分被动。 总的来说都是十分的繁琐,不过依然有可以避开修改原有代码的解决方案, 例如下面的这个: https://www.cnblogs.com/lipte...这些方案的基本原理就是,使用代理服务器区分搜索引擎的爬虫和普通用户从而实现针对性内容响应,普通用户响应原有的 SPA 项目也就是“纯粹的 index.html 页面”,而对于爬虫响应对应路由下的渲染好的HTML页面。既然各位智慧无穷的网友开出了药方,看来我们需要手动熬制了。不过先慢着看看 github 有什么现成的药没有:没错 github 上已经有了现成的解决方案。 Rendora 简介Rendora 本身是一个代理服务器使用 GO 语言编写专门被设计与解决 SPA 项目的 SEO 处理,支持配置文件以及对外接口。 使用 Rendora 可以相较于其他方案有如下的优势: 无需修改原有项目无需修改构建配置支持任意路由页面的渲染不受限于前端框架与所使用到的技术搜索引擎爬虫和普通用户获取到的数据一致它的基本原理就是请求经过 Rendora 的时候它会根据请求头 user-agent 来判断请求是属于爬虫还是普通用户, 普通用户直接代理到原有的Web服务器, 而爬虫的请求会经过无头浏览器(head-less browser) 处理生成一张页面返回给爬虫,而这个页面的内容可以理解为是运行时的 DOM 快照。 明白了基本原理后我们不难想到只要是异步加载数据然后再利用数据渲染内容的页面都适用。而且爬虫和普通用户两者最终获取到的数据可以高度一致。 安装Rendora 官方文档中已经给出了安装方式,我就在这里直接照搬了,不过 Rendora 本身是由 GO 语言编写,而且依赖了无头浏览器还是有许多小坑要踩的。 在本文中我使用的系统是 Ubuntu18.04桌面版 ,但是其他的系统用户 windows 和 macos 都是可以安装以及使用的,安装 Rendora 方式稍有不同但是基本概念都是一致的。 ...

July 9, 2019 · 2 min · jiezi

spa 项目上线后程序刷新一次浏览器,来使用新上线资源

解决了什么问题?spa项目新上线后,登陆有效期内用户,可以马上使用新上线资源。原理:路由切换时,判断如果是新上线,程序刷新下浏览器。实现步骤:打包时产生一个json文件:static/json/build_str.jsonlocalStorage中存入值:build_str每个路由切换时,从接口获得新打包后json中的字符串,与localStorage中存的上次打包字符串比较,不相同时刷新vue 项目代码修改的地方:1、相应目录下,新建文件:static/json/build_str.json2、build/build.js 修改:// 将当前时间戳写入json文件let json_obj = {“build_str”: new Date().getTime().toString()}fs.writeFile(path.resolve(__dirname, ‘../static/json/build_str.json’), JSON.stringify(json_obj), function (err) { if (err) { return console.error(err); } console.log(“打包字符串写入文件:static/json/build_str.json,成功!”); realBuild()})3、src/main.js 修改:router.beforeEach((to, from, next) => { axios.get(’/static/json/build_str.json?v=’ + new Date().getTime().toString()) .then(res => { let newBuildStr = res.data.build_str let oldBuildStr = localStorage.getItem(‘build_str’) || ’’ if (oldBuildStr !== newBuildStr) { console.log(‘auto refresh’) localStorage.setItem(‘build_str’, newBuildStr) location.reload() } }) next()})项目demo:https://github.com/cag2050/vu…

January 16, 2019 · 1 min · jiezi

【前端芝士树】SPA 网站 SEO 初级优化指南(MVVM)

SPA 网站 SEO 初级优化指南(MVVM)百度 Baidu百度搜索资源平台 https://ziyuan.baidu.com/?cas…链接提交地址 https://ziyuan.baidu.com/link…百度爬虫 UAMozilla/5.0 (Linux;u;Android 4.2.2;zh-cn;) AppleWebKit/534.46 (KHTML,like Gecko) Version/5.1 Mobile Safari/10600.6.3 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…)谷歌 GoogleGoogle Search Console https://search.google.com/sea…谷歌爬虫 UAMozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)SEO 优化重点(一)三个基本注意点信息架构信息架构要明晰,这个对 SEO 也非常重要,包括网站扁平化设计,友好的 URL 设计,标题书写,页面相关度信息聚合和融合,这也是影响用户体验的一大部分。网站主题为网站确定一个主题(核心关键词),一旦确定,那么全站都围绕这个关键词进行扩展和相关性来做外链和友链权重网站外链就是在别的网站导入自己网站的链接,高质量高 PR 的外链能迅速提高自身网站的权重。友链则是自己的网站包含了其他网站的链接,效果与外链类似。(二)利用好 Meta 信息标签Meta 标签用于给搜索引擎提供关于网页的信息,这些信息对于访问者而言是不可见的。参考淘宝网的做法<header> <title>淘宝网 - 淘!我喜欢</title> <meta name=“description” content=“淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!” /> <meta name=“keyword” content=“淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺” /> …</header>Titletitle 网站标题Meta - Descriptiondescription 给搜索引擎提供了关于这个网页的简短的描述Meta - Keywordskeywords 关于网页内容的几个关键词Meta - Robotsrobots 管理着搜索引擎是否可以进入网页如下面一段代码,禁止搜索引擎获取网页,并且阻止其进入链接。<meta name="”robots”" content="”noindex," nofollow” />SPA 网站 SEO 优化指南(一) 三种解决方案:服务器端渲染,较为复杂页面缓存服务,prerender.io,涉及收费第三方服务,或者中间层启用渲染静态页替换,phantom.js、puppeteer 或者浏览器 Copy outerHTML 就能完成,需要 nginx 配合(二)如何判断是爬虫访问还是浏览器访问爬虫访问时,会使用特殊的 user agent,以百度蜘蛛的 UA 为例,它会使用“Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…)”这样的UA,所以我们可以判断 UA 中含有“Baiduspider”字样则意味着是百度蜘蛛来访问了(三)如何在百度爬虫来访问时返回静态页先把静态页放置到网站的 /assets/static/ 下,配置 nginx 的配置文件 nginx.conf: location / { root C:\projects\bzbclub-dist; index index.html index.htm; if ( $http_user_agent ~* “Baiduspider”){ rewrite ^/index.html$ /assets/static/index.html last; } }保存配置文件后要使用 nginx -s reload 重新加载网站,然后使用 curl 命令的“-A”参数模拟百度蜘蛛访问首页:curl -A “Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…)” http://localhost:17082 > z:tempbzbclub.html打开 z:tempbzbclub.html 确认是否已经返回了静态页的内容。(四)如何生成静态页并优化Phantom.jsvar fs = require(“fs”);var page = require(“webpage”).create();phantom.outputEncoding = “utf-8”; //指定编码方式page.open(“http://localhost:17082”, function(status) { if (status === “success”) { fs.write(“z:\temp\index.html”, page.content, “w”); } else { console.log(“网页加载失败”); } phantom.exit(0); //退出系统});将此脚本保存为“phantom-static-page.js”,在命令行执行此脚本:phantomjs phantom-static-page.jsPuppeteerconst fs = require(“fs”);const puppeteer = require(“puppeteer”);(async () => { const browser = await puppeteer.launch({ headless: false // executablePath: “C:/Program Files (x86)/Google/Chrome” }); const page = await browser.newPage(); page.setViewport({ width: 1920, height: 1800 }); await page.goto(“http://localhost:3333”); await page.screenshot({ path: “example.png” }); const content = await page.content(); fs.writeFileSync("./index.html", content); // await page.close(); // await browser.close();})();将此脚本保存为“pupp-static-page.js”,在命令行执行此脚本:node pupp-static-page.js从浏览器获取静态页内容(推荐)与前两者相比,看上去没那么极客,但是非常的简单好用。首先需要新建一个static.html然后在浏览器打开需要生成静态页的页面按 F12 打开 DevTool鼠标选中<html>标签,右键 Copy > Copy OuterHTML将内容粘贴至static.html保存即可静态页压缩优化用编辑器打开static.html,删除掉所有的<script></script>以及其中的内容浏览器打开静态页,按 F12 打开 DevTool 确保没有报错体积大小优化的程序视页面的复杂度而定,一般能压缩到原有大小的十分之一参考文章链接《Meta 标签与搜索引擎优化》《SEO 网站优化的步骤和技巧有哪些?》《Angular2 网站 SEO 攻略》 ...

December 21, 2018 · 2 min · jiezi

reactjs单页应用同级路由切换scrollTop

问题:单页应用开发时,当在A页面滚动滚动条后,点击进入B页面,滚动条保持在A页面的滚动位置。目标:同级路由切换时,滚动条回滚到页面顶端。解决方案://在componentDidMount周期添加scrollTo()class Home extends Component{ componentDidMount(){ window.scrollTo(0, 0); }}

December 19, 2018 · 1 min · jiezi