??作者簡(jiǎn)介，黑夜開(kāi)發(fā)者，CSDN領(lǐng)軍人物，全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者?，CSDN博客專家，阿里云社區(qū)專家博主，2023年6月CSDN上海賽道top4。
??數(shù)年電商行業(yè)從業(yè)經(jīng)驗(yàn)，歷任核心研發(fā)工程師，項(xiàng)目技術(shù)負(fù)責(zé)人。
??本文已收錄于PHP專欄：PHP進(jìn)階實(shí)戰(zhàn)教程，評(píng)測(cè)專區(qū)。
??歡迎 ??點(diǎn)贊?評(píng)論?收藏

中秋佳節(jié)即將來(lái)臨！在這特殊的時(shí)刻，我們特別舉辦一場(chǎng)屬于程序員的中秋征文活動(dòng)，CSDN與你一起過(guò)中秋！本篇文章還是讓我們用華為云云耀云服務(wù)器L實(shí)例作為支撐，一起帶著大家實(shí)現(xiàn)一個(gè)用PHP從數(shù)據(jù)庫(kù)到后端到前端的中秋節(jié)祝福語(yǔ)項(xiàng)目。

??一、前言

中秋節(jié)是我國(guó)國(guó)傳統(tǒng)的重要節(jié)日之一，人們?cè)谶@一天家人團(tuán)聚、賞月、品嘗月餅。也和親朋好友諸多祝福往來(lái)。

為了更加方便獲取到非常有心意的祝福語(yǔ)，本文將利用PHP和HTML + Jquery開(kāi)發(fā)一個(gè)中秋節(jié)祝福語(yǔ)生成工具，通過(guò)點(diǎn)擊按鈕和輸入姓名，然后就可以馬上生成一條祝福語(yǔ)。我們還將使用MySQL數(shù)據(jù)庫(kù)存放一些祝福語(yǔ)，保證每次生成的都不一樣。

??二、開(kāi)發(fā)環(huán)境準(zhǔn)備

在開(kāi)始之前，我們需要準(zhǔn)備好開(kāi)發(fā)環(huán)境。首先，確保你已經(jīng)安裝了PHP、MySQL和Nginx服務(wù)器。搭建好環(huán)境后，我們可以開(kāi)始編寫代碼了。

首先服務(wù)器上面是沒(méi)有PHP環(huán)境的，然后執(zhí)行下面的命令安裝。

apt install php
apt install php-fpm
apt install php-mysqli
php --version

通過(guò)命令下面的輸出可以看到是PHP8.1的版本，PHP環(huán)境一般是不會(huì)預(yù)裝的，所以得我們自己裝一下。

MySQL服務(wù)docker里面本身也有，直接連就行了。Nginx這些Web中間件也是預(yù)裝的，下面直接就開(kāi)始功能實(shí)現(xiàn)了。

??三、功能實(shí)現(xiàn)

??3.1 準(zhǔn)備數(shù)據(jù)庫(kù)和數(shù)據(jù)

??3.1.1 創(chuàng)建數(shù)據(jù)庫(kù)及表結(jié)構(gòu)

首先，我們需要?jiǎng)?chuàng)建一個(gè)MySQL數(shù)據(jù)庫(kù)用于存儲(chǔ)祝福語(yǔ)。打開(kāi)MySQL命令行或者使用phpMyAdmin等工具，創(chuàng)建一個(gè)名為"blessings"的數(shù)據(jù)庫(kù)。

CREATE DATABASE `blessings` CHARACTER SET 'utf8' COLLATE 'utf8_bin'

接下來(lái)，我們創(chuàng)建一個(gè)名為"messages"的數(shù)據(jù)表，用于存儲(chǔ)祝福語(yǔ)。

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content VARCHAR(255) NOT NULL
);

用navicat創(chuàng)建表執(zhí)行的效果如下。

??3.1.2 準(zhǔn)備數(shù)據(jù)

這里我們插入一些數(shù)據(jù)進(jìn)去，這些數(shù)據(jù)在后面程序里面會(huì)使用到。

