node.js實(shí)現(xiàn)學(xué)生檔案管理
更新時(shí)間：2022年05月30日 16:10:00 作者：Var_al
這篇文章主要為大家詳細(xì)介紹了node.js實(shí)現(xiàn)學(xué)生檔案管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了node.js實(shí)現(xiàn)學(xué)生檔案管理的具體代碼，供大家參考，具體內(nèi)容如下
學(xué)生檔案管理
目標(biāo)：模板引擎應(yīng)用，強(qiáng)化node.js項(xiàng)目制作流程
知識(shí)點(diǎn)：http請(qǐng)求響應(yīng)、數(shù)據(jù)庫(kù)、模板引擎、靜態(tài)資源訪問(wèn)
制作流程
1、建立項(xiàng)目文件夾并生成項(xiàng)目描述文件
2、創(chuàng)建網(wǎng)站服務(wù)器實(shí)現(xiàn)客戶端和服務(wù)器端通信
3、連接數(shù)據(jù)庫(kù)并根據(jù)需求設(shè)計(jì)學(xué)員信息表
4、創(chuàng)建路由并實(shí)現(xiàn)頁(yè)面模板呈遞
5、實(shí)現(xiàn)靜態(tài)資源訪問(wèn)
6、實(shí)現(xiàn)學(xué)生信息添加功能
1）.在模板的表單中指定請(qǐng)求地址與請(qǐng)求方式
2）.為每一個(gè)表單項(xiàng)添加name屬性
3）.添加實(shí)現(xiàn)學(xué)生信息功能路由
4）.接收客戶端傳遞過(guò)來(lái)的學(xué)生信息
5）.將學(xué)生信息添加到數(shù)據(jù)庫(kù)中
6）.將頁(yè)面重定向到學(xué)生信息列表頁(yè)面
7、實(shí)現(xiàn)學(xué)生信息展示功能
1）.從數(shù)據(jù)庫(kù)中將所有的學(xué)生信息查詢出來(lái)
2）.通過(guò)模板引擎將學(xué)生信忠和HTML模板進(jìn)行拼接
3）.將拼接好的HTML模板響應(yīng)給客戶端
目錄結(jié)構(gòu)
connect.js
const mongoose = require('mongoose');
// 連接數(shù)據(jù)庫(kù)
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true})
.then(() => console.log('連接數(shù)據(jù)庫(kù)成功')
).catch(() => console.log('連接數(shù)據(jù)庫(kù)失敗'))user.js
const mongoose = require('mongoose');
// 創(chuàng)建學(xué)生集合規(guī)則
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
? ? }
});
// 創(chuàng)建學(xué)生學(xué)習(xí)集合
const Student = mongoose.model('Student',studentsSchema);
// 將學(xué)生學(xué)習(xí)集合進(jìn)行導(dǎo)出
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');
// 獲取路由對(duì)象
const router = getRouter();
// 引入模板引擎
const template = require('art-template');
// 學(xué)生學(xué)習(xí)集合
const Student = require('../model/user');
// 引入querystring
const querystring = require('querystring');
// 呈遞學(xué)生檔案信息頁(yè)面
router.get('/add',(req, res) => {
? ? let html = template('index.art', {})
? ? res.end(html);
});
// 呈遞學(xué)生檔案信息列表頁(yè)面
router.get('/list', async(req, res) => {
? ? // 查詢學(xué)生信息
? ? let students = await Student.find();
? ? console.log(students);
? ? let html = template('list.art', {
? ? ? ? students: students
? ? })
? ? res.end(html);
});
// 實(shí)現(xiàn)學(xué)生信息添加路由功能
router.post('/add', (req, res) => {
? ? // 接受post請(qǐng)求參數(shù)
? ? 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>學(xué)生檔案</title> ?? ?<link rel="stylesheet" href="./css/main.css" > </head> <body> ?? ?<form action="/add" method="post"> ?? ??? ?<fieldset> ?? ??? ??? ?<legend>學(xué)生檔案</legend> ?? ??? ??? ?<label> ?? ??? ??? ??? ?姓名: <input class="normal" type="text" autofocus placeholder="請(qǐng)輸入姓名" name="name"> ?? ??? ??? ?</label> ?? ??? ??? ?<label> ?? ??? ??? ??? ?年齡: <input class="normal" ?type="text" placeholder="請(qǐng)輸入年齡" 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="請(qǐng)輸入郵箱地址" name="email"> ?? ??? ??? ?</label> ?? ??? ??? ?<label> ?? ??? ??? ??? ?愛(ài)好:? ?? ??? ??? ??? ?<input type="checkbox" value="敲代碼" name="hobbies"> 敲代碼 ?? ??? ??? ??? ?<input type="checkbox" value="打籃球" name="hobbies"> 打籃球 ?? ??? ??? ??? ?<input type="checkbox" value="睡覺(jué)" name="hobbies"> 睡覺(jué) ?? ??? ??? ?</label> ?? ??? ??? ?<label> ?? ??? ??? ??? ?所屬學(xué)院:? ?? ??? ??? ??? ?<select class="normal" name="collage"> ?? ??? ??? ??? ??? ?<option value="前端與移動(dòng)開(kāi)發(fā)">前端與移動(dòng)開(kāi)發(fā)</option> ?? ??? ??? ??? ??? ?<option value="PHP">PHP</option> ?? ??? ??? ??? ??? ?<option value="JAVA">JAVA</option> ?? ??? ??? ??? ??? ?<option value="Android">Android</option> ?? ??? ??? ??? ??? ?<option value="IOS">IOS</option> ?? ??? ??? ??? ??? ?<option value="UI設(shè)計(jì)">UI設(shè)計(jì)</option> ?? ??? ??? ??? ??? ?<option value="C++">C++</option> ?? ??? ??? ??? ?</select> ?? ??? ??? ?</label> ?? ??? ??? ?<label> ?? ??? ??? ??? ?入學(xué)日期: <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>學(xué)員信息</title>
?? ?<link rel="stylesheet" href="./css/list.css" >
</head>
<body>
?? ?<table>
?? ??? ?<caption>學(xué)員信息</caption>
?? ??? ?<tr>
?? ??? ??? ?<th>姓名</th>
?? ??? ??? ?<th>年齡</th>
?? ??? ??? ?<th>性別</th>
?? ??? ??? ?<th>郵箱地址</th>
?? ??? ??? ?<th>愛(ài)好</th>
?? ??? ??? ?<th>所屬學(xué)院</th>
?? ??? ??? ?<th>入學(xué)時(shí)間</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');
// 引入靜態(tài)資源訪問(wèn)模塊
const serveStatic = require('serve-static');
// 引入處理日期的第三方模塊
const dateformat = require('dateformat');
// 引入router
const router = require('./route/index')
// 實(shí)現(xiàn)靜態(tài)資源訪問(wèn)服務(wù)
const serve = serveStatic(path.join(__dirname, 'public'));
// 配置模板的根目錄
template.defaults.root = path.join(__dirname, 'views');
// 處理日期格式的方法
template.defaults.imports.dateformat = dateformat;
// 數(shù)據(jù)庫(kù)連接
require('./model/connect');
// 創(chuàng)建網(wǎng)站服務(wù)器
const app = http.createServer();
// 當(dāng)客戶端訪問(wèn)服務(wù)器的時(shí)候
app.on('request', (req, res) => {
? ? // 啟用路由功能
? ? router(req, res, () => {})
? ? // 啟用靜態(tài)資源訪問(wèn)服務(wù)功能
? ? serve(req, res, () => {})
});
app.listen(3000,() => {
? ? console.log('服務(wù)器創(chuàng)建成功');
});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以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用實(shí)例分析
這篇文章主要介紹了node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用,結(jié)合實(shí)例形式分析了node.js中Event Loop事件循環(huán)相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Node.js中的CommonJS模塊化規(guī)范,本文主要介紹了?CommonJS?規(guī)范在?Node?中的簡(jiǎn)單應(yīng)用，主要就是導(dǎo)入和導(dǎo)出模塊，需要的朋友可以參考下2023-02-02
nodejs基于mssql模塊連接sqlserver數(shù)據(jù)庫(kù)的簡(jiǎn)單封裝操作示例
這篇文章主要介紹了nodejs基于mssql模塊連接sqlserver數(shù)據(jù)庫(kù)的簡(jiǎn)單封裝操作,結(jié)合實(shí)例形式分析了nodejs中mssql模塊的安裝與操作sqlserver數(shù)據(jù)庫(kù)相關(guān)使用技巧,需要的朋友可以參考下2018-01-01
基于node簡(jiǎn)單實(shí)現(xiàn)RSA加解密的方法步驟
這篇文章主要介紹了基于node簡(jiǎn)單實(shí)現(xiàn)RSA加解密的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了如何卸載和重新安裝Node.js,包括卸載步驟、刪除相關(guān)文件、修改系統(tǒng)環(huán)境變量,以及安裝步驟、驗(yàn)證安裝和配置環(huán)境變量,需要的朋友可以參考下2025-02-02
這篇文章主要為大家詳細(xì)介紹了如何在Node.js應(yīng)用程序中實(shí)現(xiàn)獲取視頻詳情的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
對(duì)node通過(guò)fs模塊判斷文件是否是文件夾的實(shí)例講解
今天小編就為大家分享一篇對(duì)node通過(guò)fs模塊判斷文件是否是文件夾的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
隨著google和firfox以及node6.0對(duì)es6的支持，es6語(yǔ)法的定稿使它越來(lái)越受到關(guān)注，尤其是react項(xiàng)目基本上都是用es6來(lái)寫(xiě)的。下面這篇文章主要給大家介紹了關(guān)于Node中使用ES6語(yǔ)法的基礎(chǔ)教程，需要的朋友可以參考下。2018-01-01
這篇文章主要介紹了如何利用Node.js做簡(jiǎn)單的圖片爬取，爬蟲(chóng)的主要目的是收集互聯(lián)網(wǎng)上公開(kāi)的一些特定數(shù)據(jù)，本文介紹用于網(wǎng)絡(luò)抓取的node.js包，完成一個(gè)簡(jiǎn)單的爬蟲(chóng)案例來(lái)爬取網(wǎng)頁(yè)上圖片并下載到本地2022-06-06
Node.js創(chuàng)建子進(jìn)程的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了Node.js創(chuàng)建子進(jìn)程的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10