1.下载项目vuethink，本例将项目放置website文件下。 2.后台搭建 本地建站–》以phpstudy为例 1) 新建站点域名 <VirtualHost*:80> DocumentRoot “D:websiteVueThinkphppublic” ServerName www.vuethink.com ServerAlias <Directory “D:websiteVueThinkphppublic”> 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”: { “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) 修改applicationadmincontrollerBase.php文件，看到最后： // miss 路由：处理没有匹配到的路由规则 public function miss() { 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中 configconfig.php // 入口自动绑定模块 ‘auto_bind_module’ =>false, 这里设置为false，所以url必须是http://vuethink.com/index.php/admin/base/getConfigs 但是地址栏输入url后仍不显示，原来configroute_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) { this.loading = !this.loading this.handleError(res) } else { this.refreshVerify() if (this.checked) { Cookies.set(‘rememberPwd’,true, { expires: 1 }) } this.resetCommonData(res.data) _g.toastMsg(‘success’, ‘登录成功’) } }
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/113791.html原文链接：https://javaforall.cn
