先看看完成后效果
点击登录后进入登录页面
账号错误或者无账号点击注册 图为登录成功后页面
注册页面
点击修改或保存后出现编辑页面
这里是数据库里的两张表
上面一张是后台管理表 下面一张是登录的账号和密码信息
添加了cookie防止直接进入
这里是主要文件
包括一些文件作用的描述
ajax封装代码
/**
*如果是默认参数 就可以不传
* @param method 请求的方法
* @param url 请求的地址
* @param data 发送的数据
* @param success 数据请求成功以后,需要处理的业务逻辑 就是一个函数块
* return undefined
*/
function ajax(options) {
// 给method默认值 默认为get
var method = options.method || 'get';
// 发送请求
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method.toLowerCase() === 'get') {
xhr.open('get', options.url + "?" + options.data, true);
xhr.send();
} else if (method.toLowerCase() === 'post') {
xhr.open('post', options.url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(options.data);
} else {
console.log("请求方式不正确")
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var arr = JSON.parse(xhr.responseText);
options.success && options.success(arr);
}
}
}
后台相关代码
var http = require('http'); //引入http模块
var url = require('url'); //引入url模块
var fs = require('fs') //引入fs模块
var querystring = require('querystring'); //引入querystring模块
var cookie = require('cookie'); //引入cookie模块
var mysql = require('mysql'); //引入数据库
//创建一个连接
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'ajaxdemo'
});
var app = http.createServer(function (req, res) { //创建实例
var url_obj = url.parse(req.url);
if (url_obj.pathname === '/') { //这里是一个路由过程
render('./template/index.html', res);
return;
}
//处理注册的逻辑
if (url_obj.pathname === "/register" && req.method === "POST") {
var user_info = '';
req.on("data", function (chunk) {
user_info += chunk;
});
req.on("end", function (err) {
if (!err) {
// console.log(user_info);
var user_obj = querystring.parse(user_info);
res.setHeader('content-type', 'text/html;charset=utf-8');
//判断是否为空
if (user_obj.password !== user_obj.repassword) {
res.write('{"status":1, "message": "两次输⼊密码不⼀致"}', 'utf-8');
res.end();
return;
}
if (user_obj.password == '' || user_obj.username == '') {
res.write('{"status":1, "message": "⽤户名和密码不能为空"}', 'utf-8');
res.end();
return;
}
//把信息写入数据库
var sql = 'insert into admin(username,password) value("' + user_obj.username + '","' + user_obj.password + '")'
connection.query(sql, function (error, result) {
//如果没有错误,并且result的长度不为0 返回注册成功
if (!error && result && result.length !== 0) {
res.write('{"status":0,"message": "注册成功"}', 'utf-8');
res.end();
return;
}
})
}
})
return;
}
//处理登录的逻辑
if (url_obj.pathname === '/login' && req.method === 'POST') {
var user_info = '';
req.on('data', function (chunk) {
user_info += chunk;
})
res.setHeader('content-type', 'text/html;charset=utf-8');
req.on('end', function (err) {
if (!err) {
var user_obj = querystring.parse(user_info);
var sql = 'SELECT * FROM admin WHERE username = "' + user_obj.username + '" AND password = "' + user_obj.password + '"'
//把username和password拿到数据库中作比对
connection.query(sql, function (error, result) {
// console.log(result);
//如果查询出数据说明可以登陆 否则表示不可以
if (!error && result && result.length !== 0) {
//在返回成功信息的时候需要设置一个cookie 带回到浏览器
res.setHeader('Set-Cookie', cookie.serialize('isLogin', "true"));
res.write('{"status":0, "message":"登录成功"}', 'utf-8');
res.end();
} else {
res.write('{"status":1, "message":"用户名或者密码错误"}', 'utf-8');
res.end();
}
})
}
})
return
}
//返回数据表格
if (url_obj.pathname === '/list' && req.method === 'GET') {
var sql = "SELECT * FROM user";
connection.query(sql, function (error, result) {
if (!error && result) {
// console.log(result);
var arrstr = JSON.stringify(result);
// console.log(arrstr);
res.setHeader('content-type', 'text/html;charset=utf-8');
res.write('{"status":0, "data": ' + arrstr + '}', 'utf-8');
res.end();
return;
}
})
return
}
//添加用户信息
if (url_obj.pathname === "/adduser" && req.method === "POST") {
// 接收前端传过来的数据
var user_info = '';
req.on("data", function (chunk) {
user_info += chunk;
});
req.on("end", function (err) {
if (!err) {
// 把查询字符串 username=123&password=123 转化成对象
var user_obj = querystring.parse(user_info);
//写入数据库
var sql = 'INSERT INTO user VALUE(' + null + ',"' + user_obj.username + '","' + user_obj.email + '",' +
'"' + user_obj.phone + '", "' + user_obj.qq + '")';
connection.query(sql, function (error, result) {
res.setHeader('content-type', 'text/html;charset=utf-8');
console.log(error);
if (!error && result && result.length !== 0) {
res.write('{"status":0, "message":"添加成功"}', 'utf-8');
res.end();
return;
} else {
res.write('{"status":1, "message":"添加失败"}', 'utf-8');
res.end();
return;
}
})
}
})
return;
}
//修改用户信息
if (url_obj.pathname === '/update' && req.method === 'POST') {
//接收数据
var user_info = '';
req.on('data', function (chunk) {
user_info += chunk;
})
//更新数据
req.on('end', function (error) {
if (!error) {
var user_obj = querystring.parse(user_info);
var sql = 'UPDATE user SET username="' + user_obj.username + '",' +
'email="' + user_obj.email + '",qq="' + user_obj.qq + '" WHERE id =' + Number(user_obj.id);
console.log(sql);
connection.query(sql, function (error, result) {
res.setHeader('content-type', 'text/html;charset=utf-8');
if (!error && result && result.length !== 0) {
res.write('{"status":0, "message":"编辑成功"}', 'utf-8');
res.end();
return;
} else {
res.write('{"status":1, "message":"编辑失败"}', 'utf-8');
res.end();
return;
}
})
}
})
}
//删除用户信息
if (url_obj.pathname === '/delete' && req.method === 'POST') {
//接收到id
var user_info = '';
req.on('data', function (chunk) {
user_info += chunk;
})
req.on('end', function (error, result) {
if (!error) {
var user_obj = querystring.parse(user_info);
var sql = 'DELETE FROM user WHERE id=' + Number(user_obj.id);
connection.query(sql, function (error, result) {
res.setHeader('content-type', 'text/html;charset=utf-8');
if (!error && result && result.length !== 0) {
res.write('{"status":0, "message":"删除成功"}', 'utf-8');
res.end();
return;
} else {
res.write('{"status":1, "message":"删除失败"}', 'utf-8');
res.end();
return;
}
})
}
})
}
//获取cookie和设置cookie
if (url_obj.pathname === "/admin.html") {
//获取到cookie 如果有对应到登录标识 就返回admin.html页面 如果没有就返回错误页面
//在登录成功返回信息的时候需要设置cookie 带回到浏览器
//返回的admin.html的时候做验证
if (cookie.parse(req.headers.cookie || '').isLogin === "true") {
render("./template/admin.html", res);
} else {
render("./template/error.html", res);
}
return;
}
//退出登录
if (url_obj.pathname === "/logout") {
// 把isLogin 设置成其他
res.setHeader('Set-Cookie', cookie.serialize('isLogin', ""));
render("./template/index.html", res);
return
}
render('./template' + url_obj.pathname, res);
});
app.listen(3000, function (err) {
if (!err) {
console.log('running'); //端口监听 所用端口3000
}
})
function render(path, res) {
fs.readFile(path, 'binary', function (err, data) {//utf-8 改成 binary 所有都转化为二进制的形式这样图片也可以加载,但是这样的话要将write后面也转换成2进制
if (!err) {
res.write(data, 'binary');
res.end()
}
})
}
数据库配置
var mysql = require('mysql');
//创建一个连接
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'ajaxdemo'
});
//连接数据库
connection.connect(function (err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log('connectde as id ' + connection.threadId);
})
//执行查询操作
//第一个参数是错误 第二个是返回的结果
connection.query("SELECT * FROM admin",function(error,result){
console.log(result);
})
后台管理页面
<!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/simplecss.css">
<link rel="stylesheet" href="./css/admin.css">
<script src="js/ajax.js"></script>
</head>
<body>
<div class="nav">
<div class="container">
<div class="row">
<div class="col-md-10">
<a href="/admin">后台管理系统</a>
<a href="" class="btn btn-success" id="add-btn">添加用户</a>
</div>
<div class="col-md-2"><a href="/logout">退出系统</a></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered" id="table">
<tr>
<th>客户编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>QQ</th>
<th>操作</th>
</tr>
</table>
</div>
</div>
</div>
<!-- 添加用户面板 -->
<div class="panel panel-default" id="adduser">
<div class="panel-heading">
<div class="panel-title">添加用户</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">姓名</div>
<div class="col-md-8"><input type="text" id="username"></div>
</div>
<div class="row">
<div class="col-md-4">邮箱</div>
<div class="col-md-8"><input type="text" id="email"></div>
</div>
<div class="row">
<div class="col-md-4">电话</div>
<div class="col-md-8"><input type="text" id="phone"></div>
</div>
<div class="row">
<div class="col-md-4">QQ</div>
<div class="col-md-8"><input type="text" id="qq"></div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" id="save-btn">保存</button>
<button class="btn btn-primary" id="cancel-btn">取消</button>
</div>
</div>
<!-- 编辑用户面板 -->
<div class="panel panel-default" id="editUser">
<div class="panel-heading">
<div class="panel-title">编辑用户信息</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">姓名</div>
<div class="col-md-8"><input type="text" id="edit-username"></div>
</div>
<div class="row">
<div class="col-md-4">邮箱</div>
<div class="col-md-8"><input type="text" id="edit-email"></div>
</div>
<div class="row">
<div class="col-md-4">电话</div>
<div class="col-md-8"><input type="text" id="edit-phone"></div>
</div>
<div class="row">
<div class="col-md-4">QQ</div>
<div class="col-md-8">
<input type="text" id="edit-qq">
<!-- 当后台需要使用这个input的数据但是又不希望显示出来 -->
<input type="hidden" id="edit-id">
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" id="edit-save-btn">保存</button>
<button class="btn btn-primary" id="edit-cancel-btn">取消</button>
</div>
</div>
<script>
//当admin.html这个页面被浏览器加载的时候,马上要去发送数据请求到后台
// 让后台返回数据给这个页面,这个页面拿到数据以后,生成table
ajax({
method: 'GET',
url: '/list',
success: function (result) {
//在这里生成表格并且把数据放入这里
console.log(result.data[2]);
if (result.status === 0) {
var oTable = document.getElementById('table');
for (var i = 0; i < result.data.length; i++) {
var oTr = document.createElement('tr');
for (var item in result.data[i]) {
var oTd = document.createElement('td');
oTd.innerHTML = result.data[i][item];
oTr.appendChild(oTd);
}
//还差一个 这里补上
var op = document.createElement('td');
op.innerHTML = '<button class="btn btn-primary">修改</button>  ' +
'<button href="" class="btn btn-danger">删除</button>'
oTr.appendChild(op);
oTable.appendChild(oTr);
}
}
}
})
// 点击添加按钮弹出添加对话框
var addBtn = document.getElementById('add-btn');
var addUser = document.getElementById('adduser');
addBtn.onclick = function () {
addUser.style.display = 'block';
var left = document.documentElement.clientWidth / 2 - addUser.offsetWidth / 2;
var top = document.documentElement.clientHeight / 2 - addUser.offsetHeight / 2;
addUser.style.left = left + 'px';
addUser.style.top = top + 'px';
return false;
}
var cancelBtn = document.getElementById('cancel-btn');
cancelBtn.onclick = function () {
addUser.style.display = 'none';
}
var saveBtn = document.getElementById('save-btn');
saveBtn.onclick = function () {
var oUser = document.getElementById('username');
var oEmail = document.getElementById('email');
var oPhone = document.getElementById('phone');
var oQq = document.getElementById('qq');
ajax({
method: 'POST',
url: '/adduser',
data: "username=" + oUser.value + "&email=" + oEmail.value
+ "&phone=" + oPhone.value + "&qq=" + oQq.value,
success: function (result) {
if (result.status === 0) {
alert(result.message);
window.location.href = '/admin.html'
} else {
alert(result.message);
}
}
})
}
//需求:点击修改按钮,弹出对话框
var editUser = document.getElementById('editUser');
var oTable = document.getElementById('table');
var editUsername = document.getElementById('edit-username');
var editEmail = document.getElementById('edit-email');
var editPhone = document.getElementById('edit-phone');
var editQq = document.getElementById('edit-qq');
var editId = document.getElementById('edit-id');
oTable.onclick = function (ev) {
var ev = ev || event;
//找到所有的td
var aTd = ev.target.parentNode.parentNode.children;
console.log(aTd);
console.log(ev.target); //这里是修改按钮所在的button标签
if (ev.target.innerHTML === '修改') {
//弹出对话框 显示当前行的数据
editUser.style.display = 'block';
var left = document.documentElement.clientWidth / 2 - editUser.offsetWidth / 2;
var top = document.documentElement.clientHeight / 2 - editUser.offsetHeight / 2;
editUser.style.left = left + 'px';
editUser.style.top = top + 'px';
//显示当前行
editId.value = aTd[0].innerHTML;
editUsername.value = aTd[1].innerHTML;
editEmail.value = aTd[2].innerHTML;
editPhone.value = aTd[3].innerHTML;
editQq.value = aTd[4].innerHTML;
}
if (ev.target.innerHTML === '删除') {
ajax({
method: 'POST',
url: '/delete',
data: 'id=' + aTd[0].innerHTML,
success: function (result) {
if (result.status === 0) {
alert(result.message);
window.location.reload();
} else {
alert(result.message);
}
}
})
}
//点击取消 隐藏对话框
var editCancelBtn = document.getElementById('edit-cancel-btn');
editCancelBtn.onclick = function () {
editUser.style.display = 'none';
}
//点击保存按钮,将数据发送到数据库
var editSaveBtn = document.getElementById('edit-save-btn');
editSaveBtn.onclick = function () {
ajax({
method: 'POST',
url: '/update',
data: 'username=' + editUsername.value + '&email=' + editEmail.value
+ '&phone=' + editPhone.value + '&qq=' + editQq.value + '&id=' + editId.value,
success: function (result) {
if (result.status === 0) {
alert(result.message);
editId.style.display = 'none';
window.location.reload();
} else {
alert(result.message);
}
}
})
}
}
</script>
</body>
</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/index.css">
<script src="./js/ajax.js"></script>
</head>
<body>
<!-- <h1>欢迎来到登录页面</h1> -->
<div class="bg"></div>
<div class="main-right">
<div class="bgcolor"></div>
<div class="denglu">账号登录</div>
<div class="right">
<div class="dong">
<div>
<div class="username">
<label for="username">
<div class="f1">登录名:</div>
</label>
<input type="text" id="username" name="username" id="name" value="" maxlength="32" tabindex="1"
placeholder="请输入用户名" style="font-size: small; border-color: #39F;" />
</div>
<div class="password">
<label for="password">
<div class="f2">登录密码:</div>
</label>
<input type="password" id="password" name="passwd" id="passwd" value="" maxlength="32"
tabindex="1" placeholder="请输入密码"
style=" font-size: small; border-color: #39F; color:black" />
</div>
<div class="submit">
<button type="submit" class="button" tabindex="5" id="btn"><b>登 录</b></button>
</div>
<div class="register_link">
<a href="register.html" tabindex="8" class="bbb">免费注册</a>
</div>
</div>
</div>
</div>
</div>
<script>
var oBtn = document.getElementById('btn');
var oUser = document.getElementById('username');
var oPass = document.getElementById('password');
oBtn.onclick = function () {
ajax({
method: 'POST',
url: '/login',
data: 'username=' + oUser.value + '&password=' + oPass.value,
success: function (result) {
if(result.status === 0){
alert(result.message);
window.location.href = '/admin.html'
}else{
alert(result.message);
}
}
});
}
</script>
</body>
</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/index.css">
<script src="./js/ajax.js"></script>
</head>
<body>
<!-- <h1>欢迎来到登录页面</h1> -->
<div class="bg"></div>
<div class="main-right">
<div class="bgcolor"></div>
<div class="denglu">账号登录</div>
<div class="right">
<div class="dong">
<div>
<div class="username">
<label for="username">
<div class="f1">登录名:</div>
</label>
<input type="text" id="username" name="username" id="name" value="" maxlength="32" tabindex="1"
placeholder="请输入用户名" style="font-size: small; border-color: #39F;" />
</div>
<div class="password">
<label for="password">
<div class="f2">登录密码:</div>
</label>
<input type="password" id="password" name="passwd" id="passwd" value="" maxlength="32"
tabindex="1" placeholder="请输入密码"
style=" font-size: small; border-color: #39F; color:black" />
</div>
<div class="submit">
<button type="submit" class="button" tabindex="5" id="btn"><b>登 录</b></button>
</div>
<div class="register_link">
<a href="register.html" tabindex="8" class="bbb">免费注册</a>
</div>
</div>
</div>
</div>
</div>
<script>
var oBtn = document.getElementById('btn');
var oUser = document.getElementById('username');
var oPass = document.getElementById('password');
oBtn.onclick = function () {
ajax({
method: 'POST',
url: '/login',
data: 'username=' + oUser.value + '&password=' + oPass.value,
success: function (result) {
if(result.status === 0){
alert(result.message);
window.location.href = '/admin.html'
}else{
alert(result.message);
}
}
});
}
</script>
</body>
</html>
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="./css/register.css" />
<script src="./js/ajax.js"></script>
</head>
<body>
<div class="main_body">
<div class="bg"></div>
<div id="mainbody">
<div id="formwrapper" class="formwrapper">
<form >
<fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong></P><!-- 在您注册之前请先认真阅读服务条款. -->
<div>
<label for="Name">用户名</label>
<input id="username" type="text" value="" size="25" maxlength="30" class="input_out"" />
*(最多30个字符)<br>
</div>
<div>
<label for="password">登录密码</label>
<input id="password" type="password" size="25" maxlength="15" class="input_out"
/>
*(最多15个字符)<br>
</div>
<div>
<label for="confirm_password">确认密码</label>
<input id="repassword" type="password" size="25" maxlength="15" class="input_out"
/>
*<br>
</div>
<div>
<div class="enter">
<input id="reg" type="button" value="提交"class="buttom" />
<input type="reset" value="重置" class="buttom" />
</div>
<a href="index.html" tabindex="8">返回</a>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<script>
// 1.收集用户发送的信息
// 2.点击注册,发送信息到后台
var oUser = document.getElementById('username');
var oPass = document.getElementById('password');
var oRePass = document.getElementById('repassword');
var oRegBtn = document.getElementById('reg');
//点击注册
oRegBtn.onclick = function () {
//这里要做一次前端验证
ajax({
method: "POST",
url: "/register",
data: "username=" + oUser.value + "&password=" + oPass.value + "&repassword=" + oRePass.value,
success: function (result) {
if(result.status === 0){
alert(result.message);
window.location.href = '/login.html';
}else{
alert(result.message);
}
}
})
}
</script>
</body>
</html>