yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統

skyselang 發表於 2020-11-22

yylAdmin

碼雲 | Github

演示

地址:yylAdmin demo
賬號:yyladmin、admin
密碼:123456
提示:演示賬號只有部分許可權,請下載原始碼安裝體驗全部功能

簡介

yylAdmin是一個極簡後臺管理系統,只有登入退出、許可權管理、日誌管理等基本功能,方便擴充套件;前後端分離,後端採用ThinkPHP6,前端採用Vue2;專案由後端yylAdmin和前端yylAdminWeb組成。

準備

要求

  • 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

yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統- 新增選單資訊 yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統- 分配相應許可權 yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統

WEB部分

  • 新建介面檔案:src/api/admin.js

yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統- 新建頁面檔案:src/views/admin/log.vue yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統- 新增路由資訊:src/router/index.js yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統

重新整理許可權

  • 退出重新登入

yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統

釋出

# 構建測試環境
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的極簡後臺管理系統yylAdmin基於ThinkPHP6和Vue2的極簡後臺管理系統

FQA

npm

  • 推薦使用cnpm:cnpm
  • 刪除node_modules資料夾後使用cnpm重新安裝依賴

ui

browser

  • 支援Chrome、Firefox、QQ、360、Edge等主流瀏覽器,不支援IE以及瀏覽器的相容模式(IE核心)

debug

  • 除錯模式下根據介面返回錯誤資訊排查,或者提Issue

協議