基於Express+mongoose搭建的學生管理系統
上一週學了下mongoose，雖然學了點皮毛，但還是想寫寫總結總結，這也是我的第一篇技術部落格。還是蠻開心的，happy~~來，切入正題！專案原始碼我會放在github上。 github 地址
程式碼目錄
有些東西可根據自己喜好設定，並非必須。
建立並初始化目錄
$ mkdir student_manage
$ cd student_manage
$ npm init第三方模組安裝
1. Express
1.1 Express 基於 Node.js 平臺，快速、開放、極簡的 web 開發框架。
Express 4.x API 中文手冊 安裝如下：
$ npm install express --save1.2 body-parser用於解析客戶端請求的body中的內容,內部使用JSON編碼處理,url編碼處理以及對於檔案的上傳處理。安裝如下：
$ npm install body-parser --save2. mongoose
2.1 mongoose是在node.js非同步環境下對mongodb進行便捷操作的物件模型工具。
mongoose文件 安裝如下：
$ npm install mongoose --save開始寫程式碼咯~~
當然在專案開始前要確定電腦是否安裝mongoDB
下載好具體怎麼配置還請問度娘或Google吧，本文不做介紹了哈。注意：安裝完mongoDB的時候進行專案時要把lib目錄下的mongod伺服器開啟哈~~
先展示下最終實現的專案效果，以防大家心裡有數。
首頁
新增頁
修改頁
前臺具體程式碼就不列出來，比較簡單，為了節約時間，就使用bootstrap進行快速生成，當然大家可以進行美化。
核心程式碼(敲黑板~~~)
- mydb.js 對資料庫進行連線
//引入mongoose模組
var mongoose=require('mongoose')
//資料庫連線地址 連結到myStudent資料庫
var DB_URL='mongodb://localhost:27017/myStudent'
//資料庫連線
mongoose.connect(DB_URL)
//連線成功終端顯示訊息
mongoose.connection.on('connected' 裡面的程式碼我已逐條進行註釋。有幾個要說明的地方：1.可能大家看到Schema的時候有一點懵，不過他理解起來挺簡單的就像關係型資料庫裡面的表。定義可以這麼講：schema是mongoose裡會用到的一種資料模式，可以理解為表結構的定義；每個schema會對映到mongodb中的一個collection，它不具備操作資料庫的能力。2.生成一個student的model的時候，如果myStudent資料庫裡面沒有student(第一個引數的值)集合的話，系統會自動建立一個students的collection，注意在student後面加了s。
- app.js
//匯入express模組
var expres=require('express')
var bodyParser=require('body-parser')
//匯入之前寫的mydb.js
var student=require('./mydb')
//呼叫函式， express例項化
var app=expres()
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
//處理靜態目錄
app.use(expres.static('www'))
// 允許跨域訪問／／／
app.all('/api/*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'x-Request-with')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('X-Powered-By', '4.15.2')
res.header('Content-Type', 'application/json;charset=utf-8')
next() //執行下一個中介軟體。
})
//首頁展示獲取資料
app.post('/index',function (req,res) {
//mongoose 資料查詢
student.find({}).exec(function (error,data) {
if (error){
console.log('資料獲取失敗'+error)
}
else{
res.json({
status:'y',
message:'查詢成功',
//傳遞返回的資料
data:data
})
}
})
})
//修改頁面 獲取資料
app.post('/modify',function (req,res) {
//mongoose根據條件進行查詢
student.find({_id: req.body.id}).exec(function (error,data) {
console.log('2')
if (error){
console.log('資料獲取失敗'+error)
}
else{
console.log(data)
res.json({
status:'y',
message:'查詢成功',
data:data
})
console.log(4)
}
})
})
//修改提交修改資料庫
app.post('/modifyStu',function (req,res) {
console.log('1')
console.log(req.body)
//查詢的條件
var whereStr={_id:req.body.id}
//更新的內容
var updateStr={
$set:{
name:req.body.name,
sex:req.body.sex,
age: req.body.age,
phone:req.body.phone,
email:req.body.email,
other:req.body.other,
}
}
//對資料庫進行更新
student.update(whereStr,updateStr,function (error) {
if (error){
console.log('資料修改失敗:'+error)
res.json({
status:'y',
message:'修改失敗',
data:req.body
})
}
else{
console.log('資料修改成功')
res.json({
status:'y',
message:'修改成功',
data:req.body
})
}
})
})
//刪除資料庫其中的項
app.post('/del',function (req,res) {
//mongoose根據指定條件進行刪除
student.remove({_id: req.body.id},function(error){
if (error){
console.log('資料獲取失敗'+error)
res.json({
status:'y',
message:'刪除不成功',
})
}
else{
res.json({
status:'y',
message:'刪除成功',
})
}
})
})
//導航欄search操作
app.post('/findName',function (req,res) {
console.log(req.body.searchName)
student.find({name: req.body.searchName}).exec(function (error,data) {
if (error){
console.log('查詢失敗'+error)
res.json({
status:'y',
message:'查詢失敗',
})
}
else{
res.json({
status:'y',
message:'查詢成功',
data:data
})
}
})
})
//新增資料庫操作
app.post('/addStu',function (req,res) {
console.log(req.body)
//例項化一個student
var newStu=new student({
name:req.body.name,
sex:req.body.sex,
age:req.body.age,
phone:req.body.phone,
email:req.body.email,
other:req.body.other,
})
//對例項化的內容進行儲存
newStu.save(function (error) {
if (error){
console.log('資料新增失敗:'+error)
res.json({
status:'y',
message:'新增失敗',
data:req.body
})
}
else {
console.log('資料新增成功')
res.json({
status:'y',
message:'新增成功',
data:req.body
})
}
})
})
//伺服器監聽埠
app.listen(3000,()=>{
console.log('node is ok')
})到處伺服器搭建完成，接下來就是對各個js程式碼進行操作，ajax獲取表單資料請求伺服器，ajax獲取位址列請求伺服器等等。然後ajax在接收到伺服器返回的資料，對此進行渲染到前臺頁面，此專案我用的是 artTemplate 進行模板渲染。
就舉一個栗子吧~~
- 新增頁的 addAjax.js
$(function () {
//新增表單驗證方法 手機號的驗證
$.validator.addMethod('isPhone',function (value,ele) {
var length=value.length
var reg=/^1[34578]\d{9}$/
if (length >= 11 && reg.test(value)){
return true
}
else {
return false
}
})
//對錶單進行驗證
$('#addForm').validate({
debug:true,
//驗證的規則
rules:{
name:{
required:true,
minlength:3
},
age:{
required:true
},
phone:{
required:true,
isPhone:true
},
email:{
required:true,
email:true
}
},
//錯誤的提示資訊
messages:{
name:{
required:'姓名不能為空',
minlength:'姓名不能少於3位'
},
age:{
required:'年齡不能為空'
},
phone:{
required:'手機號不能為空',
isPhone:'手機號格式錯誤'
},
email:{
required:'郵箱不能為空',
email:'郵箱格式錯誤'
}
},
//正確時執行的函式
submitHandler:function (form) {
//ajax請求
$.ajax({
type:'post',
url:'/addStu',
dataType:'json',
//表單資料序列化
data:$(form).serialize(),
//ajax請求成功操作
success:function (res) {
$('.modal-body').text(res.message)
//顯示出模態框
$('.modal').modal('show').on('hidden.bs.modal',function () {
if (res.message == '新增成功'){
location.href='index.html'
}
})
},
//ajax請求失敗操作
error:function (jqXHR) {
console.log(jqXHR.status)
}
})
},
})
})表單驗證我用了 jquery.validate.js
- 新增完畢，首頁進行渲染 index.html(部分)
{{each}}
<tr>
<td>{{$value.name}}</td>
<td>{{$value.sex}}</td>
<td>{{$value.age}}</td>
<td>{{$value.phone}}</td>
<td>{{$value.email}}</td>
<td>
<a href="/modify.html?id={{$value._id}}" class="modify" data-index="{{$value._id}}">修改</a>
<a href="" class="del" data-index="{{$value._id}}">刪除</a>
</td>
</tr>
{{/each}}- 首頁的 indexAjax.js(部分)
$(function () {
$.ajax({
type:'post',
url:'/index',
success:function (res) {
//進行模板渲染
var strHtml=template('showStu',res.data)
$('#tb').html(strHtml)
......程式碼有點長就不放了哈~~........結尾
夜已深。不知不覺寫這個文章也花了挺長時間的，哈哈哈，不過自己開心就行~~ 自己在做這個專案的時候，以為會很快搞完，但是還是遇到了問題，哎，糾結了好久，現在也沒得出個答案，後來用了另一種的解決方法，感覺有點像投機取巧，但好像也不能怎麼說，哈哈…個人技術水平真的很渣，寫文章一方面是分享，一方面是再次重溫自己的思路。請勿噴哈~~自己的第一篇技術部落格，寫的有點匆忙，不過還是希望可以給大家帶來幫助。
於 廈門高崎新村 自己的小屋