node.js实现学生档案管理

本文实例为大家分享了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"] {
    /*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

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

赞 (0)

相关推荐

  • Node.js实现简单管理系统

    一.简述 主要是面向初学者的node攻略,需要有node基础(了解一点npm和express). 使用express框架+mongodb数据库,前端使用的是原生html. 实现了对图书的增删改查基本功能. 源代码会上传到GitHub配合博客一起看.点击这里看源代码 为了方面没有写css. 二.项目结构 虽然是一个很简单的后台吧,但是还是应该有一个清晰的结构: 1.index.js 入口文件 2.model.js 模型文件 3.router.js 路由文件 4.views 页面文件 – index

  • JavaScript+HTML实现学生信息管理系统

    JavaScript+HTML实现学生信息管理系统

    一.前言 用数组来存储所有学生对象的信息,实现了双向更新,初始时(数组内的对象信息"填充界面"),后面的界面操作可以更新数组内对象的信息(数量和本身数据域信息). 优点:JQuery代码处理的许多细节较好. 使用HTML5的pattern+正则表达式,实现表单验证以及相应提示. 缺点:后台删除学生对象的信息代码处理效率较低("假"删除:移动学生对象索引的位置+变换数组长度). CSS部分--界面的缩放存在问题.(没打算走前端/暂时懒得修改).. 部分代码可以更好的处

  • node.js实现学生档案管理

    node.js实现学生档案管理

    本文实例为大家分享了node.js实现学生档案管理的具体代码,供大家参考,具体内容如下 学生档案管理 目标:模板引擎应用,强化node.js项目制作流程 知识点:http请求响应.数据库.模板引擎.静态资源访问 制作流程 1.建立项目文件夹并生成项目描述文件 2.创建网站服务器实现客户端和服务器端通信 3.连接数据库并根据需求设计学员信息表 4.创建路由并实现页面模板呈递 5.实现静态资源访问 6.实现学生信息添加功能 1).在模板的表单中指定请求地址与请求方式2).为每一个表单项添加name属

  • node.js中npm包管理工具用法分析

    本文实例讲述了node.js中npm包管理工具用法.分享给大家供大家参考,具体如下: 现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <package-name> 查看包的版本信息 npm info <package-name> versions 安装指定的包: npm install <package-name> 默认会安装在当前

  • 深入理解Node.js中的进程管理

    前言 本文主要对 Node.js 中进程管理相关的东西做一个简单介绍,包括 process 对象.child_process 模块和cluster 模块,详细的 API 可以查看官方文档,下面来看看详细的介绍吧. Process 对象 process 是 Node.js 的一个全局对象,可以在任何地方直接使用而不需要 require 命令加载.process 对象提供了 当前 node 进程 的命令行参数.标准输入输出.运行环境和运行状态等信息. 常用属性 argv process.argv 属

  • Node.js中创建和管理外部进程详解

    Node.js中创建和管理外部进程详解

    Node被设计用来高效的处理I/O操作,但是你应该知道,有些类型的程序并不适合这种模式.比如,如果你打算用Node处理一个CPU密集的任务,你可能会堵塞事件循环,并因此降低了程序的响应.替代办法是,把CPU密集的任务分配给一个单独的进程来处理,从而释放事件循环.Node允许你产生进程,并把这个新进程做为它父进程的子进程.在Node里,子进程可以和父进程进行双向通信,而且在某种程度上,父进程还可以监控和管理子进程. 另外一种需要使用子进程的情况是,当你想简单地执行一个外部命令,并让Node获取命令

  • Node.js的npm包管理器基础使用教程

    配置 npm set npm set init-author-name 'Your name' npm set init-author-email 'Your email' npm set init-author-url 'http://yourdomain.com' npm set init-license 'MIT' 上面命令等于为npm init设置了默认值,以后执行npm init的时候,package.json的作者姓名.邮件.主页.许可证字段就会自动写入预设的值.这些信息会存放在用户

  • 我的Node.js学习之路（二）NPM模块管理

    NPM是一个Node包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准.有了NPM,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. NPM常用的命令有: (1)$ npm install moduleNames                安装Node模块                注意事项:如果在使用模块的时候不知道其名字,可以通过http://search.npmjs.org网站按照                                

  • Node.js全局处理响应并进行异常管理

    目录 中间件设计模式--"洋葱模型" Node.js中全局处理响应 使用Koa创建应用 中间件设计模式--"洋葱模型" 在Node.js中,可以使用中间件来处理响应和异常. 中间件是在请求处理流程中插入的函数,可以在请求到达处理程序之前或之后执行操作. Node.js中的“洋葱模型”是一种中间件设计模式,该模式允许开发人员在请求的生命周期中使用各种中间件.这种模式被称为“洋葱模型”,因为在这个模型中,请求和响应都被认为是在一个不断层层剥离的“洋葱”中传递的,每一层都

  • CentOS上安装Node.js和mongodb笔记

    CentOS上安装Node.js和mongodb笔记

    之前听说过Node.js,只是知道它可以应用于服务器端,但是对很多具体的东西并不了解.今天在QCon上听了袁锋的分享<Node.js脱离了浏览器的Javascript>之后,顿时有了想立刻试一下的冲动. Node.js的安装步骤算是比较简单,没有太多的弯路,主要参考文档: Building and Installing Node.js 1. 安装Python 根据参考文档说明,从源代码编译安装Node.js需要python2.6或者以上,而通过yum install python.x86_64

  • 使用npm发布Node.JS程序包教程

    npm是Node.JS的程序包管理器.进行Node.JS开发时,经常使用它安装/卸载程序包.实际上,发布程序包的工作也是由它来完成的. 配置package.json 要打包程序,首先要配好各项设置,这些设置都由程序包根目录下的package.json指定.package.json的内容必须是严格的JSON格式,也就是说: 1.字符串要用双引号括起来,而不能用单引号: 2.属性名一定要加双引号: 3.最后一个属性后千万不要多加一个逗号. 配置对象的属性很多,具体可以参阅这里,这里列一下常用的项目:

  • 浅谈node模块与npm包管理工具

    浅谈node模块与npm包管理工具

    在Node.js中,以模块为单位划分所有的功能,并且提供了一个完整的模块加载机制,所以我们可以将应用程序划分为各个不同的部分,并且对这些部分进行很好的协同管理.通过将各种可重用代码编写在各种模块中的方法,可以大大减少应用程序的代码量,提高应用程序的开发效率以及应用程序代码的可读性.通过模块加载机制,可以将各种第三方模块引入到我们的应用程序中. 在node.js中,提供npm包管理工具,用于从第三方网站上下载各种Node.js包. 一.模块 1.1 加载模块 在Node.js中,以模块为单位划分所

随机推荐