一运褪、基本操作
1、采用express生成器狰右,express+文件名+—view=ejs杰捂;
2、cd到該文件夾棋蚌,npm install
3嫁佳、npm install mongoose -D,安裝mongoose
4谷暮、運行 npm run start
二蒿往、具體內(nèi)容
1、在生成的文件中做一下修改:
(1)app.js中修改:
app.set('views', path.join(__dirname, 'views'));
app.engine('.html',require('ejs').__express);
app.set('view engine', 'html');
(2)在www文件中添加相應信息湿弦,連接數(shù)據(jù)庫
var mongoose=require('mongoose');
mongoose.connect('mongodb://localhost/student');
var db=mongoose.connection;
db.on('error',()=>{
console.log('數(shù)據(jù)庫連接失敗')
});
db.once('open',()=>{
console.log('數(shù)據(jù)庫連接成功')
})
(3)信息提示模板
function showError(message,res) {
var result=`<script>alert('${message}');history.back()</script>`
res.send(result);
}
module.exports=showError
數(shù)據(jù)庫字段模板
var mongoose=require('mongoose')
var Student=mongoose.model('Student',{
studentId:String,
name:String,
sex:String,
age:Number,
class:String,
ID:String
})
module.exports=Student
引入模板
var path=require('path');
var Student=require(path.join(__dirname,'../model/student.js'))
var message=require(path.join(__dirname,'../message/alertMessage.js'))
index.js文件
var express = require('express');
var router = express.Router();
var path=require('path');
var Student=require(path.join(__dirname,'../model/student.js'))
var message=require(path.join(__dirname,'../message/alertMessage.js'))
/* 信息主頁 */
router.get('/', function(req, res, next) {
var students=null;
Student.find({}).then((data)=>{
console.log('-----------',data)
if(!data.length==0){
students=data;
//console.log('data------',data)
res.render('index', {
title: '學生信息管理' ,
students:students
});
}else{
res.render('index', {
title: '學生管理系統(tǒng)' ,
message:'暫無數(shù)據(jù)',
students:students
});
}
},(err)=>{
message('數(shù)據(jù)查找失敗',res)
})
});
//添加學生信息
router.get('/addStudent',(req,res)=>{
res.render('student/addStudent')
})
router.post('/addStudent',(req,res)=>{
//判斷學號是否重復
Student.find({studentId:req.body.studentId}).then((data)=>{
if(!data.length==0){
message('該學生已經(jīng)存在',res)
}else{
Student.create(req.body).then((data)=>{
res.render('student/addStudent')
},(err)=>{
message('學生信息添加失敗',res)
})
}
},(err)=>{
message('信息查找失敗',res)
})
})
//修改學生信息
router.get('/updateStudent/:studentId',(req,res)=>{
var student=null;
//console.log('--------',req.params.studentId)
Student.findOne({studentId:req.params.studentId}).then((data)=>{
student=data;
//console.log('11---------',data)
res.render('student/update',{
student:student
})
},(err)=>{
message('數(shù)據(jù)查找失敗',res)
})
})
router.post('/updateStudent/:studentId',(req,res)=>{
Student.update({studentId:req.body.studentId},{$set:req.body}).then((data)=>{
res.redirect('/')
},(err)=>{
message('信息修改失敗',res)
})
})
//刪除學生信息
router.get('/removeStudent/:studentId',(req,res)=>{
Student.remove({studentId:req.params.studentId}).then((data)=>{
res.redirect('/')
},(err)=>{
message('信息刪除失敗',res)
})
})
module.exports = router;
信息首頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" type="text/css" href="/stylesheets/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<h1 class="text-center"><%= title %></h1>
<a href="/addStudent" class="btn btn-default active" role="button">增加</a><br><br>
<div class="main">
<table class="table table-bordered">
<tr class="text-center">
<th class="text-center">學號</th>
<th class="text-center">姓名</th>
<th class="text-center">性別</th>
<th class="text-center">年紀</th>
<th class="text-center">班級</th>
<th class="text-center">身份證號</th>
<th class="text-center">操作</th>
</tr>
<% if(students){%>
<% for(var i=0;i<students.length;i++){%>
<tr class="text-center">
<td><%=students[i].studentId%></td>
<td><%=students[i].name%></td>
<td><%=students[i].sex%></td>
<td><%=students[i].age%></td>
<td><%=students[i].class%></td>
<td><%=students[i].ID%></td>
<td>
<a href="/updateStudent/<%=students[i].studentId%>" class="btn btn-primary active" role="button">修改</a>
<a href="/removeStudent/<%=students[i].studentId%>" class="btn btn-default active" role="button">刪除</a>
</td>
</tr>
<%}%>
<%}else{%>
<p><%=message%></p>
<%}%>
</table>
</div>
</body>
</html>
信息添加頁面()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加學生信息</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top row">
<div class="container">
<ol class="breadcrumb loginout">
<li>添加學生信息</li>
<li><a href="/">信息主頁</a></li>
</ol>
</div>
</nav>
<h1 class="text-center">添加學生信息</h1><br>
<div class="main">
<form class="form-horizontal" method="post" action="/addStudent">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">學號</label>
<div class="col-sm-10">
<input type="" class="form-control" id="inputEmail3" placeholder="studentId" name='studentId'>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="" class="form-control" id="inputPassword3" placeholder="name" name="name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<input type="" class="form-control" id="inputPassword3" placeholder="sex" name="sex">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">年齡</label>
<div class="col-sm-10">
<input type="" class="form-control" id="inputPassword3" placeholder="age" name="age">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">班級</label>
<div class="col-sm-10">
<input type="" class="form-control" id="inputPassword3" placeholder="calss" name="class">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">身份證號</label>
<div class="col-sm-10">
<input type="" class="form-control" id="inputPassword3" placeholder="ID" name="ID">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
修改頁面做部分修改
action="/updateStudent/<%=student.studentId%>"傳遞參數(shù)
首頁顯示效果
2017-05-30_124047.png