华为云云耀云服务器L实例评测|用PHP从数据库到后端到前端完整实现一个中秋节祝福语项目

在这里插入图片描述

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。
🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。
🏆本文已收录于PHP专栏:PHP进阶实战教程,评测专区。
🎉欢迎 👍点赞✍评论⭐收藏

文章目录

  • 🚀一、前言
  • 🚀二、开发环境准备
  • 🚀三、功能实现
    • 🔎3.1 准备数据库和数据
      • 🍁3.1.1 创建数据库及表结构
      • 🍁3.1.2 准备数据
    • 🔎3.2 后端开发
      • 🍁3.2.1 连接数据库
      • 🍁3.2.1 获取祝福语
      • 🍁3.2.3 处理请求
      • 🍁3.2.4 配置Nginx与FPM
    • 🔎3.3 前端开发
      • 🍁3.3.1 HTML布局
      • 🍁3.3.2 JQuery事件处理
  • 🚀四、运行和测试
    • 🔎4.1 绑定host
    • 🔎4.2 开始测试
  • 🚀五、总结

中秋佳节即将来临!在这特殊的时刻,我们特别举办一场属于程序员的中秋征文活动,CSDN与你一起过中秋!本篇文章还是让我们用华为云云耀云服务器L实例作为支撑,一起带着大家实现一个用PHP从数据库到后端到前端的中秋节祝福语项目。

🚀一、前言

中秋节是我国国传统的重要节日之一,人们在这一天家人团聚、赏月、品尝月饼。也和亲朋好友祝福诸多祝福往来。

在这里插入图片描述

为了更加方便获取到非常有心意的祝福语,本文将利用PHPHTML + Jquery开发一个中秋节祝福语生成工具,通过点击按钮和输入姓名,然后就可以马上生成一条祝福语。我们还将使用MySQL数据库存放一些祝福语,保证每次生成的都不一样。

🚀二、开发环境准备

在开始之前,我们需要准备好开发环境。首先,确保你已经安装了PHPMySQLApache服务器。搭建好环境后,我们可以开始编写代码了。

首先服务器上面是没有PHP环境的,然后执行下面的命令安装。

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

通过命令下面的输出可以看到是PHP8.1的版本,PHP环境一般是不会预装的,所以得我们自己装一下。
在这里插入图片描述

MySQL服务docker里面本身也有,直接连就行了。Nginx这些Web中间件也是预装的,下面直接就开始功能实现了。

在这里插入图片描述

🚀三、功能实现

🔎3.1 准备数据库和数据

🍁3.1.1 创建数据库及表结构

首先,我们需要创建一个MySQL数据库用于存储祝福语。打开MySQL命令行或者使用phpMyAdmin等工具,创建一个名为"blessings"的数据库。

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

接下来,我们创建一个名为"messages"的数据表,用于存储祝福语。

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

用navicat创建表执行的效果如下。

在这里插入图片描述

🍁3.1.2 准备数据

这里我们插入一些数据进去,这些数据在后面程序里面会使用到。

insert into messages(content) values
('月圆人团圆,中秋节快乐!愿你与亲朋好友共享美好团聚时光!'),
('中秋团圆,心意相连,愿一轮明月带给你幸福和快乐!'),
('愿你拥有一颗明亮的心灵,如同中秋的明月般清澈!祝中秋快乐!'),
('祝你中秋快乐,万事如意!愿你的生活像满月一样圆满、美好!'),
('祝福你和家人团聚快乐,幸福美满,中秋节快乐!'),
('如同明月照亮夜空,愿你的人生也充满光明与美好。中秋节快乐!'),
('千里传一声祝福,千山传一份思念,愿你在中秋佳节感受到深深的关爱!'),
('中秋之夜,愿你的生活像明亮的月光一样温暖和谐!中秋快乐!'),
('中秋月饼甜蜜,祝福话语深情,愿你的中秋节充满关爱和温暖!'),
(' 中秋佳节,愿你的心中充满快乐和喜悦!祝福你度过一个美好的中秋!')

🔎3.2 后端开发

🍁3.2.1 连接数据库

在PHP代码中,我们需要连接到MySQL数据库。创建一个名为connect.php的文件,用于存放数据库连接相关的代码。

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "blessings";// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
mysqli_set_charset($conn, "utf8");// 检测连接是否成功
if ($conn->connect_error) {die("连接失败: " . $conn->connect_error);
}else {echo "数据库连接成功\n";
}
?>

your_usernameyour_password替换为你的MySQL用户名和密码。记得数据要先创建,不然会报错。执行完成后可以php connect.php一下,看看能否链接成功。

在这里插入图片描述

🍁3.2.1 获取祝福语

在同一个connect.php文件中,我们添加获取随机祝福语的功能。

<?php
// ...// 获取祝福语
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 "没有找到祝福语";}
}// ...
?>

🍁3.2.3 处理请求

创建一个名为generate.php的文件,用于处理前端发送过来的请求。

