node.js實現學生檔案管理

Posted on by

本文實例為大傢分享瞭node.js實現學生檔案管理的具體代碼，供大傢參考，具體內容如下

學生檔案管理

目標：模板引擎應用，強化node.js項目制作流程

知識點：http請求響應、數據庫、模板引擎、靜態資源訪問

制作流程

1、建立項目文件夾並生成項目描述文件

2、創建網站服務器實現客戶端和服務器端通信

3、連接數據庫並根據需求設計學員信息表

4、創建路由並實現頁面模板呈遞

5、實現靜態資源訪問

6、實現學生信息添加功能

1）.在模板的表單中指定請求地址與請求方式
2）.為每一個表單項添加name屬性
3）.添加實現學生信息功能路由
4）.接收客戶端傳遞過來的學生信息
5）.將學生信息添加到數據庫中
6）.將頁面重定向到學生信息列表頁面

7、實現學生信息展示功能

1）.從數據庫中將所有的學生信息查詢出來
2）.通過模板引擎將學生信忠和HTML模板進行拼接
3）.將拼接好的HTML模板響應給客戶端

目錄結構

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>學生檔案</title>
    <link rel="stylesheet" href="./css/main.css" >
</head>
<body>
    <form action="/add" method="post">
        <fieldset>
            <legend>學生檔案</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>
                所屬學院: 
                <select class="normal" name="collage">
                    <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>
            <label>
                入學日期: <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>學員信息</title>
    <link rel="stylesheet" href="./css/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>
                <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');
// 引入靜態資源訪問模塊
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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：