安装并正确配置了Thinkphp,Vue的运行环境后,就可以快速开始开发工作了。
注意:下面的截图,与读者实际的路径、地址等可能是不同的
这里大家主要注意操作步骤即可。
克隆代码【可选】
首先是在特定目录下,克隆项目的基础代码。
例如:在F盘创建test目录 (代码库地址可以联系作者)
执行命令:
git clone git@gitee.com:xxx/rds.git
克隆代码用到的就是Laragon默认安装的git应用。
如下图所示:
左边的为克隆的代码目录,右边为已经可以进行开发调试的目录,熟悉Thinkphp的用户应该是可以知道,克隆的目录是需要进行依赖安装的。
因为本系统为前后端分离的项目。Thinkphp项目就是作为后端系统提供API接口,Vue项目就是其中的一个前端系统,提供后台管理系统界面的。
即:后端API为Thinkphp项目,内容就是下图右边所示文件列表。
上图中ui目录,就是Vue前端项目,内容如下图所示。
安装Thinkphp依赖和Vue依赖
命令行中安装依赖
安装后端项目的依赖
进入后端项目目录,即上面左边所示目录。在命令行中执行如下命令
composer update
- 安装前端项目的依赖
进入ui目录,执行如下命令:
yarn install
phpstorm中安装依赖
- 后端系统项目
通过phpstorm打开项目,右键composer.json,选择Composer,执行update 即可。
能够正确运行的前提还是安装Laragon默认安装的Composer软件。
- 前端系统项目
如下图,打开ui目录。右键package.json,选择yarn install,即可开启安装依赖。
如下图所示,执行安装依赖的过程与命令行一样。
本地开发调试项目
首先需要确定:
数据库配置
后端系统的数据库,并创建相应的数据库。
如下图所示,默认的数据库名称及用户名密码,都根据自己实际的配置进行修改,或者创建.env文件设置。
创建数据库,并导入根目录下面的data.sql文件,对数据库进行初始化。
启动后端项目
如下图所示:开发模式连接的后端地址为:http://127.0.0.1:2288/admin
根据前端设置的端口号2288,需要启动后端Thinkphp项目到2288端口。
启动前端项目
如下图所示,在命令行中执行 npm run serve
启动成功的界面
如下图所示,可以正常显示验证码,则说明Thinkphp代码执行正常,如果不能登录,或者出现错误,可以根据错误提示进一步排查错误。
本项目正常运行的关键是理解前后端分离思想,确保后端系统和前端系统都正常运行才可以。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。