【vue3-pbstar-admin】一款基于vue3和nodejs的简洁后台管理系统

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启动后端服务器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 学习笔记(JS进阶 Day1)

「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. JavaScript 学习笔记&#xff08;Day1&#xff09; 2. JavaSc…

MYSQL数据库详解(6)-- 视图存储方式触发器

MYSQL数据库详解&#xff08;6&#xff09; 视图特征&#xff1a;作用&#xff1a;创建视图使用视图删除视图 存储过程 ***为什么使用存储过程定义&#xff1a;存储过程和函数的区别缺陷&#xff1a;创建存储过程使用存储过程环境变量 局部环境变量 全局环境变量删除存储过程…

【linux】查看进程和子进程

在Linux系统中&#xff0c;可以使用多个命令来查看进程及其子进程。以下是一些常用的方法&#xff1a; 1. ps 命令 ps 命令用于显示当前进程的状态。可以结合不同的选项来查看进程及其子进程。 查看进程树&#xff1a; ps -auxf - -a 显示所有进程。 - -u 显示进程的用户/所…

上门服务小程序|预约上门服务系统开发有哪些功能?

在现代快节奏的生活中&#xff0c;压力和疲劳常常困扰着我们。为了缓解这种状况&#xff0c;越来越多的人选择去按摩店进行放松。然而&#xff0c;繁忙的工作和家庭责任往往让我们无法抽出时间去按摩店。在这种情况下&#xff0c;上门按摩服务应运而生。而随着科技的发展&#…

css实现右边边框分割线 渐变色,边框四角样式

分割线 代码 .data-item:first-of-type {border-right: 2px solid;border-image: linear-gradient(to top,rgba(0, 0, 0, 0.1) 0%,rgba(81, 110, 197, 0.76) 50%,rgba(0, 0, 0, 0.1) 100%)1;padding: 15px 0;}四角边框样式 代码 .chart-box {cursor: pointer;background: line…

Tomcat Notes: Web Security, HTTPS In Tomcat

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、Overview2、Two Levels Of Web Securi…

Linux浅学笔记02

目录 grep-wc-管道符 echo-tail-重定向符 vi编辑器 grep-wc-管道符 grep命令(过滤文件内容) //更准确的来说&#xff0c;是筛选包括“所需字符”的一句内容或多句内容。 语法&#xff1a;grep [-n] 关键字 文件路径 //-n&#xff1a;可选&#xff0c;表示在结果中匹配的行…

Vue2 - keep-alive 作用和原理

目录 1&#xff0c;介绍和作用2&#xff0c;原理3&#xff0c;使用场景3.1&#xff0c;效果展示3.2&#xff0c;实现思路 1&#xff0c;介绍和作用 <!-- 非活跃的组件将会被缓存&#xff01; --> <keep-alive><component :is"activeComponent" />…

Gaia盖亚星表数据下载

【中国虚拟天文台 China-VO Data Access Server】 [Home] https://das101.china-vo.org/ [Gaia EDR3] https://das101.china-vo.org/edr3/index.html https://das101.china-vo.org/edr3/gaia_sources/index.html [gaia dr1] https://das101.china-vo.org/mirrors/gaia/dr1/i…

【Golang入门教程】如何使用Goland创建并运行项目

自然语言处理的发展 文章目录 自然语言处理的发展**前言**创建新项目编辑运行/调试配置编写并运行代码总结强烈推荐专栏集锦写在最后 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站: 人工…

【边缘计算】TA的基本概念,以及TA的挑战和机遇

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读文章&#xff01; 此篇是【话题达人】序列文章&#xff0c;这一次的话题是《边缘计算的挑战和机遇》 文章将以博主的角度进行讲述&#xff0c;理解和水平有限&#xff0c;不足之处&#xff0c;望指正。 目录 背景基本概念挑战…

使用DBSyncer同步Oracle11g数据到Mysql5.7中_实现全量数据同步和增量数据实时同步_操作过程---数据同步之DBSyncer工作笔记007

之前都是用mysql和Postgresql之间进行同步的,已经实现了数据的实时同步,现在要实现Oracle数据库到Mysql数据库的全量,以及增量同步. 因为之前配置的不对,这里架构名写成了orcl,所以导致,虽然能连接上,但是,在进行数据同步的时候,看不到表,所以这里说一下如何进行连接 这里,首先…

socket以及字节序

1. socket 介绍&#xff1a; 简介&#xff1a; 所谓 socket&#xff08; 套接字&#xff09;&#xff0c;就是对网络中不同主机上的应用进程之间进行双向通信的 端点的抽象。 一个套接字就是网络上进程通信的一端&#xff0c;提供了应用层进程利用网络协议交换数据的机制。从所…

Vulnhub靶机:FunBox 5

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;FunBox 5&#xff08;10.0.2.30&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/funb…

diffusion 和 gan 的优缺点对比

sample速度GAN更快&#xff0c;Diffusion需要迭代更多次。 训练难度GAN 的训练可能是不稳定的&#xff0c;容易出现模式崩溃和训练振荡等问题。Diffusion 训练loss收敛性好&#xff0c;比较平稳。 模拟分布连续性Diffusion相较于GAN可以模拟更加复杂&#xff0c;更加非线性的分…

C# 将HTML网页、HTML字符串转换为PDF文件

将HTML转换为PDF可实现格式保留、可靠打印、文档归档等多种用途&#xff0c;满足不同领域和情境下的需求。本文将通过以下两个示例&#xff0c;演示如何使用第三方库Spire.PDF for .NET和QT插件在C# 中将Html 网页&#xff08;URL&#xff09;或HTML字符串转为PDF文件。 HTML转…

引领AI变革:边缘计算与自然语言处理结合的无尽可能

引言 讲到Ai&#xff0c;你第一时间会想到什么&#xff1f;是Chagpt和文心一言这样与人类交流自然的Ai生成式对话服务&#xff1f;还是根据关键字快速制图的Ai绘图&#xff1f;这些都是近年来人们所常知的Ai用途&#xff0c;我们今天来讲讲以自然语言处理为辅&#xff0c;在Ai赋…

在 Python 中使用 OpenCV 通过透视校正转换图像

在计算机视觉和图像处理领域&#xff0c;透视变换是一个强大的工具。它允许我们改变图像的视角以获得新的视点&#xff0c;通常用于校正扭曲或模拟不同的相机角度。本文将探讨一个 Python 脚本&#xff0c;该脚本使用计算机视觉领域流行的 OpenCV 库对图像执行透视变换。我们将…

01-TiDB概述

分布式关系型数据库 1、支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) &#xff1a;OLTP (Online Transactional Processing)、OLAP (Online Analytical Processing)解决方案 2、无限制的水平扩容或者缩容 3、兼容MySQL &#xf…

openresty 安装, nginx与 openresty

openresty VS nginx Nginx 是一款高性能的 Web 服务器和反向代理服务器&#xff0c;具备基础的功能如HTTP服务、负载均衡、反向代理以及动静分离等。它是许多互联网应用的核心组件&#xff0c;因其模块化和可扩展的设计而受到欢迎。1 OpenResty 是基于 Nginx 的 Web 平台&…