当前位置:   article > 正文

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

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
推荐阅读
相关标签
  

闽ICP备14008679号