node.js实现学生档案管理

发布时间:2023-11-14 10:00

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

学生档案管理

目标:模板引擎应用,强化node.js项目制作流程

知识点:http请求响应、数据库、模板引擎、静态资源访问

\"node.js实现学生档案管理_第1张图片\"

制作流程

1、建立项目文件夹并生成项目描述文件

2、创建网站服务器实现客户端和服务器端通信

3、连接数据库并根据需求设计学员信息表

4、创建路由并实现页面模板呈递

5、实现静态资源访问

6、实现学生信息添加功能

1).在模板的表单中指定请求地址与请求方式
2).为每一个表单项添加name属性
3).添加实现学生信息功能路由
4).接收客户端传递过来的学生信息
5).将学生信息添加到数据库中
6).将页面重定向到学生信息列表页面

7、实现学生信息展示功能

1).从数据库中将所有的学生信息查询出来
2).通过模板引擎将学生信忠和HTML模板进行拼接
3).将拼接好的HTML模板响应给客户端

目录结构

\"node.js实现学生档案管理_第2张图片\"

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




    
    
    学生档案
    


    
        
            学生档案                                                                                                                 
    

list.art




    
    学员信息
    


    
        
        
            
            
            
            
            
            
            
        
        {{each students}}
            
                
                
                
                
                
                
                
            
        {{/each}}
        
    
学员信息
姓名年龄性别邮箱地址爱好所属学院入学时间
{{$value.name}}{{$value.age}}{{$value.sex == \'0\' ? \'男\' : \'女\'}}{{$value.email}}                     {{each $value.hobbies}}                         {{$value}}                     {{/each}}                 {{$value.collage}}{{dateformat($value.enterDate, \'yyyy-mm-dd\')}}

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

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号