单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅

1.2 路由简介

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。

路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

1.3 路由实现思路

1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件（就是展示不同的页面效果）
3、需要将不同的组件放入一个容器中（路由集合）
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转

1.3.1 引入vue-router的js依赖

进入 BootCDN官网复制我们所需依赖。

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

1.3.2 定义组件

var Home = Vue.extend({
    template: '<div><p>进入首页内容...</p></div>'
});
 
var About = Vue.extend({
    template: '<div><p>进入商品内容...</p></div>'
});

1.3.3 定义路由

//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
    {path: '/home',component: Home},
    {path: '/about',component: About}
];

1.3.4 组装路由器

//创建路由器实例
const router = new VueRouter({
    routes: routes
});

1.3.5 将路由挂载根实例

new Vue({
    el: '#xw',
    // 将路由器挂载到指定边界
	router
})

1.3.6 定义触发路由的按钮

<div id="xw">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">商品内容</router-link>
</div>

1.3.7 定义锚点

<router-view></router-view>

1.4 示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 分装了vue和vue-router的JS -->
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<div id="xw">
			<router-link to="/home">首页</router-link>
			<router-link to="/about">商品内容</router-link>
			<!-- 定义锚点 -->
			<router-view></router-view>
		</div>
		<script>
			var Home = Vue.extend({
				template: '<div><p>进入首页内容...</p></div>'
			});

			var About = Vue.extend({
				template: '<div><p>进入商品内容...</p></div>'
			});
			
			//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
			var routes = [{
					path: '/home',
					component: Home
				},
				{
					path: '/about',
					component: About
				}
			];

			//创建路由器实例
			const router = new VueRouter({
				routes: routes
			});

			new Vue({
				el: '#xw',
				// 将路由器挂载到指定边界
				router
			})
		</script>
	</body>
</html>

二、nodejs环境搭建

2.1 nodejs简介

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

我们还需要知道Node.js的包管理工具（package manager）—— npm

为啥我们需要一个包管理工具呢？
因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
注：npm==maven 有点类似

2.2 nodejs下载

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。

下载地址：下载 | Node.js

选择自身系统的Node.js版本，这里我选择的是Windows系统、64位

2.3 配置node

将下载的文件解压到指定路径（路径不能有中文），并在解压后的目录下建立node_global和node_cache这两个目录

注1：新建目录说明
node_global：npm全局安装位置
node_cache：npm缓存路径

新建目录：

2.4 配置环境变量

NODE_HOME: 配置的是nodeJS解压的根路径 如：D:\Tools\node-v18.16.1-win-x64

添加path：

PATH：%NODE_HOME%
PATH：%NODE_HOME%\node_global

注1：环境变量查看
         echo %node_home%
         echo %path%

注2：测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
          node -v
          npm -v

2.4.1 配置npm全局模块路径和cache默认安装位置

打开cmd，分开执行如下命令：把路径替换成自己的路径

npm config set cache "D:\Tools\node-v18.16.1-win-x64\node_cache"
npm config set prefix "D:\Tools\node-v18.16.1-win-x64\node_global"

2.4.2 安装淘宝镜像

doc指令：
npm config set registry https://registry.npm.taobao.org/

成功后，在c盘的User下面看到一个.npmrc文件

2.4.3 查看npm全局路径设置情况

在终端中运行以下命令来安装项目所需的依赖模块，例如Express框架：

npm install webpack -g

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

注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

2.5 运行下载的Node.js项目

准备一个没有下载js的项目，然后进到该项目的根目录doc界面，输入 npm i 指令，下载依赖。

npm i

出现下列代码就表示下载好了：

最后输入npm run dev 指令开始运行项目

发布时间：2023-09-24 00:00:20
http://www.litoo.cn/news/155.html

【JS】【Vue3】【React】获取鼠标位置的方法：JavaScript、Vue 3和React示例