<?php
require_once "connect.php";// 处理请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {// 获取姓名$name = $_POST["name"];// 获取随机祝福语$blessing = getRandomBlessing($conn);// 拼接结果$result = $name . ":" . $blessing;// 返回结果echo $result;
}
?>

🍁3.2.4 配置Nginx与FPM

这一步是必须要走的,通过Nginx打通FPM,这是最佳实践。这里还是在sites-enabled下面建一个虚拟域名bless.conf,内容如下。

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.sockPFMsock端口,为什么是它,/etc/php/8.1/fpm/pool.d/www.conf这个里面有。配置完了,重启Nginx服务就行了。

如果遇到了下面的权限问题,去Nginx的主配置文件里面修改用户为www-data

在这里插入图片描述

🔎3.3 前端开发

🍁3.3.1 HTML布局

创建一个名为index.html的文件,用于展示按钮和输入框。

<!DOCTYPE html>
<html>
<head><title>中秋节祝福语生成工具</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">中秋节祝福语生成工具</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="请输入姓名"></div></div><div class="text-center mb-4"><button type="button" class="btn btn-primary" id="generate">生成祝福语</button></div><div class="form-group row"><label for="greeting" class="col-sm-2 col-form-label">祝福语</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事件处理

在同一个index.html"文件中,添加Jquery事件处理的代码,用于发送请求和展示结果。

<!-- ... --><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>

🚀四、运行和测试

🔎4.1 绑定host

上面Nginx配置里面提到了bless.heiye.net这个域名,实际上这个域名不是真实存在的,要访问到需要配置一下,我是Mac,在/etc/hosts中修改,WindowsC:\Windows\System32\drivers\etc这个目录下面的host文件,放入下面这一行。

124.70.177.136 bless.heiye.net

🔎4.2 开始测试

connect.phpgenerate.phpindex.html文件放置到对应的服务器目录下,并启动服务器。在浏览器中访问http://bless.heiye.net/blessing/index.html,你将看到一个输入框和一个按钮。

在输入框中输入你的名字,点击按钮后,页面将展示一条随机的祝福语,并将你的名字添加到祝福语的前面。

在这里插入图片描述

如上图,姓名我输入黑夜开发者,就为我生成了一条不错的祝福语,是不是满满的仪式感呢。

🚀五、总结

本篇文章通过华为云云耀云服务器L实例进行支持开发,用PHPHTML + Jquery开发一个中秋节祝福语生成工具。通过点击按钮和输入姓名,后端随机返回一条祝福语,并将名字加到祝福语的前面展示出来。同时,我们还使用MySQL数据库存放后端的祝福语。希望本文能够加深你理解PHPHTML + Jquery这种全栈开发模式,并能在真实的项目中提供一些实用的开发思路。

到现在为止,我的L实例上面已经部署了很多服务了,有Python的Flask服务,自动化测试脚本服务,中秋节祝福语项目,Presta Shop跨境商城。在一个2核2G的服务器上面能够玩这么多东西还是非常不错的。

感谢CSND,华为云本次测评邀请,希望华为云越来越好,希望中国的云事业更上一层楼,我作为一个普通开发者,也将不断参与与见证这一伟大的技术探索与变革。

在这里插入图片描述

今天的内容就到这里,我们下期再会。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/82666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据知识点之大数据5V特征

大数据的特征可以浓缩为五个英文单词&#xff0c;Volume(大量&#xff09;、Variety(多样性&#xff09;、Velocity(速度&#xff09;、Value(价值&#xff09;、Veracity(准确性&#xff09;。因为是5个特征都是以“V”开头的英文单词&#xff0c;又叫大数据5V特征。 概述&…

Putty连接服务器

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

k8s1.20集群域名与集群ip解析详解及使用案例

目录 一.k8s中的域名解析浅析 1.单机 2.k8s的容器中 二.k8s不同版本对应的dns域名服务组件

代理IP和Socks5代理:跨界电商与爬虫的智能引擎

跨界电商&#xff0c;作为全球市场的一部分&#xff0c;对数据的需求越来越大。同时&#xff0c;随着互联网的发展&#xff0c;爬虫技术也在不断演进&#xff0c;成为了跨界电商的关键工具之一。然而&#xff0c;随之而来的是网站的反爬虫机制和网络安全风险。在这种情况下&…

学习 CodeWhisperer 的一些总结

目前一些常见的的 AI 工具 GitHub Copilot&#xff1a;GitHub 与 OpenAI 合作开发的一个人工智能助手。 Codeium&#xff1a;是一个免费的人工智能驱动的代码生成工具 Tabnine&#xff1a;一个自动代码生成工具&#xff0c;免费版本非常有限&#xff0c;只提供简短的代码完成…

Java版本spring cloud + spring boot企业电子招投标系统源代码

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…

Qt消息机制和事件

事件 事件是由Qt或者系统在不同时刻发出的,当敲下鼠标,或者按下键盘,或者当窗口需要重新绘制的时候,就会发出一个相应的事件,一些操作由用户的操作发出,一些则由系统自动发出,如系统定时器事件等。 Qt 中所有事件类都继承于 QEvent。 在事件对象创建完毕后, Qt 将这个…

