node.js实现学生档案管理

最新推荐文章于 2023-11-21 01:15:00 发布
最新推荐文章于 2023-11-21 01:15:00 发布
阅读量674 收藏 4
点赞数 2
分类专栏： node.js 文章标签： nodejs 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45571150/article/details/106724872
版权

学生档案管理

目标：模板引擎应用，强化node.js项目制作流程
知识点：http请求响应、数据库、模板引擎、静态资源访问
在这里插入图片描述

制作流程
  1. 建立项目文件夹并生成项目描述文件
  2. 创建网站服务器实现客户端和服务器端通信
  3. 连接数据库并根据需求设计学员信息表
  4. 创建路由并实现页面模板呈递
  5. 实现静态资源访问
  6. 实现学生信息添加功能
    1. 在模板的表单中指定请求地址与请求方式
    2. 为每一个表单项添加name属性
    3. 添加实现学生信息功能路由
    4. 接收客户端传递过来的学生信息
    5. 将学生信息添加到数据库中
    6. 将页面重定向到学生信息列表页面
  7. 实现学生信息展示功能
    1. 从数据库中将所有的学生信息查询出来
    2. 通过模板引擎将学生信忠和HTML模板进行拼接
    3. 将拼接好的HTML模板响应给客户端
目录结构

在这里插入图片描述
connect.js

const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true})
.then(() => console.log('连接数据库成功')
).catch(() => console.log('连接数据库失败'))

user.js

const mongoose = require('mongoose');
// 创建学生集合规则
const studentsSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        minlength: 2,
        maxlength: 10
    },
    age: {
        type: Number,
        min: 10,
        max: 25
    },
    sex: {
        type: String
    },
    email: String,
    hobbies: [String],
    collage: String,
    enterDate: {
        type: Date,
        default: Date.now
    }
});
// 创建学生学习集合
const Student = mongoose.model('Student',studentsSchema);
// 将学生学习集合进行导出
module.exports = Student;

list.css


body {
	padding: 0;
	margin: 0;
}

table {
	border-collapse: collapse;
}

table, td, th {
	text-align: center;
	line-height: 30px;
	border: 1px solid #CCC;
}

caption {
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 10px;
}

