Nodejs之http模块实现简单的前后端数据交互

最新推荐文章于 2022-06-23 23:01:59 发布

HelloGad

最新推荐文章于 2022-06-23 23:01:59 发布

阅读量796

点赞数 1

本文链接：https://blog.csdn.net/HelloGad/article/details/107324245

版权

Node.js与JSON的前后端数据交互

首先，创建自己的项目文件
在这里插入图片描述
然后再创建自己需要的数据文件与页面等

然后写出登录(login)与注册(register)页面需要的内容

login.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="wrapper">
       <div class="login">
            <div class="login-header">登录</div>
            <div class="login-main">
                <input type="text" class="user" placeholder="用户名">
                <span class="user-pass"></span>
                <input type="password" class="pwd" placeholder="密码">
                <span class="pwd-pass"></span>
            </div>
            <div class="loginBtn">登录</div>
            <div class="login-footer">没有账户？<a href="register.html">去注册</a><div>
       </div>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/login.js"></script>
     <script>
        $(".loginBtn").on("click", () => {
            let uname = $(".user").val();
            let upwd = $(".pwd").val();
            if(uname && upwd){
            $.ajax({
                url: '/login',
                type: 'GET',
                data: {
                    username: uname,
                    userpwd: upwd,
                },
                success: (res) => {
                    switch (res) {
                        case "0":
                            window.location.href = 'login.html';
                            break;
                        case "1":
                            alert("登录成功");
                            window.location.href = "./main.html";
                            break;
                        case "2":
                            alert("密码错误，请输入正确密码");
                            break;
                        case "3":
                            alert("未知错误");
                    }
                }
            })
        }
        else{
            alert("请输入完整");
        }
})


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

register.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../css/register.css">
</head>
<body>
    <div class="wrapper">
       <div class="res">
            <div class="res-header">注册</div>
            <div class="res-main">
                <input type="text" class="user" placeholder="用户名">
                <span class="user-pass"></span>
                <input type="password" class="pwd" placeholder="密码">
                <span class="pwd-pass"></span>
                <input type="password" class="pwdpass" placeholder="确认密码">
                <span class="newpwd-pass"></span>
                <div class="registerBtn">注册</div>
            </div>
            <div class="res-footer"></div>已有账户<a href="login.html">去登录</a><div>
       </div>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/register.js"></script>
    <script>
        $(".registerBtn").on("click", () => {
        let unmae = $(".user").val();
        let upwd = $(".pwd").val();
        if(unmae&&upwd){
            $.ajax({
                url: '/register',
                type: 'POST',
                data: {
                    username: unmae,
                    userpwd: upwd
                },
                success: (res) => {
                    switch (res) {
                        case "0":
                            alert("用户名被占用");
                            break;
                        case "1":
                            alert("注册成功");
                            window.location.href = 'login.html';
                            break;
                        case "2":
                            alert("验证错误");
                            break;
                        case "3":
                            alert("未知错误");
                            break;
                   }
                }
            })
        }
        else{
        alert("请输入完整");
        }
     })
    
    </script>
</body>

然后再是一些css样式，就不一一写入了。

重要的来了

先创建需要的模块

const http = require('http')
const url = require('url')
const fs = require('fs')
const querystring = require('querystring');

//然后就是根据需求写入静态伺服