【数据结构】二叉树的层序遍历(四)

目录 一&#xff0c;层序遍历概念 二&#xff0c;层序遍历的实现 1&#xff0c;层序遍历的实现思路 2&#xff0c;创建队列 Queue.h Queue.c 3&#xff0c;创建二叉树 BTree.h BTree.c 4&#xff0c;层序遍历的实现 一&#xff0c;层序遍历概念 层序遍历&#xff1a;除了先序…

面试官:什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 一、什么是虚拟DOM 二、为什么需要虚拟DOM 三、如何实现虚拟DOM 小结 一、什么是虚拟DOM 虚拟 DOM &#xff08…

Android13适配-Google官方照片视频选择器

官方照片选择器 图 1. 照片选择器提供了一个直观的界面&#xff0c;便于与您的应用分享照片。 照片选择器的界面可供浏览和搜索&#xff0c;并按日期降序向用户显示其媒体库中的文件。如隐私保护最佳实践 Codelab 中所示&#xff0c;照片选择器为用户提供了一种安全的内置授权…

Nginx配置SSL证书

1 Ubuntu 20.04 上安装 Nginx Nginx 发音 “engine x” ,是一个开源软件&#xff0c;高性能 HTTP 和反向代理服务器&#xff0c;用来在互联网上处理一些大型网站。它可以被用作独立网站服务器&#xff0c;负载均衡&#xff0c;内容缓存和针对 HTTP 和非 HTTP 的反向代理服务器。…

API接口采集电商平台阿里巴巴中国站获得1688商品评论数据货品评分、评价内容接口调用指南

淘宝API商品评论接口&#xff0c;主要用于获取某个商品的评价信息。通过该接口&#xff0c;我们可以获取到商品的所有评价内容、评价时间、评价等级等相关信息&#xff0c;帮助我们更好地了解用户对商品的反馈&#xff0c;进而进行数据分析和业务优化。 1688.item_review-获得…

java项目之咖啡馆管理系统ssm+jsp

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的咖啡馆管理系统。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&am…

算法课作业1

https://vjudge.net/contest/581138 A - Humidex 模拟题 题目大意 给三个类型数字通过公式来回转化 思路 求e的对数有log函数&#xff0c;不懂为什么不会出精度错误&#xff0c;很迷&#xff0c;给的三个数字也没有顺序&#xff0c;需要多判断。 #include<cstdio>…

C++设计模式_04_Strategy 策略模式

接上篇&#xff0c;本篇将会介绍C设计模式中的Strategy 策略模式&#xff0c;和上篇模板方法Template Method一样&#xff0c;仍属于“组件协作”模式&#xff0c;它与Template Method有着异曲同工之妙。 文章目录 1. 动机&#xff08; Motivation&#xff09;2. 代码演示Stra…

STP介绍

目录 STP概述 二层环路带来的问题 1.广播风暴 2.MAC地址漂移问题 3.多帧复制---这个好理解&#xff0c;同一个数据帧被重复收到多次&#xff0c;被称为多帧复制。 802.1D生成树 STP的BPDU BPDU主要分为两大类 配置BPDU RPC COST 配置BPDU的工作过程 TCN BPDU TCN…

2023年以就业为目的学习Java还有必要吗?(文末送书)

目录 一、活力四射的 Java二、从零开始学会 Java三、准备工作四、基础知识五、进阶知识六、高级知识七、结语参与方式 大家好&#xff0c;我是哪吒。 文末送5本《Java编程动手学》 今天来探讨一个问题&#xff0c;现在学 Java 找工作还有优势吗&#xff1f; 在某乎上可以看到…

RISC-V架构学习——C语言内嵌汇编总结

1、C语言内嵌汇编的作用 &#xff08;1&#xff09;优化&#xff1a;对于特别重要代码进行优化&#xff0c;出于性能的考虑&#xff1b; &#xff08;2&#xff09;C语言需要借助汇编指令来实现特殊功能。比如&#xff1a;C语言中访问系统寄存器就需要借助CSR指令&#xff1b; …

Python 使用raise引发异常

视频版教程 Python3零基础7天入门实战视频教程 当程序出现错误时&#xff0c;系统会自动引发异常。除此之外&#xff0c;Python也允许程序自行引发异常&#xff0c;自行引发异常使用raise语句来完成。 一般是业务逻辑上&#xff0c;业务异常问题&#xff0c;我们可以自行引发…

Soft-Serve小巧强大-轻量级Git服务

文章目录 前言一、Soft-Serve官方解释&#xff1a;我的要求 二、使用步骤我的环境公钥、私钥生成安装镜像参数解释&#xff1a; 配置config.yamlconfig 实操创建用户及绑定公钥创建代码仓库及添加合作者之后就是 git 基本操作了 总结 前言 用过 Gitlab, 也挺好用。 遇到几个问…