本系列文章是為學(xué)習(xí)Vue的項目練習(xí)筆記，盡量詳細(xì)記錄一下一個完整項目的開發(fā)過程。面向初學(xué)者，本人也是初學(xué)者，搬磚技術(shù)還不成熟。項目在技術(shù)上前端為主，包含一些后端代碼，從基礎(chǔ)的數(shù)據(jù)庫（Sqlite）、到后端服務(wù)Node.js（Express），再到Web端的Vue，包含服務(wù)端、管理后臺、商城網(wǎng)站、小程序/App，分為下面多個篇文檔。

??系列目錄：

• 圖書商城Vue+Element+Node+TS項目練習(xí)??
• 圖書商城①管理后臺Vue2+ElementUI??
• 圖書商城②后端服務(wù)Node+Express+Sqlite??
• 未完成：商城網(wǎng)站Vue3+TS、商城APP端Vue3+TS+uniapp

00、后端服務(wù)Node/Express/Sqlite

后端服務(wù)實現(xiàn)的比較簡單，僅僅只是為了滿足前端的最小需要。實現(xiàn)了登錄、文件上傳下載、一些數(shù)據(jù)的增刪改查等基礎(chǔ)功能，正式后端服務(wù)中的權(quán)限、安全、性能并沒有考慮，主要是也不太熟悉。用Node做一個簡單的后端服務(wù)還是比較容易的，前端開發(fā)還是有必要了解一下，不僅要和前端同行卷，更要往外卷，卷起來！—— 跟自己卷就行了！（不得不）持續(xù)學(xué)習(xí)，（被迫）不斷進(jìn)步！

??技術(shù)路線：

• Node.js，開發(fā)運(yùn)行環(huán)境v16.17.1
• express，Web組件v4.18
• sqlite3，數(shù)據(jù)庫

??相關(guān)組件：

• express.static：靜態(tài)資源托管，express提供的，無需額外安裝。
• multer：文件上傳

??源代碼地址：Github / KWebNote，Gitee / KWebNote，后臺服務(wù)端代碼在目錄??server下。

01、數(shù)據(jù)庫Database

1.1、用什么數(shù)據(jù)庫？Sqlite

Node支持多種數(shù)據(jù)，官網(wǎng)Database integration。本項目采用的是Sqlite數(shù)據(jù)庫，Sqlite是一款輕量的關(guān)系型數(shù)據(jù)庫，無需安裝、無需配置、無需單獨(dú)啟動。SQLite是一種嵌入式數(shù)據(jù)庫，它的數(shù)據(jù)庫就是一個db庫文件，極度輕量，該有的功能都有?？汕度氲蕉喾N語言中使用，當(dāng)然也支持JS，引入Sqlite的JS庫“sqlite3”即可進(jìn)行數(shù)據(jù)庫增刪改查操作了。

???項目中的Sqlite數(shù)據(jù)庫文件就一個db文件“book_db.db ”單文件20KB。

GUI管理工具推薦下載 SQLiteStudio，非常好用，免費(fèi)開源，功能齊全，支持Windows、IOS、Linux。

1.2、數(shù)據(jù)庫結(jié)構(gòu)設(shè)計

基于項目需求，設(shè)計了5個表，表結(jié)構(gòu)相對比較簡單，設(shè)計比較也比較隨意。

???書籍信息表“books”

???訂單表“order”

INSERT INTO [order] (createtime,status,products,money,uid)
VALUES (1675319639624,'unpay','[{"name":"論語","price":155,"total":1},{"name":"論語2","price":15,"total":2}]',113,1);

數(shù)據(jù)：

???用戶表“user_info”

數(shù)據(jù)：

???字典類型“dictype”

數(shù)據(jù)：

???字典數(shù)據(jù)“dicdata”

數(shù)據(jù)：

02、創(chuàng)建項目

創(chuàng)建一個“server”目錄，就創(chuàng)建完畢了。后端服務(wù)做的比較簡陋，文件結(jié)構(gòu)也比較清晰。

