moell/mojito - 基于 Laravel、Vue、ELement 构建的基础后台系统扩展
64

Mojito

Mojito 是一个基于 Laravel, Vue, Element构建的后台管理系统。

截图

获取地址

https://github.com/moell-peng/mojito 欢迎使用和star

特征

  • 可快速衍生多个后台系统
  • 内置角色,权限,用户,菜单管理
  • OAuth 2.0,并支持多表鉴权
  • 完善的PHPUnit测试
  • API 权限精确至路由,页面权限精取到按钮或链接
  • 前后端分离
  • 多标签页
  • 前端支持多语言配置
  • 简洁的布局

Demo

url: http://mojito.moell.cn/mojito#/admin/login
username: mojito@gmail.com
password: mojito-demo

要求

  • Laravel >= 5.5.0
  • Vue >= 2.5.17
  • Element >= 2.4.6

兼容性

Laravel Mojito
5.5, 5.6 1.0.*
5.7 1.1.*

安装

首先安装laravel,并且确保你配置了正确的数据库连接。

composer require moell/mojito

然后运行下面的命令来发布资源:

php artisan mojito:install

命令执行成功会生成配置文件,数据迁移和构建SPA的文件。

config/auth.php中添加相应的 guards 和 providers,如下:

'guards' => [
        ...
        'admin' => [
            'driver' => 'passport',
            'provider' => 'admin'
        ]
    ],

'providers' => [
        ...
        'admin' => [
            'driver' => 'eloquent',
            'model' => \Moell\Mojito\Models\AdminUser::class,
        ]
    ],

app/Http/Kernel.php 中 $routeMiddleware 属性添加路由中间 oauth.providersmojito.permission,并将auth中间件替换为如下:

class Kernel extends HttpKernel
{
    protected $routeMiddleware = [
        // 'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth' => \SMartins\PassportMultiauth\Http\Middleware\MultiAuthenticate::class,
        'oauth.providers' => \SMartins\PassportMultiauth\Http\Middleware\AddCustomProvider::class,
        'mojito.permission' => \Moell\Mojito\Http\Middleware\Authenticate::class,
    ];
}

执行数据迁移,数据填充

php artisan migrate

php artisan db:seed --class="Moell\Mojito\Database\MojitoTableSeeder"

Passport 安装和配置

php artisan passport:install

执行成功后获取到相应的密码授予客户端的 ID 和 secret 并且配置到相对应的 resources/config/index.js :

export default {
  admin: {
    authorize: {
      clientId: ID,
      clientSecret: secret
    }
}

安装 Javscript 依赖

npm install
npm install -D vuex@^3.0.1 vue-router@^3.0.1 vue-i18n@^8.1.0 localforage@^1.7.2 element-ui@^2.4.6

将 admin.js 添加到 webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    //.js('resources/js/admin.js', 'public/js') laravel5.7+
    .js('resources/assets/js/admin.js', 'public/js')

运行 Mix

#npm run watch
npm run production

登录

url: http://localhost/mojito#/admin/login

email: admin@gmail.com

password: secret

依赖开源软件

  • Laravel
  • Vue
  • Element UI
  • laravel/passport
  • smartins/passport-multiauth
  • spatie/laravel-permission
  • orchestra/testbench

License

Apache License Version 2.0 see http://www.apache.org/licenses/LICENSE-2.0.html

本帖由系统于 1周前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 34
doobi

后台模板自己写的吗

1周前

@doobi 基于 ELement 自己写的

1周前

老铁可以的

1周前
oyghan

喜欢篮球的程序员不会差,非常赞的一个项目:smile:

1周前

@oyghan 谢谢支持 :blush:, 新赛季又要开始了:smiley:

1周前

@moell 汗。你分享你的成果,谢个毛线哟!应该说谢谢的使我们

1周前

执行成功后获取到相应的密码授予客户端的 ID 和 secret 并且配置到相对应的 resources/config/index.js :

改为resources/js/config/index.js

1周前
DianWang

试用了下,界面很多东西完善点更好(比如自适应布局),希望博主持续更新,以后开放插件功能就是中国版的Nova了

1周前

@右耳聆听心的声音 感谢反馈,这里我纠正一下。这里因为5.7 路径变了, 所以当时没表述清楚

1周前

@DianWang 界面的问题能具体一些吗?

1周前
DianWang

@moell ,可以参照下这位大佬的http://vma.isocked.com/#/dashboard

6天前

ErrorException (E_ERROR)
Undefined index: /js/admin.js (View: D:\OSPanel\domains\mo.at\resources\views\dashboard.blade.php)
i use laravel 5.7

6天前

@thinkvn9x 运行 mix 了吗?

npm run watch

npm run production

6天前

@moell i runned but still error

6天前

@thinkvn9x 检查一下是否生成了admin.js ,还不行你升级到最新版本试试

5天前

@moell DONE Compiled successfully in 40960ms
but admin.js not have
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
//.js('resources/js/admin.js', 'public/js') laravel5.7+
.js('resources/assets/js/admin.js', 'public/js')

5天前

@thinkvn9x 5.7 版本,应该配置 .js('resources/js/admin.js', 'public/js') 而不是 .js('resources/assets/js/admin.js', 'public/js')

5天前

@moell
import Vue from 'vue'
import ElementUI from 'element-ui'
import i18n from './lang'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/ali-icon/iconfont.css'
import './assets/ali-icon/ali.css'
import './assets/css/mojito.css'
import App from './Admin.vue';

import router from './router'
import store from './store'
import config from './config'

Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})

