基于node、express圖書管理系統的實作

一、下載下傳并導入子產品

在本案例中，我們需要将需要使用到”art-template body-parser express和express-art-remplate,這幾個子產品。

1.安裝

**a.**進入到檔案，打開powershell視窗，進行初始化：npm init -y。

執行完成後開始下載下傳上面所要用的子產品： npm install art-template express body-parser path xpress-atr-template --save

2.建立檔案

• router

  建立router.js檔案，在該檔案内處理路由

• server

  業務邏輯層(增删改查)

• views

  index.art用于顯示圖書資訊，以及提供跳轉入口

  tjts.art 是一個表單，用于添加圖書資訊

  xgts.art 渲染資料，用于修改圖書資訊

• data.js 模拟背景資料

[
    {
        "id": "1",
        "name": "水浒傳",
        "author": "施耐庵",
        "category": "文學",
        "desc": "108條好漢的故事"
    },
    {
        "id": "2",
        "name": "西遊記",
        "author": "吳承恩",
        "category": "文學",
        "desc": "佛教和道教的鬥争"
    },
    {
        "id": "3",
        "name": "紅樓夢",
        "author": "曹雪芹",
        "category": "文學",
        "desc": "一個封建王朝的縮影"
    },
    {
        "id": "4",
        "name": "三國演義",
        "author": "羅貫中",
        "category": "戰争",
        "desc": "三國鼎立,諸侯割據"
    }
]
           

index.js 入口檔案

//靜态檔案托管
app.use(express.static('views'))

//設定模闆相容
app.engine('art',require('express-art-template'))

//設定模闆引擎路徑
app.set('views',path.join(__dirname,'views'))

//設定模闆引擎
app.set('view engine','art');

//挂載參數處理的中間件
app.use(bobyParser.urlencoded({extended:false}));

//處理json資料
app.use(bobyParser.json());

//配置路由
app.use(router)

//監聽端口
app.listen(3000,()=>{
    console.log('...........')
})

           

二、路由子產品router.js

module.exports 對象是由子產品系統建立的。在我們自己寫子產品的時候，需要在子產品最後寫好子產品接口，聲明這個子產品對外暴露什麼内容，module.exports 提供了暴露接口的方法。

const express=require('express');
const router =express.Router()        //加載路由
const service =require('../server/server') //調用server

//c查詢所有書記資訊并傳回 json資料
router.get('/',service.showInfo);

//添加圖書的路由處理
router.get('/tztj',service.tztj)

//添加圖書的功能
router.post('/tjts',service.tjts) 

//修改跳轉
router.get('/xgtz',service.xgtz)

//修改
router.post('/xg',service.xg)

//删除
router.get('/sc',service.sc)

//查詢
router.post('/cx',service.cx)

//導出子產品
module.exports=router
           

三、業務處理

業務邏輯層主要是實作了對資料的增删改查。

• 首頁面

  周遊所有資料，擷取到相對應的資料

{{each list}}
         <tr>
            <td>{{$value.bh}}</td>
            <td>{{$value.sm}}</td>
            <td>{{$value.zz}}</td>
            <td>{{$value.nd}}</td>
            <td>{{$value.ms}}</td>
            <td><a href="/xgtz?bh={{$value.bh}}">編輯</a><a href="/sc?bh={{$value.bh}}">删除</a></td>
        </tr>
        {{/each}}
           

• 添加資料

  在點選添加圖書按鈕，跳轉進入添加圖書頁面（/tztj）添加完成後将資料寫到json資料中，并且顯示在首頁面（跳轉出頁面的位址為/tjts）；在添加圖書時，實作圖書編号的自動增長，需要擷取到最大id,然後在最大id的基礎上+1，使用 res.redirect(’/’)，直接傳回首頁面

• 修改資料

  點選修改時，進入到修改頁面（/xgtz）,擷取到所有圖書編号，定義一個空對象，周遊所有圖書，比對編号相同的圖書，并添加到空對象中，得到修改的圖書，送出時寫入到json資料裡，傳回首頁面。

• 删除資料

  擷取圖書編号，周遊資料，比對相同編号的圖書，使用 data.splice(位置，删除幾個)方法删除

• 查詢資料

  擷取圖書名稱，周遊所有資料 比對相對應的圖書名稱

const data=require('../data.json')
const path=require('path')
const fs=require('fs')

exports.showInfo=(req,res)=>{
         //res.render() 是express內建 art-remplate 模闆進行渲染
     res.render('index',{list:data});  
}

//跳轉添加圖書資訊頁面
exports.tztj=(req,res)=>{
    res.render('tjts',{}) 
}

//實作圖書編号自動增長  
let maxx= () =>{
    let arr = []
    data.forEach((item)=> {
        arr.push(item.bh)
        
    });
    //從數組中傳回最大值
    return Math.max.apply(null,arr)
}
//添加圖書
exports.tjts=(req,res)=>{
   // console.log(123)
    let info =req.body
    let book={};
    book.bh=maxx()+1;
    console.log(book.bh)
    for(let key in info){
        book[key]=info[key]
    }
    
    data.push(book);
    fs.writeFile(path.join(__dirname, '../data.json'),JSON.stringify(data), (err) => { 
        if (err) {
            res.send('cupwu');
        } else {
            res.redirect('/')
           // res.send('chenggong');
        }
    })
}
//修改 跳轉
exports.xgtz=(req,res)=>{
    console.log(123)
    let bh=req.query.bh;
    //console.log(bh);
    let datas={}
    data.forEach((itme)=>{
          if(bh==itme.bh){
              datas=itme
          }
         //console.log(datas)  
    })
    res.render('xgtz',datas);
}

//修改圖書
exports.xg=(req,res)=>{
    let xg=req.body
    //console.log(xg)
    data.forEach((item)=>{
        if(item.bh==xg.bh){
            for(let key in xg){
                item[key]=xg[key]
            }
        }
    })
    console.log(data)
    fs.writeFile(path.join(__dirname,'../data.json'),JSON.stringify(data),(err)=>{
        if(err){
            res.send('cuowu')
        }
        res.redirect('/')
    })
}
//删除
exports.sc=(req,res)=>{
    let bh=req.query.bh
    //console.log(bh)
    data.forEach((item,index)=>{
        if(bh==item.bh){
            data.splice(index,1)
        }
    })
    fs.writeFile(path.join(__dirname,'../data.json'),JSON.stringify(data),(err)=>{
        if(err){
            res.send('cuowu')
        }
        res.redirect('/')
    })
}

//查詢
exports.cx=(req,res)=>{
  let name=req.body.sm
  console.log(name)
  let book=[];
  data.forEach((itme,index)=>{
      if(itme.sm.indexOf(name)>=0){
          book.push(itme)
      }
  })
  if(book.length==0){
      console.log('meiyou')
  }else{
      res.render('index',{list:book})
  }
}