• ??api目錄：服務(wù)端的api接口，使用Express的路由來構(gòu)建。
  • base.js：基礎(chǔ)公共api，如登錄、首頁數(shù)據(jù)
  • book.js：書籍管理api
  • file.js：文件上傳api
  • order.js：訂單模塊api
  • system.js：系統(tǒng)管理模塊api，如字典管理
• ??db目錄：
  • book_db.db：sqlite數(shù)據(jù)庫文件，就一個db文件，非常輕量。
  • db.js：sqlite數(shù)據(jù)庫訪問的封裝。
• ??file目錄：上傳的文件存儲在這里的。
• index.js：入口JS文件，組裝??api目錄下的API接口、注冊HTTP服務(wù)。

服務(wù)端運(yùn)行也同樣簡單，用node啟動入口JS文件index.js即可。

node index.js

03、sqlite3數(shù)據(jù)庫api

安裝sqlite3的Node組件：cnpm install sqlite3 -S，在??server目錄下運(yùn)行。

數(shù)據(jù)庫的操作接口很簡單，指定sqlite的db文件，申明一個sqlite3實例對象，就可干活了。主要就是執(zhí)行sql（新增insert、修改update、刪除delete）、查詢（select）數(shù)據(jù)！

let sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('file-name.db');  //指定sqlite的db文件
//查詢，參數(shù)row為查詢的結(jié)果結(jié)合
db.all("select * from 表名",function(err,row){
  console.log(row);
})
//執(zhí)行sql：新增、修改、刪除
const sql = "delete from dicdata where id=?";
const params = [req.body.id];
db.run(sql, params, function (error) {  })

可以做一個簡單的封裝，統(tǒng)一返回的數(shù)據(jù)結(jié)構(gòu)。

• db.queryData：查詢數(shù)據(jù)
• db.executeSql：執(zhí)行sql：增、刪、修改

//加載sqlite并創(chuàng)建數(shù)據(jù)庫實例
let sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('./db/book_db.db');

// 響應(yīng)數(shù)據(jù)結(jié)構(gòu)
function ResponsData(error) {
  this.status = error ? 'Error' : 'OK';
  this.message = error ? error : null;
}
//異常處理
db.printError = function (error) {
  if (error) console.error(error);
}
//查詢數(shù)據(jù)
db.queryData = function (sql, params, callback) {
  if (!params) params = {};
  db.all(sql, params, function (error, rows) {
    db.printError(error);
    let resData = new ResponsData(error);
    callback(resData, rows);
  })
}
//執(zhí)行sql：增、刪、修改
db.executeSql = function (sql, params, callback) {
  db.run(sql, params, function (error) {
    db.printError(error);
    let resData = new ResponsData(error);
    callback(resData);
  })
}
module.exports = db;

??參數(shù)化：使用參數(shù)化單獨(dú)管理sql中的變量參數(shù)，更安全，這是防止SQL注入的基礎(chǔ)手段。

• 使用問號“?”作為參數(shù)的占位符，參數(shù)按照順序組裝為數(shù)組。insert into books values(NULL,?,?,?,?,?,?,?,?,?,?,?)
• 模糊查詢時，在參數(shù)中構(gòu)造模糊查詢表達(dá)式：wheresql = " where name like ?"; params.push("%" + req.body.name + "%");

更多SQL使用詳見Github / KWebNote。

04、Express開發(fā)后臺API

4.1、Express入門

express 是Node.js 的組件_（express /?k?spres/ 快速、快遞）_，一個快速、開放、極簡的 Web 開發(fā)框架， 提供一系列強(qiáng)大特性幫助你創(chuàng)建各種Web應(yīng)用。使用非常簡便、靈活，用于搭建WEB服務(wù)，所以我們就用Express來搭建后端API服務(wù)。

• 1、安裝express：cnpm install express -S，在??server目錄下運(yùn)行。
• 2、創(chuàng)建實例，添加接口、監(jiān)聽端口。
• 3、運(yùn)行，在命令行中用node命令運(yùn)行該JS文件，啟動Express服務(wù)：node server.js。

//加載組件
let express = require('express');
//創(chuàng)建一個服務(wù)端服務(wù)實例server
let server = new express();

