路由和node环境搭建

2023-09-21 11:49:54

1.1 什么是路由

在计算机网络中,路由(Routing)是指根据某种算法将数据包从源节点传输到目标节点的过程。在Web开发中,路由则指的是根据URL地址的不同,将用户请求导向对应的处理程序或页面。简单来说,路由负责将用户的请求分发到不同的处理函数或页面。

1.2 案例实操

在Vue.js中,我们可以使用vue-router库来实现路由功能。下面是一个简单的案例实操步骤:

① 首先,在项目中引入vue-router依赖库。

② 定义组件。我们需要定义多个组件,每个组件代表一个页面或者一个模块。

③ 定义路由。在这一步中,我们需要为每个URL路径定义对应的组件。

④ 将路由加入路由器。

⑤ 将路由挂载到Vue实例中。

⑥ 定义触发路由的按钮。我们可以在页面中定义一个链接,通过点击链接来触发相应的路由跳转。

⑦ 定义锚点。在Vue实例的模板中,我们需要为每个URL路径定义对应的容器,用于渲染对应的组件。

1.2.3 效果展示

经过以上步骤,我们就完成了一个简单的路由配置。当用户访问不同的URL时,页面会根据对应的路由规则加载不同的组件,并渲染到对应的位置上。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 链接到锚点 -->
			<router-link to="/Home">首页</router-link>
			<router-link to="/Abort">关于</router-link>
			<!-- 定义锚点 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			// 定义组件
			const Home = Vue.extend({
				template: "<div><p>这是首页</p><div>首页内容</div></div>"
			})
			const Abort = Vue.extend({
				template: "<div><p>这是本站介绍</p><div>本站意义,发展史,未来展望</div></div>"
			})
			// 定义链路集合
			let routes = [{
				path: '/',
				component: Home
			},{
				path: '/Home',
				component: Home
			},{
				path: '/Abort',
				component: Abort
			}];
			// 定义路由
			const router = new VueRouter({routes:routes})

			// 挂载vue
			new Vue({
				el: app,
				router,
				data() {
					return {
						msg: "hello Wrold"
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

这只是一个简单的示例,实际应用中还有更多的功能和配置选项可以使用。希望以上内容能够帮助到您理解路由的概念和实际应用。如有任何疑问,请随时提出。

二、配置Node.js

2.1 新建两个文件夹

首先,您需要创建两个文件夹来存放您的Node.js应用和相关文件。一个文件夹用于存放您的Node.js代码,另一个文件夹用于存放您的项目依赖。

2.2 配置环境变量

接下来,您需要配置环境变量,以便在任意位置都可以运行Node.js命令。

在Windows操作系统上:

打开控制面板,并进入"系统和安全" -> “系统” -> “高级系统设置”。 在弹出的"系统属性"窗口中,点击"环境变量"按钮。
在"环境变量"窗口中,找到"系统变量"下的"Path"变量,点击"编辑"按钮。
在"编辑环境变量"窗口中,点击"新建"按钮,并输入Node.js的安装路径。通常情况下,Node.js会默认安装到"C:\Program
Files\nodejs"。 点击"确定"保存更改。 在Mac或Linux操作系统上:

打开终端,并输入以下命令来编辑用户环境配置文件(根据您使用的shell可能会有所不同,请适当调整): vi ~/.bash_profile
在打开的编辑器中,按下"i"键进入编辑模式,在文件末尾添加以下内容(根据您的Node.js安装路径进行调整): export
PATH=“/usr/local/bin:$PATH” 按下"Esc"键退出编辑模式,然后输入":wq"保存并退出。
3.3 使用管理员身份打开命令提示符或终端窗口 为了能够在任意位置使用Node.js命令,您需要以管理员身份打开命令提示符(Windows)或终端窗口(Mac或Linux)。

在Windows上:按下"Win + X"组合键,然后选择"命令提示符(管理员)“。 在Mac上:打开"Finder”,进入"应用程序"
-> “实用工具”,然后双击打开"终端"。 在Linux上:打开您的终端程序。
3.4 测试Node.js安装是否成功 在打开的命令提示符或终端窗口中,输入以下命令来检查Node.js和npm是否正确安装:

shell node -v npm -v
如果输出了对应的版本号,则说明Node.js和npm已经成功安装,并且环境配置也正确。如果未输出版本号,可能是由于安装过程中出现了问题,请重新检查安装步骤并尝试修复。

现在运行一个项目测试是否安装好
在这里插入图片描述

在这里插入图片描述
现在说明已经安装好啦。

更多推荐

8种结构型设计模式对比

一、适配器模式简介适配器模式是一种结构型设计模式,它用于将不兼容的接口转换为可兼容的接口。适配器模式允许两个不兼容的类能够协同工作,通过将一个类的接口转换为另一个类所期望的接口形式。这样就能够在不修改现有代码的情况下,使两个不兼容的类能够相互协作。使用场景适配器模式通常在以下场景中使用:当需要将现有类的接口转换为其他接

Llama2-Chinese项目:2.1-Atom-7B预训练

虽然Llama2的预训练数据相对于第一代LLaMA扩大了一倍,但是中文预训练数据的比例依然非常少,仅占0.13%,这也导致了原始Llama2的中文能力较弱。为了能够提升模型的中文能力,可以采用微调和预训练两种路径,其中:微调需要的算力资源少,能够快速实现一个中文Llama的雏形。但缺点也显而易见,只能激发基座模型已有的

el-table表格动态设置最大高度 高度根据窗口可视高度大小改变自适应

由于表格内容过多,如果不给高度限制,每页100条数据的情况下,去操作底部的分页或者其他功能都需要划到数据最底部操作,用户体验性较差。解决方法是让表格一屏展示,超出部分滚动展示。1.效果及思路图:思路是:屏幕可视区域-最大盒子的上下内边距-搜索部分-按钮部分-分页部分因为表格是项目公用表格每个项目需求不同根据实际需求去减

推荐一些常用的api接口,包括天气、物流、IP查询等

天气预报查询:支持输入经纬度或者区域编码查询全国以及全球多个城市的天气,包含15天天气预报查询。天气预警:支持输入经纬度或者区域编码,获取指定城市当前生效中的各类天气预警,如寒潮蓝色预警信号,或一次性拉取全国所有生效中的天气预警。空气质量查询:支持输入经纬度或者区域编码查询国内3400+个城市的整点观测,获取指定城市的

C++&QT day7

仿照vector手动实现自己的myVector,最主要实现二倍扩容功能#include<iostream>usingnamespacestd;template<typenameT>classmy_vector{intsize;//可存储的容量大小intnum;//当前存储的元素个数T*data;//存储数据的空间地址p

第74步 时间序列建模实战:多步滚动预测 vol-2(以决策树回归为例)

基于WIN10的64位系统演示一、写在前面上一期,我们讲了多步滚动预测的第一种策略:对于重复的预测值,取平均处理。例如,(1,2,3)预测出3.9和4.5,(2,3,4)预测出5.2和6.3,那么拼起来的结果就是3.9,(4.5+5.2)/2,6.3。这一期,我们来介绍第二种策略:删除一半的输入数据集。例如,4,5由(

【网络八股】TCP八股

网络八股请简述TCP/IP模型中每层的作用,典型协议和典型设备介绍一下三次握手的过程介绍一下四次挥手的过程必须三次握手吗,两次不行吗?为什么ACK数据包消耗TCP的序号吗三次握手中可以携带应用层数据吗四次挥手时,可以携带应用层数据吗?主动断开连接方,为什么要等待2MSL时间?如果服务端不进行accept,那么最多可以完

如何压缩图片大小?图片太大这样压缩

过大的图片文件不仅会占用大量的存储空间,还会影响图片传输和处理效率。为了解决这个问题,下面给大家分享几个图片压缩的方法,帮助你轻松解决图片过大带来的困扰。一、使用嗨格式压缩大师这是一款专业的图片压缩工具,采用先进的压缩算法,能够在保证图片质量的同时,快速高效地降低图片的文件大小。1、在电脑上打开软件后,选择“图片压缩”

激活函数总结(四十):激活函数补充(AHAF、SERLU)

激活函数总结(四十):激活函数补充1引言2激活函数2.1AHAF激活函数2.2SERLU激活函数3.总结1引言在前面的文章中已经介绍了介绍了一系列激活函数(Sigmoid、Tanh、ReLU、LeakyReLU、PReLU、Swish、ELU、SELU、GELU、Softmax、Softplus、Mish、Maxout

MySQL使用Xtrabackup备份到AWS存储桶

1.安装Xtrabackupcd/tmpwgethttps://downloads.percona.com/downloads/Percona-XtraBackup-8.0/Percona-XtraBackup-8.0.33-28/binary/redhat/7/x86_64/percona-xtrabackup-80

【山河送书第十二期】:《巧用ChatGPT快速搞定数据分析》参与活动,送书两本!!

【山河送书第十二期】:《巧用ChatGPT快速搞定数据分析》参与活动,送书两本!!关键亮点内容简介作者简介购买链接参与方式往期赠书回顾关键亮点用ChatGPT颠覆数据分析,1分钟生成数据分析结果!30多个精心挑选的ChatGPT数据分析案例+50多种ChatGPT数据分析策略涵盖从数据预处理到高级分析的全过程助你在竞争

热文推荐