vue+路由介绍
摘要：对于前端开发者来说，时常犹豫不决的难题是如何选择前端框架，通过使用JS库，可以极大地提高开发效率，但本文作者认为，在某些场景下，JS库并未带来事半功倍效果，反而事倍功半！
原文链接：https://codepilotsf.medium.com/is-it-time-to-ditch-svelte-react-and-vue-731d9dc9e25b
声明：本文为 CSDN 翻译，未经授权，禁止转载。
作者 | Sean Schertell译者 | 弯月出品 | CSDN（ID：CSDNnews）现如今，几乎所有现代Web应用程序的构建都要使用前端的某个JavaScript大型库，用JS渲染的虚拟DOM替换整个浏览器视口，并通过REST API消费JSON，这些REST API需要单独构建，但与前端紧密耦合。
如果你在构建像Figma 或 Trello 这样的单页应用程序（Single Page Application，即SPA），那么利用其中一个工具可以节省很多时间和成本。但是，如果你在构建一个多页面应用程序（Multi Page Application，即MPA），例如常见的电子商务网站，甚至是电子邮件之类的应用程序，那么我明确告诉你，使用SPA框架带来的复杂性远超其本身的价值。
SPA 架构的问题仅把服务器当成调用API的渠道，则意味着我们不能再依赖它来维护应用程序的状态。因此，我们将所有状态管理转移到客户端，并由此而发明了Redux 和 MobX 等全新的框架。由于我们不能再使用服务器进行基本的路由，因此创建了React Router 和 Page.js等库来模拟以前可以免费获得的路由功能。
以前，在服务器端会话实现身份验证非常容易。然而，在 SPA 架构中，通常我们需要使用JSON Web Tokens，这种实现的难度大幅增加（而且很容易出问题）。即便是最基本的表单提交也不能再依赖浏览器标准的HTML实现，根据其名称属性提交表单字段。现在我们需要将这些值绑定到 JS 对象，并“手动”管理和提交该对象。
换句话说，这些功能以前我们可以免费获得，而现在却要付出大量努力，值得吗？
为何会有如今的局面？过去，Web开发很简单。浏览器发送一个 HTTP 请求，服务器发送一个新文档，然后由浏览器将其渲染到视口，并替换掉之前的所有内容。不过，这种方法有点笨拙。这意味着，即便你只想更新页面的一小部分，也必须重新渲染整个页面。
后来，JQuery 出现了，可以利用AJAX仅更新页面的一部分，而无需刷新整个页面。如此构建的Web应用程序更具交互性和响应性，更像“应用程序”。但JQuery涉及大量的命令式 JavaScript，而且维护难度很高。如果你想构建一些复杂的功能，用不了多久，代码库就会变得盘根错节，无法维护。
后来，Angular出现了，还有紧随其后的React，这些框架采用了一种全新的方法，导致我们不得不重新思考“前端”的概念：前端不仅仅是通过JavaScript渲染的DOM，而是一个 JavaScript 应用程序，它最终会渲染出一个DOM。如果你想构建一个单页应用程序，则这种方式很有效。虽然你无法使用HTML基本的客户端/服务器架构，但可以自由地构建类似于应用程序的前端体验。这种新方法令人兴奋，不久之后，每个新建项目似乎都开始采用SPA。
在过去的5～10年中，用户对现代响应式网站的期望也急剧增加。因此，人们不再满足于构建需要重新加载整个页面的“Web 1.0”风格的应用程序。
没有 SPA 的现代 UI那么，如果不使用 SPA 前端/REST 后端架构、不编写大量笨拙的 JQuery、不必每次点击鼠标都刷新整个页面，我们如何才能构建一个现代 MPA 网站呢？
有一批库致力于提供现代交互性，同时仍然能够使用HTML和HTTP的基本功能，这两个词都以“HT”开头，意思是超文本（Hypertext）。关键就在于此。Web的设计理念是在网络上来回传输超文本，而不是JSON。Hotwire、HTMX 和 Unpoly 等库允许你通过向标记添加 HTML 属性或标签以声明性方式替换DOM块，同时无需自己编写任何 JavaScript。例如，按钮“添加到购物车”可以向服务器发送一个请求，该请求会在服务器端会话中修改购物车货物的服务器端状态，然后发送回两个DOM 块，替换页面上的cart-sidebar和#cart-icon-badge。这种实现可以非常优雅，而且还可以使用漂亮的 CSS 动画。
如果我们按照Tim Berners-Lee（万维网的发明者）最初的设计思路送HTML，结果就会收到大量没用的数据。客户端状态管理的DOM本就是客户端的状态。客户端路由器？这不是开玩笑吗？JSON Web Tokens？服务器会话是经过验证的，而且更容易实现。我们的数据库查询也更加容易，因为所有的路由都在服务器端编写，因此可以安全、直接地访问数据库。
我编写了一个简单的基于 ExpressJS 的框架来实现这种架构风格，你可以试试看：https://www.sanejs.dev。
Ruby on Rails将在2022年大放异彩？像大多数现代 Web 开发人员一样，长期以来我一直在避免使用Ruby on Rails，因为这个框架的设计思路是构建庞大的单体Web应用程序，这种方式早已过时。但问题在于，如果前端使用Hotwire 或 HTMX之类的框架，后端就可以使用任何框架。由于我们处理的是HTML元素，因此在理想情况下，后端可以选择最适合创建服务器渲染模板的框架。但我们没有那么多功能齐全、方便易用的框架。如今这类的主流框架有Rails、Django 和 Laravel。还有一些即将出现的框架，例如基于 Elixer 的 Phoenix 和基于 Go 的 Buffalo。但是 Rails 有一个庞大的社区，非常成熟，老实说，这为我们提供了很多帮助。
但重点在于，去年 12 月最新发布的 Rails 7.0包括前端交互库Hotwire。Hotwire 可以与 Rails 一起使用，也可以单独使用，但其设计初衷是与 Rails 开发完美结合，而且是默认自带的。不论是你是否相信，时至2022年，Rails仍然是完美的全栈框架，可用于构建具有现代交互性的后 Jamstack 时代的MPA Web 应用程序，它可以控制基本的HTML元素，我们不需要借助JS框架，构建一个前端应用再加一个后端API。
总结如果我们的最终目标是以快速、有条理和可维护的方式构建现代 MPA 网站，那么就应该认真考虑 SPA/Jamstack 架构是否真的适合这项工作。随着现代 DOM交互库（如 Hotwire、HTMX 和 Unpoly）的出现，我们终于有了一个真正的SPA 替代方案，它允许我们创建现代、优雅的界面，允许我们控制基本的HTML元素，无需重新发明应用程序状态管理和表单提交等基本的轮子。因此，如果我们想重新采用服务器渲染的模板，那么也许是时候再看看 Web 框架的卫冕冠军：Ruby on Rails。尤其是全新的 7.0 版本内置了 Hotwire，Rails 可能是 2022 年构建现代多页面应用程序的最佳解决方案。
","force_purephv":"0","gnid":"99456207639e77543","img_data":[{"flag":2,"img":[{"desc":"","height":"80","s_url":"https://p0.ssl.img.360kuai.com/t0186957a1ca5352752_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0186957a1ca5352752.gif","width":"640"}]}],"original":0,"pat":"art_src_1,fts0,sts0","powerby":"cache","pub_time":1661221869000,"pure":"","rawurl":"http://zm.news.so.com/b6315cfcdc455af07cba87524c4f8e88","redirect":0,"rptid":"2e084c883a410e5c","s":"t","src":"CSDN","tag":[{"clk":"ktechnology_1:java","k":"java","u":""}],"title":"是时候抛弃 Svelte、React 和 VUE 了吗？
饶有敬1159vue.js的路由地址会以#号分隔,有什么办法可以去掉这个#号吗 -
聂柴缪19344103687 ______ 你需要开启HTML5 History 模式.vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载.1、在用vue.js做微信公众号支付的时候,授权目录整个链接中都不能出现#号,这个是微信支付官方不支持的.相同的请求ios系统不会有任何问题,正常调起微信支付.而android则不行,得到的回复就是前面的描述.2、首先我会考虑前端有没有什么方法可以去掉,或者改变路由地址以#号分隔这个问题.3、如果前端不行,我看了HTML5 History Mode是否能够解决这个问题.
饶有敬1159vue.js vuex怎么安装 -
聂柴缪19344103687 ______ vue.js vuex安装 vue init webpack-simple 工程名字 npm install vue-router vue-resource --save npm run dev Vue推荐开发环境 Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016 现在开始安装环境 安装nodejs 可以在终端里下...
饶有敬1159npm 怎么安装vue ydui -
聂柴缪19344103687 ______ 安装以下模块,让webpack可以解析css文件 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev1231232.安装elementUi模块 cnpm install element-ui@next -S113.在webpack.base.conf.js中添加...
饶有敬1159前端都学什么内容呀?
聂柴缪19344103687 ______ 这里根据行业变化和企业用人需求整理了一份web前端系统全面的学习路线,主要学习以下内容:第一阶段:专业核心基础阶段目标:1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发.2. 熟练运用HTML+CSS特性完成页面...
饶有敬1159如何在Vue组件的方法内部访问axios -
聂柴缪19344103687 ______ 可以这样写. import Vue from 'vue'; import axios from 'axios'; Vue.prototype.$http = axios; 然后用的是时候就是 this.$http.get() ...
饶有敬1159微微一笑很倾城双重世界系统详解
聂柴缪19344103687 ______ 微微一笑很倾城双重世界系统详解小编已经整理好了,现第一时间把微微一笑很倾城双重世界系统详解分享给大家.希望由小编所提供的这篇攻略玩家朋友们喜欢,也希望...
饶有敬1159激战狂潮天赋系统介绍日夜天赋玩法解析
聂柴缪19344103687 ______ 激战狂潮天赋系统介绍 日夜天赋玩法解析,今天小编为大家介绍激战狂潮的天赋系统,激战狂潮选用日夜天赋系统,这是个什么天赋呢?下面跟小编一起来看看吧.在激战狂潮中,引入了“日夜天赋系统玩法” 每个英雄除了常规的技能以外,都有一套多重打发的天赋,结合游戏中的日夜系统,会衍生出不同的玩法.在对局中,每当昼夜交替之时,玩家所选的英雄都会解锁一层天赋分支,不同的天赋会给所选英雄带来各种不同的收益,根据形式搭配天赋会给对局带来意想不到的效果!
饶有敬1159秦时明月最强流派技能推荐
聂柴缪19344103687 ______ 秦时明月所谓的流派技能,就是同一流派的弟子全都是这个技能,下面小编就为各位玩家总结一下秦时明月手游目前有的流派技能,感兴趣的玩家一定要来看看哦~1、弓兵们的流派技能-漫天箭雨.2、骑兵大众技能-无畏冲锋.3、燕国大众技能-燕国刀法.持有者:燕春君,晏懿,阿纲,阿金,阿明.4、兵家的流派技能-兵者诡道.持有者:韩信,范曾.5、机关流派技能-机关之怒.持有者:公输仇,班大师,机关无双.6、项氏一族技能-霸王破阵.持有者:霸王少羽,项梁,项燕.7、法家流派技能-法网恢恢.持有者:李斯,韩非子.8、战国将领流派技能-势如破竹.持有者:蒙恬,王翦,蒙武,姬无夜.9、食攻两用的神技-解牛刀法.持有者:庖丁,天明.
饶有敬1159回归直线b尖的公式
聂柴缪19344103687 ______ 回归直线b尖的公式:x=(y1+y2+y3+...+yn)/n,提到回归直线,首先要知道变量的相关性.变量与变量之间的关系常见的有两类:一类是确定性的函数关系,像正方形的边长a和面积S的关系,另一类是变量间确实存在关系,但又不具备函数关系所要求的确定性,它们的关系是随机性的.当两个相互关系的量具有这两种变量关系的时候,就称两个变量具有相关关系.在此基础上,可以画出y随x变化的图形,将已知的数据在所作的直角坐标系中进行描点.这样的图形叫做散点图.在回归分析中,用来描述具有线性关系的因变量y与自变量xi的关系曲线,其一般表达式是y=a+∑bixi,i=1,2,…,n.
饶有敬1159vue.js怎样构建后台管理界面 -
聂柴缪19344103687 ______ 介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用. element:基于vuejs2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.