關於前後端分離及初始化配置

後山人發表於2022-03-22
後端

一個Web應用系統前端和後端有兩種協作方式：

  1. 服務端渲染：服務端將網頁直接生成，瀏覽器拿到的是完整的網頁，其中是包含資料的。
  2. 前後端分離：瀏覽器拿到HTML頁面，然後再和後端通訊獲得資料。

兩者相比較各有優缺點：

  1. 資料量，相對於服務端渲染，前後端分離中只傳輸資料，而服務端渲染相比傳輸的資料量會大一些。
  2. 體驗：前後端分離相比服務端渲染多了一個資料渲染的過程，所以，前後端分離可能出現首屏渲染問題。
  3. 耦合：前後端分離傳輸的是資料，前端只負責請求和渲染資料，提供資料由後端完成。服務端渲染傳輸的是HTML包含資料，也就是服務端渲染要把所有事情都做了。
  4. 互動控制：網頁間存在跳轉互動，前後端分離中其頁面控制完全由前端完成。
  5. SEO：前後端分離通常採用SPA方式，對網頁爬蟲不友好。

前後端分離的邏輯是前端人員只關心前端頁面和功能的實現，後端人員只對外提供一個api介面，然後和前端約定好資料格式之後，前後端開發人員就可以各幹各的，互不干擾。前端人員只需要根據後端人員提供的api介面，獲取資料並在前端展示，而後端人員只需要按照約定的資料格式，封裝資料，並提供介面。

RDS快速開發系統前後端分離介紹

後端系統為標準的Thinkphp專案

image.png

前端系統為標準的Vue專案

ui目錄內的內容如下：
1646374687(1).png

專案配置

無論是通過下載 或者 git clone 獲得的原始碼，都需要進行依賴安裝。
因為前端後分離，即前端是獨立的專案（vue專案），後端也是獨立的專案（thinkphp專案）
所以，需要分別為其專案安裝依賴。

前端依賴安裝

// 進入專案目錄
cd ui
yarn install 或者 npm install

後端依賴安裝

// 進入專案目錄
composer install

資料庫配置

首先建立資料庫，假設專案資料庫為 my_rds：

// 使用命令列或者資料庫客戶端執行如下命令
CREATE DATABASE my_rds DEFAULT CHARACTER SET utf8mb4;

匯入資料庫定義檔案
使用資料庫客戶端匯入data.sql檔案
image.png
預設專案根目錄下沒有環境配置檔案。需要建立環境配置檔案：

touch .env

// 檔案內容
APP_DEBUG = true

[APP]
DEFAULT_TIMEZONE = Asia/Shanghai

[LANG]
default_lang = zh-cn

[DATABASE]
type = mysql
hostname = 127.0.0.1
database = database_name
username = username
password = password
hostport = 3306
charset = UTF8
prefix = cd_

配置檔案中設定的資料庫登入資訊，需要和實際伺服器環境保持一致。

其他配置

專案根目錄下的/config/my.php，可以配置諸多選項。

  • 支援配置單裝置登入或者多裝置登入: multiple_login (config/my.php)
  • 支援驗證碼的開關: verify_status (config/my.php)
  • 使用簡訊驗證碼：修改“簡訊閘道器”部分 (config/my.php)
  • 使用雲端儲存：修改“雲端儲存”部分
  • 開發微信小程式：mini_program (config/my.php)
  • 開發微信公眾號應用：official_accounts (config/my.php)
  • 開發微信支付應用：wechat_pay (config/my.php)
  • 支援系統維護中的資料庫備份：mysqldump (config/my.php)

預設情況，以上選項大部分都沒有具體配置。

本地開發

注意：為了能夠進行程式碼生成，目錄ui是不能改名的。

  1. 命令列中切換到專案目錄，啟動thinkphp專案：php think run
  2. 命令列中切換到ui目錄下。啟動前端vue專案：npm run serve

這樣就可以開發了，無論是修改前端還是後端，都可以立即在瀏覽器中看見。
在上面的步驟3，就是啟動後端專案。預設監聽8000埠，如果你的不是，請通過-p引數設定

php think run

開啟ui/src/api/request.js檔案：
這裡可以設定連線後端的埠號和地址，分為開發環境和產品環境

//請求地址
if(process.env.NODE_ENV == 'development'){
    axios.defaults.baseURL = 'http://127.0.0.1:8000/admin'
}
if(process.env.NODE_ENV == 'production'){
    axios.defaults.baseURL = 'http://127.0.0.1:8080/admin'
}

伺服器部署

如果是本地開發完成了，需要部署到伺服器，需要進行服務端部署操作。
為了降低部署難度，本專案將前端打包檔案自動部署到/public/目錄，熟悉thinkphp的同學就知道了，前端專案通過自動部署的目錄就可以開啟了。
比如，我們需要部署到主機demo.test.com
按照thinkphp專案的部署方式，將後端專案部署好，這時候，直接開啟http://demo.test.com就可以開啟專案了。
其原因在於：

  1. 前端專案編譯目的地設定：ui/vue.config.js
module.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 3333,
        open: true,
    },
    outputDir: '../public/dist',
    assetsDir: 'static',
    productionSourceMap: false,
    publicPath: './'
}
  1. 預設thinkphp專案自動跳轉：app/admin/controller/Index.php
class Index
{
    public function index()
    {
        return redirect((string)url('/dist/'));
    }
}

如果是需要將前端和後端分別部署到不同的主機，請分別修改上述配置即可。
[

](https://blog.csdn.net/qq_3345...)

相關文章