前端学习（1362）:学生档案信息管理4
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1362）:学生档案信息管理4
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
service.js
//引入http模塊 const http = require('http'); //創(chuàng)建網(wǎng)站服務(wù)器 const app = http.createServer(); //引入路由 const getRouter = require('router'); const router = getRouter(); const template = require('art-template'); const path = require('path'); const serveStatic = require('serve-static'); const querystring = require('querystring'); //靜態(tài)資源服務(wù) const serve = serveStatic(path.join(__dirname)); //配置模板根目錄 template.defaults.root = path.join(__dirname); router.get('/add', (req, res) => {/* res.end('test') */let html = template('index.art', {});res.end(html); }) router.get('/list', (req, res) => {let html = template('list.art', {});res.end(html);})//實現(xiàn)學(xué)生信息添加 router.post('/add', (req, res) => {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();}) }); //實現(xiàn)學(xué)生信息添加 //router require('./connect.js') const Student = require('./user.js') app.on('request', (req, res) => {router(req, res, () => {})serve(req, res, () => {}) });app.listen(3000); console.log('服務(wù)器啟動成功');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;connect.js
//鏈接數(shù)據(jù)庫 const mongoose = require('mongoose'); //鏈接數(shù)據(jù)庫 mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true }).then(() => console.log('數(shù)據(jù)庫安裝成功')).catch(() => console.log('數(shù)據(jù)庫鏈接失敗'))index.artlis
<!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="./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="./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>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; }list.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; }運行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习（1362）:学生档案信息管理4的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3.7 获取网络时间
- 下一篇： 前端学习（1309）:创建web服务器