从最初的CS架构，如MFC Java Swing 等，到BS架构，JSP PHP，再到前端后端分离，前端从jquery GWT-Ext 到 Handlebars ，再到angularJS/Vue/React...微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。...只需要遵循统一的接口规范或者框架，以便于系统集成到一起，相互之间是不存在依赖关系的。单一职责。每个前端应用可以只关注于自己所需要完成的功能。技术栈无关。...其架构如下图所示：采用这种方式意味着，一个页面上同时存在二个及以上的前端应用在运行。而路由分发式方案，则是一个页面只有唯一一个应用。如何去拆分应用技术方式路由分发式。.../模板引擎/单页面应用》,请注明出处：https://www.zhoulujun.cn/html/webfront/engineer/Architecture/8437.html
总结如下： 单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进 行，页面并没有刷新； 在vue搭建的环境里面怎么有没有公用的css和js...有公用的css和js，有两种引用的方法：（要深刻理解单页面应用程序哦，单页面就是引入后在哪里都能使用） 1.全局公共引用样式和js文件 2.组件的引入 单页面的应用优点： 1....分离前后端关注点，前端负责界面显示，后端负责数据存储和计算。...，web应用更具响应性和更令人着迷； 5.SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化； 单页面的应用缺点： 1....初次加载耗时相对增多； 2.导航不可用，如果一定要导航需要自行实现前进、后退，需要程序来实现管理； 3.使用脚本修改页面，这个脚本我们都知道，他的兼容性是个大问题； 4.
nginx(静态页面，图片分离) #vi /usr/local/nginx/conf/nginx.conf user nginx nginx; worker_processes 1; events {...$document_root$fastcgi_script_name; include fastcgi_params; } #配置Nginx动静分离...，定义的静态页面直接从zabbix发布目录读取（root /opt/nginx-1.4.7/html/resources;）。 ...，可以设置更长，这样可以节省带宽和缓解服务器的压力 expires 7d; } #配置静态图片页面 location ~... /50x.html; location = /50x.html { root html; } } } 详解说明： 其中配置静态图片页面
进入一家新的公司，要开发移动端app项目，前端技术选型时前端组长选的是vue的多页面开发，当时很蒙，vue不是单页面开发吗？咋出来多页面的。接触之后才发现确实存在也挺简单的，省去了路由表的配置。...单页面开发我就不多说了，主要讲多页面的开发模式与最终效果，网上一搜单页面会有好多文章博客，但是搜多页面的就很少了，比如下面这个就是列了一下两种开发模式的优缺点。...那这么多页面之间如果有参数需要互相传递，这时就只能借用localStorage本地存储了，或者封装一个全局传参方法，挂载注册到main.js里，我是封装的localStorage方法。...如果页面之间相互跳转，没有单页面路由了，那就只能是window.location.href了，alertDialog里的哪个app.openView是安卓跳转方法，其实就相当于下面的注释。...那么这些页面最终也需要打包，最核心的就是下面方框里的代码了，chunk最终就是每个页面的文件名，对应的就是文件名.html. glob是打包多页面的一个方案插件，最后把pages对象抛出就行了。
一、介绍 单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。...现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。...可以在官网定制页面设置自己需要的： 通用 CSS 组件 JavaScript 组件 jQuery 插件 例如：滚动监听只需要导航栏组件，基础 CSS 样式和 Scrollspy JavaScript 插件...，这里可以只选择需要的，其他留空即可。...三、实战 使用 Bootstrap 滚动监听和定制功能制作一个介绍豆瓣 App 的单页面。
image.png image.png image.png image.png
定义 SPA单页面应用（SinglePage Web Application） ，指只有一个主页面的应用（一个html页面），一开始只需要加载一次js、css的相关资源。...所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。...MPA多页面应用（MultiPage Application） ，指有多个独立页面的应用（多个html页面），每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。...7.使用范围 SPA:高要求的体验度，追求界面流畅的应用 MPA：适用于追求高度支持搜索引擎的应用 8.开发成本 SPA：较高，长需要借助专业的框架 MPA：较低，但也页面代码重复的多 9.维护成本...SPA：相对容易 MPA：相对复杂 10.结构 SPA：一个主页面+许多模块的组件 MPA：许多完整的页面 11.资源文件 SPA：组件公用的资源只需要加载一次 MPA：每个页面都需要自己加载公用的资源
单页面应用开发 MPA与SPA简介 MPA MPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计，早期的网站都是这样的设计，所之称为「网页设计」。...使用 MPA 在使用者浏览 Web 时会依据点击需求切换页面，浏览器会不停的重载页面 (Reload)，整个操作也常感觉卡卡。...SPA SPA (Single-page Application) 顾名思义在 Web 设计上使用单一页面，利用 JavaScript 操作 Dom 的技术实现各种应用，现今在介面上算是非常受欢迎的设计...，搭配 AJAX 使得整体页面反应速度相当迅速，配合上路由懒加载等手段可以达到Native应用的体验。
一、前言 前端部分的搭建，需要考虑使用哪种模式进行页面之间的跳转交互， 而项目内的页面交互，不可避免的需要相互之间的数据共享。 ...二、正文 （一）、搭建前端部分所需要注意的问题 1）方便性 结合开发的时间需求和方便性选择适合的前端模式； 2）性能 在项目的体量比较大，或者某个页面需要加载较多文件时...（二）、前端搭建的模式选择（多页面模式和单页面模式） 图片来源：https://blog.csdn.net/u013291076/article/details/53667382 1）多页面模式（MPA...）单页面模式（SPA Single-page Application）页面的组成多个完整页面， 例如page1.html、page2.html等由一个初始页面和多个页面模块组成， 例如：index.html...但是初次加载页面时需要调整优化，因为加载文件较多 适用场景 适用于高度追求高度支持搜索引擎的应用 高要求的体验度，追求界面流畅的应用 转场动画 不容易实现 容易实现 总结： 单页面模式：相对比较有优势
什么是单页面应用 单页面应用的英文名称是SPA(single page application),和传统的多页面应用不同，它只有一个页面，页面的内容变化都是通过js来进行动态修改渲染。...从定义我们可以看出来，单页面应用不会涉及到我们之前的前后台混合编码，它只需要前端通过接口获取到相应的数据，就可以自行渲染页面，也就是说它是前后分离的产物之一，因为有了单页面应用，让前后端分离在实战中有了革命性的进步...单页面应用的核心 从单页面的定义我们可以看出来，js对页面内容的更改是核心，因此单页面的核心就是JS,话又说回来，现在哪个前端应用能离开JavaScript呢。...单页面的代表 现在前端三大框架vue,angular,react都是单页面的代表，足以见得现在单页面是多么的流行。...以前的时候，我们需要前端能够会一点后端知识，希望后端可以会一点前端的知识，然而现在，我们更希望一个人可以精通自己的领域，因为现在的应用大部分都是前后端分离的，每个人专注自己擅长的才更有利于团队和技术的发展
name=zs#absdklfajdf 当哈希值改变（哈希值就是：#absdklfajdf），页面不会发生跳转，单页面应用就是利用了这一点： 单页面应用因为只有一个页面，所以页面不能发生跳转，但是，我们又需要根据...url地址来展示不同的组件 这个时候，只能用哈希值来表示究竟要展示哪个组件了 单页面应用就是根据hash值来改的 给window注册onhashchange事件，当哈希值改变时通过location.hash...就能获得相应的哈希值，然后就能跳到相应的页面：
今天使用我们一起来尝试，使用 Vue + Flask 搭建一个简单的单页面应用。... form: { 47 username: '', 48 password: '' 49 }, 50 51 // 表单验证，需要在... name: 'Main', 20 component: Main 21 }, 22 { 23 // 登陆页面...现在我们在浏览器中打开上面的地址，就可以得到页面如下： ?...至此，一个简单的前后端分离的单页面应用就完成了。 看完本文，你可以按着步骤自己实现下。刚接触的伙伴在看的过程中在某些地方可能有疑惑，其实我也研究了好久，也有好多存疑的地方。
前后端分离、单页面应用、微服务、容器等。常有朋友问我单页面和多页面有什么区别，我刚开始没有注意过这个问题，后来慢慢开发和在网上收集了一下资料，大体明白这个问题。...后来出现的springMVC、springboot实现了前后端分离，单页面应用也经常会配合着一起使用，同时开发人员也可以做前端的只关心前台，做后端的只关心后台。...内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小，以前后端做的事情，现在前端可以做 2，前后端分离，前台只需要关心前台，后端只需要关心后台 3，页面效果会比较炫酷（比如切换页面内容时的专场动画...4.跳转流畅；组件化开发；组件可复用；开发便捷，前端很多的MVVM框架，更加方便的组件化前台页面 单页面缺点： 1，不利于seo, 搜索引擎优化：需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染...SEO友好，多页面应用比较合适，也许客户需要页面流畅，app等开发比例比较高，单页面应用比较合适，能用最快的开发效率做出客户满意的系统，才是最终的目标。
经过前五篇系列文章，对Tangram和vlayout也有了初步认识，这篇文章开始将结合业务场景使用，探索框架能力能对业务带来的支持，因为调研本身是一个需要不断踩坑的过程，所以大纲也做了微调，后续会根据实际使用过程发现的问题和解决方案进行更新...需求背景 Tangram和vlayout介绍 Tangram的使用 vlayout原理 Tangram原理 json模板和数据分离 待定 本文将对Tangram的json模板和数据进行分离。...数据分离 前面的文章提到过，在实际业务中不太可能把数据绑定在模板里，这样模板会很臃肿，我们要做的是，用模板描述页面结构和数据源，而非数据本身，因此需要将数据剥离出来。 运行效果： ?...重点看页面结构即可，远程模板调整了Card顺序、4列布局改成5列、改了文本颜色和瀑布流item背景色。...， { //聚合数据接口，当然实际业务中不需要写完整路径，如tangram/shopping/home "requestMakeup":"http://rest.apizza.net/mock
： 单页面开发常用于webapp开发和后台管理系统等 单页面应用原理： 我们通常所说的单页面应用程序通常是通过前端框架vue, react, angular进行开发，单页面程序将所有的活动局限于一个...，每次跳转不请求html文件，而是通过路由跳转来渲染组件 优点： 页面切换快，良好的交互体检，因为每次切换页面时，不需要重新加载整个页面，不需要做html文件的请求，这样就节约了很多http发送时延，获取数据也是通过...ajax异步获取，没有页面之间的切换，就不会出现白屏现象，也不会出现假死并有闪烁现象，页面显示流畅 良好的前后端分离模式，后端不再负责模版渲染，输出页面工作，即同一套后端程序代码，不用修改就可以用于web...界面，手机，平板等多种客户端 减轻服务器压力，单页面相对服务器压力小，服务器只用于输出数据就可以，不用管展示逻辑和页面合成。...效果差，因为搜索引擎只认识html的内容，不认识js的内容，而单页面应用的内容都是考js渲染生成出来的，搜索引擎不识别这部分内容，所以就不会给一个好排名，导致单页面应用做出来的网页在百度和谷歌上的排名差
本节就一起来讨论一下：读写分离需要注意哪些问题。 通常情况下，读写分离都是依赖主从复制，因此，我们先来看看主从复制的原理，也能方便我们理解为什么会出现主从延迟的现象。...但是需要注意的是：从库需要设置为 read_only，防止配置错误在从库写入了数据。...因此再介绍几种读写分离场景下应对延迟的方法。 4 读写分离怎样应对主从延迟 读写分离场景应该怎样应对主从延迟呢？...同样补充下两个参数的意义： 前提是需要开启 GTID 两个参数才会有值，解释如下： Retrieved_Gtid_Set：从库收到的所有日志的 GTID 集合 Executed_Gtid_Set：从库已经执行完的...4.3 等待同步完成 依然采用 4.1 中介绍的几种判断是否有延迟的方法，只是应对方式不一样，比如存在延迟，则将情况反馈给程序，在前端页面提醒用户数据未完全同步，如果没有延迟，则查询从库。
设计之初就想好一个页面适配两端，当然这个设计稿需要比较符合适配两端的条件。 6、别人适配是怎么做的？...贴个录制的视频~ 所以，单屏页面最好页面内容言简意赅，设计层面倾向于水平垂直都居中的情况，是最适合做好这个页面的，并且在各种尺寸变化的情况下能比较良好地展示UI，且开发成本也比较合理。...本来想用 rem 做适配的，但是 rem 需要些写很多个匹配，即下面的代码 @media all and (max-width: 1024px) { html, body {...我们不需要考虑更低端的浏览器，所以可以使用比较前沿的特性，如 pointer-events 等特性。 所以使用 vh 做适配方案，vh 是什么单位详情可以自己查阅一下文档，这里做个简单介绍。...300 ÷ (720 ÷ 100) ≈ 41.666 比如设计稿为 1920x1080（单屏设计高度应该更小一点，如适配第一节所说），可以写个 CSS 预处理函数，这样方便直接使用设计稿的尺寸，以 Sass
实现单页面路由发生改变，页面不进行跳转 配置嵌套路由 import Vue from "vue"; import VueRouter from "vue-router"; import index
在单页面应用中history路由是很受欢迎的，它的路由显示方式和传统的路由方式相同，在显示上很美观，比hash的方式看着舒服的多。...该api需要传入相对的位置标志就会显得略有些麻烦。...跳转到指定的页面 HTML5引入了 history.pushState() 和 history.replaceState() 方法，这两个方法都可以跳转到指定的url页面，主要区别在于replaceState...我们先来说history.pushState(),其调用方式如下： history.pushState(state, title, url) pushState() 需要三个参数: 一个状态对象, 一个标题...那么当页面重新加载时，页面会接收一个onload事件，但没有 popstate 事件。然而，假如你读取了history.state属性，你将会得到如同popstate 被触发时能得到的状态对象。
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） 操作流程 进入页面时使用百度地图API定位接口首先定位其位置（经纬度和地址...image.png image.png 弹窗确定后进入页面 image.png 第一步，点击芳名，弹窗选择“我是谁”。...image.png 在这个页面可以滚动查看所有人所填写的表单。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