insert into messages(content) values
('月圓人團(tuán)圓，中秋節(jié)快樂(lè)！愿你與親朋好友共享美好團(tuán)聚時(shí)光！'),
('中秋團(tuán)圓，心意相連，愿一輪明月帶給你幸福和快樂(lè)！'),
('愿你擁有一顆明亮的心靈，如同中秋的明月般清澈！祝中秋快樂(lè)！'),
('祝你中秋快樂(lè)，萬(wàn)事如意！愿你的生活像滿月一樣圓滿、美好！'),
('祝福你和家人團(tuán)聚快樂(lè)，幸福美滿，中秋節(jié)快樂(lè)！'),
('如同明月照亮夜空，愿你的人生也充滿光明與美好。中秋節(jié)快樂(lè)！'),
('千里傳一聲祝福，千山傳一份思念，愿你在中秋佳節(jié)感受到深深的關(guān)愛(ài)！'),
('中秋之夜，愿你的生活像明亮的月光一樣溫暖和諧！中秋快樂(lè)！'),
('中秋月餅甜蜜，祝福話語(yǔ)深情，愿你的中秋節(jié)充滿關(guān)愛(ài)和溫暖！'),
(' 中秋佳節(jié)，愿你的心中充滿快樂(lè)和喜悅！祝福你度過(guò)一個(gè)美好的中秋！')

??3.2 后端開(kāi)發(fā)

??3.2.1 連接數(shù)據(jù)庫(kù)

在PHP代碼中，我們需要連接到MySQL數(shù)據(jù)庫(kù)。創(chuàng)建一個(gè)名為connect.php的文件，用于存放數(shù)據(jù)庫(kù)連接相關(guān)的代碼。

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "blessings";

// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $password, $dbname);
mysqli_set_charset($conn, "utf8");

// 檢測(cè)連接是否成功
if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
}else {
   echo "數(shù)據(jù)庫(kù)連接成功\n";
}
?>

將your_username和your_password替換為你的MySQL用戶名和密碼。記得數(shù)據(jù)要先創(chuàng)建，不然會(huì)報(bào)錯(cuò)。執(zhí)行完成后可以php connect.php一下，看看能否鏈接成功。

??3.2.1 獲取祝福語(yǔ)

在同一個(gè)connect.php文件中，我們添加獲取隨機(jī)祝福語(yǔ)的功能。

<?php
// ...

// 獲取祝福語(yǔ)
function getRandomBlessing($conn) {
    $sql = "SELECT content FROM messages ORDER BY RAND() LIMIT 1";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        return $result->fetch_assoc()["content"];
    } else {
        return "沒(méi)有找到祝福語(yǔ)";
    }
}

// ...
?>

??3.2.3 處理請(qǐng)求

創(chuàng)建一個(gè)名為generate.php的文件，用于處理前端發(fā)送過(guò)來(lái)的請(qǐng)求。

<?php
require_once "connect.php";

// 處理請(qǐng)求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 獲取姓名
    $name = $_POST["name"];

    // 獲取隨機(jī)祝福語(yǔ)
    $blessing = getRandomBlessing($conn);

    // 拼接結(jié)果
    $result = $name . "：" . $blessing;

    // 返回結(jié)果
    echo $result;
}
?>

??3.2.4 配置Nginx與FPM

這一步是必須要走的，通過(guò)Nginx打通FPM，這是最佳實(shí)踐。這里還是在sites-enabled下面建一個(gè)虛擬域名bless.conf，內(nèi)容如下。

server {
   listen 80;
   server_name bless.heiye.net;
   location ~* ^/blessing {
       root /var/web/front/;
   }
   location / {
       fastcgi_pass unix:/run/php/php8.1-fpm.sock;
       fastcgi_index  index.php;
       fastcgi_param  SCRIPT_FILENAME /var/web/blessing$fastcgi_script_name;
       fastcgi_param  HTTP_PROXY  "";
       include        fastcgi_params;
   }
}

其中bless.heiye.net是虛擬域名，/run/php/php8.1-fpm.sock是PFM的sock端口，為什么是它，/etc/php/8.1/fpm/pool.d/www.conf這個(gè)里面有。配置完了，重啟Nginx服務(wù)就行了。

如果遇到了下面的權(quán)限問(wèn)題，去Nginx的主配置文件里面修改用戶為www-data。

??3.3 前端開(kāi)發(fā)

??3.3.1 HTML布局

創(chuàng)建一個(gè)名為index.html的文件，用于展示按鈕和輸入框。

