源码分享-基于vue+elementUI后台管理系统

简介: 源码分享-基于vue+elementUI后台管理系统

今天分享的源码是我很早之前gitee上开源的一个管理后台模版,是基于vue和elementUI的一个基础版,技术栈使用:vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont,可以说基本上使用了vue全家桶,对新手来说,是个不错的上手项目。

网络异常,图片无法展示
|

体验地址

https://nmgwap.gitee.io/vueproject/#/login

这是一个纯前台的(不包括接口API)的界面,项目中的数据皆为假数据,没有使用插件mock,但是增删改查功能已开发完成,只需按照假数据格式返回数据编写API即可

1 完成功能

登录 -- 完成

路由拦截 -- 完成

商品管理(增加、编辑、搜索、删除) -- 完成

角色管理(增加、编辑、搜索、删除、权限管理) -- 完成

交易订单(增加、编辑、搜索、删除) -- 完成

用户管理(增加、编辑、搜索、删除、数据权限、刷新缓存) -- 完成

支付配置(增加、编辑、搜索、删除) -- 完成

系统环境变量(增加、编辑、搜索、删除) -- 完成

权限管理(增加、编辑、搜索、删除、配置权限) -- 完成

菜单管理(增加、编辑、搜索、删除) -- 完成

公司管理(增加、编辑、搜索、删除) -- 完成


2 目录结构

首先,我们熟悉下目录结构。

├── /build/          # 项目构建(webpack)相关配置
├── /config/         # 项目开发环境配置
├── /src/            # 源码目录
│ ├── /api/          # 请求
│ ├── /assets/       # 组件静态资源(图片)
│ ├── /components/   # 公共组件
| ├── /api/          # 请求接口
│ ├── /router/       # 路由配置
│ ├── /vuex/         # vuex状态管理
│ ├── /views/        # 路由组件(页面维度)
│ ├── /config/       # 接口配置文件(请求地址)
│ ├── App.vue        # 组件入口
│ └── main.js        # 程序入口
├── /static/         # 非组件静态资源
├── .babelrc         # ES6语法编译配置
├── .editorconfig    # 定义代码格式
├── .eslintignore    # ES6规范忽略文件
├── .eslintrc.js     # ES6语法规范配置
├── .gitignore       # git忽略文件
├── index.html       # 页面入口
├── package.json     # 项目依赖
└── README.md        # 项目文档

复制

一个标准的项目结构,目录及项目中的作用一一对应。


3 运行项目

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test

复制


4 对接后台

在config/index.js配置后端接口代理(只适用开发环境)

dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://xxx.xxx.xxx.xxx:xxx', // 你请求的第三方接口
            changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: { // 路径重写,
                '^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
            }
        }
    },
},

复制

在src/api下,新建文件或者修改已有文件,配置接口请求地址

import axios from 'axios';
import { req } from './axiosFun';
/**
 * 商品管理
 **/
// 商品管理-获取商品管理列表
export const GoodsList = (params) => { return req("post", "/api/Goods/list", params) };
// 商品管理-保存商品管理
export const GoodsSave = (params) => { return req("post", "/api/Goods/save", params) };

复制

在views/模块(如goods)/.vue文件里,getdata方法去掉模拟数据,取消注释的请求方法。

image.png


5 源码

码云(gitee)

https://gitee.com/nmgwap/vueproject

如果没有码云账号的话,提供网盘下载,获取回复关键字【管理平台源码】

相关文章
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
342 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
318 137
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
459 1
|
5月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
285 0
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
827 0
|
8月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
1067 4
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
923 77
|
8月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
497 17