const server = http.createServer();
server.on("request",(req,res)=>{
    let urlObj = url.parse(req.url,true);
    console.log(urlObj)
    let pathname = urlObj.pathname;//获取路由 register.html 相当于req.url
    let query = urlObj.query;//获取参数 对象类型

//静态私服
if((pathname == "/" || pathname== "/register.html") && req.method == "GET" ){
    fs.readFile("./page/register.html","utf8",(err,data)=>{
            if(err){
                fs.readFile("./page/404.html","utf8",(err,data)=>{
                    if(err){
                       return res.end()
                    }
                    res.setHeader("Content-type","text/html");
                    res.end(data);
                    return;
            })
    }
            res.setHeader("Content-type","text/html");
            res.end(data);
    })
}
else if(pathname== "/404.html" && req.method == "GET"){
    fs.readFile("./page/404.html","utf8",(err,data)=>{
        res.setHeader("Content-type","text/html");
        res.end(data);
    })    
}
else if((pathname== "/login.html") && req.method == "GET" ){
    fs.readFile("./page/login.html","utf8",(err,data)=>{
            res.setHeader("Content-type","text/html");
            res.end(data);
    })    
}
else if((pathname== "/main.html") && req.method == "GET" ){
    fs.readFile("./page/main.html","utf8",(err,data)=>{
            res.setHeader("Content-type","text/html");
            res.end(data);
    })    
}
else if(pathname== "/css/register.css" && req.method == "GET"){
    fs.readFile("./css/register.css","utf8",(err,data)=>{
        res.setHeader("Content-type","text/css");
        res.end(data);
    })    
}
else if(pathname== "/css/login.css" && req.method == "GET"){
    fs.readFile("./css/login.css","utf8",(err,data)=>{
            res.setHeader("Content-type","text/css");
            res.end(data);
    })    
}
else if(pathname== "/js/jquery-1.12.4.js" && req.method == "GET"){
fs.readFile("./js/jquery-1.12.4.js","utf8",(err,data)=>{
    res.setHeader("Content-type","text/javascript");
    res.end(data);
    })
}
else if(pathname== "/js/register.js" && req.method == "GET"){
    fs.readFile("./js/register.js","utf8",(err,data)=>{
        res.setHeader("Content-type","text/javascript");
        res.end(data);
    })
}
else if(pathname== "/js/login.js" && req.method == "GET"){
fs.readFile("./js/login.js","utf8",(err,data)=>{
    res.setHeader("Content-type","text/javascript");
    res.end(data);
})
}

然后就是创建login与register接口，实现前后端数据交互。

//接口
else if(pathname== "/register" && req.method == "POST"){
    //获取前端传递参数，post请求只能通过文件流形式
    //存放参数数据
  let data = "";
  req.on("data",(chunk)=>{
    data += chunk;//chunk是一个个字节码
  })
  req.on("end",()=>{
      let obj = querystring.parse(data);//将json文件转换为对象
      fs.readFile("./data/user.json","utf8",(err,data)=>{
          if(err){
              return;
          }
          let arr = JSON.parse(data);//将json文件转换为对象
          for(let i = 0;i < arr.length;i++){
             if(arr[i].username == obj.username){
                 res.end("0");//当等于0时，提示用户名被占用
                 return;
             }
          }
          arr.push(obj);//把获取的数据对象从传入arr数组中
          let arr_str = JSON.stringify(arr);//将对象转为json字符串
          fs.writeFile("./data/user.json",arr_str,"utf8",(err)=>{
              if(err){
                  res.end("3")//当等于3时，提示未知错误
                  return;
              }
              res.end("1");//当等于1时，注册成功
          })
      })
  })
}
else if(pathname == "/login" && req.method == "GET"){
    fs.readFile('./data/user.json',"utf8",(err,data)=>{
        if(err){
            res.end("3")
            return;
        }
        let dataobj = JSON.parse(data)
        for(let i = 0;i < dataobj.length;i++){
            if(dataobj[i].username == query.username){
                if(dataobj[i].userpwd == query.userpwd){
                    res.end("1");
                    return;
                }
                else{
                    res.end("2");
                    return;
                }
            }
        }
        res.end("0");
    })
}
})
server.listen(3000);

然后在终端输入node app.js
在这里插入图片描述
在浏览器输入端口号127.0.0.1：3000

就出来了注册页面，然后输入注册实现登录，user.json数据文件就会保存你注册的信息数据。

这样就简单的实现了前后端数据交互了^ _ ^。