//定義一個get接口
server.get('/hello', (req, res) => {
  res.send('Hello World!')
})
//定義一個post接口
server.get('/send', (req, res) => {
  console.log(req.body); //post發(fā)送的數(shù)據(jù)
})
//*****  配置監(jiān)聽端口 *****/
server.listen(801, err => {
  if (!err)
    console.log('服務(wù)器啟動成功，地址：http://localhost:801')
})

啟動：node server.js

測試：http://localhost:801/hello

4.2、Express路由/API接口

后端的API接口的封裝比較簡單了，監(jiān)聽路由API地址，接收請求、處理（操作數(shù)據(jù)庫），然后返回響應(yīng)結(jié)果。為了更好管理后端的API，使用Express的路由express.Router()來組織不同模塊的API接口。各個模塊的API可以單獨(dú)管理，然后統(tǒng)一組裝。

比如book.js，圖書管理api：

//引入express
let express = require('express');
//獲取Express的路由
let router = express.Router();
//引入db庫
const db = require('../db/db.js');

//設(shè)置路由：獲取單個book數(shù)據(jù)，get方式
router.get('/book/id', (req, res) => {
  //sql語句
  let sql = "select id,name,author,introduction,imgs,status,catgory,price,tag,comments,createtime,lasttime from books where id =?";
  //調(diào)用db封裝的查詢api，返回數(shù)據(jù)
  db.queryData(sql, [req.query.id], (resData, rows) => {
    resData.data = rows[0];
    res.send(resData);
  });
})
//設(shè)置路由：新增、修改，post方式
router.post('/book/save', (req, res) => {
  let sql = '';
  // 參數(shù)，在sql中用？占位（按照順序）
  let params = [req.body.name, req.body.author, req.body.introduction, req.body.imgs, req.body.status, req.body.catgory, req.body.price, req.body.tag, req.body.comments, req.body.createtime ?? Date.now(), Date.now()];
  //update 修改數(shù)據(jù)
  if (req.body.id) {
    sql = "update books set name=?,author=?,introduction=?,imgs=?,status=?,catgory=?,price=?,tag=?,comments=?,createtime=?,lasttime=? where id=?";
    params.push(req.body.id);
  }
  else //insert 新增數(shù)據(jù) (name,author,introduction,img,status) 
    sql = "insert into books values(NULL,?,?,?,?,?,?,?,?,?,?,?)";
  db.executeSql(sql, params, resData => {
    if (resData.status == 'OK')
      resData.message = '保存成功';
    res.send(resData);
  });
})

// 導(dǎo)出路由router
module.exports = router;

在入口文件index.js中引用安裝book.js的路由。

//加載組件
let express = require('express');
//創(chuàng)建一個服務(wù)端服務(wù)實例server
let server = new express();

// 書籍模塊api
const book = require('./api/book.js');
const path='/api';
server.use(path, book);

完整API接口詳見Github / KWebNote。

4.3、文件的上傳

常用的圖片、Excel等附件的上傳，文件本質(zhì)上也是數(shù)據(jù)，同其他API接口一樣，通過POST方式提交文件數(shù)據(jù)。HTML的FORM表單提交支持多種類型，其中multipart/form-data混合類型就是專用于提交二進(jìn)制文件的。

??HTML中 <form> 表單enctype：編碼類型（encode type），規(guī)定了form表單在發(fā)送到服務(wù)器時候編碼方式。

• application/x-www-form-urlencoded：編碼所有字符（默認(rèn)），傳輸字符內(nèi)容。
• multipart/form-data ：混合類型， 表單中有文件上傳時使用。
• text/plain：純文體，空格轉(zhuǎn)換為 “+” 加號，不對特殊字符編碼。

在Express中上傳文件，使用中間件multer，是專門用來處理復(fù)合表單multipart/form-data數(shù)據(jù)，用來處理后端的文件上傳。

• 安裝multer插件：cnpm i -S multer。，在??server目錄下運(yùn)行。
• 配置文件上傳接口“/upload”：

let express = require('express');
let router = express.Router();
let multer = require('multer');

// 申明multer實例，并配置文件保存路徑、文件名
let upload = multer({
  storage: multer.diskStorage({
    //文件存儲位置
    destination: function (req, file, callback) {
      callback(null, './file/')
    },
    //文件命名
    filename: function (req, file, callback) {
      callback(null, Date.now() + '-' + file.originalname);
    }
  })
});
// 配置文件上傳接口
router.post('/upload', upload.single('file'), function (req, res, next) {
  if (!req.file) {
    res.json({ status: 'Error', message: '文件上傳錯誤：文件不存在' });
    return;
  }
  let file = req.file;
  //返回響應(yīng)消息：文件的相對URL地址
  res.json({
    status: 'OK',
    name: file.filename,
    url: '/file/' + file.filename,
  });
});

測試一下，注意字段名稱應(yīng)為“file”，與后端保持一致。

05、托管靜態(tài)資源/部署網(wǎng)站

5.1、靜態(tài)資源托管

前面上傳了文件，那客戶端如何訪問靜態(tài)文件呢？官方文檔：利用 Express 托管靜態(tài)文件。

在Node中使用express自帶的靜態(tài)資源管理插件，即可托管靜態(tài)文件，如圖片、網(wǎng)頁文件等。因此不僅可以實現(xiàn)文件下載，還支持部署靜態(tài)網(wǎng)站。

// 使用內(nèi)置的“express.static”實現(xiàn)靜態(tài)文件代理，參數(shù)為資源地址。

//圖片靜態(tài)資源，第一個參數(shù)為url路由，“./file”為存放文件的文件夾
server.use('/file', express.static('./file')); 

這就完了？是的，很簡單！訪問一下試試：

http://localhost:3000/file/f1.jpg
http://localhost:3000/file/1676274037570-gif007.gif

5.2、部署網(wǎng)站/前端路由重定向

前面通過express.static可以托管靜態(tài)資源，也就意味著可以部署前端網(wǎng)站，可以把編譯好的管理后臺“book_admin”通過Node來部署試試。

//部署管理后臺網(wǎng)站
server.use('/bookadmin', express.static('./book_admin'));

登錄可用，頁面訪問正常！

刷新一下，糟了，出錯了，無法訪問此頁面~

?這是什么原因呢？

• Node后端只配置了路由地址“/bookadmin”，沒有配置“/bookadmin/home”的路由，后端就沒人響應(yīng)。
• “/home”是前端路由，前端路由vue-router使用的是history模式，如果用hash模式就沒問題。

?怎么解決？

• 方法1：前端路由改用hash模式，/bookadmin#home，hash值#home后端不會管，前端處理。
• 方法2：后端處理，重定向到單頁應(yīng)用的頁面即可。具體方式也有多個：
  • 方式1：引用組件“connect-history-api-fallback”解決。
  • 方式2：強(qiáng)制重定向到主頁面index.html，代碼如下：

//管理后臺"book_admin"的部署
//靜態(tài)資源
server.use('/bookadmin', express.static('./book_admin'));

const fs = require('fs')
const rpath = require('path')
//前端路由的重定向
server.get('/bookadmin/*', function(req, res) {
  const html = fs.readFileSync(rpath.resolve(__dirname, '../server/book_admin/index.html'), 'utf-8')
  res.send(html)
})

重啟node服務(wù)解決

D:\Project_Files\kwongGit\KWebNote\server>node index.js
服務(wù)器啟動成功，地址：http://localhost:3000

參考資料：

• Express 中文網(wǎng)
• NodeJS中使用SQLite3
• 還有一個更快的sqlite庫：better-sqlite3

??版權(quán)申明：版權(quán)所有@安木夕，本文內(nèi)容僅供學(xué)習(xí)，歡迎指正、交流，轉(zhuǎn)載請注明出處！原文編輯地址-語雀文章來源地址http://www.zghlxwxcb.cn/news/detail-508319.html

到了這里，關(guān)于圖書商城項目練習(xí)②后端服務(wù)Node/Express/Sqlite的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！