<!DOCTYPE html>
<html>
<head>
    <title>中秋節(jié)祝福語(yǔ)生成工具</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">中秋節(jié)祝福語(yǔ)生成工具</h1>
        <div class="form-group row">
            <label for="name" class="col-sm-2 col-form-label">姓名</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入姓名">
            </div>
        </div>
        <div class="text-center mb-4">
            <button type="button" class="btn btn-primary" id="generate">生成祝福語(yǔ)</button>
        </div>
        <div class="form-group row">
            <label for="greeting" class="col-sm-2 col-form-label">祝福語(yǔ)</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="greeting" readonly></textarea>
            </div>
        </div>
    </div>
    <script>
	
    </script>
</body>
</html>

??3.3.2 JQuery事件處理

在同一個(gè)index.html"文件中，添加Jquery事件處理的代碼，用于發(fā)送請(qǐng)求和展示結(jié)果。

<!-- ... -->

<script>
$(document).ready(function(){
    $("#generate").click(function(){
        var name = $("#name").val();

        $.post("/generate.php",
        {
            name: name
        },
        function(data, status){
            $("#greeting").text(data);
        });
    });
});
</script>
</body>
</html>

??四、運(yùn)行和測(cè)試

??4.1 綁定host

上面Nginx配置里面提到了bless.heiye.net這個(gè)域名，實(shí)際上這個(gè)域名不是真實(shí)存在的，要訪問(wèn)到需要配置一下，我是Mac，在/etc/hosts中修改，Windows在C:\Windows\System32\drivers\etc這個(gè)目錄下面的host文件，放入下面這一行。

124.70.177.136 bless.heiye.net

??4.2 開(kāi)始測(cè)試

將connect.php、generate.php和index.html文件放置到對(duì)應(yīng)的服務(wù)器目錄下，并啟動(dòng)服務(wù)器。在瀏覽器中訪問(wèn)http://bless.heiye.net/blessing/index.html，你將看到一個(gè)輸入框和一個(gè)按鈕。

在輸入框中輸入你的名字，點(diǎn)擊按鈕后，頁(yè)面將展示一條隨機(jī)的祝福語(yǔ)，并將你的名字添加到祝福語(yǔ)的前面。

如上圖，姓名我輸入黑夜開(kāi)發(fā)者，就為我生成了一條不錯(cuò)的祝福語(yǔ)，是不是滿滿的儀式感呢。

??五、總結(jié)

本篇文章通過(guò)華為云云耀云服務(wù)器L實(shí)例進(jìn)行支持開(kāi)發(fā)，用PHP和HTML + Jquery開(kāi)發(fā)一個(gè)中秋節(jié)祝福語(yǔ)生成工具。通過(guò)點(diǎn)擊按鈕和輸入姓名，后端隨機(jī)返回一條祝福語(yǔ)，并將名字加到祝福語(yǔ)的前面展示出來(lái)。同時(shí)，我們還使用MySQL數(shù)據(jù)庫(kù)存放后端的祝福語(yǔ)。希望本文能夠加深你理解PHP和HTML + Jquery這種全棧開(kāi)發(fā)模式，并能在真實(shí)的項(xiàng)目中提供一些實(shí)用的開(kāi)發(fā)思路。

到現(xiàn)在為止，我的L實(shí)例上面已經(jīng)部署了很多服務(wù)了，有Python的Flask服務(wù)，自動(dòng)化測(cè)試腳本服務(wù)，中秋節(jié)祝福語(yǔ)項(xiàng)目，Presta Shop跨境商城。在一個(gè)2核2G的服務(wù)器上面能夠玩這么多東西還是非常不錯(cuò)的。

感謝CSND，華為云本次測(cè)評(píng)邀請(qǐng)，希望華為云越來(lái)越好，希望中國(guó)的云事業(yè)更上一層樓，我作為一個(gè)普通開(kāi)發(fā)者，也將不斷參與與見(jiàn)證這一偉大的技術(shù)探索與變革。

今天的內(nèi)容就到這里，我們下期再會(huì)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-714193.html

到了這里，關(guān)于華為云云耀云服務(wù)器L實(shí)例評(píng)測(cè)｜用PHP從數(shù)據(jù)庫(kù)到后端到前端完整實(shí)現(xiàn)一個(gè)中秋節(jié)祝福語(yǔ)項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！