通用后台管理系统(一)——项目介绍

news/2024/12/22 15:30:23/


目录

二、文档结构

 src文件夹:

三、技术和插件

1、Vue router

2、element-ui框架

3、样式插件less

4、vuex状态管理

5、axios.js

6、mock.js模拟数据

7、echarts图表工具

四、项目效果展示

总结


一、项目介绍

        通用后台管理是采用vue2+cli开发的项目,通过mock模拟后端数据,前端完成数据的渲染。本项目使用vue router实现各个页面的路由跳转,采用vuex状态管理器管理各个页面之间的数据传递问题,采用axios技术发出请求和接收请求。


二、文档结构

 src文件夹:

  • assests:存放图片资源

  • components:通用组件,比如左侧导航菜单组件,header组件等

  • router:路由管理

  • views:存放页面组件

  • store:为处理组件之间的通信问题,异步处理问题,引入Vuex

  • utlis:存放工具,比如axios封装请求

  • api:存放后端的接口


三、技术和插件

1、Vue router

官网:安装 | Vue Router

官网:Vue Router | Vue.js 的官方路由

2、element-ui框架

element2官网:Element - The world's most popular Vue UI framework

element3官网:一个 Vue 3 UI 框架 | Element Plus

3、样式插件less

官方文档:Less 快速入门 | Less.js 中文文档 - Less 中文网

4、vuex状态管理

官网:Vuex 是什么? | Vuex

5、axios.js

官网文档:Axios.JS 中文文档

6、mock.js模拟数据

官网文档:Axios.JS 中文文档

7、echarts图表工具

官方文档:Apache ECharts


四、项目效果展示

1、登录页面:

2、管理员身份

管理员账号:admin

密码:123

首页:

用户管理界面

新增用户:

编辑用户:

3、普通用户身份

普通用户账号:abc

密码:111

首页:


总结

        以上就是通用后台管理的项目介绍以及技术介绍。


http://www.ppmy.cn/news/1471967.html

相关文章

Memcached介绍和详解

Memcached介绍和详解 一、基本概念 Memcached是一个高性能的分布式内存对象缓存系统,主要用于加速动态Web应用。它通过在内存中存储数据来减少数据库查询次数,从而提高网站的响应速度。Memcached可以缓存数据库查询结果、API调用数据以及任何可以通过键…

【智能算法应用】麻雀搜索算法在物流配送中心选址的应用(无待选配送中心)

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法(SSA)原理及实现 2.数学模型 模型假设 待定物流配送中心的库存总能满足需求点的需求不考虑从工厂到待定物流配送中心的运输成本不考虑选定区域内待确定…

【绝对有用】C++ 实现 计算机视觉任务-yolo目标检测 NMS

为了在C中实现非极大值抑制&#xff08;NMS&#xff09;&#xff0c;我们需要以下步骤&#xff1a; 定义边界框和置信度的结构。实现计算IoU的函数。实现NMS的函数。 下面是一个完整的C代码示例&#xff1a; 完整的C代码实现NMS #include <algorithm> // std::max, s…

【问题】Ubuntu下使用ftp命令下载文件

Ubuntu下使用ftp命令下载文件具体的方法示例如下: $ ftp 192.168.180.3 Connected to 192.168.180.3. Name (192.168.180.3:test): 此处输入用户名 Password:此处输入对应的密码 /*查看当前路径*/ ftp> pwd 257 "/" is current directory. ftp> cd test …

linux基于wifi,Xshell的远程连接

最近有个比赛&#xff0c;要使用ros小车但是系统是ubuntu20.04无桌面系统刚开始接触linux的我啥都不会&#xff0c;就一个简单的连接wifi都搞了3天才搞通。再此进行一个总结。参考博客原文链接&#xff1a;https://blog.csdn.net/qq_51491920/article/details/126221940 一、什…

【408考点之数据结构】树与二叉树的应用

树与二叉树的应用 一、树与二叉树的基本应用 树和二叉树是数据结构中的重要组成部分&#xff0c;具有广泛的应用。以下是树和二叉树的一些基本应用&#xff1a; 表达式树&#xff1a;用于表示算术表达式&#xff0c;其中叶节点是操作数&#xff0c;内部节点是运算符。霍夫曼…

BUG: gradio RuntimeError: async generator raised StopAsyncIteration

BUG: gradio RuntimeError: async generator raised StopAsyncIteration 环境 gradio 4.20.0详情 在使用gradio编写大模型可视化demo的时候&#xff0c;大模型正常输出&#xff0c;但gradio弹出此错误。 经过排除&#xff0c;发现是返回方式的问题&…

干货:ANR日志分析全面解析

ANR类型 出现ANR的一般有以下几种类型&#xff1a; 1:KeyDispatchTimeout&#xff08;常见&#xff09; input事件在5S内没有处理完成发生了ANR。 logcat日志关键字&#xff1a;Input event dispatching timed out 2:BroadcastTimeout 前台Broadcast&#xff1a;onReceiver在…