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

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...

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 3年前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 92

后台模板自己写的吗

3年前 评论

@doobi 基于 ELement 自己写的

3年前 评论
oyghan

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

3年前 评论

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

3年前 评论

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

3年前 评论

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

改为resources/js/config/index.js

3年前 评论
DianWang

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

3年前 评论

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

3年前 评论

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

3年前 评论
DianWang

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

3年前 评论

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

3年前 评论

@thinkvn9x 运行 mix 了吗?

npm run watch

npm run production

3年前 评论

@moell i runned but still error

3年前 评论

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

3年前 评论

@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')

3年前 评论

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

3年前 评论

@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

3年前 评论

给个 demo 就更好了

3年前 评论

按照你的步骤一步一步来,最后还是报错了。
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')
3年前 评论

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

3年前 评论

@moell thanks moell. i done .

3年前 评论

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

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

3年前 评论

@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.

3年前 评论

@青衣zyf laravel 什么版本

3年前 评论

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

3年前 评论

@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.
3年前 评论

@青衣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.*"
    },
3年前 评论

@moell 切回国际镜像就好了

3年前 评论

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

3年前 评论

@烟熏妆
初始化的时候获取当前用户所拥有的权限存放至 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>

你可以参考一下源代码

3年前 评论

界面有点丑了

3年前 评论
xingchen

搭了个架子,还没实质的功能
没响应式

3年前 评论

安装成功后,打开页面出现laravel 欢迎页面的?不管地址怎么改变,结果都一样

3年前 评论

@sniper 访问的是 http://localhost/mojito#/admin/login 吗?确认一下路由和模板是否存在。是否遗漏安装步骤

3年前 评论

访问的地址是对的,出现403,路由里面没有admin.php和控制器里面没有admin文件夹,安装步骤都是按照你的来的,安装的是laravel5.6

3年前 评论

@sniper 路由和控制器并不需要发布到你的项目目录下, 你按照流程重装一下吧, 应该是那里遗漏了。或者你给我更详细的问题描述。

3年前 评论

首先我先下载安装laravel5.6的,然后所有的步骤都已经按照你的来了,其他命令都没有报错,配置都是对的,我再重新试下,不能截图的吗

3年前 评论

安装好几遍了结果都是一样You don't have permission to access /mojito/ on this server.,403错误,配置都是对的

3年前 评论

@sniper 你安装应该没有问题,但是你的apache 配置可能有问题,问题参照

3年前 评论

登录不进去,求指导

file

3年前 评论

@zhuzhisen
需要配置密码授予客户端的 ID 和 secret 至 resources/config/index.js

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

配置后 npm run production

3年前 评论

登录有个Bug,要点击2次以上才能登录上去,主要原因是保存登录信息是异步的,导致跳转后路由检查登录信息失败,
resources/js/store/modules/login.js

const state = {
token: '',
provider: '',
status: false,
router: '',
}

const getters = {
token: state => state.token,
accessToken: state => state.token.access_token,
status: state => state.status,
router: state => state.router,
}

const mutations = {
SET_TOKEN(state, {token, provider}) {
state.token = token
state.provider = provider
},
SET_STATUS(state, status) {
state.status = status
},
SET_ROUTER(state, router) {
state.router = router
}
}
const actions = {
loginHandle({commit}, {username, password, clientId, clientSecret, provider}) {
commit('SET_STATUS', true)
return new Promise((resolve, reject) => {
login(arguments[1]).then(response => {
/const token = {
...response.data,
created_at: new Date().getTime()
}
/
commit('SET_TOKEN', {
token: {
...response.data,
created_at: new Date().getTime()
}, provider
})
resolve()
}).catch(error => {
reject(error)
})
})
},
aa() {
console.log(2222);
}
,
logoutHandle({commit}, provider) {
return new Promise((resolve, reject) => {
removeToken(provider)
})
}
}
改成这样

3年前 评论

resources/js/store/plugin.js
const subscribe = (store) => {
store.subscribe((mutation, state) => {
switch (mutation.type) {
case 'SET_TOKEN':
setToken(state.login.token, state.login.provider).then(token => {
if (state.login.status) {
state.login.status = false;
state.login.router.push({
name: 'adminDashboard'
})
}
})
setHttpToken(state.login.token.access_token)
break;
case 'SET_PERMISSIONS':
setPermissions(state.permission.permissions, state.login.provider)
break;
}
})
}

3年前 评论

resources/js/views/admin/login/index.vue

submitForm(formName) {
this.$store.commit('SET_ROUTER', this.$router)
this.$refs[formName].validate((valid) => {
if (valid) {
this.loginHandle({
...this.ruleForm,
...this.$config[this.$provider].authorize,
provider: this.$provider
}).then(result => {

                    })
                }
            });
        },
3年前 评论

才接触vue 时间不长,可能有些地方不够好,可能有更好的地方,希望大家补充吧

3年前 评论

@ppc_dea 已修复,谢谢反馈

3年前 评论

首先谢谢作者分享这样棒的一个项目:
在安装中遇到了问题
我使用的是windows子系统ubuntu中的docker环境,将所有配置好后执行:

npm run watch

npm run production
之后就卡在这一步了
如何在windows浏览器中访问(主要是如何查看npm run production后自动打开浏览器的路径-端口)

3年前 评论

