基於ThinkPHP 5.0與Vue.JS 2.x的前后端開源開發框架VueThink


VueThink

項目介紹

VueThink是一套基於Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分離框架。 腳手架構建也可以通過vue官方的vue-cli腳手架工具構建 實現了一般后台所需要的功能模塊

VueThink不僅適用於管理后台或管理系統開發,且廣泛適用於B/S架構的項目開發。VueThink是對前后端分離技術的應用實踐,2016年由洪睿科技的技術團隊研發並投入商業開發使用,已有許多的商業項目實踐。而今框架開源,希望能有更多志同道合的伙伴參與VueThink的迭代 ^_^

GitHub

https://github.com/honraytech/VueThink

使用許可:

VueThink是基於MIT協議的開源框架,它完全免費。你可以免費下載VueThink,用來搭建自己的或者團體的軟件。

##主要適用技術棧

  • 后端框架:ThinkPHP 5.x
  • 前端MVVM框架:Vue.JS 2.x
  • 開發工作流:Webpack 1.x
  • 路由:Vue-Router 2.x
  • 數據交互:Axios
  • 代碼風格檢測:Eslint
  • UI框架:Element-UI 1.1.6
  • JS函數庫:Lodash

VueThink的運行環境要求PHP5.4以上。

詳細開發文檔參考 ThinkPHP5完全開發手冊

  • 登錄、退出登錄
  • 修改密碼、記住密碼
  • 菜單管理
  • 系統參數
  • 權限節點
  • 崗位管理
  • 部門管理
  • 用戶組管理
  • 用戶管理

Demo

演示地址:http://demo.vuethink.com

用戶名:user01

密碼:user01

QQ群交流

歡迎加入qq群:340506819

開發依賴

數據交互

數據交互通過axios以及RESTful架構來實現

用戶校驗通過登錄返回的auth_key放在header

值得注意的一點是:跨域的情況下,會有預請求OPTION的情況

附上接口文檔:http://api.vuethink.com

Server搭建

服務端使用的框架為thinkphp5.搭建前請確保擁有lamp/lnmp/wamp環境。

集成環境推薦使用phpstudy:http://www.phpstudy.net/

這里所說的搭建其實就是把server框架放入WEB運行環境,並使用80端口。

導入服務端根文件夾數據庫文件install.sql,並修改config/database.php配置文件。

  • PHP >= 5.4.0
  • PDO PHP Extension
  • MBstring PHP Extension
  • CURL PHP Extension

服務端開發手冊請參考:http://www.kancloud.cn/manual/thinkphp5/118003

當訪問 http://localhost, 出現“vuethink接口”即代表后端接口搭建成功。

p.s 如果使用的nginx服務,請設置重寫規則

location / {

    if (!-e $request_filename) {

        rewrite ^(.*)$ /index.php?s=$1 last;

        break;

    }
}

前端搭建

前端運行只需要執行以下兩個命令行
npm install
npm run dev

P.S 在前端服務啟動之前,要先啟動后端的服務,不然只是一個腳手架


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM