Vuethink正确安装过程

 

 

1.      下载项目vuethink，本例将项目放置website文件下。

2.      后台搭建

本地建站–》以phpstudy为例

1)      新建站点域名

<VirtualHost*:80>

    DocumentRoot "D:\website\VueThink\php\public"

    ServerName www.vuethink.com

    ServerAlias

  <Directory "D:\website\VueThink\php\public">

      Options FollowSymLinks ExecCGI

      AllowOverride All

      Order allow,deny

      Allow from all

      Require all granted

  </Directory>

</VirtualHost>

2)      win+R运行drivers

在etc/hosts文件添加本地ip域名

127.0.0.1www.vuethink.com

3.      前台搭建

1)      运行cmd 进入frontend文件

2)      npm install

本项目提示npm WARN package.json xxx@0.0.0 No repository field.

参考地址 ：http://hao.jser.com/archive/5381/

修改：在package.json添加（也可以忽略，不修改）

"private":true,

             "repository": {undefined

        "type":"git",

        "url":"http://github.com/yourname/repositoryname.git"

            },

3)      npm run dev

4.      检查php版本

首先thinkphp5.0要求php为5.4以上，所以请先检查php版本。

5.     用户名：admin，密码 ：123456

6.      修改文件

1)      修改数据库配置文件Vuethink/php/config/database.php

'type'          => 'mysql',

'hostname'      => '127.0.0.1',

'database'      => 'install',

'username'      => 'root',

'password'      => 'root',

2)      旧版压缩包，数据表menu url字段开头带有/

修改前端src/router.js文件

将所有children path 路径前加/ ,再次登录跳转显示正常

           新版压缩包，数据表menuurl字段开头不带/

此处不用修改

3)      修改application\admin\controller\Base.php文件，看到最后：

// miss 路由：处理没有匹配到的路由规则

public function miss()

{undefined

             return ;

} 将return; 修改为 return “router_error”; （此处修改方便提示）

4)      前后端分离，修改main.js文件

将axios.defaults.baseURL = HOST改为

axios.defaults.baseURL = 'http://www.vuethink.com/index.php/'   vuethink采用axios请求后端程序，而且此处设置就是让axios每次请求都自动加上baseURL。

window.HOST = HOST改为

window.HOST = 'http://www.vuethink.com/index.php/' 这里的意义还没弄明白，后面再补充。

安装完成

解释带index.php原因（thinkphp问题）：

由于thinkphp5.0中 \config\config.php

// 入口自动绑定模块

'auto_bind_module'  =>false,

这里设置为false，所以url必须是http://vuethink.com/index.php/admin/base/getConfigs

但是地址栏输入url后仍不显示，原来\config\route_admin.php中定义上面url请求只能是POST请求，所以才有问题。

将'admin/base/getConfigs'=> ['admin/base/getConfigs', ['method' => 'POST']], 的POST改为GET，

在地址栏输入http://www.vuethink.com/index.php/admin/base/getConfigs，结果显示数据（安全起见，测试完成后要改回POST方式）

而前后端路由关系是 ：路由地址经过拼接发出请求，获取数据

1. Main.js文件

axios.defaults.baseURL= "http://www.vuethink.com/index.php/"

window.HOST ="http://www.vuethink.com/index.php/"

2. 例如login.vue文件

this.apiPost('admin/base/login',data).then((res) => {

              if (res.code != 200) {undefined

                this.loading = !this.loading

                this.handleError(res)

              } else {undefined

                this.refreshVerify()

                if (this.checked) {undefined

                  Cookies.set('rememberPwd',true, { expires: 1 })

                }

                this.resetCommonData(res.data)

                _g.toastMsg('success', '登录成功')

              }

            }