Vue.prototype.$config = config
Vue.prototype.$provider = 'admin'
i18n.locale = config[Vue.prototype.$provider].locale ? config[Vue.prototype.$provider].locale : 'en'

/ eslint-disable no-new /
const app = new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.js('resources/js/admin.js', 'public/js')

but still error

5天前

给个 demo 就更好了

4天前

按照你的步骤一步一步来,最后还是报错了。
laravel version 5.7

file

就是 Mix 引入 admin.js 这个不是很明白
我的 admin.js 文件:

import Vue from 'vue'
import ElementUI from 'element-ui'
import i18n from './lang'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/ali-icon/iconfont.css'
import './assets/ali-icon/ali.css'
import './assets/css/mojito.css'
import App from './Admin.vue';
import mix from 'laravel-mix'

import router from './router'
import store from './store'
import config from './config'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.prototype.$config = config
Vue.prototype.$provider = 'admin'
i18n.locale = config[Vue.prototype.$provider].locale ? config[Vue.prototype.$provider].locale : 'en'

/* eslint-disable no-new */
const app = new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .js('resources/js/admin.js', 'public/js')
4天前

@thinkvn9x
@Stone007
不用去修改admin.js ,.js('resources/js/admin.js', 'public/js') 是添加到 webpack.mix.js 不是添加到admin.js 中

2天前

@moell thanks moell. i done .

2天前

@Vanry 新搭建的demo, 角色权限比较小

http://mojito.moell.cn/mojito#/admin/login
username: mojito@gmail.com
passoword: mojito-demo

2天前

@moell 安装的时候 Could not find a version of package moell/mojito matching your m inimum-stability (stable). Require it with an explicit version c onstraint allowing its desired stability.

2天前

@青衣zyf laravel 什么版本

2天前

@moell 5.5 ,5.6 都试了

2天前

@青衣zyf
composer.json 中加入 "moell/mojito": "1.0.*" ,然后composer update

2天前

@moell Your requirements could not be resolved to an installable set of packages.

Problem 1

  • The requested package moell/mojito could not be found in any version, there may be a typo in the package name.
2天前

@青衣zyf 你用laravel-china的镜像吧 。
composer.json 检测一下

"require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "moell/mojito": "1.0.*"
    },
2天前

@moell 切回国际镜像就好了

1天前

您好,想问下您做权限管理这块的思路,vue 这里如何和 laravel 搭配,谢谢

1天前

@烟熏妆
初始化的时候获取当前用户所拥有的权限存放至 vuex

vue-router 路由在meta添加permission属性来关联权限,在路由beforeEach中否有权限访问,如:

{
        name: 'adminUserIndex',
        path: 'admin-user',
        meta: {
          permission: 'admin-user.index'
          ...
        },
        ...
      },

一些操作判断。直接通过vuex存放的权限判断即可,如:

...
<el-button type="primary" v-if="addPermission"  @click="dialogAddFormVisible = true" icon="el-icon-plus">{{ $t('add') }}</el-button>
...
<script>
...
export default {
    name: 'roleIndex',
    computed: {
      updatePermission: function () {
        return hasPermission('role.update')
      },
      addPermission: function () {
        return hasPermission('role.store')
      },
    },
  }
</script>

你可以参考一下源代码

10小时前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!