Home
»
实战
»
峰哥带你实战 ThinkPHP + Vue.js (第 01 期)

峰哥带你实战 ThinkPHP + Vue.js (第 01 期)

1.1. 摘要

作为实战系列的第一期, 本文将主要介绍所用的技术框架, 指导读者搭建开发环境以及初步整合前后端.

1.2. 背景介绍

通过实际动手开发一个前后端分离的小项目, 峰哥带你初步了解项目的开发过程, 并探索前后端是如何配合工作的.

注意: 本次实战的基础是读者对 PHP / ThinkPHP / HTML / CSS / JavaScript / jQuery / Vue.js / ElementUI 等技术熟悉; 本次实战不具体描述这些基础语言/框架的细节, 仅就对开发过程和前后端配合进行讲解. 若读者对语言和框架不太了解, 请参阅具体文档.

1.3. 框架简介

本次实战将使用 ThinkPHP + Vue.js 作为基本前后端框架.

1.3.1. ThinkPHP

ThinkPHP 是一个基于 PHP 的可快速开发 Web 应用的中文开源框架, 号称 “中文最佳实践PHP开源框架”. 本次实战我们用它来做后端 (backend) 服务, 提供业务处理的 API, 负责接收请求-处理业务-发送响应.

参考文档: ThinkPHP 6.0 完全开发手册 | PHP 官方文档

1.3.2. Vue.js

Vue.js 是一套用于构建用户界面的渐进式框架, 本次实战我们用它来做前端 (frontend) 用户界面, 以供用户进行交互.

参考文档: Vue.js 2.0 官方教程 ｜ Vue.js 菜鸟教程 | JavaScript 菜鸟教程 | jQuery 菜鸟教程

1.4. 开发环境搭建

为了适应更多读者的开发过程, 本次实战使用 Windows 10 作为操作系统环境, phpStudy 作为服务容器, PhpStorm 作为 IDE(集成开发环境).

1.4.1. phpStudy

phpStudy 是一款容易上手的服务器集成环境配置应用, 适合用于学习和开发活动, 可以让读者从繁复的集成环境配置工作中解放出来, 把重点放在开发本身.

安装及配置过程:

  • 在 此处 下载新版 phpStudy for Windows 版本 (本例中为 v8.1, x64架构)
  • 安装时需要指定路径, 注意不要包含中文和空格, 如 C:\Apps\phpstudy_pro
  • 安装后在桌面上双击新图标以打开 phpStudy
  • 切换到 环境 选项卡, 可以配置环境
  • 在 Web Servers 栏中点击 更多, 可看到在 Apache 2.4.39 和 Nginx 1.15.11 两项前面有蓝色圆点, 说明已经安装了这两个服务
  • 为了配置方便, 我们仅保留 Nginx 服务. 在 更多 菜单中选择 Apache 2.4.39, 右侧点击 卸载, 然后在 更多 菜单中看到仅有 Nginx 1.15.11 前面有蓝色圆点, 说明在 Web Servers 中仅保留了 Nginx 服务
  • 在 数据库 栏的 更多 菜单中可看到 MySQL 5.7.26 已被安装, 我们暂不对其做配置
  • 在 php 栏的 更多 菜单中可看到 php 7.3.4 NTS 已被安装; 我们暂时不对它做配置
  • 在 composer 栏点击 安装 按钮以安装 composer PHP 依赖管理
  • 在系统 控制面板 – 系统和安全 – 系统 中点击 高级系统设置, 弹出的对话框中点击 环境变量(N)... 按钮以打开环境变量选项; 在 系统变量(S)栏中选中 Path 项, 点击 编辑(I)... 按钮, 然后 新建(N) 一条, 内容为 composer 路径, 例如 C:\Apps\phpstudy_pro\Extensions\composer1.8.5 ; 再次 新建(N)一条, 内容为 php 路径, 例如 C:\Apps\phpstudy_pro\Extensions\php\php7.3.4nts , 然后依次点击确定以保存更改
  • 切换到 首页 选项卡, 点击 WNMP 右侧的 启动 按钮以启用 Web 环境
  • 在 MySQL 5.7.26 行点击 配置 按钮, 先点击 设置默认 按钮, 然后在 基本配置 页中将 MyISAM 切换为 InnoDB, 点击 确认 保存
  • 切换到 环境 选项卡, 在 数据库工具(web) 行点击 安装 按钮, 在弹出的对话框中选中 localhost 行的 选择 复选框, 点击确认以安装
  • 切换到 数据库 选项卡, 点击 修改root密码 按钮, 根据提示修改 root 密码
  • 至此, phpStudy 环境基本配置完成

