学生管理系统(Nodejs)

一、项目介绍

①使用nodejs+bootstrap开发

②对文件进行合理的模块化

③实现基本的增删改查功能

二、思路

①处理模块，处理模块，配置开发静态资源，配置模块引擎

②路由设计，提取路由模块

③单独的文件用于封装一些方法：查找学生数据，保存学生数据，更新学生数据，删除学生数据

④单独的路由模块实现具体功能：通过路由接收请求，调用数据操作API处理数据，发送操作结果给客户端

三、功能实现

①目录

②npm安装的包

③代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>管理系统</title>

    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

</head>

<body>

    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">

        <a class="navbar-brand" href="#">学生管理系统</a>

    </nav>

    <main class="container mt-5">

        <h1 class="alert-heading">学生管理

            <a class="btn btn-link btn-sm" href="/students/new">添加学生</a>

        </h1>

        <table class="table table-hover">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>姓名</th>

                    <th>性别</th>

                    <th>年龄</th>

                    <th>爱好</th>

                    <th class="text-center" width="140">操作</th>

                </tr>

            </thead>

            <tbody>

                {{each students}}

                <tr>

                  <td>{{$value.id}}</td>

                  <td>{{$value.name}}</td>

                  <td>{{$value.gender}}</td>

                  <td>{{$value.age}}</td>

                  <td>{{$value.hobbies}}</td>

                  <td>

                    <a href="/students/edit?id={{$value.id}}">编辑</a>

                    <a href="/students/delete?id={{$value.id}}">删除</a>

                  </td>

                </tr>

                {{/each}}

            </tbody>

        </table>

        <ul class="pagination justify-content-center">

            <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>

            <li class="page-item"><a class="page-link" href="#">1</a></li>

            <li class="page-item"><a class="page-link" href="#">2</a></li>

            <li class="page-item"><a class="page-link" href="#">3</a></li>

            <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>

        </ul>

    </main>

</body>

</html>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>添加学生</title>

    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

</head>

<body>

    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">

        <a href="#" class="navbar-brand">学生管理系统</a>

    </nav>

    <main class="container mt-5">

        <h1 class="alert-heading">添加学生</h1>

        <form action="/students/new" method="post" autocomplete="off">

            <div class="form-group">

                <label for="name">姓名</label>

                <input type="text" name="name" id="name" class="form-control">

            </div>

            <div class="form-group">

                <label for="gender" class="radio-inline">性别</label><br>

                <input type="radio" name="gender" value="0" id="gender">男&nbsp;&nbsp;&nbsp;

                <input type="radio" name="gender" value="1" id="gender">女

            </div>

            <div class="form-group">

                <label for="age">年龄</label>

                <input type="number" name="age" id="age" class="form-control">

            </div>

            <div class="form-group">

                    <label for="hobbies">爱好</label>

                    <input type="text" name="hobbies" id="hobbies" class="form-control">

            </div>

            <button class="btn btn-primary">保存</button>

        </form>

    </main>

</body>

</html>

new.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>添加学生</title>

    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

</head>

<body>

    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">

        <a href="#" class="navbar-brand">学生管理系统</a>

    </nav>

    <main class="container mt-5">

        <h1 class="alert-heading">添加学生</h1>

        <form action="/students/edit" method="post" autocomplete="off">

            <div class="form-group">

                <label for="id"></label>

                <input type="hidden" name="id" id="id" class="form-control" value="{{student.id}}">

            </div>

            <div class="form-group">

                <label for="name">姓名</label>

                <input type="text" name="name" id="name" class="form-control" value="{{student.name}}" >

            </div>

            <div class="form-group">

                <label for="gender" class="radio-inline">性别</label><br>

                <input type="radio" name="gender" value="0" id="gender">男&nbsp;&nbsp;&nbsp;

                <input type="radio" name="gender" value="1" id="gender">女

            </div>

            <div class="form-group">

                <label for="age">年龄</label>

                <input type="number" name="age" id="age" class="form-control" value="{{student.age}}">

            </div>

            <div class="form-group">

                    <label for="hobbies">爱好</label>

                    <input type="text" name="hobbies" id="hobbies" class="form-control" value="{{student.hobbies}}">

            </div>

            <button class="btn btn-primary">保存</button>

        </form>

    </main>

</body>

</html>

edit.html

{

    "students": [{

        "id": 1,

        "name": "赵一",

        "gender": 0,

        "age": 18,

        "hobbies": "足球"

    }, {

        "id": 2,

        "name": "孙二",

        "gender": 1,

        "age": 20,

        "hobbies": "篮球"

    }, {

        "id": 3,

        "name": "张三",

        "gender": 0,

        "age": 30,

        "hobbies": "彩票"

    }, {

        "id": 4,

        "name": "李四",

        "gender": 1,

        "age": 25,

        "hobbies": "代码"

    }, {

        "id": 5,

        "name": "王五",

        "gender": 0,

        "age": 10,

        "hobbies": "游戏"

    }]

}

db.json

/**

 * app.js入口模块:

 * 1.创建服务,

 * 2.服务相关配置:模板引擎,body-parser配置,静态服务资源,挂载路由

 * 3.监听端口启动服务

 */

