封装Ajax，封装注册，登录的表单验证，Ajax的消息通信

AJAX.js通信

/* 因为客户端都需要通过Ajax通信，所以先封装Ajax */
export default class AJAX {
    /* 通信协议 */
    static HTTP = "http://";
    static HTTPS = "https://";
    /* 选择当前的通信协议 */
    static PROTOCOl = AJAX.HTTP;
    static URL = "10.9.46.184";
    static PORT = 4001;
    static POST = "post";
    static GET = "get";
    static SIGN_UP = "signup";
    static SIGN_IN = "signin";
    /* 事件类型 */
    static AJAX_FINISH_EVENT = "ajax_finish_event";
    /* 构造函数 */
    constructor() {

    }
    /* 静态get */
    static get(data) {
        AJAX.send()

    }
    /* 静态post */
    static post(data,router) {
        AJAX.send(AJAX.POST,data,router)
    }

    /* 发送目标 */
    /* 参数是发送类型，data是发送数据 ,router是路由*/
    static send(method, data,) {
        var xhr = new XMLHttpRequest();
        /* 静态方法不能使用this */
        xhr.addEventListener("load", e => AJAX.loadHandler(e));
        /* 请求方式，访问网址 */
        xhr.open(method, AJAX.PROTOCOl + AJAX.URL + ":" + AJAX.PORT + "/" + router);
        /* 发送字符串 */
        xhr.send(JSON.stringify(data))

    }
    /* 事件函数 */
    static loadHandler(e) {
        /* 谁侦听谁接收也就是xhr，但是在静态方法中不能写this */
        var o = JSON.parse(e.currentTarget.response);
        /* 创建一个自定义事件AJAX.AJAX_FINISH_EVENT */
        /*  */
        var evt = new Event(AJAX.AJAX_FINISH_EVENT);
        /* 抛发事件 */
        evt.data = o;
        document.dispatchEvent(evt)
    }
}

SUbmit.js处理表单

/* 加载 */
import AJAX from "./AJAX.js";
export default class Submit {
    form;
    ids;
    router;
    constructor(form,) {
        this.router = router;
        if (typeof form === "string") form = document.querySelector(form);
        this.form = form;
        console.log(form);
        form.addEventListener("submit", e => this.submitHandler(e));
        form.addEventListener("input", e => this.inputHandler(e));
    }
    submitHandler(e) {
        e.preventDefault();
        /* 传入from对象，提出整个form表单数据对象 */
        var fd = new FormData(this.form);
        var obj = {};
        /* 表单验证 */
        for (var [key, value] of fd) {
            /* 遍历传入一个对象当中 */
            obj[key] = value;
            /* 对性别不做表单验证 */
            if (key === "sex") continue;
            /* 如果有数据不符合就聚焦到对应的元素上 */
            if (!this.judge(value, key)) {
                this.form.querySelector("[name=" + key + "]").focus();
                return;
            }
        }
        /* 向服务器发送数据 */
        AJAX.post(obj,this.router);
    }
    inputHandler(e) {

    }
    judge(value,) {
        if (this.regExpValue(value, name)) {
            this.changeClass(name, ["has-error", "glyphicon-remove"], ["has-success", "glyphicon-ok"]);
            return true;
        }
        this.changeClass(name, ["has-success", "glyphicon-ok"], ["has-error", "glyphicon-remove"])
        return false;

    }
    regExpValue(value,) {
        switch (name) {
            case "user":
                return /^\w{6,18}$/.test(value);
            case "password":
                return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])\w{8,16}$/.test(value);
            case "name":
                return /^[\u4e00-\u9fd5]{2,4}$/.test(value);
            case "age":
                return /^[0-9]$|^[1-9]\d$|^1[0-2]\d$/.test(value);
            case "tel":
                return /^1[3-9]\d{9}$/.test(value);
            case "email":
                return /^\w+\@\w+\.(com|org|net|cn|edu)(\.(cn|tw|hk))?$/.test(value);
        }
    }
    /* 改变css内容函数 */
    changeClass(name, removeClass,) {
        /* 获取当前的表单元素 */
        var input = document.querySelector("[name=" + name + "]");
        /* 获取当前的表单元素父容器的classlist */
        var divlist = input.parentElement.classList;
        /* 获取当前的表单元素下一个兄弟元素的classlist */
        var spanlist = input.nextElementSibling.classList;
        if (divlist.contains(removeClass[0])) divlist.remove(removeClass[0]);
        divlist.add(addClass[0])
        if (spanlist.contains(removeClass[1])) spanlist.remove(removeClass[1]);
        spanlist.add(addClass[1])
    }
}

服务器路由管理

var http = require('http')
/* 加载model模块 */
var {
    createConnect,
    selectAll,
    insert,
    login
} = require('./model.js');

/* 获取的数据库内容 */
var connect;
http.createServer(async function (req,) {
    if (!connect) connect = await createConnect();
    // 如果能输出就说明检测成功
    // console.log(connect);
    // 如果能输出就说明查询成功
    // console.log(await selectAll(connect));
    
    /* 拿到路由 */
    var router=req.url.split("?")[0];
    /* 接收到数据对象 */
    var data = await getData(req);
    // console.log(data);
    
    
  
    res.writeHead(200, {
        "Content-Type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*" //CORS 允许谁跨域访问
    })
    /* 根据路由的不同执行不同的函数 */
    switch(router){
        case "/signin":
            signIn(data,res);
            break;
        case "/signup":
            /* 插入数据 */
            signUp(data, res);
            break;
    }


}).listen(4001, "10.9.46.184", function () {
    console.log('服务器已开.....');
})

/* 接收客户端发来的数据函数 */
function getData(req) {
    /* 异步接收考虑promise */
    return new Promise(function (resolve,) {
        var data = "";
        /* req请求加载事件on，事件类型有data和end，回调函数里的参数就是收到的数据 */
        req.on("data", _chunk => data += _chunk);
        /* req数据接收完毕执行 */
        req.on("end", () => {
            try {
                /* 解析字符串成为对象 */
                data = JSON.parse(data);
            } catch (e) {};
            /* 返回出去这个数据对象 */
            resolve(data)
        });
    })
}
/* 异步插入数据 传入数据对象，传入响应对象*/
async function signUp(data,) {
    /* 传输过来的数据value值经过解析变成了字符串，改回去age */
    data.age = Number(data.age);
    /* 向数据库插入数据，对象的内容数组 */
    var result = await insert(connect, Object.values(data));
    console.log(result);
    if (result) {
        res.end(JSON.stringify({
            err: null,
            msg: "插入正确"
        }));
    } else {
        res.end(JSON.stringify({
            err: "插入错误"
        }));
    }
}

async function signIn(data,res){
    console.log(data);
    console.log(Object.values(data));
    var result= await login(connect,Object.values(data));
    if(!result){
        res.end(JSON.stringify({err:"登录失败，用户名或者密码错误!"}));
        return
    }
    var list=await selectAll(connect);
    res.end(JSON.stringify({err:null,list:list}));
}

总结：

• 客户端验证表单填写时，提交时对数据验证

• 提交的是对象，所以发送的时候需要解析
• 通过ajax通信，把数据传入到个服务器的不同接口

• 服务器根据不同的请求，处理数据

• 提交到服务端的数据，req做事件解析，解析出来的数据不一样
• 数据库链接nodejs，传入数据，调用不同函数执行
• 根据路由的不同执行不同数据处理函数