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, router) {
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, router) {
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, name) {
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, name) {
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, addClass) {
/* 获取当前的表单元素 */
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, res) {
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, reject) {
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, res) {
/* 传输过来的数据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，传入数据，调用不同函数执行
- 根据路由的不同执行不同数据处理函数