随着Web应用程序的复杂性不断增加，获取用户交互信息变得越来越重要。其中，获取鼠标位置是一项常见的任务，可以用于实现各种交互效果，如拖拽、悬停提示等。本文将探讨在JavaScript、Vue 3和React中获取鼠标位置的不同方法，并提供相应的示例。

编程日记 2024/02/28 09:12:05

Springboot中如何记录好日志

springboot项目如何配置日志，日志门面和日志实现的区别是什么，如何通过日志切面将日志和代码解耦，这里都有分享。

编程日记 2024/02/27 21:34:27

Java实战：定制Spring MVC拦截器链

本文将详细介绍如何定制Spring MVC拦截器链。我们将探讨Spring MVC拦截器的基本概念，以及如何使用Spring Boot和Spring MVC来实现自定义拦截器

编程日记 2024/02/24 08:34:15

先来简单介绍一下ref，它可以定义响应式的变量let xxx = ref(初始值)。**返回值：**一个RefImpl的实例对象，简称ref对象或refref对象的value属性是响应式的。JSxxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。下面我们看一看上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可。

编程日记 2024/02/21 09:49:43

如何设置页面恢复运行事件触发回调

由于 Android 原生的 resume 和 pause 事件不能区分是压后台导致还是页面切换导致，所以 pageResume 和 pagePause 事件是通过 JSAPI 调用记录回调的，仅适用于同一个 session 内 Window 之间的互相切换。当一个 WebView 界面重新回到栈顶时，例如从后台被唤起、锁屏界面恢复、从下个页面回退，会触发页面恢复运行（resume）事件。如果这个界面是通过 popWindow 或 popTo 到达，且传递了 data 参数，则此页可以获取到这些参数。

编程日记 2024/02/21 09:47:28

日常遇到Maven出现依赖版本/缓存问题通用思路。

如果怀疑是本地仓库中缓存的依赖有问题，可以手动删除本地仓库（默认位置在用户的.m2/repository目录下），但这是一个较为极端的做法，因为这会删除所有项目的所有本地依赖，之后Maven将不得不重新下载这些依赖。针对于这样的问题首先我们的第一思路就是怀疑到是缓存的问题，那么我在这里去描述一下我们遇到这类通用类的问题如何解决。检查项目的pom.xml文件，确认依赖声明正确无误，没有冲突的版本号或不正确的依赖范围。版本问题导致的，但是我确认过了一下的一些操作依然没有解决我的问题。

编程日记 2024/02/21 09:45:27

vue打包优化，webpack的8大配置方案

vue-cli 生成的项目通常集成Webpack ，在打包的时候，需要webpack来做一些事情。这里我们希望它可以压缩代码体积，提高运行效率。

编程日记 2024/02/19 20:53:02

什么是tomcat？tomcat是干什么用的？

Tomcat是一个开源的、轻量级的应用服务器，是Apache软件基金会的一个项目。它实现了Java Servlet、JavaServer Pages（JSP）和Java Expression Language（EL）等Java技术，用于支持在Java平台上运行的动态Web应用程序。AJP是用于Apache服务器与Tomcat之间进行通信的协议，通常用于将动态生成的内容传递给Apache服务器进行处理。它能够运行Servlet和JSP，提供了一个环境，使得开发者能够构建和运行基于Java的Web应用。

编程日记 2024/02/19 20:51:12

C# winfrom中excel文件导入导出

在C#交流群里，看到很多小伙伴在excel数据导入导出到C#界面上存在疑惑，所以今天专门做了这个主题，希望大家有所收获！环境：win10+vs2017界面：主要以演示为主，所以没有做优化，然后主界面上添加两个按钮，分别命名为ExportExcel和ImportExcel，添加两个dataGridView，分别是dataGridView1和dataGridView2然后在窗体加载程序中给dataGr...

编程日记 2024/02/17 14:00:34

maven实战：Centos7.9原生安装maven