@yunniyutu windows 你通过IP或者你设置的host直接访问项目,没有其他区别吧 。

3年前 评论

@moell 今天遇见一个问题 页面很多 都引用 import {hasPermission} from '../../../libs/permission' 到这导出import store from '../store' 过多,编译的时候一只停止在70% , 建议 在admin.js 最下面加入
Vue.prototype.hasPermission = function (name) {
return store.getters.permissions.indexOf(name) >= 0
}
其他地方通过this.hasPermission('xxxx');调用

2年前 评论

@ppc_dea 多谢反馈, 你们大概多少页面 。

2年前 评论

@moell
在你的基础上加了5个页面

file

每个页面都引入下面
import {hasPermission} from '../../../libs/permission'
就会很长时间停留下面的截图
file

2年前 评论

@ppc_dea 会不会是其他原因,我这里有项目有几十个页面 。没出现这样的问题, 并且我个人的理解,虽然多次import ,打包应该只编译一次吧?

2年前 评论

@moell 我挨个排查的 吧 import {hasPermission} from '../../../libs/permission' 去掉加载就快了

2年前 评论

@moell 你用你最新发布试试,以前版本我也没有问题,用你新版的有这个 问题,新加7个页面

2年前 评论

@ppc_dea 你laravel_mix,npm, node ,laravel 等各环境分别是什么版本? 我重现一下看看 。

2年前 评论

laravel_mix 4.0.7
npm 6.3.0
node 9.3.0
laravel 5.7
@moell

2年前 评论

@ppc_dea 太感谢了 困扰我多天的问题 终于解决了

2年前 评论

安装成功后登陆接口出现 http://www.mem.com/api/permission-user-all 报错
Type error: Argument 1 passed to Illuminate\Auth\Middleware\Authenticate::authenticate() must be of the type array, object given, called in F:\project\laravel56\vendor\smartins\passport-multiauth\src\Http\Middleware\MultiAuthenticate.php on line 8

http://www.mem.com/api/my-menu
Type error: Argument 1 passed to Illuminate\Auth\Middleware\Authenticate::authenticate() must be of the type array, object given, called in F:\project\laravel56\vendor\smartins\passport-multiauth\src\Http\Middleware\MultiAuthenticate.php on line 83"
trace: [{,…},…]

2年前 评论

@sniper 是否是版本选中的问题

Laravel 5.5, 5.6选择1.0. ,5.7 选择 1.1.

2年前 评论

问题解决了,你这个后台能全部替换中文的吗

2年前 评论

@sniper 修改config/index.js locale即可

2年前 评论

改成cn还是英文的吗,还是说其它的

2年前 评论

新人求教,我在解决admin_menu查询到菜单数据后却无法显示的问题时(由于element版本更新后,为支持树类型的数据必须要指定 row-key)
在校验过homestead与宿主机时间,关闭opcache,view:clear,cache:clear,清除浏览器缓存后,我对视图做了修改后视图页面仍然没有变化请问是为什么

file

2年前 评论

左边的菜单栏主题颜色怎么改呢,不太懂vue

2年前 评论

请问大佬 有没有人做过左边菜单栏没权限就不显示呢

2年前 评论

@davy2018666 菜单可以在菜单管理进行权限的关联, 未关联默认会显示的。

2年前 评论

@sniper
components/Layout/NavBar.vue

file

2年前 评论

谢谢大佬@moell

2年前 评论

@moell 你好 我这里遇到一个问题

file

file

file
我看了你上面的解决方法,但是我已经配置了index.js,如下

file
但是仍然没有解决这个问题

2年前 评论

@DrakedogGG 这是OAuth2.0 的 密码授权模式,你应该是配置错了。 你可以使用 php artisan passport:client --password来生成,或者使用数据库中 name='Laravel Password Grant Client' 的秘钥, 这是 php artisan passport:install 生成的

2年前 评论

@moell 谢谢 我已经解决了 好像是npm run production没有生效的原因
我有一个疑问

file
请问这个guard_name是用来做什么的 很多表都有这个字段 但是好像是写死在这里的?

2年前 评论

@DrakedogGG 为了实现passport 可以多表鉴权

2年前 评论
DrakedogGG 2年前

@moell 这个菜单使用的图标库是什么图标库 我搜索了一下mofont没有搜索到呢

2年前 评论
2年前 评论
DrakedogGG 2年前
moell (作者) (楼主) 2年前
DrakedogGG 2年前
moell (作者) (楼主) 2年前

怎么定制图标呢?文档上没有写

1年前 评论

@DrakedogGG 怎么定制图标呢?

1年前 评论

已经换成elemntui 图标啦

1年前 评论

大佬 这个可以换成jwt吗

1年前 评论

大佬给个联系方式呗

1年前 评论

@DrakedogGG 你解决了 登录不进去的问题是吗 我这边也修改了那个config文件 但是还是不行 想问下如何操作的

8个月前 评论

1.0.8版本 执行php artisan db:seed --class="Moell\Mojito\Database\MojitoTableSeeder" 数据填充报错 In MojitoTableSeeder.php line 215: Call to undefined method Illuminate\Foundation\Application::truncate()

8个月前 评论

@周小云 laravel 什么版本,使用 mojito 2.0.1 版本吧 github.com/moell-peng/mojito

8个月前 评论
周小云 8个月前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!