管理系統全棧開發設計思路
一、組成部分
後端+前端
二、server後端設計
（一）、www-> app.js-> router-> model -> config
（二）、資料庫連接配接失敗
（1）、排除思路：mongodb資料庫安裝失敗
（2）背景資料庫也顯示連接配接失敗
解決辦法見上一篇文章，重新安裝一次添加連結描述
（三）、token認證，使用jwt技術，jwt技術實作token認證技術的一種技術方案
【前提】：
1.介紹：
1.1令牌身份認證[令牌]是服務端對用戶端請求進行身份檢查的一種技術；
1.2使用者登入成功後，服務端會生成令牌響應給用戶端；用戶端後續請求必須攜帶此令牌，服務端擷取令牌進行身份認證判斷，确定該請求為正确請求後，才響應請求資料.
2.前端實作思路：
2.1使用者登入成功，儲存服務端響應的令牌到本地
2.2在AXIOS攔截器中設定令牌到授權請求頭
3.後端實作思路：
3.1判斷使用者登入成功，生成令牌，響應給使用者
3.2攔截需要身份認證的所有請求，擷取用戶端發送的授權請求頭進行令牌驗證
（1）、下載下傳npm i jsonwebtoken
（2）、時序圖
（1）、服務端
（2）、用戶端(便捷版)request.js
上圖備注：在用戶端登入時候将token儲存在本地的localstorage,之後的左側menu可以使用token
（3）封裝生成和認證token代碼
const jwt = require(‘jsonwebtoken’) //引入jwt庫
const tokenSecrit = ‘token-20220612’
const Token = {
decrypt: function (token) {
try {
let data = jwt.verify(token, tokenSecrit)
return {
token: true,
}
} catch (error) {
return {
token: false,
data:error
}
}
},
}
module.exports = Token
（4）、攔截所有請求進行認證
const express = require(‘express’);
const bodyParser = require(‘body-parser’) //bodyParser
const cors = require(‘cors’) //cors
const jwtToken = require(‘./utils/jwtUtil’) //token認證工具子產品
//引入Router路由子產品
const indexRouter = require(‘./routes/index’);
const usersRouter = require(‘./routes/users’);
const memberRouter = require(‘./routes/member’)
const productRouter = require(‘./routes/product’)
//express執行個體化
const app = express();
//use
app.use(bodyParser.json()); //解析json
app.use(bodyParser.urlencoded({ extended: false })); //解析數值對
app.use(cors()) //解決亂碼
app.use(express.static(‘public’)); //内置托管靜态檔案
let token = null
//1.是否存在token
if(req.headers.authorization){
token = req.headers.authorization
}
//2.驗證token正确性
let data = jwtToken.decrypt(token)
if(data.token){
res.send({
resultCode:1,
resultInfo:‘token在服務端認證成功>>>’
})
next()
}else{
res.send({
resultCode:-1,
resultInfo:‘token在服務端認證失敗>>>’
})
}
})
//子產品化
app.use(‘/’, indexRouter);
app.use(‘/api/user’, usersRouter);
app.use(‘/api/member’,memberRouter)
app.use(‘/api/product’,productRouter)
//暴露
module.exports = app;
（5）、前端需要認證的接口設定頭，便捷方式是：使用axios封裝好的請求攔截器axiosServer.interceptors.request.use
const axiosServer = axios.create({
baseURL: ‘http://10.7.173.85:3000’,
timeout: 2000,
})
// 請求攔截器
axiosServer.interceptors.request.use(
function (config) {
console.log(‘發送請求之前，執行這裡的代碼’);
// 發送請求之前，執行這裡的代碼
// 在請求攔截器
// 将登入成功儲存的token設定到authorization請求頭，發送給後端
// 1. 擷取登入成功儲存的token
let token = localStorage.getItem(‘TOKEN’)
token = JSON.parse(token)
if (token) {
// 2. 設定到authorization請求頭
config.headers.common[‘authorization’] = token
}
return config
},
function (err) {
//處理請求錯誤
return Promise.reject(err)
}
)
// axiosServer({
// method: ‘get’,
// url: ‘/product/list’,
// }).then(res=>{
// console.log(res)
// }).catch(err=>{
// console.log(err)
// })
（6）、前端需要認證的接口設定頭，一般方式是：這需要每一個axios請求都加一個headers,(headers: { authorization: token }, // token設定)
// 擷取登入時儲存的token
let tokenStr = localStorage.getItem(‘TOKEN’)
let token = JSON.parse(tokenStr)
axios({
method: 'get',
url: 'http://10.7.173.110:3000/product/list',
headers: { authorization: token }, // token設定
}).then(res => {
let { data } = res
if (data.code == 1) {
let list = data.message.list
showProductList(list)
}
})
（四）、使用者資訊安全方面的密碼，采用sha256不可逆加密算法
三、client前端設計
（一）、register注冊界面
伺服器響應注冊資訊
（二）、login登入界面
（三）、index首頁
（四）、商品管理
(1)、商品清單
(2)、添加商品接口
（五）、訪客管理
(3)、訪客清單
(4)、添加訪客接口
（六）、會員管理
(5)、會員清單
(6)、添加會員接口
（七）、背景根據接口也會傳回資料，以下是一些片段，根據後端接口的定義
此處是我自己定義的：