Ajax服务搭建

一、准备检查工作

确认nodeJS、yarn、express已经安装

• 安装nodeJS:https://nodejs.org/zh-cn/

• 安装yarn：

  • 安装包安装： https://yarn.bootcss.com/

  • npm安装：npm install -g yarn

  设置目录：

  # 全局安装目录
  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

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

yarn add express

npm install express --save

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文件，内容如下：

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

node server.js

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

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

安装延迟重启 nodemon

全局安装: npm install -g nodemon

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

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