学生档案案例（node+mongodb）
目录文件夹
效果图
app.js
const http = require("http") // 引入http模块
const path = require("path")
const querystring = require("querystring")
const dateformat = require("dateformat")
const serveStatic = require("serve-static")
const template = require("art-template") // 引入 模板引擎
//连接数据库
require("./model/content")
// 路由
const router = require("./router/index")
// 静态资源服务
const serve = serveStatic( path.join(__dirname,"public"))
// 处理日期格式的方法
template.defaults.imports.dateformat = dateformat
// 配置模板的更目录
template.defaults.root = path.join(__dirname,"views")
// 创建服务器
const app = http.createServer()
app.on("request", (req,res) =>{
router(req,res,()=>{})
serve(req,res,()=>{})
})
app.listen(3000)
console.log("服务器启动成功...");
model
- content.js
// 连接数据库
const mongoose = require("mongoose")
mongoose.connect("mongodb://localhost/playground",{useNewUrlParser:true,useUnifiedTopology:true}).then( ()=>{
console.log("数据库连接成功");
}).catch( ()=>{ console.log("数据库连接失败")})
- user.js
const mongoose = require("mongoose")
// 创建集合规则
const mongoSchema = new mongoose.Schema({
name:{
type:String,
require:true,
minlength:2,
manlength:5,
},
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",mongoSchema)
module.exports = Student
- router
// 获取路由对象
const getRouter = require('router')
const router = getRouter()
const template = require("art-template") // 引入 模板引擎
const querystring = require("querystring")
// 集合规则
const Student = require("../model/user")
// 访问页面
router.get("/add",(req,res)=>{
let html = template('index.art',{})
res.end(html)
})
router.get("/list",async (req,res) =>{
const result = await Student.find()
let html = template('list.art',{
student : result
})
res.end(html)
})
// 实现学生信息添加功能路由
router.post("/add",(req,res)=>{
let formData = '';
req.on('data', params=>{
formData += params
})
req.on("end",async ()=>{
let userinfo = querystring.parse(formData)
console.log(userinfo);
// 存入数据库
await Student.create(userinfo)
res.writeHead(301,{
Location:"/list"
})
res.end()
})
})
module.exports = router
public / css
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.js
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;
}
views
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 name="name" class="normal" type="text" autofocus placeholder="请输入姓名">
</label>
<label>
年龄: <input name="age" class="normal" type="text" placeholder="请输入年龄">
</label>
<label>
性别:
<input type="radio" value="1" name="sex"> 男
<input type="radio" value="0" name="sex"> 女
</label>
<label>
邮箱地址: <input name="email" class="normal" type="text" placeholder="请输入邮箱地址">
</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 student }}
<tr>
<td>{{ $value.name }}</td>
<td>{{ $value.age }}</td>
<td>{{ $value.sex ? "男" : "女" }}</td>
<td>{{ $value.email }}</td>
<td>
{{ each $value.hobbies }}
<span>{{$value}}</span>
{{ /each }}
</td>
<td>{{ $value.collage }}</td>
<td>{{ dateformat( $value.enterDate,"yyyy-mm-dd hh-MM-ss" ) }}</td>
</tr>
{{ /each }}
</table>
</body>
</html>
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