//npm安装并加载express

var express=require('express');

var app=express();

// 加载路由模块

var router=require('./router');

// npm安装并加载body-parser

var bodyParser=require('body-parser');

//公开node_modules和public目录

app.use('/node_modules/',express.static('./node_modules/'));

app.use('/public/',express.static('./public/'));

// npm安装art-template和express-art-template并配置express-art-template(需要在挂载路由之前)

app.engine('html',require('express-art-template'));

// 配置body-parser(需要在挂载路由之前)

app.use(bodyParser.urlencoded({extended:false}));

app.use(bodyParser.json());

// 挂载路由

app.use(router);

// 绑定端口

app.listen(3000,function(){

    console.log('server is running at port 3000...')

});

app.js

/**

 * router.js路由模块:

 * 处理路由,根据不同的请求方法或者请求路径设置具体的返回数据

 */

// 加载相关模块

var fs=require('fs');

var express=require('express');

var Student=require('./student');

// 创建一个路由容器

var router=express.Router();

/** 路由设计:

 * 请求方法 ==== 请求路径 ==== 参数  =====备注

 * GET ==== /students ==== 参数无 ====渲染首页

 * GET ==== /students/new ===== 参数无 ======渲染添加学生页面

 * POST ==== /students/new ===== 参数name,age,gender,hobbies ======添加学生页面提交表单

 * GET ==== /students/edit ===== 参数id ======渲染编辑页面

 * POST ==== /students/edit ===== 参数id,name,age,gender,hobbies ======编辑学生页面表单提交

 * GET ==== /students/delete ===== 参数id ======处理删除请求

 */

// 处理路由:把路由都挂载到路由容器

router.get('/students',function(req,res){

    Student.find(function(err,students){

        if(err){

            return res.status(500).send('server error')

        }

        res.render('index.html',{

            students:students

        })

    });

});

router.get('/students/new',function(req,res){

    res.render('new.html')

});

router.post('/students/new',function(req,res){

    // 获取表单数据-->处理(保存到db.json)-->发送响应

    Student.save(req.body,function(err){

        if(err){

            return res.status(500).send('server error')

        }

        res.redirect('/students')

    })

});

router.get('/students/edit',function(req,res){

    Student.findById(parseInt(req.query.id),function(err,student){

        if(err){

            return res.status(500).send('server error')

        }

        res.render('edit.html',{

            student:student

        });

    });

});

router.post('/students/edit',function(req,res){

    Student.updateById(req.body,function(err){

        if(err){

            return res.status(500).send('server error')

        }

        res.redirect('/students')

    })

});

router.get('/students/delete',function(req,res){

    Student.deleateById(req.query.id,function(err){

        if(err){

            return res.status(500).send('server error')

        }

        res.redirect('/students')

    });

});

// 把路由导出

module.exports=router;

router.js

/**

 * student.js模块:

 * 用于数据操作,只处理数据,不关心业务

 */

// 加载相关模块

var fs=require('fs');

var dbPath='./db.json';

// 获取所有学生数据列表

exports.find=function(callback){

    // callback有两个参数:第一个是err,第二个是data

    fs.readFile(dbPath,'utf8',function(err,data){

        if(err){

            return(callback(err))

        }

        callback(null,JSON.parse(data).students)

    });

};

// 根据id获取学生信息对象

exports.findById=function(id,callback){

    fs.readFile(dbPath,'utf8',function(err,data){

        if(err){

            return callback(err)

        }

        var students=JSON.parse(data).students;

        var ret=students.find(function(item){

            return item.id===parseInt(id)

        });

        callback(null,ret)

    });

}

// 添加保存学生数据列表

exports.save=function(student,callback){

    fs.readFile(dbPath,'utf8',function(err,data){

        if(err){

            return callback(err)

        }

        var students=JSON.parse(data).students

        // 处理id唯一的,不重复

        student.id=students[students.length-1].id+1

        // 保存到数组

        students.push(student)

        // 转为字符串

        var fileDate=JSON.stringify({students:students})

        // 保存到文件

        fs.writeFile(dbPath,fileDate,function(err){

            if(err){

                return callback(err)

            }

            callback(null)

        })

    });

};

// 更新学生数据列表

exports.updateById=function(student,callback){

    fs.readFile(dbPath,'utf8',function(err,data){

        if(err){

            return callback(err)

        }

        var students=JSON.parse(data).students;

        student.id=parseInt(student.id);

        // find 是ecmascript6的方法

        var stu=students.find(function(item){

            return item.id===student.id

        });

        // 遍历拷贝对象

        for(var key in student){

            stu[key]=student[key]

        }

        // 把对象数据转为字符串

        var fileDate=JSON.stringify({

            students:students

        });

        // 保存到文件

        fs.writeFile(dbPath,fileDate,function(err){

            if(err){

                return callback(err)

            }

            callback(null)

        });

    });

};

// 删除学生数据

