使用Node.js+express+Ajax实现前后段分离开发

🌵 前言介绍：以下👇 内容都是我个人对于知识的总结，会定期更新欢迎持续关注！

🌵 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

1、什么是node

Node全称NodeJS，是一个基于Chrome V8引擎的JavaScript运行环境；一个让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl等服务端语言平起平坐的脚本语言。

1.1安装node

去node官网下载LTS，长期稳定版本：
Node官网

安装完成后打开命令行输入

node -v
如果出现版本号证明安装成功，如果不出现，再安装一次，可以考虑选择repair

然后打开代码编辑软件配置淘宝镜像，这里使用的是webstrom进行演示：

npm get registry
如果出现的网址，不是https://registry.npmmirror.com/
则需要改成淘宝镜像地址，命令如下：

 npm set registry https://registry.npmmirror.com/

---

2、创建项目

在控制台使用cd +tab键切换文件夹到你想要的目录文件下
然后进行初始化：

npm init -y 

在package.json里面会生成配置信息。

3、什么是express

Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。express提供了简洁的路由定义方式，对获取 http 请求参数进行了简化处理，对模板引擎支持程度高，方便渲染动态HTML页面，拥有中间件机制有效控制 HTTP 请求，拥有大量第三方中间件对功能进行扩展。

3.3、安装express

cd 目标文件夹
npm i express
npm i express-art-template

同样会在package.json里面生成配置信息。
然后在控制台输入：

node 文件名

启动服务器

4、功能实现

搭建基础登录注册页面。

const express = require('express')

const app = express()

app.engine('html', require('express-art-template'))

//配置body-parser
app.use(express.urlencoded({extended: false}))
app.use(express.json())

app.get('/register.html', (req, res) => {
    res.render('register.html')
})

app.get('/login.html', (req, res) => {
    res.render('login.html') 
})

上述代码通过引入express框架创建了一个服务器应用程序，监听客户端的HTTP请求并响应，node中使用cmd，也叫commonJs模块化方式，用require导入。

app.engine(‘html’, require(‘express-art-template’))

这里使用的是express-art-template模块，用于解析HTML文件。

app.get(‘/register.html’, (req, res) => {
res.render(‘register.html’) })

定义一个GET路由，当客户端请求/register.html时，服务器会响应一个HTML页面。res.render()方法用于渲染HTML模板，将模板中的变量替换为具体的值。

app.get(‘/login.html’, (req, res) => {
res.render(‘login.html’) })

定义一个GET路由，当客户端请求/login.html时，服务器会响应一个HTML页面。与上面的/register.html路由类似。

app.get('/test_email', (req, res) => {
    console.log(req.query)
    if (req.query.email === '2028076332@qq.com') {
        res.send('账号已注册')
    } else {
        res.send('')
    }
})

app.post('/login', (req, res) => {
    console.log(req.body)
    if (req.body.email === '2028076332@qq.com' && req.body.password === 'admin')
        //post向后端发送用body接收
        res.render('index.html')  //渲染页面
    else res.send('账号密码错误')
})

app.get('/text_email', (req, res) => {
    console.log(req.query)
    if (req.query.email === '2028076332@qq.com') {
        res.send('账号已注册')
    } else {
        res.send('查无此号')
    }
})

app.listen(3000, () => console.log('app is running'));

我们使用了POST和GET路由来处理用户提交的数据和请求，并使用模板引擎来渲染页面。我们实现了一个登录功能，当用户输入正确的账号密码时，进入主页，否则提示账号密码错误；还实现了一个邮箱验证功能，当用户输入已注册的邮箱时，返回账号已注册，否则返回查无此号。

account.onblur=()=>{
    const xhr = new XMLHttpRequest() //创建一个XMLHttpRequest对象，用于向后端发送请求
    // const params = `/test_account?account=' + account.value
    const params = `/test_account?account=${account.value}`
    xhr.open('GET',params,true)//设置请求方式和url
    xhr.onreadystatechange = ()=>{//监听XMLHttpRequest对象的onreadystatechange事件，当状态改变时触发回调函数。
        if (xhr.readyState===4&& xhr.status===200){
            //当后端的response成功回传后，readyState将变成4.status将变成200
            console.log(xhr.responseText)
            //打印XMLHttpRequest对象的响应内容，也就是后端返回的数据。xhr.responseText是XMLHttpRequest对象的一个属性，			表示后端返回的响应内容。
        }
    }
        xhr.send()  //发送请求
}

当输入框失去焦点时，会向后端发送一个GET请求，并将输入框中的值作为参数传递给后端。同时，通过监听XMLHttpRequest对象的状态变化，在后端成功响应后，将响应内容打印到控制台中。