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
用戶名:user01
密碼:user01
QQ群交流
歡迎加入qq群:340506819
開發依賴
- vue https://vuefe.cn/v2/guide/
- element-ui@1.1.3 http://element.eleme.io/1.1/#/zh-CN/component/installation
- axios https://github.com/mzabriskie/axios
- fontawesome http://fontawesome.io/icons/
- js-cookie https://github.com/js-cookie/js-cookie
- lockr https://github.com/tsironis/lockr
- lodash http://lodashjs.com/docs/
- moment http://momentjs.cn/
數據交互
數據交互通過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 在前端服務啟動之前,要先啟動后端的服務,不然只是一個腳手架