溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“node.js如何實現(xiàn)學(xué)生檔案管理”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“node.js如何實現(xiàn)學(xué)生檔案管理”文章吧。
目標(biāo)：模板引擎應(yīng)用，強化node.js項目制作流程
知識點：http請求響應(yīng)、數(shù)據(jù)庫、模板引擎、靜態(tài)資源訪問
1、建立項目文件夾并生成項目描述文件
2、創(chuàng)建網(wǎng)站服務(wù)器實現(xiàn)客戶端和服務(wù)器端通信
3、連接數(shù)據(jù)庫并根據(jù)需求設(shè)計學(xué)員信息表
4、創(chuàng)建路由并實現(xiàn)頁面模板呈遞
5、實現(xiàn)靜態(tài)資源訪問
6、實現(xiàn)學(xué)生信息添加功能
1）.在模板的表單中指定請求地址與請求方式
2）.為每一個表單項添加name屬性
3）.添加實現(xiàn)學(xué)生信息功能路由
4）.接收客戶端傳遞過來的學(xué)生信息
5）.將學(xué)生信息添加到數(shù)據(jù)庫中
6）.將頁面重定向到學(xué)生信息列表頁面
7、實現(xiàn)學(xué)生信息展示功能
1）.從數(shù)據(jù)庫中將所有的學(xué)生信息查詢出來
2）.通過模板引擎將學(xué)生信忠和HTML模板進(jìn)行拼接
3）.將拼接好的HTML模板響應(yīng)給客戶端
connect.js
const mongoose = require('mongoose');
// 連接數(shù)據(jù)庫
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true})
.then(() => console.log('連接數(shù)據(jù)庫成功')
).catch(() => console.log('連接數(shù)據(jù)庫失敗'))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');
// 獲取路由對象
const router = getRouter();
// 引入模板引擎
const template = require('art-template');
// 學(xué)生學(xué)習(xí)集合
const Student = require('../model/user');
// 引入querystring
const querystring = require('querystring');
// 呈遞學(xué)生檔案信息頁面
router.get('/add',(req, res) => {
let html = template('index.art', {})
res.end(html);
});
// 呈遞學(xué)生檔案信息列表頁面
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);
});
// 實現(xiàn)學(xué)生信息添加路由功能
router.post('/add', (req, res) => {
// 接受post請求參數(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="請輸入姓名" 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> 所屬學(xué)院: <select class="normal" name="collage"> <option value="前端與移動開發(fā)">前端與移動開發(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è)計">UI設(shè)計</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>愛好</th>
<th>所屬學(xué)院</th>
<th>入學(xué)時間</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)資源訪問模塊
const serveStatic = require('serve-static');
// 引入處理日期的第三方模塊
const dateformat = require('dateformat');
// 引入router
const router = require('./route/index')
// 實現(xiàn)靜態(tài)資源訪問服務(wù)
const serve = serveStatic(path.join(__dirname, 'public'));
// 配置模板的根目錄
template.defaults.root = path.join(__dirname, 'views');
// 處理日期格式的方法
template.defaults.imports.dateformat = dateformat;
// 數(shù)據(jù)庫連接
require('./model/connect');
// 創(chuàng)建網(wǎng)站服務(wù)器
const app = http.createServer();
// 當(dāng)客戶端訪問服務(wù)器的時候
app.on('request', (req, res) => {
// 啟用路由功能
router(req, res, () => {})
// 啟用靜態(tài)資源訪問服務(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以上就是關(guān)于“node.js如何實現(xiàn)學(xué)生檔案管理”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