yylAdmin

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

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

簡介

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

• yylAdmin
• yylAdminWeb

演示

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

準(zhǔn)備

• PhpStudy
• Git
• Node
• Composer
• ThinkPHP
• Vue
• Element

要求

• PHP >= 7.1
• MySQL >= 5.6
• Redis

安裝

PHP部分

# 克隆項目
git clone https://gitee.com/skyselang/yylAdmin.git

# 進(jìn)入項目目錄
cd yylAdmin

# 安裝依賴
composer install

# 可以通過composer鏡像解決速度慢的問題
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

# 導(dǎo)入數(shù)據(jù)庫
數(shù)據(jù)庫文件：public/private/yyladmin.sql

# 配置
重命名.env.example為.env，修改里面配置
或者直接修改config文件夾里面的相應(yīng)配置

登錄后復(fù)制

WEB部分

# 克隆項目
git clone https://gitee.com/skyselang/yylAdminWeb.git

# 進(jìn)入項目目錄
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*環(huán)境變量文件里面修改接口地址

# 啟動服務(wù)
npm run dev

登錄后復(fù)制

訪問

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

開發(fā)

PHP部分

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

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

• 添加菜單信息

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

• 分配相應(yīng)權(quán)限

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

刷新權(quán)限

• 退出重新登錄

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

發(fā)布

# 構(gòu)建測試環(huán)境
npm run build:stage

# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod

登錄后復(fù)制

其它

# 預(yù)覽發(fā)布環(huán)境效果
npm run preview

# 預(yù)覽發(fā)布環(huán)境效果 + 靜態(tài)資源分析
npm run preview -- --report

# 代碼格式檢查
npm run lint

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

登錄后復(fù)制

預(yù)覽

<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內(nèi)核）

debug

• 調(diào)試模式下根據(jù)接口返回錯誤信息排查，或者提Issue

協(xié)議

• Apache2開源協(xié)議，完全免費(fèi)使用
• Copyright skyselang https://gitee.com/skyselang