运维开发网

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

运维开发网 https://www.qedev.com 2021-02-26 09:19 出处:51CTO 作者:mb5fd86dae5fbf6
今天分享的源码是我很早之前gitee上开源的一个管理后台模版,是基于vue和elementUI的一个基础版,技术栈使用:vue2+vuex+vue-router+webpack+ES6/7+axios+elementUI+阿里图标iconfont,可以说基本上使用了vue全家桶,对新手来说,是个不错的上手项目。体验地址https://nmgwap.gitee.io/vueproject/#/log

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

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

体验地址

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方法去掉模拟数据,取消注释的请求方法。

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

5 源码

码云(gitee)

https://gitee.com/nmgwap/vueproject

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

这个版本开源的比较早,项目规整也不是很成熟,适合练手, 下期分享另外开源的基于vue+Ant Design管理平台。支持多语言及动态修改主题。 有兴趣的可以关注下。

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号