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

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

本帖由系统于 2个月前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 55
doobi

后台模板自己写的吗

2个月前

@doobi 基于 ELement 自己写的

2个月前

老铁可以的

2个月前

@右耳聆听心的声音 :blush: 谢谢

2个月前
oyghan

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

2个月前

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

2个月前

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

2个月前

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

改为resources/js/config/index.js

2个月前

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

2个月前

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

2个月前

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

2个月前

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

2个月前

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

2个月前

@thinkvn9x 运行 mix 了吗?

npm run watch

npm run production

2个月前

@moell i runned but still error

2个月前

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

2个月前

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

2个月前

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

2个月前

@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

2个月前

给个 demo 就更好了

2个月前

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

@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个月前
waney
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 切回国际镜像就好了

2个月前

您好,想问下您做权限管理这块的思路,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>

你可以参考一下源代码

1个月前
Janpun

界面有点丑了

1个月前

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

1个月前

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

1个月前

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

1个月前

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

1个月前

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

1个月前

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

1个月前

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

1个月前

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

1个月前

666

1个月前

登录不进去,求指导

file

1个月前

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

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

配置后 npm run production

1个月前

@lovecn :smile:

1个月前
HI

@Vanry 嘿嘿

2周前

登录有个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)
})
}
}
改成这样

2周前

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;
}
})
}

2周前

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 => {

                    })
                }
            });
        },
2周前

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

2周前

@ppc_dea 已修复,谢谢反馈

2周前

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

npm run watch

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

1周前

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

1周前

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