学生信息管理，前后端联动
使用到 node.js，bootstrap.min…css，jquery.min.js，
student0114.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="bootstrap.min.css">
<style>
#template {
display: none;
}
.box input {
margin: 4px 6px;
}
.box p {
float: right;
/* margin-left: 50px; */
margin-right: 150px;
}
#mask {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
top: 0;
left: 0;
display: none;
}
#popup {
width: 400px;
padding: 30px 10px;
position: fixed;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
display: none;
}
#popup .error {
color: red;
}
#chazhao111 {
height: 26px;
}
</style>
</head>
<body>
<h3>学生信息表</h3>
<div class="box">
<p>
<button class="btn btn-primary" id="add">+ 新增学生</button>
</p>
<p>
<select name="" id="chazhao111">
<option value="id">学号</option>
<option value="name">姓名</option>
<option value="sex">性别</option>
<option value="age">年龄</option>
<option value="city">籍贯</option>
<option value="joinDate">入学时间</option>
<option value="" style="color: orangered;">所有信息</option>
</select>
<input type="text" id="input1">
<button class="btn btn-info" id="chazhao">Q 查找学生</button>
</p>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>入学时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="studentsList">
<tr id="template">
<td class="data-id"></td>
<td class="data-name"></td>
<td class="data-sex"></td>
<td class="data-age"></td>
<td class="data-city"></td>
<td class="data-joinDate"></td>
<td>
<button class="btn btn-primary bianji">编辑</button>
<button class="btn btn-danger data-del">删除</button>
</td>
</tr>
</tbody>
</table>
<!--遮罩层/弹出框 -->
<div id="mask"></div>
<div id="popup">
<p>
<label for="id">学号</label>
<input type="text" id="id">
<p class="error" style="display: none;">此学号已存在!!!</p>
</p>
<p>
<label for="name">姓名</label>
<input type="text" id="name">
</p>
<p>
<label>性别</label>
<input type="radio" name="sex" id="male" checked>男
<input type="radio" name="sex">女
</p>
<p>
<label for="age">年龄</label>
<input type="number" id="age">
</p>
<p>
<label for="city">籍贯</label>
<input type="text" id="city">
</p>
<p>
<label for="joinDate">入学时间</label>
<input type="date" id="joinDate">
</p>
<button id="cancel" class="btn btn-default" style="float:right;">取消</button>
<button id="confirm" class="btn btn-primary" style="float:right;margin-right:15px;">确认</button>
</div>
</body>
</html>
<script src="jquery.min.js"></script>
<script>
//对接 展示数据
//原生//ajax请求 也可以
function f1() {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/zhanshi`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
let data = JSON.parse(http.responseText);
data.forEach(item => {
//克隆
let newItem = $("#template").clone(true).attr("id", "");
$("#studentsList").append(newItem);
newItem.find(".data-id").html(item.id)
newItem.find(".data-name").html(item.name)
newItem.find(".data-sex").html(item.sex ? "男" : "女")
newItem.find(".data-age").html(item.age)
newItem.find(".data-city").html(item.city)
newItem.find(".data-joinDate").html(item.joinDate)
})
}
}
}
f1();
//删除
$(".data-del").click(function() {
let id = $(this).closest("tr").find(".data-id").html();
let name = $(this).closest("tr").find(".data-name").html();
if (confirm(`确定要删除${
name}的数据吗？删除后无法恢复`)) {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/del?id=${
id}`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
if (http.responseText === "success") {
alert("删除成功");
history.go(0)
} else {
alert("删除失败");
}
}
}
}
})
// 操作弹出层de 显示隐藏
let popup = {
show() {
$("#mask").show();
$("#popup").slideDown();
},
hide() {
$("#mask").hide();
$("#popup").hide();
}
}
//增加
$("#add").click(function() {
popup.show();
//失焦
$("#id").blur(function() {
let id = $("#id").val();
if (id) {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/zhanshi?id=${
id}`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
let data = JSON.parse(http.responseText)
if (data.length) {
$("#popup .error").show();
} else {
$("#popup .error").hide();
}
}
}
}
});
//增加学生，点击确定按钮
$("#confirm").click(function() {
let id = $("#id").val();
let name = $("#name").val();
let male = $("#male")[0].checked ? 1 : 0;
let age = $("#age").val();
let city = $("#city").val();
let joinDate = $("#joinDate").val();
if (id && name && male && age && city && joinDate) {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/adds?id=${
id}&name=${
name}&male=${
male}&age=${
age}&city=${
city}&joinDate=${
joinDate}`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
if (http.responseText === "success") {
alert("添加成功");
history.go(0)
}
}
}
} else {
alert("所有选项不可为空,请检查后提交")
}
})
})
//取消增加
$("#cancel").click(function() {
// popup.hide();
$("#id")[0].disabled = "";
history.go(0);
})
//编辑
$(".bianji").click(function() {
popup.show();
$("#id").attr("disabled", "true");
$("#id").val($(this).closest("tr").find(".data-id").html());
$("#name").val($(this).closest("tr").find(".data-name").html());
$("#male").val($(this).closest("tr").find(".data-sex").html());
$("#age").val($(this).closest("tr").find(".data-age").html());
$("#city").val($(this).closest("tr").find(".data-city").html());
$("#joinDate").val($(this).closest("tr").find(".data-joinDate").html());
$("#confirm").click(function() {
let id = $("#id").val();
let name = $("#name").val();
let male = $("#male")[0].checked ? 1 : 0;
let age = $("#age").val();
let city = $("#city").val();
let joinDate = $("#joinDate").val();
if (id && name && male && age && city && joinDate) {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/addsss?id=${
id}&name=${
name}&male=${
male}&age=${
age}&city=${
city}&joinDate=${
joinDate}`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
if (http.responseText === "success") {
alert("添加成功");
history.go(0)
}
}
}
} else {
alert("所有选项不可为空,请检查后提交")
}
})
})
//查找
$("#chazhao").click(function() {
//获取字段名
let key = $("select").val();
//获取值
let value = $("#input1").val();
if (value == "男") {
value = "1";
} else {
if (value == "女") {
value = "0";
}
}
let newtr = $("#template").clone(true);
if (key) {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/cha?key=${
key}&value=${
value}`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
// let newItem = $("#template").clone(true).attr("id", "");
$("#studentsList").html("");
$("#studentsList").append(newtr);
let data = JSON.parse(http.responseText);
data.forEach(item => {
//克隆
let newItem = newtr.clone(true).attr("id", "");
$("#studentsList").append(newItem);
newItem.find(".data-id").html(item.id)
newItem.find(".data-name").html(item.name)
newItem.find(".data-sex").html(item.sex ? "男" : "女")
newItem.find(".data-age").html(item.age)
newItem.find(".data-city").html(item.city)
newItem.find(".data-joinDate").html(item.joinDate)
})
}
}
} else {
f1();
history.go(0)
}
})
</script>
zhuce.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 210px;
margin: 50px;
border: 1px solid #eee;
}
h2 {
padding-left: 10px;
background-color: paleturquoise;
}
p {
margin: 10px;
}
button {
margin-left: 40px;
}
</style>
</head>
<body>
<div class="box">
<h2>用户注册</h2>
<p><input type="email" name="" id="username" placeholder="请设置用户名"></p>
<p><input type="password" id="password" placeholder="请设置密码"></p>
<button type="submit" id="register">注册</button>
<a href="denglu.html"><button type="submit">去登陆</button></a>
</div>
<script src="jquery.min.js"></script>
<script>
$("#register").click(function() {
if ($("#username").val().length === 0 || $("#password").val().length === 0) {
alert("请输入用户名或密码")
} else {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/zhuce?username=${
$("#username").val()}&password=${
$("#password").val()}`);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
if (http.responseText == "success") {
alert("注册成功,点击可直接登录或点击去登陆按钮");
location.href = "http://127.0.0.1/270113/denglu.html";
} else {
alert("注册失败")
}
}
}
}
})
</script>
</body>
</html>
denglu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 210px;
margin: 50px;
border: 1px solid #eee;
}
h2 {
padding-left: 10px;
background-color: paleturquoise;
}
p {
margin: 10px;
}
button {
margin-left: 40px;
}
</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<p><input type="email" name="" id="username" placeholder="请输入用户名"></p>
<p><input type="password" id="password" placeholder="请输入密码"></p>
<p><input type="checkbox" id="che">30天内免登录</p>
<button type="submit" id="login">登录</button>
<a href="zhuce.html"><button type="submit">注册</button></a>
</div>
<script src="jquery.min.js"></script>
<script>
//登录
$("#login").click(function() {
if ($("#username").val().length === 0 || $("#password").val().length === 0) {
alert("请输入用户名或密码")
} else {
let http = new XMLHttpRequest();
http.open("get", `http://127.0.0.1:8080/shouye?username=${
$("#username").val()}&password=${
$("#password").val()}`)
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
if (http.responseText == "success") {
alert("登陆成功")
} else {
alert("用户名或密码错误")
}
}
}
}
});
let cookie = {
// 写入/修改cookie
set(key, value, expires) {
if (typeof expires === "number") {
let date = new Date();
date.setDate(date.getDate() + expires)
document.cookie = `${
key}=${
value};expires=${
date}`;
} else {
let d = new Date(expires);
document.cookie = `${
key}=${
value};expires=${
d}`;
// }
}
},
// 读取cookie
get(key) {
let arr = document.cookie.split("; ")
var result = {
}
arr.forEach(item => {
let key = item.split("=")[0];
let value = item.split("=")[1];
result[key] = value;
})
return key ? result[key] : result;
},
// 删除cookie
remove(key) {
if (this.get(key)) {
document.cookie = key + "=18;expires=" + new Date('1999-09-09');
return true;
} else {
return false;
}
}
}
$("#login").click(function() {
if ($("#che")[0].checked) {
cookie.set("username", $("#username").val(), 30);
cookie.set("password", $("#password").val(), 30)
}
})
if (cookie.get("username") && cookie.get("password")) {
$("#username").val(cookie.get("username"));
$("#password").val(cookie.get("password"))
}
</script>
</body>
</html>
server.js(后端)
let express = require("express")();
let mysql = require("mysql");
const port = 8080;
//解决跨域
express.all("/*", function(req, res, next) {
// 跨域处理
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next(); // 执行下一个路由
});
//规划mysql链接
let sql = mysql.createConnection({
host: "localhost",
user: "root",
password: "123456",
database: "student1",
timezone: "08:00"
});
//尝试连接
sql.connect();
//登录：接收来自前端的请求并查找数据库并向前端返回查找结果
express.get("/shouye", (request, response) => {
let username = request.query.username;
let password = request.query.password;
// console.log(username, password);
sql.query(`SELECT * FROM usernames WHERE username="${
username}" AND password="${
password}"`, (error, data) => {
if (error) {
console.log(error);
response.send("error")
} else {
if (!data.length) {
response.send("error");
console.log("error")
} else {
response.send("success")
console.log(data)
}
}
})
})
//注册：接收来自前端的请求查找数据库对比用户名并向前端返回结果
express.get("/zhuce", (request, response) => {
let username = request.query.username;
let password = request.query.password;
//查询用户名是否已被注册
sql.query(`SELECT * FROM usernames WHERE username="${username}"`, (error, data) => {
//如果语法有误
if (error) {
console.log(error);
response.send("error")
} else {
//如果数据库没有,则可以注册
if (!data.length) {
sql.query(`INSERT INTO usernames (username,password) VALUES ("${username}","${password}")`, (error) => {
if (error) {
response.send("error")
} else {
response.send("success")
}
})
} else {
//已经被注册
response.send("cuo")
}
}
})
})
//学生管理页面增删查改
//对数据----
express.get("/zhanshi", (request, response) => {
let id = request.query.id;
let s = id ? `SELECT * FROM students WHERE id="${id}"` : `SELECT * FROM students ORDER BY id`;
sql.query(s, (error, data) => {
if (error) {
console.log(error);
response.send("error")
} else {
response.send(data)
}
})
})
//删除id
express.get("/del", (request, response) => {
let id = request.query.id;
sql.query(`DELETE FROM students WHERE id=${
id}`, (error, data) => {
if (error) {
console.log(error);
response.send("error")
} else {
response.send("success")
}
})
})
//增加
express.get("/adds", (request, response) => {
let id = request.query.id;
let name = request.query.name;
let male = request.query.male;
let age = request.query.age;
let city = request.query.city;
let joinDate = request.query.joinDate;
sql.query(`INSERT INTO students (id, name, sex, age, city, joinDate) VALUES ("${id}", "${name}", ${
male}, "${age}","${city}","${joinDate}")`, (error, data) => {
if (error) {
console.log(error);
response.send("error")
} else {
response.send("success")
}
})
})
//编辑/更改
express.get("/addsss", (request, response) => {
let id = request.query.id;
let name = request.query.name;
let male = request.query.male;
let age = request.query.age;
let city = request.query.city;
let joinDate = request.query.joinDate;
sql.query(`UPDATE students SET name="${name}",sex=${
male},age="${age}",city="${city}",joinDate="${joinDate}" WHERE id="${id}"`, (error, data) => {
if (error) {
console.log(error);
response.send("error")
} else {
response.send("success")
}
})
})
//查找
express.get("/cha", (request, response) => {
let key = request.query.key;
let value = request.query.value;
console.log(key, value)
sql.query(`SELECT * FROM students WHERE ${
key}="${value}"`, (error, data) => {
if (error) {
console.log(error);
response.send("error")
} else {
response.send(data)
}
})
})
//监听
express.listen(port);
console.log(port + "端口连接成功");