一、准备检查工作

确认nodeJS、yarn、express已经安装

设置目录：

# 全局安装目录
yarn config set global-folder D:\Yarn\yarn_global
# 缓存目录
yarn config set cache-folder D:\Yarn\yarn_cache

修改镜像源：

# 查看当前源
yarn config get registry
# 修改为淘宝镜像源
yarn config set registry https://registry.npm.taobao.org
  • 安装express：npm install express --save

二、初始化项目

1、建立新项目文件夹，然后打开cmd窗口，进入到新建项目文件夹(ps:快捷方式进入)

2、在cmd窗口终端中输入第一行命令，初始化项目,此时项目根目录下生成一个package.json文件

yarn init

或

npm init --yes

Ajax服务搭建_Ajax

3、输入第二行命令，添加“express”模块，此时文件的目录会增加node_modules文件夹和yarn.lock文件，存放的是express模块文件

yarn add express

或

npm install express --save

Ajax服务搭建_JavaScript_02

Ajax服务搭建_Ajax_03

4、用VSCode打开项目文件夹，然后在根目录创建一个public的文件夹和一个server.js的文件，server.js输入如下内容：

/**** server.js ****/
// 一个简单的后端路由

//1.引入express框架
const express=require('express')

//2.引入路径处理模块
const path=require('path')

//3.创建web服务器
const app=express();

//4.配置路由 request 请求       response 响应,回应
app.get('/test',(request,response)=>{
    //响应
    response.send({name:"Ajax",message:"您好！"});
})

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

//6.监听端口,进行回调
app.listen(3000,(err)=>{
    // 函数体
    if(!err) {
        console.log('测试ajax请求的服务器开启成功了!');
        console.log('正在监听3000端口...........');
    }
})

5、在public文件夹下建立index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>
<body>
    <script type="text/javascript">
    //1.创建Ajax对象
    var xhr=new XMLHttpRequest();

    //2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //(1):请求方式; (2):请求地址
    xhr.open('get','http://localhost:3000/test');

    //3.发送请求
    xhr.send();

    //4.获取服务器相应到客户端的数据
    xhr.onload=function(){
        
       //将json对象转为json对象
       var resposeTxt=JSON.parse(xhr.responseText);
        //输出到控制台
       console.log(resposeTxt);

       //添加到body中
       var str='<h3>'+resposeTxt.name +','+resposeTxt.message+'</h3>';
       document.body.innerHTML=str;
    }

    </script>
</body>
</html>

6、启动服务，在VSCode终端输入如下命令，启动服务

node server.js

Ajax服务搭建_JavaScript_04

7、浏览器访问http://localhost:3000/index.html,检查是否有页面内容响应

Ajax服务搭建_Ajax_05

8、修改请求相应内容后需重启服务器才能使浏览器端内容改变，对应解决方案如下：

安装延迟重启 nodemon

全局安装: npm install -g nodemon

项目安装： npm install nodemon --save-dev

自动重启服务器 终端命令 nodemon server.js

技术的发展日新月异，随着时间推移，无法保证本博客所有内容的正确性。如有误导，请大家见谅，欢迎评论区指正！

开源库地址,欢迎点亮:

GitHub： https://github.com/ITMingliang

Gitee：  https://gitee.com/mingliang_it

GitLab：  https://gitlab.com/ITMingliang

建群声明： 本着技术在于分享，方便大家交流学习的初心，特此建立【编程内功修炼交流群】，为大家答疑解惑。热烈欢迎各位爱交流学习的程序员进群，也希望进群的大佬能不吝分享自己遇到的技术问题和学习心得！进群方式：扫码关注公众号，后台回复【进群】

Ajax服务搭建_JavaScript_06