1.4.2. PhpStorm

PhpStorm 是 JetBrains 公司开发的一款著名的 PHP 及 Web 项目的 IDE, 是我们本次实战的主要工具.

推荐通过常规途径获取正版 IDE, 若读者无法获取, 请自行解决此问题.

安装过程较为简单, 从 官方下载页面 下载最新版安装程序, 安装后激活即可. 常规的激活方式有 License 激活或账密激活. 拥有教育邮箱的读者可在 此页面 申请教育版授权, 申请成功后可作为非商业性质免费使用 JetBrains 公司的一众 IDE 或插件.

1.5. 项目搭建及试运行

1.5.1. 项目整体构想

1.5.1.1. 概述

为了把重点放在演示完整的项目开发过程, 本次实战着手开发一个迷你型 班级管理系统, 用于管理班级和学生.

1.5.1.2. 角色与功能

角色可分为三种:

  • 管理员: 用来管理班级信息, 指定班长, 以及管理学生信息
  • 班长: 用来管理本班级的学生信息
  • 学生: 只能查看本班级的信息, 以及管理本人的信息

1.5.1.3. 前后端通信规则

本次实战项目采用前后端分离设计.

前端向后端以 POST 方式发送请求, 请求内容直接放在 POST Body 中, 形式为 JSON 字符串, Content Type 为 application/json;

后端返回也为 JSON 字符串, 且固定包含 code, message, data 三项内容.

1.5.2. 数据库搭建

在 phpStudy 的 数据库 页面点击 创建数据库 按钮进行简单的数据库创建

数据库名称: cmis

用户名: cmis

密码: CMIScmis

1.5.3. 文件系统搭建

建立本次项目的基目录, 如 C:\Dev\CMIS

1.5.4. 后端搭建

打开 PowerShell, 执行搭建任务

# 修改 composer 源为国内源
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
# 改变目录到项目基目录
C:
cd C:\Dev\CMIS
composer create-project topthink/think cmis-backend
# 看到 "Succeed!" 字样即表示安装成功
# 测试一下站点
C:
cd C:\Dev\CMIS\cmis-backend
php think run -p 19999

出现提示

ThinkPHP Development server is started On http://127.0.0.1:19999/

You can exit with CTRL-C

Document root is: C:\Dev\CMIS\cmis-backend\public

使用浏览器访问 http://127.0.0.1:19999/ , 看到成功页面, 后端搭建初步完成.

提示: 上述使用 php think run 的方法只适用于临时开启服务进行测试; 在 PowerShell 窗口按下 Ctrl-C 或关闭 PowerShell 窗口, 服务立刻停止. 若想长期有效或在服务器中发布则需要在 Web 容器中建立站点. 稍后将做说明.

1.5.5. 前端搭建

打开 PhpStorm, 在欢迎页点击 Create New Project 以新建项目.

在 New Project 窗口左侧选择 Vue.js, 右侧的 Location 项填写 基目录\项目名, 如 C:\Dev\CMIS\cmis-frontend . 点击 Create 按钮创建项目.

若首次创建 Vue.js 项目, 则 IDE 会自动下载和部署 Vue.js 环境. 首次部署将花费很长时间, 在 4: Run 窗口中执行十分钟左右会出现选择是否切换到 taobao.com 源. 输入 y 同意, 后台任务继续执行.

等待后台任务完成后, 项目创建完毕.

窗口的右上部分有 Debug 按钮工具栏. 点击绿色箭头运行或点击绿色虫子图标Debug. 此时 4: Run 窗口出现提示

App running at:

* Local: http://localhost:8080/

* Network: http://192.168.0.144:8080/

Note that the development build is not optimized.

To create a production build, run npm run build.

使用浏览器访问 http://localhost:8080/ , 看到成功页面, 前端搭建初步完成.

1.5.6. 前后端分别部署到 Web 容器

1.5.6.1. 后端部署

构建工程

保持 PhpStorm 目前打开的项目为前端 Vue.js 项目, 在点击菜单 File – Open..., 在打开的对话框中定位到后端项目基目录 C:\Dev\CMIS\cmis-backend, 点击 OK 打开项目. 此时会提醒新项目可以在新窗口或当前窗口打开, 选择 New Window 以同时打开前后端两个项目, 方便开发. 后端基于 ThinkPHP 的项目无需构建, 可直接部署

