头图

安装并正确配置了Thinkphp,Vue的运行环境后,就可以快速开始开发工作了。
注意:下面的截图,与读者实际的路径、地址等可能是不同的
这里大家主要注意操作步骤即可。

克隆代码【可选】

首先是在特定目录下,克隆项目的基础代码。
例如:在F盘创建test目录 (代码库地址可以联系作者)
执行命令:

git clone git@gitee.com:xxx/rds.git

克隆代码用到的就是Laragon默认安装的git应用。

如下图所示:
左边的为克隆的代码目录,右边为已经可以进行开发调试的目录,熟悉Thinkphp的用户应该是可以知道,克隆的目录是需要进行依赖安装的。
因为本系统为前后端分离的项目。Thinkphp项目就是作为后端系统提供API接口,Vue项目就是其中的一个前端系统,提供后台管理系统界面的。
即:后端API为Thinkphp项目,内容就是下图右边所示文件列表。

上图中ui目录,就是Vue前端项目,内容如下图所示。

安装Thinkphp依赖和Vue依赖

命令行中安装依赖

  1. 安装后端项目的依赖

    进入后端项目目录,即上面左边所示目录。在命令行中执行如下命令

composer update


  1. 安装前端项目的依赖

进入ui目录,执行如下命令:

yarn install

phpstorm中安装依赖

  1. 后端系统项目

通过phpstorm打开项目,右键composer.json,选择Composer,执行update 即可。

能够正确运行的前提还是安装Laragon默认安装的Composer软件。

  1. 前端系统项目

如下图,打开ui目录。右键package.json,选择yarn install,即可开启安装依赖。

如下图所示,执行安装依赖的过程与命令行一样。

本地开发调试项目

首先需要确定:

数据库配置

后端系统的数据库,并创建相应的数据库。
如下图所示,默认的数据库名称及用户名密码,都根据自己实际的配置进行修改,或者创建.env文件设置。

创建数据库,并导入根目录下面的data.sql文件,对数据库进行初始化。

启动后端项目

如下图所示:开发模式连接的后端地址为:http://127.0.0.1:2288/admin

根据前端设置的端口号2288,需要启动后端Thinkphp项目到2288端口。

启动前端项目

如下图所示,在命令行中执行 npm run serve

启动成功的界面

如下图所示,可以正常显示验证码,则说明Thinkphp代码执行正常,如果不能登录,或者出现错误,可以根据错误提示进一步排查错误。

本项目正常运行的关键是理解前后端分离思想,确保后端系统和前端系统都正常运行才可以。


后山人
272 声望39 粉丝

这个是一个典型的,前后端分离的开发框架,而且很多前后端代码,都可以很好的生成,无需写代码,大大减少程序员编写代码的数量。提高效率,降低成本!