yylAdmin系統的安裝和使用方法

這篇文章主要介紹“yylAdmin系統的安裝和使用方法”，在日常操作中，相信很多人在yylAdmin系統的安裝和使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”yylAdmin系統的安裝和使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

yylAdmin

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

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

簡介

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

• yylAdmin

• yylAdminWeb

演示

地址：yylAdmin demo  
賬號：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

到此，關于“yylAdmin系統的安裝和使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！