一、基本操作
1、采用express生成器,express+文件名+—view=ejs;
2、cd到该文件夹,npm install
3、npm install mongoose -D,安装mongoose
4、运行 npm run start
二、具体内容
1、在生成的文件中做一下修改:
(1)app.js中修改:
app.set('views', path.join(__dirname, 'views'));
app.engine('.html',require('ejs').__express);
app.set('view engine', 'html');
(2)在www文件中添加相应信息,连接数据库
var mongoose=require('mongoose');
mongoose.connect('mongodb://localhost/student');
var db=mongoose.connection;
db.on('error',()=>{
console.log('数据库连接失败')
});
db.once('open',()=>{
console.log('数据库连接成功')
})
(3)信息提示模板
function showError(message,res) {
var result=`<script>alert('${message}');history.back()</script>`
res.send(result);
}
module.exports=showError
数据库字段模板
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: '学生管理系统' ,
message:'暂无数据',
students:students
});
}
},(err)=>{
message('数据查找失败',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('该学生已经存在',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('数据查找失败',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%>"传递参数
首页显示效果

网友评论