VueThink是一套基于Vue全家桶+ Thinkphp的前后端分离框架

Posted PHP技术大全

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueThink是一套基于Vue全家桶+ Thinkphp的前后端分离框架相关的知识,希望对你有一定的参考价值。

VueThink

项目介绍

VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分离框架。 脚手架构建也可以通过vue官方的vue-cli脚手架工具构建 实现了一般后台所需要的功能模块

VueThink不仅适用于管理后台或管理系统开发,且广泛适用于B/S架构的项目开发。VueThink是对前后端分离技术的应用实践,2016年由洪睿科技的技术团队研发并投入商业开发使用,已有许多的商业项目实践。而今框架开源,希望能有更多志同道合的伙伴参与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以上。

详细开发文档参考 

  • 登录、退出登录

  • 修改密码、记住密码

  • 菜单管理

  • 系统参数

  • 权限节点

  • 岗位管理

  • 部门管理

  • 用户组管理

  • 用户管理

Demo

用户名:user01

密码:user01


开发依赖

  • vue 

  • element-ui@1.1.3 

  • axios 

  • fontawesome 

  • js-cookie 

  • lockr 

  • lodash 

  • moment 

数据交互

数据交互通过axios以及RESTful架构来实现

用户校验通过登录返回的auth_key放在header

值得注意的一点是:跨域的情况下,会有预请求OPTION的情况

附上接口文档: 

Server搭建

服务端使用的框架为thinkphp5.搭建前请确保拥有lamp/lnmp/wamp环境。

集成环境推荐使用phpstudy: 

这里所说的搭建其实就是把server框架放入WEB运行环境,并使用80端口。

导入服务端根文件夹数据库文件install.sql,并修改config/database.php配置文件。

  • PHP >= 5.4.0

  • PDO PHP Extension

  • MBstring PHP Extension

  • CURL PHP Extension

服务端开发手册请参考: 

当访问  , 出现“vuethink接口”即代表后端接口搭建成功。

p.s 如果使用的nginx服务,请设置重写规则

location / {    if (!-e $request_filename) {

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

    }
}

前端搭建

前端运行只需要执行以下两个命令行
npm install
npm run devP.S 在前端服务启动之前,要先启动后端的服务,不然只是一个脚手架

PHPer升级为大神并不难!


以上是关于VueThink是一套基于Vue全家桶+ Thinkphp的前后端分离框架的主要内容,如果未能解决你的问题,请参考以下文章

Vue 全家桶

vue全面介绍--全家桶项目实例

Vue全家桶

Vue全家桶高仿小米商城

基于 vue 全家桶的 spa 项目脚手架

了解vue