Node.js 基础知识------Ajax详细的环境搭建

举一个栗子吖

已于 2022-04-11 14:54:04 修改

阅读量2.3k

点赞数 3

分类专栏：前端知识文章标签： node.js ajax 前端 javascript

于 2022-04-07 19:27:54 首次发布

本文链接：https://blog.csdn.net/qq_45359288/article/details/124016992

版权

前端知识专栏收录该内容

24 篇文章 5 订阅

订阅专栏

准备学习Vue框架了，在开始之前先大概过一遍Nodejs和Ajax基础知识，例如NPM包管理、文件读写、路由path、网络htttp等。
本篇先简介nodejs，以及Ajax环境搭建，下一篇介绍Ajax后续内容

Node.js

Node.js是一个基于 Chrome V8 引擎的 JavaScript运行环境
Node.js内置API模块（fs、path、http等）
第三方API 模块(express、mysql等)
在这里插入图片描述

1、安装Node.js

官网地址： https://nodejs.org/en/
在这里插入图片描述
左边的是稳定版本，右边是最新版本，建议下载LTS长期支持版

查看下载的版本，打开PowerShell，输入 node -v查看

Node.js模块化开发
在这里插入图片描述

2、系统模块fs文件操作

在这里插入图片描述

//读取文件内容
fs.readFile('文件路径/文件名称', ['文件编码'], callback);
//写入文件内容
fs.writeFile('文件路径/文件名称', '数据',  callback); //如果error不是空，代表写入失败； 写入成功error是null；

在这里插入图片描述

3、系统模块 path 路径操作

在这里插入图片描述
路径拼接语法

相对路径 VS 绝对路径

大多数情况使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录
在读取文件或者设置文件路径时都会选择绝对路径
使用__dirname获取当前文件所在的绝对路径

4、第三方模块（包）

别人写好的、具有特定功能的，能直接使用的模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹里，所以又名包。

第三方模块有两种存在形式

以js文件的形式存在，提供实现项目具体功能的API接口
以命令行工具形式存在，辅助项目开发

获取第三方模块
npmjs.com 第三方模块的存储和分发仓库
npm （node package manager）： node的第三方模块管理工具

下载： npm install 模块名称
删除：npm uninstall package 模块名称

 npm install formidable
 //formidable主要做文件上传，会下载到当前命令行工作目录下面

npm uninstall formidable

全局安装和本地安装

命令行工具：全局安装
库文件：本地安装

第三方模块 nodemon
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
nodemon是一个命令行工具，以辅助项目开发。nodemon可以监控文件的保存操作，如果有保存操作，就会重新执行该文件。

nodemon使用步骤

使用 npm install nodemon -g 下载
在命令行工具中用nodemon 命令替代node命令执行文件（如果nodemon不能使用，在命令行输入set-ExecutionPolicy RemoteSigned 然后按Y回车）（ crtl + c 终止操作）

第三方模块 nrm
nrm（npm registry manager ）：npm 下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢

nodemon使用步骤

使用 npm install npm -g 下载
查询可用下载地址列表 nrm ls
切换npm下载地址nrm use 下载地址名称

在这里插入图片描述

Ajax

传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容，用户体验特别不好
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

Ajax概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。Ajax在网站应用中无处不在，在不刷新页面的情况下，向服务器发送请求，和服务器端进行交互，从而更改客户端页面中的数据或者状态，主要目的就是提高用户浏览网站应用的体验。

应用场景

页面上拉加载数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

运行环境
Ajax技术需要运行在网站环境中才能生效（运行Ajax代码的html页面需要放在网站服务器下运行，要能以localhost域名的方式打开页面，不能直接双击html文件运行，否则代码不会生效），需要借助Node创建的服务器作为网站服务器，并且实现静态资源访问服务功能。将代码写在html文件当中，将html文件放在静态资源文件夹中，这样就可以通过域名的方式访问html页面。

Ajax—详细的环境搭建

1、首先下载安装node： https://www.cnblogs.com/technicist/p/12683787.html
2、新建文件夹（重命名为“server”，命名随意）
server文件夹前提：server里面新建一个app.js文件；server里面新建一个public文件夹，文件夹里面有一个index.html文件；两个文件代码如下
在这里插入图片描述

//app.js文件
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();

app.use(bodyParser.json());

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 监听端口，启动服务
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');



//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>欢迎，这是public文件夹中的index.html文件</h2>
</body>
</html>

3、进入到该文件夹（server），按住 “Shift”键，鼠标右击 “ 在此处打开Powershell 窗口(S)”命令行依次输入

npm init --yes
//初始化环境
//该文件夹就会生成  package.json文件

npm install express --save
//下载express包
//该文件夹就会生成  package-lock.json文件 和 node_modules 文件夹

node app.js
//服务器启动成功

在这里插入图片描述

4、打开浏览器，输入网址：http://localhost:3000/
这里要注意，不要把Powershell 窗口关闭（一个坑），如果关闭了Powershell 窗口，就打不开localhost:3000
在这里插入图片描述

举一个栗子吖

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Node.js 基础知识------Ajax详细的环境搭建

准备学习Vue框架，在开始之前先大概过一遍Nodejs和Ajax基础知识，例如NPM包管理、文件读写、路由path、网络htttp等目录Node.js1、安装Node.js2、系统模块fs文件操作3、系统模块 path 路径操作4、第三方模块（包）Ajax1.、概述Node.jsNode.js是一个基于 Chrome V8 引擎的 JavaScript运行环境Node.js内置API模块（fs、path、http等）第三方API 模块(express、mysql等)1、安装Node.js
复制链接

扫一扫