yylAdmin

Gitee：https://gitee.com/skyselang/yylAdmin

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

簡介

yylAdmin是一個極簡后臺管理系統，只有登錄退出、權限管理、日志管理等基本功能，方便擴展；前后端分離，后端采用ThinkPHP6，前端采用Vue2；項目由后端yylAdmin和前端yylAdminWeb組成。

• yylAdmin
• yylAdminWeb

演示

地址：https://demo.yyladmin.top/#/login?redirect=%2Fdashboard
賬號：yyladmin、admin
密碼：123456
提示：演示賬號只有部分權限，請下載源碼安裝體驗全部功能

準備

• 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 -g repo.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鏡像解決速度慢的問題
npm install --registry=https://registry.npm.taobao.org
# 或者使用cnpm，安裝后使用cnpm替代npm，如 cnpm install
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 配置
在.env*環境變量文件里面修改接口地址

# 啟動服務
npm run dev

登錄后復制

訪問

地址：http://localhost:9527
賬號：yyladmin
密碼：123456
管理員：skyselang
密碼：123456

開發

PHP部分

• 編寫接口代碼：app/admin/controller/AdminLog.php

<img width="100%" src="./public/static/img/devphp1.jpg">

• 添加菜單信息

<img width="100%" src="./public/static/img/devphp2.jpg">

• 分配相應權限

<img width="100%" src="./public/static/img/devphp3.jpg">

WEB部分

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

<img width="100%" src="./public/static/img/devweb1.jpg">

• 新建頁面文件：src/views/admin/log.vue

<img width="100%" src="./public/static/img/devweb2.jpg">

• 添加路由信息：src/router/index.js

<img width="100%" src="./public/static/img/devweb3.jpg">

刷新權限

• 退出重新登錄

<img width="100%" src="./public/static/img/devref.jpg">

發布

# 構建測試環境
npm run build:stage

# 構建生產環境
npm run build:prod

登錄后復制

其它

# 預覽發布環境效果
npm run preview

# 預覽發布環境效果 + 靜態資源分析
npm run preview -- --report

# 代碼格式檢查
npm run lint

# 代碼格式檢查并自動修復
npm run lint -- --fix

登錄后復制

預覽

<img width="100%" src="./public/static/img/yyladmin_login.jpg">

<img width="100%" src="./public/static/img/yyladmin.jpg">

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