likes
comments
collection
share

优秀的你,才能遇到优秀的世界, Bag管理系统框架

作者站长头像
站长
· 阅读数 38

Bag快速开发管理系统、门户网站、博客系统框架,提供基础的框架,快速搭建企业产品,响应式开发,你可以将它应用在任何需要服务端管理的应用。如:开发管理系统的 API 接口、门户网站博客、企业内部的业务管理、ERP、CMS、APP 的后台等

技术选型

Bag管理系统采用Vue3、Vue-Router4、Vuex4、Ant-Design-Vue、Vite、TypeScript、Egg.js、Mysql构建

Bag门户博客前台采用Vue3、Vue-Router4、Vite 、Pinia、Element-plus、Equal-Vue、Bootstrap、Vite、TypeScript、Egg.js、Mysql构建,按需加载模块,内置丰富UI

安装

npm i vue-bag-admin --save

在线演示

管理员账户:用户名:admin ,密码:123456

超级管理员账户:用户名:superadmin ,密码:123456

文档地址管理系统演示门户博客前台演示

主要功能

  • 用户管理:系统管理员分配用户角色和角色权限
  • 角色管理:创建权限控制的主要对象,可以给角色分配不同api权限和菜单权限
  • 菜单管理:实现用户动态菜单配置,实现不同角色不同菜单
  • 富文本编辑器:MarkDown编辑器功能嵌入
  • 快速表单:一键开发CURD,配置化条件搜索示例
  • 快速API:基于Egg开发,增删改查API基本样列
  • 接口设计:模型创建,关联查询,一键接入
  • 权限指令:组件权限指令封装
  • 网络配置:基础axios封装,请求重连、错误取消,动态配置
  • 状态管理:丰富的Vuxe和Pinia任意选择
  • 路由配置:嵌套路由,动态路由可动态配置,快速呈现
  • 全局配置:站点基本配置背景图片、Login、Slogan等等
  • ......

快速开发

管理系统、门户博客前台代码都是同一安装包、使用同一个服务

适用人群

正在以及想使用框架快速开发网站系统,有过前端开发经验 1 年+

熟悉 Vue.js 技术栈,使用它开发过几个实际项目,热爱技术,爱学习,想进阶和提升的同学

环境

Vite官方文档Vite官方中文文档

Vite 需要 Node.js 版本 >= 12.2.0。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

1、Vite创建项目

安装Vue程序的模板,下一代前端开发与构建工具

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

2、Vue CLI创建项目

Vue CLI官方文档,Vue.js 开发的标准工具

npm install -g @vue/cli 
然后就可以使用vue命名
vue create my-vue-app

安装依赖

cd my-vue-app
npm install
安装cnpm

?> 如果安装过慢、使用cnpm安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
cd my-vue-app
cnpm install

配置服务代理

vite安装的项目, 打开vite.config.js

defineConfig({
    server: {
        host: '0.0.0.0',
        port: 8290,
        https: false,
        proxy: {
            '^/api': {
                target: 'http://127.0.0.1:8001', // 请看服务配置
                changeOrigin: true,
                rewrite: (path: any) => path.replace(/^/api/, '')
            },
        }
    }
})

vue-cli安装的项目,打开vue.config.js

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 8290,
        https: false,
        proxy: {
            '^/api': {
                target: 'http://127.0.0.1:8001', // 请看服务配置
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
        }
    }
}

管理端

App.vue


<template>
    <router-view></router-view>
</template>
<script>

</script>
<style>

</style>

main.js

import {createApp} from 'vue'
import App from './App.vue'
import install from 'vue-bag-admin'
import 'vue-bag-admin/mock/admin'
import 'vue-bag-admin/lib/style.min.css'

createApp(App).use(install).mount('#app')

启动项目

npm run dev

web端

App.vue


<template>
    <router-view></router-view>
</template>
<script>

</script>
<style>

</style>

main.js

import {createApp} from 'vue'
import App from './App.vue'
import install from 'vue-bag-admin/lib-web/index.es.js'
import 'vue-bag-admin/mock/index'
import 'vue-bag-admin/lib-web/style.min.css'

createApp(App).use(install).mount('#app')

启动项目

npm run dev

后台服务

点击下载Eggjs程序

安装依赖
npm install 

打开egg/config/config.default.js, 配置自己的数据库

module.exports = appInfo => {
    const config = {}
    config.sequelize = {
        dialect: 'mysql',
        host: 'x.xx.xx.xx',
        port: 3306,
        username: 'xxxxxxx', // 数据库用户名
        password: 'xxxxxxx', // 数据库密码
        database: 'xxxxxxx',
        define: { // model的全局配置
            timestamps: true, // 添加create,update,delete时间戳
            paranoid: false, // 添加软删除
            freezeTableName: true, // 防止修改表名为复数
            underscored: false, // 防止驼峰式字段被默认转为下划线
        },
    }
    return config
}
启动服务
npm run dev

版权信息

vue-bag-admin,是开源免费的,遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将它应用到您的产品中。

转载自:https://juejin.cn/post/7130254569388376078
评论
请登录