部署工程

  • 打开 phpStudy, 在 网站 选项卡中点击 创建网站.
  • 域名填写 backend.cmis.local, 根目录选择后端项目路径下的 public 文件夹, 全文应当是 C:/Dev/CMIS/cmis-backend/public .
  • 选中 同步hosts 选项以同步修改hosts文件, 使得可以通过域名进行访问.
  • 点击 确认 按钮以添加网站.
  • 打开 phpStudy, 在 设置 选项卡的 配置文件 – vhosts.conf 页面中打开 backend.cmis.local_80 文件, 在 location / { 里添加以下内容
if (!-e $request_filename){
    rewrite ^/(.*)$ /index.php/$1 last;
}

最终看起来应该是:

server {
        listen        80;
        server_name  backend.cmis.local;
        root   "C:/Dev/CMIS/cmis-backend/public";
        location / {
            index index.php index.html error/index.html;
            # ...
            autoindex  off;
# ---------- BEGIN ----------
            if (!-e $request_filename){
                rewrite ^/(.*)$ /index.php/$1 last;
            }
# ----------  END  ----------
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            # ...
            include        fastcgi_params;
        }
}
  • 保存并关闭.
  • 在 首页 选项卡的 Nginx 行点击 重启 以重启服务器.

测试部署结果

使用浏览器访问 http://backend.cmis.local/ , 可看到成功页面.

使用浏览器访问 http://backend.cmis.local/hello/cmis 可看到输出 hello,cmis , 后端部署完成.

1.5.6.2. 前端部署

前端部署与后端部署操作相似.

构建工程

在 PhpStorm 中打开前端项目, 点击右上方绿色播放按钮左边的下拉框, 选择 Edit Configurations , 打开的窗口中左上角点击加号, 选择 npm 模板, 右侧 Name 框中键入 npm build, Scripts 框中选择 build, 点击 OK 结束选择.

在右上方绿色播放按钮旁边的下拉框选择刚刚新建的 npm build, 点击运行按钮, 在 4: Run 窗口中可看到编译完毕, 目录为 dist. 这个目录就是我们要部署的工程目录.

部署工程

  • 打开 phpStudy, 在 网站 选项卡中点击 创建网站.
  • 域名填写 cmis.local, 根目录选择前端项目路径下的 dist 文件夹, 全文应当是 C:/Dev/CMIS/cmis-frontend/dist .
  • 选中 同步hosts 选项以同步修改hosts文件, 使得可以通过域名进行访问.
  • 点击 确认 按钮以添加网站.

测试部署结果

使用浏览器访问 http://cmis.local/ , 可看到成功页面.

1.5.6.3. 配置 Nginx 重写以避免跨域问题

前端使用 ajax 等技术访问后端时, 有可能出现跨域通信的问题. 为避免跨域问题, 我们在前端的 vhost.conf 中加入重写转发, 以期前端能用自己的域名以目录的方式访问后端资源, 从而避免跨域的情况出现.

操作步骤

  • 打开 phpStudy, 在 设置 选项卡的 配置文件 – vhosts.conf 页面中打开 cmis.local_80 文件, 在 location / {} 外 (即与 location / 平级)添加以下内容
location /api/ {
    proxy_pass http://backend.cmis.local/ ;
}

最终看起来应该是:

server {
        listen        80;
        server_name  cmis.local;
        root   "C:/Dev/CMIS/cmis-frontend/dist";
        location / {
            index index.php index.html error/index.html;
            # ...
            autoindex  off;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            # ...
            include        fastcgi_params;
        }
# ---------- BEGIN ----------
        location /api/ {
            proxy_pass http://backend.cmis.local/ ;
        }
# ----------  END  ----------
}
  • 保存并关闭.
  • 在 首页 选项卡的 Nginx 行点击 重启 以重启服务器.

测试结果

使用浏览器访问 http://cmis.local/api , 可看到后端成功页面.

使用浏览器访问 http://backend.cmis.local/hello/cmis 可看到输出 hello,cmis .

上述结果证明, 访问 http://backend.cmis.local/* 与访问 http://cmis.local/api/* 的效果相同, 此时前端只需要访问与自己相同域名的路径即可与后端通信, 避免了跨域问题.

1.6. 小结

本期实战从背景及框架简介开始, 搭建了开发环境和部署环境, 为开发做好了准备.

下期实战则从后端开始, 搭建基本请求-相应流程处理机制.

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注