RuoYi-Vue路由，Node

1.SPA

1.1.什么是SPA

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

我们熟知的JS框架如react,vue,angular,ember都属于SPA。

在单页面应用中，所有必要代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为了响应用户操作）动态装载适当的的资源并添加到页面中。

页面在任何时间点都不会重新加载，也不会控制转移到其他页面。

1.2.SPA和MPA的区别

MPA（Multi-page application），多页面应用。

在MPA中，每个页面都是一个主页面，都是独立的。

当我们访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求加载。

1.3.SPA的优缺点

优点：

1.用户体验好，速度快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2.前后端分离

3.页面效果会比较炫酷（比如切换页面内容时的专场动画）

缺点：

1.不利于seo（搜索引擎优化（Search Engine Optimization,SEO）是一种通过了解搜索引擎的运行规则来调整网站，以提高目标网站在有关搜索引擎内排名的方式）；

2.导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3.不支持低版本服务器，，最低只支持到IE9

4.初次加载耗时较多

5.页面复杂度提高很多

2.路由

2.1.什么是路由

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

通俗易懂的话来讲就是Hash地址与组件的之间的对应关系。

路由分为前端路由和后端路由:

前端路由是依靠hash值(锚链接)的变化进行实现

后端路由是由服务器端进行实现，并完成资源的分发

前端路由是基于hash值的变化进行实现的。比如：用户点击了页面上的路由链接，导致了URL地址栏中的Hash值发生了变化，前端路由监听到了Hash值的变化，前端路由把当前的Hash地址对应的组件渲染到浏览器中。

2.2.演示

2.2.1.路由基本

第一步：引入依赖库

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>

第二步：创建自定义组件

const Home=Vue.extend({
   //注：必须包裹一个根元素
   template:'<div><h1>Home组件</h1><div>Home组件的内容区域</div></div>'
});
const About=Vue.extend({
   template:'<div><h1>About组件</h1><div>About组件的内容区域</div></div>'
});

第三步：定义路由

//定义路由即路线
var routes=[
   //{path:"/",component:Home},  //默认显示效果
   {path:"/Home",component:Home},
   {path:"/About",component:About}
];

第四步：创建路由器实例

//定义路由器
const router=new VueRouter({routes:routes});

第五步：挂载根实例

//创建和挂载根实例,通过$mount方式挂载到指定的管理区域(重要)
var vm=new Vue({
   //el:'#app',
   router:router,
   data:function(){
      return {
         ts:new Date().getTime()
      }
   }
}).$mount("#app");

第六步：效果展示

<div id="app">
   <h1>1.路由器,ts={{ts}}</h1>
   <div>
      <router-link to="/Home">go to home</router-link>
      <router-link to="/About">go to about</router-link>
   </div>
   <div>
      <router-view></router-view>
   </div>
</div>

<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签(超链接或锚），可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

router-link相关参数

2.2.2.路由切换

页面展示

<div id="app">
   <h1>1.路由器,ts={{ts}}</h1>
   <div>
      <router-link to="/Home" replace>go to home</router-link>
      <router-link to="/About" >go to about</router-link>
   </div>
   <div>
      <button v-on:click="previous">向前</button>
      <button v-on:click="next">向后</button>
      <button v-on:click="gotopage">切换指定组件</button>
   </div>
   <div>
      <router-view></router-view>
   </div>
</div>

vue中导航中的后退-前进-编程式导航

var vm=new Vue({
   //el:'#app',
   router:router,
   data:function(){
      return {
      }
   },
   methods:{
      previous:function(){
         this.$router.go(1);   //代表着前进
         console.log("previous");
      },
      next:function(){
         this.$router.go(-1);  //代表着后退
         console.log("next");
      },
      gotopage:function(){
         this.$router.push({   //切换到path为/About的路由
            path:"/About"
         });
         console.log("gotopage");
      }
   }
});

3.Node.js

3.1.什么是Node.js

在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用，想干什么就干什么，再也不受浏览器的限制了。

Node.js 不是一门新的编程语言，也不是一个 JavaScript 框架，它是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。用编程术语来讲，Node.js 是一个 JavaScript 运行时（Runtime）。

Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。不能再将它视为一种“小玩意”。

1）Node.js依赖JavaScript运行环境，开发语言是：Javascript

2）J2EE依赖Java运行环境，开发语言是：Java

3.2.什么是Npm

npm(Node.js Package Manager)是一个Node.js的包管理工具，用来解决Node.js代码部署问题。在安装Node.js时会自动安装相应的npm版本,不需要单独安装。使用npm包管理工具可以解决如下场景的需求:

1.允许用户从NPM服务器下载他人编写的第三方包到本地使用。

2.允许用户从NPM服务器下载并安装他人编写的命令行程序到本地使用。

3.允许用户将自己编写的包或命令行程序上传到NPM服务器供他人使用。

3.3.Node.js环境搭建

3.3.1.下载

下载地址：Node.js — Download Node.js®

注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本

3.3.2.解压

下载的node-v10.15.3-win-x64.zip解压到指定目录中，并在解压后的目录下建立node_global和node_cache这两个目录。

node_global：npm全局安装位置；

node_cache：npm缓存路径;

3.3.3.配置环境变量

新增NODE_HOME:E:\tools\node-v10.15.3-win-x64(以自己的安装目录为准）

修改PATH 并在最后添加：%NODE_HOME%

            %NODE_HOME%\node_global

环境变量查看： echo %node_home%，echo %path%

测试安装是否成功： node -v，npm -v

3.3.4.npm配置

配置npm全局安装位置和缓存路径。打开CMD，分别执行如下命令：

npm config set cache "C:\tools\node-v14.15.0-win-x64\node_cache"
npm config set prefix "C:\tools\node-v14.15.0-win-x64\node_global"

注意：

1）创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来

2）如果执行命令卡死，可以删除C:\Users\用户名.npmrc 后重新执行。(用户名：当前电脑的用户名)

3）"E:\tools\node-v10.15.3-win-x64\node_global"，双引号不能少

修改npm镜像提高下载速度 (换源）

可以使用 cnpm或直接设置--registry，推荐设置--registry

npm config set registry https://registry.npmmirror.com

cnpm

npm install -g cnpm --

安装配置webpack

npm install webpack -g

以上命令执行完毕后，会生成如下文件:

%node_home%\node_global\node_modules\webpack

3.3.5.如何运行下载的Node.js项目

将下载的项目解压到指定目录，本例是解压到：D:\temp\vueproject，后面都以此为例

## 1.打开命令窗口
cmd
## 2.切换到d盘
d:
## 3.进入指定目录
cd D:\temp\vueproject
## 4.进行依赖安装
npm install
## 5.启动项目
npm run dev