table {
	width: 960px;
	margin: 50px auto;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

main.css


body {
	margin: 0;
	padding: 0 0 40px;
	background-color: #F7F7F7;
	font-family: '微软雅黑';
}

form {
	max-width: 640px;
	width: 100%;
	margin: 24px auto;
	font-size: 28px;
}

label {
	display: block;
	margin: 10px 10px 15px;
	font-size: 24px;
}

.normal {
	display: block;
	width: 100%;
	height: 40px;
	font-size: 22px;
	margin-top: 10px;
	padding: 6px 10px;
	color: #333;
	border: 1px solid #CCC;
	box-sizing: border-box;
}

.btn {
	margin-top: 30px;
}

.btn input {
	color: #FFF;
	background-color: green;
	border: 0 none;
	outline: none;
	cursor: pointer;
}

input[type="file"] {
	/*opacity: 0;*/
	width: 120px;
	position: absolute;
	right: 0;
	z-index: 9;
}

.import {
	height: 40px;
	position: relative;
}

index.js

// 引入router模块
const getRouter = require('router');
// 获取路由对象
const router = getRouter();
// 引入模板引擎
const template = require('art-template');
// 学生学习集合
const Student = require('../model/user');
// 引入querystring
const querystring = require('querystring');
// 呈递学生档案信息页面
router.get('/add',(req, res) => {
    let html = template('index.art', {})
    res.end(html);
});
// 呈递学生档案信息列表页面
router.get('/list', async(req, res) => {
    // 查询学生信息
    let students = await Student.find();
    console.log(students);
    let html = template('list.art', {
        students: students
    })
    res.end(html);
});
// 实现学生信息添加路由功能
router.post('/add', (req, res) => {
    // 接受post请求参数
    let formData = '';
    req.on('data', param => {
        formData += param;
    });
    req.on('end', async() => {
        await Student.create(querystring.parse(formData));
        res.writeHead(301, {
            Location: '/list'
        })
        res.end();
    })
})
module.exports = router;

index.art

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>学生档案</title>
	<link rel="stylesheet" href="./css/main.css">
</head>
<body>
	<form action="/add" method="post">
		<fieldset>
			<legend>学生档案</legend>
			<label>
				姓名: <input class="normal" type="text" autofocus placeholder="请输入姓名" name="name">
			</label>
			<label>
				年龄: <input class="normal"  type="text" placeholder="请输入年龄" name="age">
			</label>
			<label>
				性别: 
				<input type="radio" value="0" name="sex"> 男
				<input type="radio" value="1" name="sex"> 女
			</label>
			<label>
				邮箱地址: <input class="normal" type="text" placeholder="请输入邮箱地址" name="email">
			</label>
			<label>
				爱好: 
				<input type="checkbox" value="敲代码" name="hobbies"> 敲代码
				<input type="checkbox" value="打篮球" name="hobbies"> 打篮球
				<input type="checkbox" value="睡觉" name="hobbies"> 睡觉
			</label>
			<label>
				所属学院: 
				<select class="normal" name="collage">
					<option value="前端与移动开发">前端与移动开发</option>
					<option value="PHP">PHP</option>
					<option value="JAVA">JAVA</option>
					<option value="Android">Android</option>
					<option value="IOS">IOS</option>
					<option value="UI设计">UI设计</option>
					<option value="C++">C++</option>
				</select>
			</label>
			<label>
				入学日期: <input type="date" class="normal" name="enterDate">
			</label>
			<label class="btn">
				<input type="submit" value="提交" class="normal">
			</label>
		</fieldset>
	</form>
</body>
</html>

list.art

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学员信息</title>
	<link rel="stylesheet" href="./css/list.css">
</head>
<body>
	<table>
		<caption>学员信息</caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>邮箱地址</th>
			<th>爱好</th>
			<th>所属学院</th>
			<th>入学时间</th>
		</tr>
		{{each students}}
			<tr>
				<th>{{$value.name}}</th>
				<th>{{$value.age}}</th>
				<th>{{$value.sex == '0' ? '男' : '女'}}</th>
				<th>{{$value.email}}</th>
				<th>
					{{each $value.hobbies}}
						<span>{{$value}}</span>
					{{/each}}
				</th>
				<th>{{$value.collage}}</th>
				<th>{{dateformat($value.enterDate, 'yyyy-mm-dd')}}</th>
			</tr>
		{{/each}}
		
	</table>
</body>
</html>

app.js

// 引入http模块
const http = require('http');
// 引入模板引擎
const template = require('art-template');
// 引入path模块
const path = require('path');
// 引入静态资源访问模块
const serveStatic = require('serve-static');
// 引入处理日期的第三方模块
const dateformat = require('dateformat');
// 引入router
const router = require('./route/index')

// 实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'));
// 配置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 处理日期格式的方法
template.defaults.imports.dateformat = dateformat;

// 数据库连接
require('./model/connect');

// 创建网站服务器
const app = http.createServer();
// 当客户端访问服务器的时候
app.on('request', (req, res) => {
    // 启用路由功能
    router(req, res, () => {})
    // 启用静态资源访问服务功能
    serve(req, res, () => {})
});
app.listen(3000,() => {
    console.log('服务器创建成功');
});

package.json(需要提前下载第三方模块)

{
  "name": "14.students",
  "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.13.2",
    "dateformat": "^3.0.3",
    "mongoose": "^5.9.18",
    "router": "^1.3.5",
    "serve-static": "^1.14.1"
  }
}
// art-template、dateformat、mongoose、router、serve-static
Var_al
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于node.js的学生档案管理，综合http请求响应、数据库、模板引擎、静态资源访问
weixin_42199245的博客
05-27 378
基于node.js的学生档案管理 http请求响应 mongodb数据库 template模板引擎 serve-static静态资源访问
计算机毕业设计（附源码）python学生档案管理系统
杰记计算机程序源码
10-29 1143
学生档案管理，在学生档案管理页面可以查看姓名、性别、身份证号、出生日期、父亲姓名、父亲联系电话、母亲姓名、母亲联系电话、审核回复、审核等信息，并可根据需要进行修改或删除等详细操作，如图5-22所示。学生档案管理，在学生档案管理页面可以查看姓名、性别、身份证号、出生日期、父亲姓名、父亲联系电话、母亲姓名、母亲联系电话、审核回复、审核等内容，并可根据需要进行修改或删除等详细操作，如图5-4所示。课程信息管理，在课程信息管理页面可以查看课程号、课程名称、类型、系别等信息，根据需要进行操作，如图5-13所示。
毕业设计基于node.js的学生信息管理系统源码.zip
06-15
毕业设计基于node.js的学生信息管理系统源码， 安装教程 进入admin文件夹。使用npm install 安装依赖，使用npm run serve运行前端页面 进入server文件夹，使用npm install 安装依赖，使用npm run serve运行后端服务 mongodb的数据没有导出。如果想用的话，在server文件夹下面自己找schema，然后设计表吧。一定要有一个管理员的数据，其他数据可以慢慢添加。 test文件夹下面的表，可以导入 安装教程 进入admin文件夹。使用npm install 安装依赖，使用npm run serve运行前端页面 进入server文件夹，使用npm install 安装依赖，使用npm run serve运行后端服务 mongodb的数据没有导出。如果想用的话，在server文件夹下面自己找schema，然后设计表吧。一定要有一个管理员的数据，其他数据可以慢慢添加。 test文件夹下面的表，可以导入
nodejs+vue四川工商学院学生学籍管理系统的设计与实现-微信小程序-安卓-python-PHP-计算机毕业设计
最新发布
QQ511008285的博客
11-21 53
随着信息社会的快速发展，各种管理系统面临着越来越多的数据需要处理，以保证数据的准确性。四川工商学院学生学籍管理系统能减少高校学生学籍管理的工作人员的工作量，管理人员可以随时浏览查看，而且更加直观，改变了以前手工记录的方式，电脑录入更加方便快捷，实现了四川工商学院学生学籍的管理。
Nodejs+express+vue学生档案管理系统
QQ188083800的博客
06-04 298
该学生档案管理系统,可以用于各高校的学生档案和师生信息管理平台，不但帮助有效全面保存信息，也能及时有效更新数据信息。本系统采用了web开发技术，能实现学生档案的数字化信息管理，支持数据库的备份，保证数据的安全性，十分适合对档案的管理。本Nodejs+express+vue+Elementui+mysql系统可以定制, 编程不易,求分享的勿扰 采用vscode软件开发,基于web的.用老师最爱的B/S架构设计完成,非常适合作为计算机专业的同学参考资料进行学习.主要编程语言为nodejs和mysql。包安装调试
Nodejs+vue学生档案学籍信息管理系统t17xx
QQ_188083800的博客
09-21 133
在数字化的今天，为了加快学校学籍管理，以及使学校对学生数据的管理更加简单。系统使用过程主要涉及到管理员、教师和学生三种角色，主要包含系统首页、个人中心、学生管理、教师管理、院校管理、专业管理、班级信息管理、课程信息管理、学生成绩管理、学生学籍管理等功能。综合运用以前所学的专业知识，设计开发一个学籍管理系统，本设计要求实现部分功能——学籍的管理、学籍的录入、学籍的修改。在编写vue页面的时候，要注意url的编写，用户在点击按钮的时候，url要能够传递到表现层当中，表现层利用业务层进行完成数据库的交互。
nodejs+vue+elementui学生档案信息管理系统_06bg9
QQ_402205496的博客
08-11 1411
用户个人资料的查询和修改，将会对所有用户的个人资料进行增、删、改、查：第一，使用者输入使用者的用户名、密码，将会进行存在性与及耦合性检查，并于使用者登入系统时，进行身份验证，以避免因非使用者操作或其它违规行为而造成的非法登录行为；本论文对学生信息管理系统的需求分析、功能设计、系统设计进行了详细的阐述，并对系统的总体设计进行了阐述，并对各功能的实现和主要功能进行了说明，并附上了相应的操作界面图。管理员功能：第一、在网站的后台，管理员可以对教师和学生的个人资料进行全面的管理，如增添、修改、删除、查询等。
计算机毕业设计Node.js+Express学生档案管理系统(源码+程序+lw+远程调试)
Node程序源码强子
01-17 289
学生档案管理，在学生档案管理页面可以查看姓名、性别、身份证号、出生日期、父亲姓名、父亲联系电话、母亲姓名、母亲联系电话、审核回复、审核等信息，并可根据需要进行修改或删除等详细操作，如图5-22所示。学生档案管理，在学生档案管理页面可以查看姓名、性别、身份证号、出生日期、父亲姓名、父亲联系电话、母亲姓名、母亲联系电话、审核回复、审核等内容，并可根据需要进行修改或删除等详细操作，如图5-4所示。课程信息管理，在课程信息管理页面可以查看课程号、课程名称、类型、系别等信息，根据需要进行操作，如图5-13所示。
【项目实战】nodejs 实战-图书管理系统
weixin_41033048的博客
04-05 9225
第一步：新建js文件先安装这两个指令
基于node.js的学生管理系统设计
毕业作品网站
11-25 1582
目 录摘 要 I第1章 绪论 11.1选题背景和意义 11.1.1选题背景 11.1.2选题意义 11.2国内外研究现状、发展动态 21.2.1国内研究现状 21.2.2国外研究现状 31.2.3发展动态 31.3研究内容 4第2章 Node.js软件说明 52.1 Node.js概述 52.2 Node.js的模块 62.3 Node.js及相关模块的安装 62.4 测试程序 7第3章 系统功能分析 83.1系统分析 8。
nodejs 学生管理系统（增删改查）
04-04
上传为一个完整nodejs使用express完成的学生管理系统，主要使用nodejs技术实现对json文件中存储的学生信息进行增删改查（没有数据库），并使用art-template实现客户端渲染，系统源代码中包含模块化编程思想，含有详细的注释，适合于初学者学习nodejs模块化开发使用，对于已有编程基础者，可提供一定编程思想。在nodejs环境下，执行node app.js 可实现系统运行。
Nodejs第4天案例-学生档案管理.zip
07-18
Nodejs第4天案例-学生档案管理.zip
Node.js-NodeJS全栈学生管理系统
08-10
NodeJS全栈学生管理系统
基于HTML5和Node.js的小学生日常管理系统
07-18
小学生日常管理系统为了在教学与学习过程中为教师、学生、家长提供更加快捷、便利的沟通方式，结合当下互联网的发展趋势和学生日常学习生活，设计并实现本小学生日常管理系统。系统的实现采用了Node.js的Express架构，开发采用JavaScript，页面显示采用HTML5、CSS、JQuery等技术，MongoDB数据库作为数据管理。通过前期的调研、需求分析，该系统有四大模块；登录模块、作业模块、信息发布模块、资源学习模块，系统分为管理员、家长、学生、教师四个角色，不同的角色具有不同的管理权限。本系统功能完善，基本涵盖了小学生在日常管理过程中需要的功能。管理系统界面简洁，易学易用，能够有效的降低各类用户处理信息的劳动强度。扩展性强，可塑性高，可以根据需求做出调整。系统采用B/S架构，易于维护，部署方便快捷，减轻了系统的维护与升级开发的成本。
简易的web项目——宿舍管理系统（包含注册，登录，首页等）
01-27
这个web项目一共撰写了大概十几个界面的代码，其中主要由首页、注册、登录以及几个锚链接对应的功能实现界面和单独的新闻界面所构成。同时我们把每个具体的css及JavaScript功能注释都放到了代码之前。 首页界面 主要设计思想是利用锚链接，实现导航栏页面的各个跳转。 导航栏 主要分为功能框架、需求分析、数字化校园、学校一卡通、合作学校、校园新闻几大板块。 首页特色效果 引入了一个查询宿舍信息的脚本，如果符合对应学号信息，就会弹出一个具有宿舍信息的普通窗口，否则显示未查询到的窗口。 注册界面 主要设计思路是采取js脚本的表单验证功能。
基于node.js的学习管理系统的设计与实现
01-26
利用Node.js构建服务器反应时间短、吞吐率高的特点，提高系统的并发性能；采用Mongodb数据库存储大文件、图片等非结构化数据，Mysql数据库存储用户信息、学生和教师关系等结构化数据，通过结合这两种数据库的优势，...
Node.js实现简单管理系统
10-16
主要为大家详细介绍了Node.js实现简单管理系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Node.js实现简单聊天服务器
10-25
Node.js 是一个基于Chrome JavaScript运行时建立的一个平台， 用来方便地搭建快速的，易于扩展的网络应用，今天我们来探讨下，如何使用node.js实现简单的聊天服务器
基于Node.js的极简的学生管理系统
02-12
基于Node.js的极简的学生管理系统，后台数据存储利用的数据库是mongoDB，使用的工具为WebStorm，实现了学生的增删改查
node.js学生选课管理系统
05-16
Node.js学生选课管理系统是一个基于Node.js和MongoDB数据库的Web应用程序，它是为学校或大学提供学生选课服务、课程信息、成绩单查询等功能的管理平台。在这个系统中，学生和教师可以通过网站端进行注册，然后通过系统实现选课和教学管理。 该系统功能包括学生信息管理、课程管理、成绩单查看和查询、选课模块和课程管理模块等。学生可以浏览课程信息和教学计划，支持根据选修要求筛选课程，选修自己感兴趣的课程，并在选修过程中与教师沟通交流。同时，学生可以查询课程成绩，及时了解自己的学习进度。 教师可以通过管理后台发布课程信息，设定课程教学计划和课程作业，管理学生选课信息，以及查询学生成绩，管理教学进度。管理员可以在系统后台对学生和教师信息、课程信息进行管理和操作，以及对系统进行监督和维护工作。 该应用程序采用Node.js提供的异步编程机制和事件驱动模型，能够实现高效的并行执行能力，提高了系统的响应速度和性能，并可以通过Node.js的模块机制实现可重用代码，以便于代码维护和扩展开发。同时，MongoDB提供的高可用性、可扩展性和高性能等优点，为系统的数据存储和管理提供了很好的支持。 总之，Node.js学生选课管理系统是一种创新的、高效的在线学生选课管理平台，它可以为学生、教师和管理员提供方便快捷的课程管理和教学服务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值