基于NodeJS的游戏信息管理网站(未涉及数据库，使用JSON文件存储数据)

时间  2020-08-12 标签 基于 nodejs 游戏 信息管理 网站 未 涉及 数据库 使用 json 文件 存储 数据

基于NodeJS的游戏信息管理网站

目录

一、系统简介css

1.一、项目名称
1.二、功能介绍

二、技术路线html

2.一、前端

2.二、后端

三、运行测试状况前端

3.一、登陆界面

3.二、CRUD操做界面

四、服务器端源代码web

4.一、server.js文件

五、客户端代源码ajax

5.一、index.ejs文件

5.二、index.css文件

5.三、main.html文件

一、 系统简介express

1.一、项目名称

基于NodeJS的游戏信息管理网站


1. 二、功能介绍

网站有两个界面，首先是登陆界面，用户输入用户名和密码，程序将数据传到后台，经过与后台存储的帐号密码比对，一致则可登陆进入CRUD操做界面，不然不发生跳转同时给出相应操做的提示信息。在CRUD操做界面中，用户能够查询，删除，修改，增长相关的信息。全部信息均存储在JSON文件之中。

2.、技术路线json

2.一、前端

2.1.一、前端采用了easyui框架、Html、CSS、Javascript、jQuery等技术。

2.1.二、使用easyui前端框架对CRUD界面进行布局，使界面美观整洁，同时减少开发难度。

2.1.三、使用Html和CSS对前端网页进行布局和设计样式。

2.1.四、使用Javascript和jQuery来处理用户的操做和网页的行为展现，如控制按钮的点击事件和元素的禁用等，同时运用Ajax方法进行前端与服务器的数据交互，实现登陆与增删查改功能。使用ejs模板完成登陆页面的功能。

2.二、后端

服务器使用NodeJS搭建。

三、 运行测试状况
3. 一、登陆界面
（1）登陆界面后端

在这里插入图片描述
图1：登陆界面
（2） 不输入帐号或密码以及帐号密码错误都有相应的提示前端框架

在这里插入图片描述
图2：帐号为空服务器

在这里插入图片描述
图3：帐号不存在

3.二、 CRUD操做界面
（1） 初始状态可输入游戏名称进行查询，点击增长记录按钮便可输入游戏信息添加记录图6：CRUD操做界面

（2） 输入游戏名称，成功找到记录则在输入框中显示记录，同时获取信息按钮禁用，继续检索按钮启用，点击便可继续检索，删除记录按钮也被启用，能够删除该条记录。

（3） 找到游戏信息后点击删除信息，弹出提示框是否删除，确认删除后点击肯定便可删除。

（4） 点击增长记录按钮，获取信息、继续检索、删除记录按钮禁用，添加记录按钮激活，增长记录按钮的文本改成查询记录，再次点击便可回到以前查询的状态。

（5） 输入游戏信息便可添加，发布时间一栏输入会进行检测，需按照正确的格式和合理的时间进行录入，不然禁止录入。

（6） 若输入的编号或游戏名称已经存在，则提示是否须要更新数据。

  1. 服务器端源代码
    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!");
})

  2. 客户端源代码
    5.一、 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.二、 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.三、 main.html文件代码

Main 
<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>
游戏编号

须要源码的小伙伴，请点赞关注后留下邮箱

联系我们 沪ICP备2021010478号-7