Express -- 簡單案例和目錄搭建 · 前端知識 -- 學習整理

[TOC] >[success] # 簡單的案例和項目結構目錄 ~~~ . ├── node_modules // npm 安裝的包文件 ├── public // 存放靜態資源文件夾 | ├── css | └── js ├── views // 存放html 文件件 | ├── index.html // 首頁 | └── js ├── data.json // 無數據暫時用json 保存數據 ├── index.js // 文件主入口，主要做配置 ├── router.js // 所有的路由配置 ├── service.js // 業務邏輯，寫好的業務邏輯，會導入進路由js中，形成關聯 └── package.json // npm init 生成的NPM包的所有相關信息，其中sprict可以腳本 ~~~ >[danger] ##### 操作步驟 ~~~ 1.npm init -y // 初始化 package.json 2.npm install express --save // 安裝express 3.npm install --save art-template npm install --save express-art-template // 安裝模板依賴，和對應模板 4.npm install --save body-parse // 處理post 請求 ~~~ >[danger] ##### index.js 入口文件 -- 主要配置文件 ~~~ const express = require('express'); const path =require('path'); const bodyParser = require('body-parser'); const router = require('./router.js'); const app = express(); // 啟動靜態資源服務 app.use('/www',express.static('public')); // 設置模板路徑 app.set('views', path.join(__dirname,'views')); // 設置模板引擎 app.set('view engine','html'); // 使express兼容art-template模板引擎 app.engine('html', require('express-art-template')); // 處理請求參數 // 掛載參數處理中間件（post） app.use(bodyParser.urlencoded({ extended: false })); // 處理json格式的參數 app.use(bodyParser.json()); // 配置路由 app.use(router); app.listen(3000,()=>{ console.log('running...'); }); ~~~ >[danger] ##### router.js -- 路由文件所有請求經過的配置文件 ~~~ 1.主要做路由的分發配合service 邏輯業務層 2.一定要把路由導出好讓index.js 入口文件可以接受到并且處理 ~~~ ~~~ // 路由文件 const express = require('express'); const router = express.Router(); // 導入express 的路由文件 const service = require('./service.js'); // 導入業務邏輯模塊 router.get('/', service.showIndex); // 渲染主頁 router.get('/toaddbook', service.toaddBook); // 跳轉到添加頁面 router.post('/addBook', service.addBook); // 處理post 添加數據請求 router.get('/toEditBook',service.toEditBook); // 跳轉到編輯圖書信息頁面 router.post('/editBook',service.editBook); // 編輯圖書提交表單 router.get('/deleteBook',service.deleteBook); // 刪除圖書信息 module.exports = router; ~~~ >[danger] service.js -- 邏輯業務層 ~~~ 1.重定向res.redirect('地址'); ~~~ ~~~ const data = require('./data.json'); // 不用數據庫暫時用json 存儲 const path = require('path'); const fs = require('fs'); // 自動生成圖書編號（自增） let maxBookCode = ()=>{ let arr = []; data.forEach((item)=>{ arr.push(item.id); }); return Math.max.apply(null,arr); }; // 把內存數據寫入文件 let writeDataToFile = (res) => { fs.writeFile(path.join(__dirname,'data.json'),JSON.stringify(data,null,4),(err)=>{ if(err){ res.send('server error'); } res.redirect('/'); // 文件寫入成功之后重新跳轉到主頁面 }); }; // 渲染主頁面 exports.showIndex = (req,res) =>{ res.render('index',{list:data}) }; // 跳轉添加圖書頁面 exports.toaddBook = (req,res) =>{ res.render('addBook'); }; // 處理添加的post exports.addBook = (req,res) =>{ let info = req.body; let book = {}; for(let i in info){ book[i] = info[i]; } book.id = maxBookCode() + 1; data.push(book); writeDataToFile(res); // 把內存中的數據寫入文件 }; // 跳轉編輯圖書頁面 exports.toEditBook = (req,res) => { let id = req.query.id; let book = {}; data.forEach((item)=>{ if(id == item.id){ book = item; return; } }); res.render('editBook',book); } // 編輯圖書更新數據 exports.editBook = (req,res) => { let info = req.body; data.forEach((item)=>{ if(info.id == item.id){ for(let key in info){ item[key] = info[key]; } return; } }); // 把內存中的數據寫入文件 writeDataToFile(res); } // 刪除圖書信息 exports.deleteBook = (req,res) => { let id = req.query.id; data.forEach((item,index)=>{ if(id == item.id){ // 刪除數組的一項數據 data.splice(index,1); } return; }); // 把內存中的數據寫入文件 writeDataToFile(res); } ~~~ >[danger] ##### views -- html 頁面 * index ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖書管理系統</title> <link rel="stylesheet" type="text/css" href="/www/style.css"> </head> <body> <div class="title">圖書管理系統<a href="/toAddBook">添加圖書</a></div> <div class="content"> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>編號</th> <th>名稱</th> <th>作者</th> <th>分類</th> <th>描述</th> <th>操作</th> </tr> </thead> <tbody> {{each list}} <tr> <td>{{$value.id}}</td> <td>{{$value.name}}</td> <td>{{$value.author}}</td> <td>{{$value.category}}</td> <td>{{$value.desc}}</td> <td><a href="/toEditBook?id={{$value.id}}">修改</a>|<a href="/deleteBook?id={{$value.id}}">刪除</a></td> </tr> {{/each}} </table> </div> </body> </html> ~~~ * addBook 添加頁 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加圖書</title> </head> <body> <div>添加圖書</div> <form action="/addBook" method="post"> 名稱：<input type="text" name="name"><br> 作者：<input type="text" name="author"><br> 分類：<input type="text" name="category"><br> 描述：<input type="text" name="desc"><br> <input type="submit" value="提交"> </form> </body> </html> ~~~ * editBook 編輯頁 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改圖書</title> </head> <body> <div>修改圖書</div> <form action="/editBook" method="post"> <input type="hidden" name="id" value="{{id}}"> 名稱：<input type="text" name="name" value="{{name}}"><br> 作者：<input type="text" name="author" value="{{author}}"><br> 分類：<input type="text" name="category" value="{{category}}"><br> 描述：<input type="text" name="desc" value="{{desc}}"><br> <input type="submit" value="提交"> </form> </body> </html> ~~~