基于NodeJS的游戏信息管理网站
目录
1、系统简介
1.1、项目名称
1.2、功能介绍
2、技术路线
2.1、前端
2.2、后端
3、运行测试情况
3.1、登录界面
3.2、CRUD操作界面
4、服务器端源代码
4.1、server.js文件
5、客户端代源码
5.1、index.ejs文件
5.2、index.css文件
5.3、main.html文件
1、 系统简介
1.1、项目名称
基于NodeJS的游戏信息管理网站
1. 2、功能介绍
网站有两个界面,首先是登录界面,用户输入用户名和密码,程序将数据传到后台,通过与后台存储的账号密码比对,一致则可登录进入CRUD操作界面,否则不发生跳转同时给出相应操作的提示信息。在CRUD操作界面中,用户可以查询,删除,修改,增加相关的信息。所有信息均存储在JSON文件之中。
2.、技术路线
2.1、前端
2.1.1、前端采用了easyui框架、Html、CSS、Javascript、jQuery等技术。
2.1.2、使用easyui前端框架对CRUD界面进行布局,使界面美观整洁,同时减小开发难度。
2.1.3、使用Html和CSS对前端网页进行布局和设计样式。
2.1.4、使用Javascript和jQuery来处理用户的操作和网页的行为展示,如控制按钮的点击事件和元素的禁用等,同时运用Ajax方法进行前端与服务器的数据交互,实现登录与增删查改功能。使用ejs模板完成登录页面的功能。
2.2、后端
服务器使用NodeJS搭建。
3、 运行测试情况
3. 1、登录界面
(1)登录界面
图1:登录界面
(2) 不输入账号或密码以及账号密码错误都有相应的提示
图2:账号为空
图3:账号不存在
3.2、 CRUD操作界面
(1) 初始状态可输入游戏名称进行查询,点击增加记录按钮即可输入游戏信息添加记录图6:CRUD操作界面
(2) 输入游戏名称,成功找到记录则在输入框中显示记录,同时获取信息按钮禁用,继续检索按钮启用,点击即可继续检索,删除记录按钮也被启用,可以删除该条记录。
(3) 找到游戏信息后点击删除信息,弹出提示框是否删除,确认删除后点击确定即可删除。
(4) 点击增加记录按钮,获取信息、继续检索、删除记录按钮禁用,添加记录按钮激活,增加记录按钮的文本改为查询记录,再次点击即可回到之前查询的状态。
(5) 输入游戏信息即可添加,发布时间一栏输入会进行检测,需按照正确的格式和合理的时间进行录入,否则禁止录入。
(6) 若输入的编号或游戏名称已经存在,则提示是否需要更新数据。
-
服务器端源代码
Server.js文件代码:var express = require("express"); var fs = require("fs"); var app = express(); var ses = require('express-session'); app.set('view engine', 'ejs'); app.use(express.static(__dirname + '/public')); app.use(ses({ resave: true, saveUninitialized: false, // 是否保存未初始化的会话 name: '0123456789AB', // 对session id 相关的cookie 进行签名 secret: '20190610', cookie: { maxAge: 1000 * 60 * 20 } // 设置 session 有效时间,单位毫秒,超时则会话自动清空 })); app.get('/', function (req, res) { res.render('index', { date: new Date() }) }) app.get('/search', function (req, res) { var name = req.query.name; var infos = getFileInfo('views/games.json'); var info = findInfo(infos, 'name', name); var friend = null; if (info) { info.status = 1; friend = info; } else { friend = { "status": 0 } } var str = JSON.stringify(friend); res.write(str); res.end(); }) app.get("/main", function (req, res) { if (req.session && req.session.userNo) { fs.readFile("views/main.html", "utf-8", function (e, data) { res.write(data); res.end(); }); } else { res.redirect('/'); /* 非法访问者,重定向到登录主页 */ res.end(); } }); app.get('/check', function (req, res) { var userNo = req.query.name; var psw = req.query.password; var userinfo = getInfo('views/users.json', userNo, psw); if (userinfo.status == 1) { console.log("sss"); req.session.userNo = userNo; } else { req.session.userNo = null; } var str = JSON.stringify(userinfo); res.write(str); res.end(); }) app.get('/update', function (req, res) { var flag = req.query.flag; var id = req.query.id; var name = req.query.name; var time = req.query.publishTime; var price = req.query.price; var infos = getFileInfo('views/games.json'); var nameInJSON = findInfo(infos, 'name', name); var idInJSON = findInfo(infos, 'id', id); var status = {}; if (flag == 'false') { if (idInJSON) { //存在id status.status = 3; } else if (nameInJSON) { //存在游戏名 status.status = 4; } else { var data = { "id": id, "name": name, "publishTime": time, "price": price } writeJson(data, 'views/games.json'); status.status = 2; } } else { //更新操作 if (idInJSON != null) { for (var i = 0; i < infos.length; i++) { if (id == infos[i].id) { infos[i].id = id; infos[i].name = name; infos[i].publishTime = time; infos[i].price = price; break; } } var str = JSON.stringify(infos); fs.writeFile('views/games.json', str, function (err) { if (err) { console.error(err); } }) } else if (nameInJSON != null) { for (var i = 0; i < infos.length; i++) { if (name == infos[i].name) { infos[i].id = id; infos[i].name = name; infos[i].publishTime = time; infos[i].price = price; break; } } var str = JSON.stringify(infos); fs.writeFile('views/games.json', str, function (err) { if (err) { console.error(err); } }) } status.status = 1; } var str = JSON.stringify(status); res.write(str); res.end(); }) app.get('/delete', function (req, res) { var id = req.query.id; var infos = getFileInfo('views/games.json'); for (var i = 0; i < infos.length; i++) { if (infos[i].id == id) { infos.splice(i, 1); } } var str = JSON.stringify(infos); fs.writeFile('views/games.json', str, function (err) { if (err) { console.error(err); } }) var status = {}; status.status = 1; var s = JSON.stringify(status); res.write(s); res.end(); }) //写入JSON function writeJson(addJson, file) { var data = getFileInfo(file); data.push(addJson); var str = JSON.stringify(data); fs.writeFile(file, str, function (err) { if (err) { console.log(err); } }) } function getInfo(file, userNo, password) { var info = getFileInfo(file); var userjson = findInfo(info, "userNo", userNo); if (userjson) { //找到userNo对应的JSON中的信息 if (userjson.password == password) userjson.status = 1; //密码正确 else userjson.status = 2; //密码错误 return userjson; } else { return { "status": 0 }; //没有对应的账号 } } //根据文件名获取文件中的信息 //返回json function getFileInfo(file) { var data = fs.readFileSync(file, 'utf-8'); var str = data.toString(); var info = JSON.parse(str); return info; } //jsonInfo:json对象 //arg:json中的键 function findInfo(jsonInfo, arg, param) { for (var i = 0; i < jsonInfo.length; i++) { if (jsonInfo[i][arg] == param) { return jsonInfo[i]; } } return null; } app.listen(50228, function () { console.log("网站:http://localhost:50228!"); })
-
客户端源代码
5.1、 index.ejs文件代码
<div class="box">
<h1>Login</h1>
<input id='name' type="text" placeholder="Username" />
<input id='password' type="password" placeholder="Password" />
<a class="submit" onclick="get()">Login</a>
<p class='server'>服务器时间:<% var time = date.getFullYear()+ "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
if(date.getHours()<8){
time+= ' ( 早上好 )';
} else if(date.getHours()>=8 && date.getHours()<12){
time+= ' ( 上午好 )';
} else if(date.getHours()>=12 && date.getHours()<14){
time+= ' ( 中午好 )';
} else if(date.getHours()>=14 && date.getHours()<18){
time+= ' ( 下午好 )';
} else if(date.getHours()>=18 && date.getHours()<24){
time+= '( 晚上好 )';
}
%>
<%= time %></p>
</div>
5.2、 index.css文件代码
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type='text'],
.box input[type='password'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus {
width: 280px;
border-color: #2ecc71;
}
.submit {
border: 0;
background: none;
margin: 20px auto;
margin-top: 0;
display: inline-block;
text-align: center;
border: 2px solid #3498db;
padding: 10px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
text-decoration: none;
font-size: 12px;
}
.submit:hover {
background: #2ecc71;
border-color: #2ecc71;
}
.server {
color: white;
position: absolute;
top: 350px;
left: 60px;
}
5.3、 main.html文件代码
<script>
$(function () {
var $getBtn = $('#getBtn');
var $findBtn = $('#findBtn');
var $typeBtn = $('#typeBtn');
var $addBtn = $('#addBtn');
var $removeBtn = $('#removeBtn');
var $name = $('#name');
var $id = $('#id');
var $time = $('#time');
var $price = $('#price');
var flag = true; //切换检索和增删按钮的标志
$('.fo').each(function () {
$(this).textbox('textbox').css({
'font-size': '25px',
'color': '#34495e',
'height': '34px'
});
})
$getBtn.on('click', function () {
var name = $name.textbox('getValue');
if (name == '') {
alert("请输入游戏名称进行查找");
} else {
search(name);
$getBtn.linkbutton('disable');
$findBtn.linkbutton('enable');
}
})
$findBtn.on('click', function () {
$getBtn.linkbutton('enable');
$findBtn.linkbutton('disable');
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
})
$typeBtn.on('click', function () {
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
if (flag) {
$addBtn.linkbutton('enable');
$removeBtn.linkbutton('disable');
$getBtn.linkbutton('disable');
$findBtn.linkbutton('disable');
$id.textbox('enable');
$time.textbox('enable');
$price.textbox('enable');
$typeBtn.val('查询记录');
flag = !flag;
} else {
$addBtn.linkbutton('disable');
$removeBtn.linkbutton('disable');
$getBtn.linkbutton('enable');
$findBtn.linkbutton('disable');
$id.textbox('disable');
$time.textbox('disable');
$price.textbox('disable');
$typeBtn.val('增加记录');
flag = !flag;
}
});
$addBtn.on('click', function () {
var id = $id.textbox('getValue');
var name = $name.textbox('getValue');
var time = $time.textbox('getValue');
var price = $price.textbox('getValue');
if (id == "" || name == '' || time == '' || price == '') {
alert('请填写所有输入框');
return;
}
if (IsFormatDate(time) == false || IsLicitDate(time) == false) {
return;
}
update(id, name, time, price, false);
});
$removeBtn.on('click', function () {
if (confirm('确认删除?'))
Delete($id.textbox('getValue'));
else
return;
})
})
//判断是否是yyyy-mm-dd格式的日期
function IsFormatDate(date) {
var result =
date.match(
/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/
);
if (result == null) {
alert("请保证输入的日期格式为yyyy-mm-dd且合法!");
return false;
}
}
//判断日期是否合法(不超过当前的日期)
function IsLicitDate(data) {
var t = data.split('-');
var nowdate = new Date();
if (t[0] > nowdate.getFullYear() ||
(t[0] == nowdate.getFullYear() && t[1] > (nowdate.getMonth() + 1)) ||
(t[0] == nowdate.getFullYear() && t[1] == (nowdate.getMonth() + 1) && t[2] > nowdate.getDate())
) {
alert("请保证输入的日期合法!");
return false;
} else {
return true;
}
}
function search(name) {
var $name = $('#name');
var $id = $('#id');
var $time = $('#time');
var $price = $('#price');
$.ajax({
url: "/search",
type: "get",
data: {
name: name
},
dataType: "json",
error: function (xhr, status, error) {
alert("xhr: " + xhr.status + ", status: " + status + ", error: " + error)
},
success: function (data) {
if (!data) {
alert("提交失败")
} else {
if (data.status == 1) {
$name.textbox('setValue', data.name);
$id.textbox('setValue', data.id);
$time.textbox('setValue', data.publishTime);
$price.textbox('setValue', data.price)
$('#removeBtn').linkbutton('enable');
} else {
alert("没找到游戏信息,请确认输入内容或者添加记录");
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
}
}
}
})
}
//flag:是否是更新操作
function update(id, name, time, price, flag) {
$.ajax({
url: "/update",
data: {
flag: flag,
id: id,
name: name,
publishTime: time,
price: price
},
type: 'get',
dataType: "json",
error: function (xhr, status, error) {
alert("xhr: " + xhr.status + ", status: " + status + ", error: " + error)
},
success: function (data) {
if (!data) {
alert("提交失败")
} else {
if (data.status == 3) {
if (confirm('游戏编号已存在,是否更新')) {
update(id, name, time, price, true);
} else {
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
}
} else if (data.status == 4) {
if (confirm('游戏名称已存在,是否更新')) {
update(id, name, time, price, true);
} else {
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
}
} else if (data.status == 2) {
alert('添加成功');
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
} else if (data.status == 1) {
alert('更新成功');
$name.textbox('setValue', "");
$id.textbox('setValue', "");
$time.textbox('setValue', "");
$price.textbox('setValue', "");
}
}
}
})
}
function Delete(id) {
$.ajax({
url: '/delete',
type: 'get',
data: {
id: id
},
dataType: 'json',
error: function (xhr, status, error) {
alert("xhr: " + xhr.status + ", status: " + status + ", error: " + error)
},
success: function (data) {
if (!data) {
alert("提交失败")
} else {
if (data.status == 1) {
alert('删除成功');
$('#name').textbox('setValue', "");
$('#id').textbox('setValue', "");
$('#time').textbox('setValue', "");
$('#price').textbox('setValue', "");
$removeBtn.linkbutton('disable');
}
}
}
})
}
</script>
游戏信息管理系统
</tr>
<tr>
<td>游戏名称</td>
<td>
<input type="text" class="easyui-textbox fo" id="name" value="" style="width: 500px" />
</td>
</tr>
<tr>
<td>发布时间</td>
<td>
<input type="text" class="easyui-textbox fo" disabled="disabled" prompt="格式:yyyy-mm-dd" id="time"
value="" style="width: 500px" />
</td>
</tr>
<tr>
<td>游戏售价</td>
<td>
<input type="text" class="easyui-textbox fo" disabled="disabled" id="price" value=""
style="width: 500px" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" id="getBtn" class="easyui-linkbutton" value="获取信息"
style="height: 32px;width: 120px;" "/>
<input type=" button" id="findBtn" class="easyui-linkbutton" value="继续检索"
style="height: 32px;width: 120px;" disabled="disabled" />
<input type="button" id="typeBtn" class="easyui-linkbutton" value="增加记录"
style="height: 32px;width: 120px;" />
<input type="button" id="addBtn" class="easyui-linkbutton" value="添加记录"
style="height: 32px;width: 120px;" disabled="disabled" />
<input type="button" id="removeBtn" class="easyui-linkbutton" value="删除记录"
style="height: 32px;width: 120px;" disabled="disabled" />
</td>
</tr>
</table>
游戏编号 |
需要源码的小伙伴,请点赞关注后留下邮箱