广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >node.js实现学生档案管理
  • 627

0
分享到

node.js实现学生档案管理

2024-04-02 19:04:59 627人浏览 薄情痞子
摘要

本文实例为大家分享了node.js实现学生档案管理的具体代码，供大家参考，具体内容如下 学生档案管理 目标：模板引擎应用，强化node.js项目制作流程 知识点：Http请求响应、数

本文实例为大家分享了node.js实现学生档案管理的具体代码，供大家参考，具体内容如下

学生档案管理

目标：模板引擎应用，强化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"] {
    
    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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: node.js实现学生档案管理

本文链接: https://www.lsjlt.com/news/150179.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • node.js实现学生档案管理
    本文实例为大家分享了node.js实现学生档案管理的具体代码，供大家参考，具体内容如下 学生档案管理 目标：模板引擎应用，强化node.js项目制作流程 知识点：http请求响应、数...
    99+
    2022-11-13
  • node.js如何实现学生档案管理
    这篇“node.js如何实现学生档案管理”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“node.js如何实现学生档案管理”文...
    99+
    2023-06-30
  • C++实现学生档案管理系统
    本文实例为大家分享了C++实现学生档案管理系统的具体代码，供大家参考，具体内容如下 课题描述： 1.为学生档案管理人员编写一个学生档案管理系统 ，用菜单选择方式完成下列功能： 2.学...
    99+
    2022-11-13
  • C语言实现学生档案管理系统
    本文实例为大家分享了C语言实现学生档案管理系统的具体代码，供大家参考，具体内容如下     #include<stdio.h&...
    99+
    2022-11-13
  • java实现学生成绩档案管理系统
    本文实例为大家分享了java实现学生成绩档案管理系统的具体代码，供大家参考，具体内容如下 实验要求 • 学生信息录入，信息包括学号、姓名、专业、四门课成绩、总分、名次； ...
    99+
    2022-11-12
  • java实现简单学生成绩档案管理系统
    本文实例为大家分享了java学生成绩档案管理系统的具体代码，供大家参考，具体内容如下 学生成绩档案管理系统源代码： student public class students{   ...
    99+
    2022-11-13
  • C语言如何实现学生档案管理系统
    今天小编给大家分享一下C语言如何实现学生档案管理系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。#include<s...
    99+
    2023-06-30
  • C#实现学生档案查询
    本文实例为大家分享了C#实现学生档案查询的具体代码，供大家参考，具体内容如下 using System; using System.Collections.Generic; usin...
    99+
    2022-11-13
  • java怎么实现简单学生成绩档案管理系统
    今天小编给大家分享一下java怎么实现简单学生成绩档案管理系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。学生成绩档案管理...
    99+
    2023-06-30
  • C#如何实现学生档案查询
    这篇文章将为大家详细讲解有关C#如何实现学生档案查询，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下using System;using System.Collections...
    99+
    2023-06-26
  • SpringBoot+mysql+vue实现大学生健康档案管理系统前后端分离
    一、项目简介 本项目是一套基于SpringBoot实现大学生健康档案管理系统，主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含：项目源码、数据库脚本等，该项目可以直接作为bishe使用。 项目都经过严...
    99+
    2023-12-22
    spring mysql spring boot vue.js Shiro elementui 数据库
  • python实现班级档案管理系统
    本文实例为大家分享了python实现班级档案管理系统的具体代码，供大家参考，具体内容如下 功能要求 一、对一个有N个学生的班级，通过该系统实现对班级学生的基本信息进行录入、显示、修改...
    99+
    2022-11-11
  • C#实现学生管理系统
    本文实例为大家分享了C#实现学生管理系统的具体代码，供大家参考，具体内容如下 添加3个类，分别实现 IComparer接口，实现对Student类的三个字段的排序。 1、学生类：学号...
    99+
    2022-11-13
    C#学生管理系统 C#学生系统 C#学生管理
  • JavaWeb实现学生管理系统
    JavaWeb实现学生管理系统 一、项目介绍二、项目结构三、前期准备1.配置maven环境，在pom.xml配置文件中配置项目所依赖的jar包2.在MySql数据库中，创建登录注册表login和学生信息表student（1）登录注册...
    99+
    2023-08-16
    servlet java 数据库
  • Android实现学生管理系统
    本文实例为大家分享了Android实现学生管理系统的关键性代码，供大家参考，具体内容如下 局部效果图：   实现代码： 1、布局 <?xml ver...
    99+
    2022-06-06
    学生管理系统 系统 Android
  • Vue实现学生管理功能
    本文实例为大家分享了Vue实现学生管理的具体代码，供大家参考，具体内容如下 难点 学生新建与学生编辑功能都用的一个组件，如何对其进行判断校验。 对用户输入进行校...
    99+
    2022-11-12
  • springboot实现学生管理系统
    本文实例为大家分享了SpringBoot实现学生管理系统，供大家参考，具体内容如下 一、创建springboot项目 点击下一步 点击下一步，选择要添加的依赖 点击下一步，...
    99+
    2022-11-13
  • 基于PHP+MySQL毕业生档案管理系统
    毕业生档案管理系统是信息时代的产物，它是学校档案管理部门的一个好帮手。有了它不再需要繁重的纸质登记，有了它档案管理员不在需要繁重的工作，一些成绩信息和奖惩等基本信息可以由管理人员及时的对信息进行查询、...
    99+
    2023-09-06
    php 数据库 开发语言
  • 第3章 学生管理系统案例
    1.1 学生管理系统案例需求 利用集合完成对学生的增删改查四个功能 1.2 学生管理系统案例实现1.2.1 创建学生类: 1.2.1.1 案例代码九: package com.itheima; public class ...
    99+
    2023-01-31
    管理系统 案例 学生
  • Java实现学生管理系统详解
    目录总结学生管理系统（Java版） 前言：这个是大二做的课设（还是学生管理系统…），理论上虽然是4个人一组一起做的，但是，注意这个“但是”，还是我一个人承担了所有…代码和文档基本都是...
    99+
    2022-11-12
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作