技能学习:学习使用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


报错了,看意思就是composer.json和composer.lock的问题,参照vue的经验,composer.json一定是包名存储的地方。
(1)将我们需要的扩展名写入require:

(2)删除composer.lock
(3)清除composer缓存:

composer clearcache

(4)更新composer依赖,生成新的.lock文件:

composer update


这次可以安装扩展了,但是依旧报错,经查找还是php.ini的配置问题,再去改一下:
在php.ini查找proc_open,删掉。
再次composer update更新依赖:

嗨,接着百度接着改呗,在php.ini把proc_get_status删了,再更新:

成了,扩展成功安装。
更改app目录结构,将之前的controller文件夹删除。同时新建admin和web两个应用:

php think build admin
php think build web


下方的php配置文件时公用文件,所有应用都可以使用,如果某应用内部需要进行单独配置,就在该应用目录下新建.php同名文件夹进行配置,框架中的配置文件应用顺序为从里到外查找。
此时访问目录结构地址为:

访问admin端 localhost:3000/index.php/admin
访问web端 localhost:3000/index.php/web


网站链接有index.php有些奇怪,所以把index.php隐藏。
在tp5中需要配置apache服务器,一顿操作后生成.htaccess放在public中,此过程为url重写。
但是在tp6中,可能是几乎所有人都有隐藏index.php的需求,所以模板已经将生成的.htaccess文件生成好放到了框架中:

如果你的框架中没有这一项,那么在public文件夹下新建.htaccess文件并放入以下内容即可。
public/.htaccess:

<IfModule mod_rewrite.c>Options +FollowSymlinks -MultiviewsRewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
</IfModule>

去除index.php的访问地址:

到此,后端项目得以启动。

2.启动前端项目

(1)整理项目文件夹
为了方便查看,我们将整个后端框架放入新的文件夹mine-php,由于tp6.com文件夹是后端项目,所以根据我的习惯,给其更名为server。

在编辑器中打开mine-php文件夹:

以后我们启动后端项目就需要进入到server文件夹,使用命令对其进行启动:

(2)新建前端项目
使用vue-cli 新建admin端,没有前端经验的朋友可以参考我之前的文章:

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-2.启动项目


启动admin端:


使用vue-cli 新建web端

vue create web

过程与admin端相同。

到此,项目启动完成。下篇文章研究模型和数据库操作。

更多设计、功能的学习经验,大家也可以去我的公众号查看!

————

技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目相关推荐

  1. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由、模型与数据库操作

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由.模型与数据库操作 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 ...

  2. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片 技能学习:学习使用php(tp6框架) + ...

  3. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...

  4. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.跨域且传输数据,并优化后端接口

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.优化后端接口,前端使用axios实现接口功能 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站 ...

  5. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和 ...

  6. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录,密码的bcrypt(hash)加密与验证

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录,密码的bcrypt(hash)加密与验证 技能学习:学习使用php(tp6框架) + vue.js,开发前端全 ...

  7. 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境

    技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 技能学习 ...

  8. 两个读书笔记:springboot+vue.js分布式组件全栈开发训练营 + 大数据开发基础

    (springboot+vue.js分布式组件全栈开发训练营原文在notion中, 大数据开发在思维导图中, 这个博客只是保存, 无法阅读. ) what is different between s ...

  9. mpvue 微信小程序_使用Vue.js开发微信小程序:开源框架mpvue解析

    戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

最新文章

  1. 数字图像处理:(3)一阶微分算子在图像处理中的应用
  2. 2015第22周一Web性能测试工具及IE扩展区别
  3. .net平台是什么?.net平台的组成,.net平台的好处
  4. JavaSE各阶段练习题----异常
  5. java虚拟机的俩种异常
  6. struts2,jsp,freemarker编程小技巧
  7. 复杂网络研究:让世界变得简单
  8. ckplayer插件播放m3u8视频
  9. LimeSDR官方系列教程(五):SDR的软件
  10. 2012年度江西省科学技术奖授奖项目名单
  11. 【转载】详解Android中接口回调、方法回调
  12. 只是想要自己喜欢的生活,可是你有资格么?
  13. 用PS制作公路上的逼真文字
  14. 详解幂律分布,以及用于重尾分布的Python库powerlaw的使用
  15. 物权法全文内容有哪些呢-广告外链_有哪些网络推广免费平台
  16. UE4 Engine Fix-找回4.24后失去的Matinee
  17. c#中利用keybd_event函数+自定义软键盘实现中文输入时的问题
  18. 《汇编语言》王爽(第四版) 课程设计1
  19. TCP 协议如何保证可靠传输?
  20. 大无语事件 谷歌浏览器无标题

热门文章

  1. 查看docker空间资源的使用情况及清理空间
  2. 云计算学习历程之-备份服务(rsync)上
  3. 基于java闲置物品交易系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
  4. php 获取临时素材,php微信获取临时素材的方法(附代码)
  5. python怎么安装本地的egg_python的egg包的安装和制作]
  6. 基于JAVA在线课程教学大纲系统计算机毕业设计源码+系统+lw文档+部署
  7. 微型计算机储存最快的是什么车,谁是《极品飞车14》的佳前挡?
  8. 机器学习中各种损失函数对比总结
  9. 5000元预算的普通电脑配置
  10. 千兆交换机测试软件,千兆交换机性能测试方法