学生信息案例----Node.js+MongoDB实现_node实现学生信息展示

作者：Monodyee | 2024-02-20 06:21:42

踩

node实现学生信息展示

连接数据库（./model/connectt）：

// 引入mongoose模块用于连接数据库
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/test01', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('数据库连接成功'))
    .catch(err => console.log(err, '数据库连接失败'));
1
2
3
4
5
6

创建集合规则并利用该规则创建学生集合（…/model/user）：

// 引入mongoose模块对数据库进行操作
const mongoose = require('mongoose');

// 创建集合规则
const stuSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, '请输入姓名'],
        minlength: 2,
        maxlength: 10
    },
    age: {
        type: Number,
        min: 18,
        max: 60
    },
    sex: String,
    email: String,
    hobbies: [String],
    collage: String,
    enDate: {
        type: Date,
        default: Date.now
    }
});

// 利用集合规则创建学生集合
const Student = mongoose.model('student', stuSchema);
// 将集合导出以方便其他模块中使用该集合
module.exports = Student;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

进行路由选择（./route）：

// 引入router模块用于路由选择，返回值是用来获取路由对象的
const getRouter = require('router');
// 引入创建集合模块
const Student = require('../model/user');
// 引入querystring模块用于将字符串转换为对象
const query = require('querystring');
// 引入模板引擎
const template = require('art-template');

// 获取路由对象
const router = getRouter();
// 学生档案页面
router.get('/add', (req, res) => {
    let html = template('add.art', {});
    res.end(html);
});

// 学生信息列表页面
router.get('/list', async(req, res) => {
    // 从数据库中查询学生信息
    let students = await Student.find();
    let html = template('list.art', {
        students: students
    });
    res.end(html);
});
// 实现添加学生信息
router.post('/add', (req, res) => {
    // 用一个变量拼接接收到的post请求
    let formData = '';
    // 触发data事件开始接收post
    req.on('data', param => {
        formData += param;
    });
    // 触发end事件，post接收完毕
    req.on('end', async() => {
        // 此时formData是字符串类型，需要用querystring模块将其转换为对象
        // 把转换好的formData加入到数据库集合中
        await Student.create(query.parse(formData));
        // 重定向回到list页面
        res.writeHead(301, {
            'Location': '/list'
        });
        res.end();
    })
});

// 导出router方便其他模块引入
module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

搭建服务器并处理请求作出响应：

// 引入http模块用于创建服务器
const http = require('http');
// 引入连接数据库模块
require('./model/connect');
// 引入模板引擎
const template = require('art-template');
// 引入path模块用于拼接路径
const path = require('path');
// 引入serve-static模块用于处理静态资源访问
const serveStatic = require('serve-static');
// 引入dateformat块用于处理日期格式
const dateformat = require('dateformat');
// 引入router
const router = require('./route');

// 创建服务器
const app = http.createServer();
// 配置模板根目录
template.defaults.root = path.join(__dirname, 'view');
// 向模板中导入dateformat方法
template.defaults.imports.dateformat = dateformat;
// 创建静态资源服务并指定静态资源服务路径
const serve = serveStatic(path.join(__dirname, 'public'));

app.on('request', (req, res) => {
    router(req, res, () => {});
    // 启用静态资源服务功能
    serve(req, res, () => {});
});

// 监听端口
app.listen(80);
console.log('服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

添加学生信息页面代码（add.art）:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生档案</title>
    <link rel="stylesheet" href="./add.css">
</head>

<body>
    <div class="box">
        <div class="title">
            <h2>学生档案</h2>
        </div>
        <form action="/add" method="post">
            <ul>
                <li>
                    <label for="name">姓名：</label>
                    <input type="text" class="inp" name="name" placeholder="请输入姓名" />
                </li>
                <li>
                    <label for="age">年龄：</label>
                    <input type="number" class="inp" name="age" placeholder="请输入年龄" />
                </li>
                <li class="sex">
                    <label for="sex">性别：</label>
                    <input type="radio" name="sex" value='0' /> 男
                    <input type="radio" name="sex" value='1'/> 女
                </li>
                <li>
                    <label for="email">邮箱地址：</label>
                    <input type="email" class="inp" name="email" placeholder="请输入邮箱地址" />
                </li>
                <li class="hob">
                    <label for="hobbies">爱好：
                       <input type="checkbox" name="hobbies" value="敲代码"/> 敲代码
                       <input type="checkbox" name="hobbies" value="打篮球"/> 打篮球
                       <input type="checkbox" name="hobbies" value="睡觉"/> 睡觉
                       </label>
                </li>
                <li class="coll">
                    <label for="collage">所属学院：
                        <select name="collage" class="inp">
                            <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>
                </li>
                <li>
                    <label for="enDate">入学日期：</label>
                    <input type="date" class="inp" name="enDate" />
                </li>
                <li class="sub">
                  <label class="btn">
                     <input type="submit" value="提交" class="subBtn"></input>
                  </label>
                </li>
            </ul>
        </form>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

展示学生信息页面代码（list.art）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学员信息</title>
	<link rel="stylesheet" href="./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>
				<td>{{$value.name}}</td>
				<td>{{$value.age}}</td>
				<td>{{$value.sex == '0' ? '男' : '女'}}</td>
				<td>{{$value.email}}</td>
				<td>
					{{each $value.hobbies}}
						<span>{{$value}}</span>
					{{/each}}
				</td>
				<td>{{$value.collage}}</td>
				<td>{{dateformat($value.enDate, 'yyyy-mm-dd')}}</td>
			</tr>
		{{/each}}
		
	</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/118848