通过官网https://maven.apache.org下载后缀名为.tar.gz的压缩包。将压缩包上传到服务器/usr/local/bin 目录下，使用以下命令解压。

编程日记 2024/02/16 20:31:50

Java 与 JavaScript 的区别与联系

Java 和 JavaScript 两种编程语言在软件开发中扮演着重要的角色。尽管它们都以“Java”命名，但实际上它们是完全不同的语言，各有其独特的特点和用途。本文将深入探讨 Java 和 JavaScript 的区别与联系，帮助大家更好地理解它们在编程世界中的作用。

编程日记 2024/02/13 20:01:28

C语言中的作用域与生命周期

但是全局变量被 static 修饰之后，外部链接属性就变成了内部链接属性，只能在自己所在的源文件内部使用了，其他源文件，即使声明了，也是无法正常使用的。结论：static修饰局部变量改变了变量的生命周期，生命周期改变的本质是改变了变量的存储类型，本来一个局部变量是存储在内存的栈区的，但是被 static 修饰后存储到了静态区。extern 是用来声明外部符号的，如果一个全局的符号在A文件中定义的，在B文件中想使用，就可以使用extern进行声明，然后使用。全局变量的生命周期是：整个程序的生命周期。

编程日记 2024/02/13 20:00:24

树莓派4B（Raspberry Pi 4B）使用docker搭建springBoot/springCloud服务

编程日记 2024/02/13 19:58:42

常见的Web前端开发框架推荐

Web前端开发框架的选择对于开发效率、项目维护以及用户体验等方面都有着重要的影响。

编程日记 2024/02/12 21:05:01

Python和Java的区别（不断更新）

运行效率：一般来说，Java的运行效率要高于Python，这主要是因为Java是编译型语言，其代码在执行前会进行预编译，而Python是解释型语言，边解释边执行。而Python没有类似的强大虚拟机，但它的核心是可以很方便地使用C语言函数或C++库，这使得Python可以轻松地与底层硬件进行交互。**类型系统：**Java是一种静态类型语言，所有变量需要先声明（类型）才能使用，且类型在编译时就已经确定。总的来说，Python和Java各有其优势和特点，选择哪种语言取决于具体的项目需求、开发环境以及个人偏好。

编程日记 2024/02/11 20:37:25

服务器与电脑的区别?

服务器是指一种专门提供计算和存储资源、运行特定软件服务的物理或虚拟计算机。服务器主要用于接受和处理来自客户端（如个人电脑、手机等）的请求，并向客户端提供所需的服务或数据。服务器在网络环境中扮演着中心节点的角色，负责存储和管理数据、提供网络服务、处理计算任务等。

编程日记 2024/02/10 19:41:26

windows下ngnix自启动（借助工具winSw）

在windows下安装nginx后，不想每次都手动启动。本文记录下windows下ngnix自启动（借助工具winSw）的操作流程提示：以下是本篇文章正文内容，下面案例可供参考本文记录下windows下ngnix自启动（借助工具winSw）的操作流程。

编程日记 2024/02/08 18:11:23

synchronized 和 Lock 有什么区别？synchronized 和 ReentrantLock 区别是什么？说一下 atomic 的原理？

例如，AtomicInteger 的 incrementAndGet() 方法就是通过 CAS 操作实现的，它首先尝试原子地将共享变量加 1，如果操作成功，则返回新的值，否则重试直到操作成功为止。CAS 操作的原理是，当 V 的值等于 A 时，将 V 的值更新为 B，否则什么也不做。synchronized 和 Lock 都是 Java 中用于实现线程同步的关键字/类库，它们都能够提供对共享资源的安全访问和防止数据竞争的功能，但是在实现方式、特性、适用场景等方面存在一些差异。

编程日记 2024/02/07 09:09:26

Java开发四则运算-使用递归和解释器模式

四则运算Expression implement。ExpressionParser 核心实现类。Context 编写测试代码。

编程日记 2024/02/03 10:54:40

