美文网首页
nodejs前后端的数据交互

nodejs前后端的数据交互

作者: 天问ing | 来源:发表于2019-01-09 23:14 被阅读0次

数据流向一般是:前端请求 ---->后端数据校验 ---->查询数据库 ---->响应前端

基本的数据库sql(结构化查询语句)一般涉及增删改查四大操作,具体如下:


  1. INSERT INTO 表(字段列表) VALUES(值列表)
INSERT INTO user_table(ID,name,gender,chinese,math,english) VALUES(0,"张三","男",20,30,50)

  1. DELETE FROM 表 WHERE 条件
DELETE FROM user_table WHERE ID=1

3.改
UPDATE 表 SET 字段1=值1,字段2=值2 WHERE 条件

UPDATE user_table SET chinese=20 WHERE ID=1

  1. SELECT 字段1,字段2 FROM 表 WHERE 条件
SELECT chinsese FROM user_table WHERE ID=1

前后端配合完成简单注册和登陆的数据交互代码如下:

  1. 前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前后台联调往数据库存取数据</title>
    <script src="./jquery.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $.ajax({
                    url: "/reg",
                    method: "get",
                    data: {
                        username: $("#user").val(),
                        password: $("#pwd").val()
                    },
                    dataType: "json",
                    success(json){
                        if(json.err){
                            alert("注册失败了"+json.msg);
                        }else{
                            alert("注册成功了");
                        }
                    },
                    error(err){
                        alert("请求出错了"+JSON.stringify(err));
                    }
                })
            })
            $("#btn2").click(function(){
                $.ajax({
                    url: "/login",
                    method: "get",
                    data: {
                        username: $("#user").val(),
                        password: $("#pwd").val()
                    },
                    dataType: "json",
                    success(json){
                        if(json.err){
                            alert("登陆失败了"+json.msg);
                        }else{
                            alert("登陆成功了");
                        }
                    },
                    error(err){
                        alert("请求出错了"+JSON.stringify(err));
                    }
                })
            })
        })
    </script>
</head>
<body>
    用户名:<input type="text" name="user" id="user"><br>
    密码:<input type="password" name="pwd" id="pwd"><br>
    <button id="btn1">注册</button>
    <button id="btn2">登陆</button>
</body>
</html>
  1. 后端代码
const http = require("http");
const fs = require("fs");
const mysql = require("mysql");
const url = require("url");
const zlib = require("zlib");
const crypto = require("crypto");

let key = "1234656";
function md5(str){
    let obj = crypto.createHash("md5");
    obj.update(str);
    return obj.digest("hex");
}
function md5_2(str){
    return md5(md5(str+key));
}
//创建数据库的连接
let db = mysql.createPool({host: "localhost", port: "3306", user: "root", password: "cf540294", database: "user"})
//创建服务
let server = http.createServer((req,res)=>{
    let {pathname,query} = url.parse(req.url,true);
    let {
        username,
        password
    } = query;
    switch(pathname){
        case "/reg":
            //对数据进行校验
            if(!username){
                res.write('{"err":1,"msg":"username can\'t be empty"}');
                res.end();
            }else if(!password){
                res.write('{"err":1,"msg":"password can\'t be empty"}');
                res.end();
            }else if(!/^\w{4,16}$/.test(username)){
                res.write('{"err":1,"msg":"username is invalid"}');
                res.end();
            }else if(/['|"]/.test(password)){
                res.write('{"err":1,"msg":"password is invalid"}');
                res.end();
            }else{
                //写入数据库之前先判断用户明是否存在
                db.query(`SELECT * FROM user_table WHERE username='${username}'`,(err,data)=>{
                    if(err){
                        res.write('{"err":1,"msg":"database error"}');
                        res.end();
                    }else{
                        if(data.length>0){
                            res.write('{"err":1,"msg":"the username is exists"}');
                            res.end();
                        }else{
                            db.query(`INSERT INTO user_table (id,username,password) VALUES(0,'${username}','${md5_2(password)}')`, (err, data) => {
                                if(err){
                                    res.write('{"err":1,"msg":"database error"}');
                                    res.end();
                                }else{
                                    res.write('{"err":0,"msg":"success"}')
                                    res.end();
                                }
                            })
                        }
                    }
                })
            }
            break;
        case "/login":
            //对数据进行校验
            if (!username) {
                res.write('{"err":1,"msg":"username can\'t be empty"}');
                res.end();
            } else if (!password) {
                res.write('{"err":1,"msg":"password can\'t be empty"}');
                res.end();
            } else if (!/^\w{4,16}$/.test(username)) {
                res.write('{"err":1,"msg":"username is invalid"}');
                res.end();
            } else if (/['|"]/.test(password)) {
                res.write('{"err":1,"msg":"password is invalid"}');
                res.end();
            } else {
                //写入数据库之前先判断用户明是否存在
                db.query(`SELECT * FROM user_table WHERE username='${username}'`, (err, data) => {
                    if (err) {
                        res.write('{"err":1,"msg":"database error"}');
                        res.end();
                    }else if(data.length == 0){
                        res.write('{"err":1,"msg":"the username is not exists"}');
                        res.end();
                    }else if(data[0].password != md5_2(password)){
                        res.write('{"err":1,"msg":"the username or password is incorrect"}');
                        res.end();
                    }else{
                        res.write('{"err":0,"msg":"success"}');
                        res.end();
                    }
                })
            }
            break;
        default:
            let rs = fs.createReadStream(`www${pathname}`);
            let gz = zlib.createGzip();
            res.setHeader("content-encoding","gzip");
            rs.pipe(gz).pipe(res);
            rs.on("error",err=>{
                res.writeHeader(404);
                res.write("Not Found");
                res.end();
            });
            break;
    }
})
// 监听端口
server.listen(8080);

相关文章

  • nodejs前后端的数据交互

    数据流向一般是:前端请求 ---->后端数据校验 ---->查询数据库 ---->响应前端 基本的数据库sql(结...

  • 2018-02-08

    前端与后端的数据交互 前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后...

  • HTTP协议、存储、Ajax

    前后端数据交互与 HTTP 协议 1、前后端通信是什么(1)前端和后端交互的过程(2)浏览器和服务器之间数据交互的...

  • 前后端数据交互方法总结

    前后端数据交互方法 在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。 目录: H...

  • 前后端数据交互方法

    《前后端数据交互方法》http://www.zhihu.com/question/26532621一个小案例搞懂前...

  • Windows下从零开始学习nodejs4.X+express4

    nodejs交互环境 nodejs交互环境简称 : REPL类似于Python的交互环境, nodejs的交互环境...

  • json-server模拟服务端REST接口

    在web项目开发中,前端完成静态页面的开发后,后端迟迟未给到接口,会导致前、后端数据交互的开发流程中停滞。可以根据...

  • python中的ajax

    前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的...

  • 前端与后端的数据交互(jquery ajax+python fl

    前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的...

  • 高效开发实践

    前端实现业务,后端处理数据。在现代框架实现前后端分离后,前后端的交互基本分为2种: 数据读取和数据写入。而前端由于...

网友评论

      本文标题:nodejs前后端的数据交互

      本文链接:https://www.haomeiwen.com/subject/sownrqtx.html