今天刚入坑学习ajax,刚开始就遇到服务器这一知识盲区,经过解决各种问题,成功运行的代码,下面就分享给你们,希望能够帮你们解决问题。
(一)node.js安装
1、进入官网,下载对应版本
2、下载了.msi文件,双击或者右键安装,即可(安装过程简单在此不详细说明。安装路径自行安排,我的安装路径为F:\node.js)
3、在cmd下输入
node -v
npm -v
查看node安装是否成功
4、(可选配置)设置npm在全局模块下路径和缓存cache路径
由于默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中会占用c盘空间,这里提供了可以修改路径的方法(我自己修改了路径)
npm config set prefix "F:\node.js\node_global"
npm config set cache "F:\node.js\node_cache"
5、(若执行了4这个步骤则需要进行环境变量配置)配置环境变量
右键我的电脑->属性->高级系统设置->高级下的环境变量->用户变量下的PATH进行配置(默认会有一个c盘目录下的需要改成下面地址)
F:\node.js\node_global;
(二)nodemon安装
全局安装
npm install -g nodemon
本地安装
npm install --save-dev nodemon
(三)原生node.js本地服务器搭建
在F:\node.js下新建一个Server文件夹,进入该文件夹后新建一个server.js文件,键入代码
// 导入http模块
var http = require("http");
// 开启一个监听事件 每次请求http都会触发这个事件
http.createServer(function(req,res){
// 把编码设置为 utf-8
res.write('<head><meda charset="utf-8"/></head>');
// 设置响应体信息
res.write('Hello World');
// 结束事件
res.end();
// 设置监听端口号
}).listen(3000);
在server文件夹下按住shift+右键,点击“在此处打开命令窗口”
输入
node server.js
打开浏览器输入
localhost:3000
看到Hello World,说明搭建成功
(四)使用express框架搭建本地服务器
1、把npm镜像改成淘宝镜像
npm config set registry https://registry.npm.taobao.org
2、全局安装express命令安装工具
npm install -g express-generator
3、安装express框架
npm install -g express
4、安装成功后,使用express框架构建项目
(1)创建项目(servertest为文件名称)
express servertest -e
(2)在C:\Windows\System32下找到servertest,剪切后放入F:\node.js文件夹下(找不到可进行搜索)
(3)在servertest文件夹下shift+右键用命令窗口打开,输入
npm install
安装依赖
(4)启动项目
npm start
(5)修改app.js文件,使其识别html文件,增加监听窗口3000
用下面代码替换app.set(‘view engine’, ‘ejs’),public文件下放入index.html,为入口页面
app.engine('.html',require('ejs').__express);
app.set('view engine','html');
(5)注意事项:关闭服务器时,最好在cmd上输入ctrl+c结束进程,在点击×关闭。当修改了node.js服务器端代码后,重启服务器才能生效。
(五)向服务器发送请求并获得服务器返回结果
1、打开app.js,创建一个first路由并设定服务器返回信息
app.get('/first',(req, res) => {
res.send('Hello Ajax');
});
app.listen(3000);
console.log('服务器启动成功');
2、在public文件夹下放入test.html,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求,以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get', 'http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function (){
console.log(xhr.responseText)
}
</script>
</body>
</html>
3、servertest文件下shift+右键用命令窗口打开,输入powershell,进入window powershell模式,再输入
nodemon app.js
看到服务器启动成功,说明服务器启动完成
4、打开网址
http://localhost:3000/test.html
可以看到控制台打印了服务器返回的信息
可能遇到的问题
1、端口被占用
解决方法
查看哪个占用了3000端口号
netstat -ano | findstr :3000
接着输入其PID即可(本次PID为4724)
taskkill -PID 4724 -F
2、Powershell禁止执行脚本
Powershell脚本4种执行权限
(1)Restricted——默认的设置, 不允许任何script运行
(2)AllSigned——只能运行经过数字证书签名的script
(3)RemoteSigned——运行本地的script不需要数字签名,但是运行从网络上下载的script就必须要有数字签名
(4)Unrestricted——允许所有的script运行
原因:由于windows默认不允许任何脚本运行,默认为Restricted,所以输入
Set-ExecutionPolicy Unrestricted
即可改变权限。
Window7在此时可能遇到新的问题
“Set-ExecutionPolicy : 对注册表项“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell”的访问被拒绝。”错误
原因:这是由于没有打开管理员权限启动命令。