Kafka常见生产问题详解

比如，在原有Topic下，可以调整Producer的分区策略，让Producer将后续的消息更多的发送到新增的Partition里，这样可以让各个Partition上的消息能够趋于平衡。思路是可行的，但是重试的次数，发送消息的数量等都是需要考虑的问题。PageCache缓存中的消息是断电即丢失的。因为如果业务逻辑异步进行，而消费者已经同步提交了Offset，那么如果业务逻辑执行过程中出现了异常，失败了，那么Broker端已经接收到了消费者的应答，后续就不会再重新推送消息，这样就造成了业务层面的消息丢失。

编程日记 2024/02/02 14:04:11

深入理解 Java 变量类型、声明及应用

Java 变量变量是用于存储数据值的容器。在 Java 中，有不同类型的变量，例如： String - 存储文本，例如 &quot;你好&quot;。字符串值用双引号引起来。 int - 存储整数（全数字），没有小数，例如 123 或 -123。 float - 存储浮点数，带有小数，例如 19.

编程日记 2024/02/01 21:45:51

Zookeeper分布式队列实战

ZooKeeper实现队列步骤1.创建队列根节点：在Zookeeper中创建一个持久节点，用作队列的根节点。所有队列元素的节点将放在这个根节点下。2.实现入队操作：当需要将一个元素添加到队列时，可以在队列的根节点下创建一个临时有序节点。节点的数据可以包含队列元素的信息。3.实现出队操作：当需要从队列中取出一个元素时，先获取根节点下的所有子节点。再找到具有最小序号的子节点，获取该节点的数据，删除该节点，然后返回节点的数据。

编程日记 2024/02/01 14:42:13

SpringMVC校验注解不生效

用来实现参数校验功能。Spring使用hibernate-validator作为它的默认实现，我们只需要进行一些简单的注解声明，就可以达到参数校验的功能。但是在实际使用场景中，经常会出现校验没生效的问题。

编程日记 2024/01/31 20:39:50

为什么Java中的String类被设计为final类？

String类作为Java中不可或缺的类之一，被设计成final类带来了不可变性、安全性、可靠性和性能优势。不可变的特性使得String对象在多线程环境下安全共享，提高了应用程序的并发性和性能。此外，String类的设计还符合Java类库的一致性和规范，确保了整个语言的稳定性和可靠性。因此，String类被设计成final类是出于多方面的考虑，以提供最佳的使用体验和编程效率。

编程日记 2024/01/27 08:53:11

bat脚本打开多个黑窗口并执行不同的命令

在使用java -jar运行jar包之前，需要先启动redis，而redis的安装目录与jar包不在同一目录下，所以每次启动项目的时候都需要来回的切换目录。现写了一个bat脚本，用来一键启动redis和jar包。start cmd /k "cd /d redis安装目录 && redis-server redis.windows.conf"其中，cmd /k命令是不关闭黑窗口的命令，timeout /T 3表示等待3秒，/NOBREAK表示键盘输入不会中断等待。

编程日记 2024/01/26 16:42:44

鸿蒙（ArkUI）开发：实现二级联动

列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。

编程日记 2024/01/25 21:53:21

Vue和React的区别 | | React函数式写法和类写法的区别

React 更多的是一个库而不是框架，它更专注于视图层的管理，通过社区和第三方库来进行补充和扩展。类式组件: 类式组件是 ES6 中引入的 class 类的一种用法，它继承自 React.Component，拥有完整的生命周期和内部状态管理能力。它是无状态的，没有生命周期和内部状态。而在 React 中，我们使用 JSX 语法，它是一种 JavaScript 的扩展语法，可以在 JavaScript 中直接编写类似 HTML 的结构。在 React 中，我们可以定义组件的两种方式，即函数式组件和类式组件。

编程日记 2024/01/24 20:03:08

Vue路由与nodejs环境搭建

一、Vue路由

1.1 SPA简介