使用vuethink搭建系统

本文介绍如何使用vuethink搭建系统。

一、下载

地址:http://www.vuethink.com/
下载下来以后放在web的www目录下,解压。


二、安装依赖库

cd frontEnd
npm install

这里首先需要安装好npm(nodejs的包管理工具,装好nodejs以后就带npm了),安装方式不详述。
npm install命令会根据当前目录下的package.json文件安装依赖环境。


三、数据库配置

1.修改数据库配置信息

首先进入php的代码包,修改config目录下 database.php配置信息,包括用户名、密码、数据库(默认为thinkphp5)、端口(3306)。

2.添加数据库

直接导入php文件夹下的install.sql到数据库中即可。

3.测试

http://127.0.0.1/vue/php/ 运行该链接,可出现vuethink即成功。


四、运行

1.修改前端配置

修改前端文件,frontEnd/src/main.js

axios.defaults.baseURL = 'http://127.0.0.1/[your project name]/php/index.php/'

window.HOST = 'http://127.0.0.1/[your project name]/php/index.php/'

以上原来的语句为:

axios.defaults.baseURL = HOST
window.HOST = HOST

这里在前端的HOST是默认下前端的web根目录,因为前后端分离,所以会出现访问错误,我们把它修改为后端的根目录即可。

2.运行

cd frontEnd
npm run dev

正常即可访问项目首页的登录页面了,默认用户名密码为admin、123456


五、定义后端资源路由

到上一步就成功运行vuethink系统了。如果需要新增一个后端资源路由,需要以下两个步骤:

1.路由配置

可以在php/config/route_admin.php文件里添加以下:

'admin/test/index' => ['admin/test/index', ['method' => 'GET']],

2.添加控制器文件

在 php\application\admin\controller中添加Test.php文件:



namespace app\admin\controller;

use think\Request;
use think\Db;
use app\common\adapter\AuthAdapter;
use app\common\controller\Common;

class Test extends Common
{
    public function  index()
    {
        echo "Hello Vuethink";
    }
}

此时访问http://127.0.0.1/[your project name]/php/index.php/admin/hello/index即可看到输出的资源内容,说明该资源配置成功。


六、配置前端路由

上一节讲了如何配置后端资源路由,前端需要请求数据时直接访问定义在php/config/route_admin.php中的路由即可。

前端的路由是在\frontEnd\src\routes.js中进行配置,这个对熟悉vue的同学来说肯定很easy了,具体的操作可以查看vue-router的官方介绍。


你可能感兴趣的:(使用vuethink搭建系统)