运城网站建设维护wordpress 移动端网页
Vue3-pbstar-admin 是一个简洁的后台解决方案，提供了基础的用户体系和页面接口权限配置，方便用户进行自定义开发，避免不必要的代码冗余。该方案结合了 Vue3、Element-Plus、Pinia 和 Vite 等先进技术，实现高效的页面布局、状态管理和构建体验。同时，后端采用基于 Node.js 的 Express 框架和 MySQL 数据库，提供稳定的数据存储和高效的后台服务。
项目开始
项目GitHub地址： https://github.com/pbstar/vue3-pbstar-admin
项目演示地址： https://vue3-pbstar-admin.mcweb.club/
安装项目
1.nodejs环境要求
nodejs版本要求：18+
2.从GitHub上克隆项目
git clone https://github.com/pbstar/vue3-pbstar-admin.git
前端模块
1.进入项目目录
cd vue3-pbstar-admin
2.安装依赖
npm install
3.运行项目前端模块
npm run dev
4.打包项目前端模块
npm run build
后端模块
1.进入项目目录
cd vue3-pbstar-admin
cd server
2.配置数据库
导入db/v3_pbstar-admin.sql文件到数据库中
修改db/mysql.config.js文件中的数据库配置
3.安装依赖
npm install
4.运行项目后端模块
npm run start
项目目录结构
├── public # 静态资源
├── server # 服务端模块
│ ├── db # 数据库相关
│ ├── json # json文件
│ ├── logs # 日志
│ ├── module # 业务模块
│ ├── public # 前端服务器
│ ├── router # 路由
│ ├── units # 工具类
│ ├── package.json # package配置
│ └── app.js # 服务端入口文件
├── src # 源代码
│ ├── api # 接口
│ ├── assets # 静态资源
│ ├── components # 组件
│ ├── config # 配置文件
│ ├── router # 路由
│ ├── stores # 状态管理
│ ├── units # 工具类
│ ├── views # 所有页面
│ ├── App.vue # 根页面
│ └── main.js # 入口文件
├── .gitignore # git配置文件
├── index.html # html入口文件
├── vite.config.js # vite配置
└── package.json # package配置
项目前端
前端模块使用vue3 + vite + element-plus + axios + vue-router + pinia + sass
接口封装
1.axios封装
axios响应拦截器
主要处理请求异常后重复请求
axios.interceptors.response.use((response) => {return response
}, error => {var config = error.config;if (!config || !config.retry) return Promise.reject(error);config.__retryCount = config.__retryCount || 0;if (config.__retryCount >= config.retry) {alert('请求异常：' + error.message + '!')return Promise.reject(error);}config.__retryCount++;var backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});return backoff.then(function () {return axios(config);});
})
get、post请求封装
为了防止浏览器缓存，get请求的参数中添加一个时间戳；为了方便接口鉴权，post请求的参数中添加token。
function get(url, d) {NProgress.start()let data = new Object()if (d) data = ddata.axiosTime = new Date().getTime()return new Promise((resolve, reject) => {axios.get(baseURL + url, {params: data,}).then((response) => {NProgress.done()resolve(response.data);}).catch((err) => {NProgress.done()reject(err);});});
}
function post(url, d) {NProgress.start()let data = new Object()if (d) data = ddata.token = units.getLocalStorage('token')return new Promise((resolve, reject) => {axios.post(baseURL + url, data).then((response) => {NProgress.done()resolve(response.data);}).catch((err) => {NProgress.done()reject(err);});});
}
2.接口请求封装
将不同模块的接口请求封装成方法，统一调用。
import http from "@/api/http";export function getInfoByToken(e) {return http.get("/user/getInfoByToken", e)
}
组件封装
封装组件主要为了模块化和可复用性。例如将后台顶部和左侧菜单进行组件封装，使其模块更加独立。封装验证码组件，使其复用更加便利。
项目配置文件
export default {title: "初辰后台管理系统", //网站默认标题version: "2024.1.13.1", //版本号// baseUrl: "http://localhost:8091/api", //请求接口域名baseUrl: "", //请求接口域名timeOut: "10000", //请求超时时长proName:"vue3-pbstar-admin", //项目名称checkTokenTime: "600000", //检测token是否过期的最小时间间隔isLoginVerificationCode: true, //是否开启登录验证码
}
路由
1.前置路由守卫
前置路由守卫主要用来验证用户是否登录，以及验证用户是否有权限访问该页面。
router.beforeEach((to, from, next) => {if (to.matched.length > 0 && to.matched[0].name == "admin") {let token = units.getLocalStorage("token")if (!token) {toLogin(next)} else {if (lastRequestTime && new Date().getTime() - lastRequestTime < config.checkTokenTime) {toCheckAuthority(next, to)} else {lastRequestTime = new Date().getTime();toCheckToken(next, token, to)}}} else {NProgress.start()next()}
})
2.后置路由守卫
后置路由守卫主要用来处理路由跳转后页面标题的变化。
router.afterEach((to, from) => {NProgress.done()if (to.meta.title) {document.title = to.meta.title} else {if (to.matched[0] && to.matched[0].meta.title) {document.title = to.matched[0].meta.title} else {document.title = config.title}}
})
状态管理
状态管理主要用来存储一些全局变量，例如用户信息等。
import { ref } from 'vue'
import { defineStore } from 'pinia'export default defineStore('user', () => {let info = ref(null)function getInfo() {return info.value}function changeInfo(e) {info.value = e}return { getInfo, changeInfo }
})
工具类
工具类主要用来封装一些常用的函数，例如获取本地存储数据等。
export default {isMobile,strToBase64,base64ToStr,getLocalStorage,setLocalStorage,removeLocalStorage,clearLocalStorage,getRandomStr,formatDate
};
页面开发
页面开发主要用来开发前端页面，包括登录页面、后台页面、404页面等。
1.登录页面
登录页面主要用来处理用户登录逻辑，包括验证用户名和密码等。
2.后台页面
后台页面主要用来处理后台相关逻辑，包括获取用户信息、获取菜单列表等。
3.404、403页面
404、403页面主要用来处理页面不存在或权限不足等错误。
项目后端
后端模块使用Express框架+MySQL。
数据库
数据库采用MySQL。
mysql操作封装
const mysql = require('mysql');
const { access } = require('../units/log')
var databaseConfig = require('./mysql.config');
module.exports = {query: function (sql, callback) {var connection = mysql.createConnection(databaseConfig);connection.connect(function (err) {if (err) {return err;}connection.query(sql, function (err, results, fields) {if (err) {access('数据操作失败：' + sql)access(err)} else {callback && callback(results);}connection.end(function (err) {if (err) {return err;}});});});}
};
json存储
使用json文件来存储角色权限配置。
logs日志
在logs文件夹中记录所有操作日志。
业务模块
业务模块主要用来处理具体业务逻辑，例如用户模块等。
前端服务器
前端服务器主要用来渲染打包后的前端项目。前端执行npm run build命令后，会将打包后的文件放到public文件夹中。
路由设计
路由设计主要用来处理接口的路由。
路由中间件
路由中间件主要用来处理接口的权限验证、日志记录等。
const { access } = require('../units/log')
let user = require('../module/user')
module.exports = (req, res, next) => {if (req.method == 'POST') req.p = req.bodyelse if (req.method == 'GET') req.p = req.queryif (req.method == 'POST') {access({url: req.url,method: req.method,p: req.p})let whileList = ['/user/toLogin', '/user/logout']if (whileList.includes(req.url)) {next()} else {user.toCheckToken(req, res, next)}} else {next()}
}
工具类
公共方法
公共方法主要用来处理一些公共的函数，例如日期格式化、加密解密等。
module.exports = {strToBase64,base64ToStr,getRandomStr,formatDate
};
日志工具
日志工具主要用来记录日志信息。
const fs = require('fs')
const path = require('path')
const { formatDate } = require('./index')
// 写日志
function writeLog(writeStream, log) {writeStream.write(log + ' ' + formatDate(null, "YY-MM-DD hh:mm:ss") + '\n')
}function createWriteStream(fileName) {const fullWriteFilePath = path.resolve(__dirname, '../', 'logs', fileName)const writeStream = fs.createWriteStream(fullWriteFilePath, {flags: 'a'})return writeStream
}function access(log) {const accessWriteStream = createWriteStream(formatDate(null, "YYMMDD") + '.log')if (typeof log !== 'string') {log = JSON.stringify(log)}writeLog(accessWriteStream, log)}
module.exports = {access
}
项目部署
项目部署主要用来将项目部署到服务器上，包括配置服务器环境、安装依赖、启动项目等。
1.配置服务器node环境
2.前端npm run build打包前端代码到后端模块的前端服务器中
3.将后端模块部署到服务器上
4.npm i安装依赖
5.npm run start启动后端服务器