企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
#### 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由、模型与数据库操作 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.跨域且传输数据,并优化后端接口 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录(一),密码的bcrypt(hash)加密与验证 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口 > 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片 ###### 1.后端项目启动,多应用项目 * 主前端项目,仍然以前后端分离定位。 * 以php为后端,与其联系的前端应用分别为web端,mobile端和admin端。 * 其中web端和mobile端使用相同的后端接口,命名为web。 * admin端使用admin端接口,命名为admin。 所以在thinkphp6框架中,需要使用多应用项目。 单应用项目中的app目录结构: > ├─app 应用目录 > │ ├─controller 控制器目录 > │ ├─model 模型目录 > │ ├─view 视图目录 > │ └─ … 更多类库目录 多用项目中的app目录结构: > ├─app 应用目录 > │ ├─index 主应用 > │ │ ├─controller 控制器目录 > │ │ ├─model 模型目录 > │ │ ├─view 视图目录 > │ │ ├─config 配置目录 > │ │ ├─route 路由目录 > │ │ └─ … 更多类库目录 > │ │ > │ ├─admin 后台应用 > │ │ ├─controller 控制器目录 > │ │ ├─model 模型目录 > │ │ ├─view 视图目录 > │ │ ├─config 配置目录 > │ │ ├─route 路由目录 > │ │ └─ … 更多类库目录 如果要使用多应用模式,需要安装多应用模式扩展`think-multi-app`: ~~~ composer require topthink/think-multi-app ~~~ ![](https://img.kancloud.cn/fa/26/fa26423ddd0281e32412bc641ad67f86_1459x819.png) 报错了,看意思就是composer.json和composer.lock的问题,参照vue的经验,composer.json一定是包名存储的地方。 (1)将我们需要的扩展名写入require: ![](https://img.kancloud.cn/48/04/4804917e0f8942fbc370fd954b80999f_675x431.png) (2)删除composer.lock (3)清除composer缓存: ~~~ composer clearcache ~~~ (4)更新composer依赖,生成新的.lock文件: ~~~ composer update ~~~ ![](https://img.kancloud.cn/1a/82/1a829bd2ea08ab200a1179a84cd4d94c_1023x334.png) 这次可以安装扩展了,但是依旧报错,经查找还是php.ini的配置问题,再去改一下: 在php.ini查找proc\_open,删掉。 再次`composer update`更新依赖: ![](https://img.kancloud.cn/2b/14/2b14403c02760015ed07eedf29e63427_947x249.png) 嗨,接着百度接着改呗,在php.ini把proc\_get\_status删了,再更新: ![](https://img.kancloud.cn/ab/ba/abbab656150145c8fdc70ccbff525ed5_641x272.png) 成了,扩展成功安装。 更改app目录结构,将之前的controller文件夹删除。同时新建admin和web两个应用: ~~~ php think build adminphp think build web ~~~ ![](https://img.kancloud.cn/bf/fa/bffa3792aa1916ea9df06c6b998a5ec8_652x631.png) 下方的php配置文件时公用文件,所有应用都可以使用,如果某应用内部需要进行单独配置,就在该应用目录下新建.php同名文件夹进行配置,框架中的配置文件应用顺序为从里到外查找。 此时访问目录结构地址为: > 访问admin端 localhost:3000/index.php/admin > 访问web端 localhost:3000/index.php/web ![](https://img.kancloud.cn/8b/e6/8be6a1602558a34f3cdd0f5a7d776dce_438x142.png) 网站链接有index.php有些奇怪,所以把index.php隐藏。 在tp5中需要配置apache服务器,一顿操作后生成.htaccess放在public中,此过程为url重写。 但是在tp6中,可能是几乎所有人都有隐藏index.php的需求,所以模板已经将生成的.htaccess文件生成好放到了框架中: ![](https://img.kancloud.cn/29/3d/293d8b05c45f7f660a687d42797c492f_159x131.png) 如果你的框架中没有这一项,那么在public文件夹下新建.htaccess文件并放入以下内容即可。 public/.htaccess: ~~~ <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]</IfModule> ~~~ 去除index.php的访问地址: ![](https://img.kancloud.cn/76/a9/76a9c2b8eefcb2084f4a94687486aa22_356x121.png) 到此,后端项目得以启动。 ###### 2.启动前端项目 (1)整理项目文件夹 为了方便查看,我们将整个后端框架放入新的文件夹mine-php,由于tp6.com文件夹是后端项目,所以根据我的习惯,给其更名为server。 ![](https://img.kancloud.cn/bb/e0/bbe0204370ba5c94c9fd7928039c3670_728x159.png) 在编辑器中打开mine-php文件夹: ![](https://img.kancloud.cn/51/20/51200c9b02973df8ab50cb6a8bf9f844_198x404.png) 以后我们启动后端项目就需要进入到server文件夹,使用命令对其进行启动: ![](https://img.kancloud.cn/a2/db/a2db6de15433ec950fd13bc1cf21ab48_586x245.png) (2)新建前端项目 使用vue-cli 新建admin端,没有前端经验的朋友可以参考我之前的文章: > 技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-2.启动项目 ![](https://img.kancloud.cn/8c/87/8c872c2197e0e6389cccfb4bd3a7eec2_563x357.png) 启动admin端: ![](https://img.kancloud.cn/d1/04/d10457f30826fae0743690a85b530ca7_518x362.png) ![](https://img.kancloud.cn/d2/50/d250bfd3b1cef6fd6cff9175b89fa59f_1584x973.png) 使用vue-cli 新建web端: ~~~ vue create web ~~~ 过程与admin端相同。