前端后台交互之原生node设计数据及接口

简介

一个网站，不仅仅只是前端所编写的，也离不开后台数据的交互。其中node起着桥梁的作用，它连接着前后台。下面就来探讨一下，用原生的node实现接口交互实现登录和注册功能（ps：没有数据库，数据是自己编写的，数据库是用文件夹充当的）

前端与后台的交互方式

在开发web应用时，前端与后端的交互方式分为以下几种：

1.href页面跳转模式
前端通过url访问后端的servlet，后端返回一个html页面或字符串
可以在url地址后附加参数，例如http://www.123.com?name=jay&age=34

2.form表单提交模式
分为get和post
通过submit直接提交（非ajax），后端返回一个html页面或字符串

3.ajax提交模式
分为get和post
页面不会全部刷新，局部模块提交
通常返回数据列表或处理结果的json字符串，通过JSON.stringify()函数解析json字符串

原生node实现接口

1）首先你需要准备一个文件夹，在文件里再准备一个文件夹（名字：data），准备一个 user.json 的json文件，来充当你的数据库


user.json里的数据可以不写，因为里面的数据是后面在页面上注册添加的

2）创建好注册、登录页面以及404页面

3）在data文件夹的外面创建一个app.js的js文件，与注册、登录页面平级

//后端中 web层  提供所有的数据接口
const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");
const {Console} = require("console");

const server = http.createServer();
server.on("request",(req,res)=>{
    let urlObj = url.parse(req.url,true);
    let pathname = urlObj.pathname;   //获取路由   /dome.html
    let query = urlObj.query;   //获取参数  对象
    //静态伺服
    //最先进入的页面
    if((pathname == "/" || pathname == "/登录页面") && req.method == "GET"){   
        fs.readFile("./登录页面","utf-8",(err,data)=>{
            if(err){
            //发生错误时进入的页面
                fs.readFile("./404.html","utf-8",(err,data)=>{
                    if(err){
                        return res.end();
                    }
                    //请求头
                    res.writeHead(200,{'Content-type':'text/html'});
                    res.end(data);
                    return;
                })
            }
            res.writeHead(200,{'Content-type':'text/html'});
            res.end(data);
        })
    }else if(pathname == '/404.html' && req.method == 'GET'){
        fs.readFile("./404.html","utf-8",(err,data)=>{
            res.writeHead(200,{'Content-type':'text/html'});
            res.end(data);
        })
    }else if(pathname == '/注册页面' && req.method == 'GET'){
        fs.readFile("./注册页面","utf-8",(err,data)=>{
            res.writeHead(200,{'Content-type':'text/html'});
            res.end(data);
        })
    }else if(pathname == '/首页' && req.method == 'GET'){
        fs.readFile("./首页","utf-8",(err,data)=>{
            res.writeHead(200,{'Content-type':'text/html'});
            res.end(data);
        })
    }


    //接口
    else if(pathname == '/注册页面' && req.method == "POST"){
        //获取前端传递参数，post请求只能通过文件流形式  存放参数
        let data = "";
        req.on("data",(chunk)=>{
            data += chunk;    //chunk是一个个字节码
        })
        req.on("end",()=>{
            let obj = querystring.parse(data);
            //与后台数据的交互
            fs.readFile("json数据页面","utf8",(err,data)=>{
                if(err){
                    return;
                }
                let arr = JSON.parse(data);
                for(let i = 0;i < arr.length;i++){
                    if(arr[i].username == obj.username){
                        res.end("0");
                        return;
                    }
                }
                arr.push(obj);
                let arr_str = JSON.stringify(arr);
                fs.writeFile("json数据页面",arr_str,'utf8',(err)=>{
                    if(err){
                        res.end("2");
                        return;
                    }
                    res.end("1");
                })
            })
        })
    }else if(pathname == "登录页面" && req.method == "GET"){
        fs.readFile("json数据页面","utf8",(err,data)=>{
            if(err){
                res.end("3");
                return;
            }
            let dataObj = JSON.parse(data);
            for(let i = 0;i < dataObj.length;i++){
                console.log(dataObj[i].username)
                if(dataObj[i].username == query.username){
                    if(dataObj[i].userpwd == query.userpwd){
                        res.end("1");
                        return;
                    }else{
                        res.end("2");
                        return;
                    }
                }else{
                res.end("0");
                return;
                }
            }
        })
    }
})
server.listen(端口号);

4）在登录和注册页面中写入js代码

5）如果还有css文件和js文件以及图片资源，那么还需写下他们的静态伺服代码

//css
else if(pathname == 'css文件路径' && req.method == 'GET'){
    fs.readFile("css文件路径","utf-8",(err,data)=>{
          res.writeHead(200,{'Content-type':'text/css'});
          res.end(data);
      })
  }

//js
else if(pathname == 'js文件路径' && req.method == 'GET'){
        fs.readFile("js文件路径","utf-8",(err,data)=>{
            res.writeHead(200,{'Content-type':'application/x-javascript'});
            res.end(data);
        })
    }

//图片资源
else if(pathname == '图片资源路径' && req.method == 'GET'){
        fs.readFile("图片资源路径",(err,data)=>{
        	//不同的图片资源结尾，请求头的类型不一样
            res.writeHead(200,{'Content-type':'image/png'});
            res.end(data);
        })
    }

至此原生node实现登陆及注册的功能已实现