exports.deleateById = function(id,callback){

    fs.readFile(dbPath,'utf8',function(err,data){

        if(err){

            return callback(err)

        }

        var students=JSON.parse(data).students;

        var deleteId=students.findIndex(function(item){

            return item.id===parseInt(id)

        });

        students.splice(deleteId,1);

        var fileDate=JSON.stringify({students:students});

        fs.writeFile(dbPath,fileDate,function(err){

            if(err){

                return callback(err)

            }

            callback(null)

        });

    })

}

student.js

{

  "name": "Code",

  "version": "1.0.0",

  "description": "",

  "main": "app.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "art-template": "^4.12.2",

    "body-parser": "^1.18.3",

    "bootstrap": "^4.1.1",

    "express": "^4.16.3",

    "express-art-template": "^1.0.1"

  }

}

package.json

③效果展示

学生管理系统(Nodejs)的更多相关文章

【IOS开发笔记02】学生管理系统
端到端的机会虽然现在身处大公司,但是因为是内部创业团队,产品.native.前端.服务器端全部坐在一起开发,大家很容易做零距离交流,也因为最近内部有一个前端要转岗过来,于是手里的前端任务好像可以抛一 ...
【IOS开发笔记01】学生管理系统（上）
端到端的机会虽然现在身处大公司,但是因为是内部创业团队,产品.native.前端.服务器端全部坐在一起开发,大家很容易做零距离交流,也因为最近内部有一个前端要转岗过来,于是手里的前端任务好像可以抛一 ...
C程序范例（2）——学生管理系统”链表“实现
1.对于学生管理系统,能够实现的方法有许多,但是今天我们用链表的方法来实现.虽然初学者很可能看不懂,但是不要紧,这是要在整体的系统的学习完C语言之后,我才编写出的程序.所以大家不必要担心.在这里与大家 ...
jsp学习之基于mvc学生管理系统的编写
mvc开发模式:分别是 model层 view层 Control层在学生管理系统中,model层有学生实体类,数据访问的dao层,view层主要是用于显示信息的界面,Control层主要是servl ...
java版本的学生管理系统
import java.awt.BorderLayout; import java.awt.Color; import java.awt.Frame; import java.awt.event.Ac ...
学生管理系统-火车订票系统 c语言课程设计
概要: C 语言课程设计一---学生管理系统使使用 C 语言实现学生管理系统.系统实现对学生的基本信息和考试成绩的管理.采用终端命令界面,作为系统的输入输出界面.采用文件作为信息存储介质. 功能描 ...
Java学生管理系统项目案例
这是一个不错的Java学生管理系统项目案例,希望能够帮到大家的学习吧. 分代码如下 package com.student.util; import java.sql.Connection; impo ...
Java+Mysql+学生管理系统
最近正在学java和数据库,想起以前写的学生管理系统,都是从网上下载,敷衍了事.闲来无事,也就自己写了一个,不过功能实现的不是很多. 开发语言:java: 开发环境:Mysql, java: 开发工具 ...
JDBC学生管理系统--处理分页显示
分页的思想: 假设一共有104条数据,每页显示10条数据: select * from student limit 0,10; 页数是index,第index页,对应的sql语句是: select * ...

随机推荐

Html设置问题（设置浏览器上面的图标，移动设备上面页面保存为图标）
最近开发了一个新的项目,项目完成之后:要求把页面在移动设备上面保存为图标,通过图标直接进入系统入口(这样看着就想APP一样):刚开始通过百度直接设置了,发现有两个问题,第一.图标直接是页面的截图:第二 ...
java之mybatis之占位符
1.mybatis中有两种占位符 #{}和 ${}. 2. #{} 占位符是为了获取值,获取的值用在 where 语句后,insert 语句后,update 语句. #{} 获取值,是根据值的名称取值 ...
【C#】获取计算机的硬件信息
添加引用:System.Management /// <summary> /// 获取本机的MAC地址 /// </summary> /// <returns>&l ...
installer
if (args.Length == 0) { ServiceBase[] ServicesToRun; ServicesToRun = new ServiceBase[] { new MyServi ...
Django模板语言的学习
1.模板系统 1.语法 1.变量相关 {{ name}} ,{{ name|length}}, {{ name |default:"默认值"}} 2.逻辑相关 1.if判断 {% ...
全网独发gensim中similarities.Similarity用法
index = similarities.MatrixSimilarity(lsi[corpus]) # 管网的原文翻译如下: 警告:similarities.MatrixSimilarity类仅仅适 ...
vector-空间增长
使用 vector 的时候,一般是从一个空 vector 开始,根据需要逐步填充数据. 这里的关键惭怍是 push_back(),它将一个新元素添加到 vector 中,该元素成为 vector 的最 ...
软工个人项目———WC.exe（Java实现）
一.github地址 https://github.com/hhw-15521301615/hello-world 二.PSP表格 PSP2.1 Personal Software Process S ...
wokerman随笔
linux环境检查是否满足workerman要求: curl -Ss http://www.workerman.net/check.php | php workerman依赖扩展:pcntl扩展.po ...
Mysql 库表操作初识
Mysql 库表操作初识终端登录mysql 这里只演示win下, cmd 终端. 至于怎么在win下, linux, mac安装, 感觉这是一个入门级的百度搜索问题, 安装都搞不定, 确实有点尴尬, ...