yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统

yylAdmin

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第1张图片

码云:https://gitee.com/skyselang/yylAdmin

Github:https://github.com/skyselang/yylAdmin

演示

地址:yylAdmin demo

账号:yyladmin、admin

密码:123456

提示:演示账号只有部分权限,请下载源码安装体验全部功能

简介

yylAdmin是一个极简后台管理系统,只有登录退出、权限管理、日志管理等基本功能,方便扩展;前后端分离,后端采用ThinkPHP6,前端采用Vue2;项目由后端yylAdmin和前端yylAdminWeb组成。

yylAdmin

yylAdminWeb

准备

PhpStudy

Git

Node

Composer

ThinkPHP

Vue

Element

要求

PHP >= 7.1

MySQL >= 5.6

Redis

安装

PHP部分

# 克隆项目

git clone https://gitee.com/skyselang/yylAdmin.git

# 进入项目目录

cd yylAdmin

# 安装依赖

composer install

# 可以通过composer镜像解决速度慢的问题

composer config-grepo.packagist composer https://mirrors.aliyun.com/composer

/# 导入数据库

数据库文件:public/private/yyladmin.sql

# 配置

重命名.env.example为.env,修改里面配置或者直接修改config文件夹里面的相应配置

WEB部分

# 克隆项目

git clone https://gitee.com/skyselang/yylAdminWeb.git

# 进入项目目录

cd yylAdminWeb

# 安装依赖

npm install

# 可以通过npm镜像解决速度慢的问题

npminstall--registry=https://registry.npm.taobao.org

# 或者使用cnpm,安装后使用cnpm替代npm,如 cnpm install

npm install-gcnpm--registry=https://registry.npm.taobao.org

# 配置

在.env*环境变量文件里面修改接口地址# 启动服务npm run dev

访问

地址:http://localhost:9527

账号:yyladmin

密码:123456

管理员:skyselang

密码:123456

开发

以日志管理为例子

PHP部分

编写接口代码:app/admin/controller/AdminLog.php

- 添加菜单信息 

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第2张图片

- 分配相应权限 

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第3张图片
yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第4张图片

WEB部分

新建接口文件:src/api/admin.js

- 新建页面文件:src/views/admin/log.vue 

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第5张图片

- 添加路由信息:src/router/index.js 

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第6张图片
yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第7张图片

刷新权限

退出重新登录

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第8张图片

发布

# 构建测试环境

npm run build:stage

# 构建生产环境

npm run build:prod

其它

# 预览发布环境效果

npm run preview

# 预览发布环境效果 + 静态资源分析

npm run preview----report

# 代码格式检查

npm run lint

# 代码格式检查并自动修复

npm run lint----fix

截图

yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第9张图片
yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统_第10张图片

FQA

npm

推荐使用cnpm:cnpm

删除node_modules文件夹后使用cnpm重新安装依赖

ui

使用的是element-ui:element-ui

browser

支持Chrome、Firefox、QQ、360、Edge等主流浏览器,不支持IE以及浏览器的兼容模式(IE内核)

debug

调试模式下根据接口返回错误信息排查,或者提Issue

协议

Apache2开源协议,完全免费使用

Copyright skyselang https://gitee.com/skyselang

你可能感兴趣的:(yylAdmin基于ThinkPHP6和Vue2的极简后台管理系统)