使用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对象的状态变化,在后端成功响应后,将响应内容打印到控制台中。