［CodeCMS-Web大项目］系列EP1:Version0.1诞生！

Nixx0328 · 发表于 2025-2-2 07:14:55

实战就是最好的学习。
不是学好了在再干，而是干起来再学习，干就是学习。——毛泽东

本系列，我将在实战中学习前端技术，分享我的CMS开发过程。

一些看前须知：
1. 项目起源：[CodeCraft代码工艺项目上线]
2. 讨论圈子：[CZLJ主论坛--计算机网络技术学习圈]
3. 作者QQ ：387575267@qq.com
4. CMS知识：[百度百科--CMS内容管理系统是什么]
5. 项目网址：[🔰CodeCraft🌠代码工艺官网🔱] (不是分享链接，是效果演示)
6. 资源学习：[菜鸟教程-你不知道的都在这里]

Part 1 开发环境#网页服务器&工具
众所周知，一个Web项目需要运行以便查看效果，需要一个服务器或是一个服务器环境+公网ip绑定域名+SSL证书+MySQL数据库+PHP解释器+FTP面板
市面上的网页服务器大多性能高但价格贵，操作复杂，这时候就需要一些比较小众的云服务了。
这里，我强烈推荐czlj、czlj博客、我的codecraft使用的圣道云服务器的 CZLJ云服务，价格实惠且直接网页操作：

基础服务内容包括:
-- XXX.czlj.net+XXX.sheng17.site两个免费二级域名(已与服务器面板绑定，无须复杂配置，)
--1000MB中小型网站网页空间+500MB MySQL数据库+99999GB每月超大超值流量包
--圣道云宝塔虚拟主机面板用户密码

其中圣道云宝塔虚拟主机功能有
--ftp用户名密码+mysql用户名密码1个(上手就用，功能强大)
--配置好的数据库管理系统phpmyadmin，其域名与服务器域名分开管理，安全可靠
--在线文件管理面板，文件编辑、上传、导出、解/压缩、新建等功能
--圣道云SSL安全证书(手动开启，自动配置)
--圣道云网站一键部署服务

详细服务请资讯站长 @_CX_ 大大

接着是开发工具
常规方案：
使用VScode，安装five-server插件或搭配本地的phpstudy虚拟主机软件进行开发，开发完再上传主机根目录查看网址页面效果
[VScode编辑器官网下载网址](https://code.visualstudio.com "VScode编辑器官网下载网址")
[小皮面板_phpstudy软件官网](https://www.xp.com "小皮面板_phpstudy软件官网")

~~非常规方案:就是像我一样电脑坏了的，直接在本地编辑完代码文件然后上传至你的云主机的根目录，直接查看效果~~

Part2 开发过程
由于*某些不可抗因素*，我选择暂时在我的科大讯飞学习机上开发这个CMS。

由于这个项目去年我已经做了一阵子，已经做好了一个主页模板，所以我选择直接采用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>✨CodeCraft💡用热爱🔥编写未来🌅</title>
<b>CODECRAFT,用一生热爱，编写未来</b>
<br>
我们的官网
<a href="https://codecraft.czlj.net">
代码工艺·CodeCraft
</a>
<br>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
}
/* 头部标题 */
.header {
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
top:0;
padding:5px;
position:sticky;
position:-webkit-sticky;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width : 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
</html>

复制代码

效果如图

可以到官网查看:[主页](https://codecraft.czlj.net "主页")

对于我这种前端萌新，我选择借助专ren业gong人zhi士neng来帮助我开发。我使用了科大讯飞ai学习机上的ai编程助手，再经过我的沟通下，我做出了一个最基本的CMS

)

文件目录树：
<根目录>/［-］  ━━📖application［-］━━📖db_api［-］━━📝db.php
                  │                                                                         ┕━━  📝submit_post.php
                  ┝━━━📖data［-］
                  ┝━━━📝editor.php
                  ┝━━━📝viewer.php
                  ┕━━━📝index.php

说明：
1. application文件夹含处理页面的请求发送数据的文件
其中1.db_api文件夹含处理有关数据库交互的文件
其中其中1.db.php用于与数据库进行连接，方便其他文件与数据库交互
其中其中2.submit_post.php用于把用户发表的内容数据存进数据库
2. data文件夹含数据文件(暂时为空，以后可能会用)
3. editor.php文件为编辑帖子页面
4. viewer.php文件为查看帖子页面
5. index.php文件为主页，含链接至其及以上两个页面

db.php的代码&原理：

<?php
$servername = "localhost";//数据库地址
$username = "*******";//数据库用户名
$password = "*******";//数据库密码
$dbname = "*******";//要访问的数据库名
//这里*是不可见内容 :P 实际使用时需要换成你自己的数据库信息
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

复制代码

原理：使用mysqli函数，填入数据库地址，用户名，密码，需要访问的数据库，这样就打通了网页与数据库的通道，其他文件才能读写数据库*

submit_post.php的代码&原理：

<?php
include 'db.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$title = $_POST['title'];
$author = $_POST['author'];
$content = $_POST['content'];
$time = date('Y-m-d H:i:s'); // 获取当前时间
$stmt = $conn->prepare("INSERT INTO posts (author, time, title, content) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $author, $time, $title, $content);
if ($stmt->execute()) {
header("Location:/viewer.php"); // 重定向到帖子页
} else {
echo "Error: " . $stmt->error;
}
$stmt->close();
$conn->close();
}

复制代码

原理：这个文件要与editor.php，db.php一起调用。
首先include 'db.php'，就是应用在它同目录下的db.php这样db.php的代码会运行，就打通了网页与数据库的通道
在已选数据库中，我提前建了一个叫posts的表格，用于存放帖子数据。这个表格有5列，分别为

列名	存放数据类型	最大长度
id	int	3位数字
author	char	20位字符串
title	char	30位字符串
time	datetime	6位日期时间
content	longtext	3000位字符串

接着获取editor.php页面三个输入框（标题，作者，内容）的数据并获取当前时间，把这4个数据组合成一条SQL语句（见代码第九行），然后把这条语句发送给SQL数据库，数据库就会运行这条语句，把上面的四个数据插入已选数据库中的一个叫posts的表格
phpmyadmin页面查看已选数据库的posts表格就会多出一条。

id	author	time	title	content
0	Admin_ni	2025-2-1-9:00:00.000000000000	测试帖	这是一个测试帖........

editor.php的代码&原理：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Post</title>
<style>
body {
background-color: #f0f0f0;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
top:0;
padding:5px;
position:sticky;
position:-webkit-sticky;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.form-container {
background-color: white;
margin: 20px auto;
padding: 20px;
width: 450px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-container input, .form-container textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-container button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-container button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="topnav">
<a href="viewer.php" target="_blank">论坛bbs</a>
<a href="editor.php" target="_blank">创作edit</a>
<a href="index.php">主页</a>
<a href="#" style="float:right">登陆</a>
</div>
<div class="form-container">
<form action="application/db_api/submit_post.php" method="post">
<input type="text" name="title" placeholder="Title" required><br>
<input type="text" name="author" placeholder="Author" required><br>
<textarea name="content" placeholder="Content" maxlength="500" required></textarea><br>
<button type="submit">;Publish</button>
</form>
</div>
</body>
</html>

复制代码

原理：只是一个框架，有三个输入框（作者，标题，内容），等用户写完点击submit按钮后，三个输入框的数据就会传递给上面的submit_post.php文件传输，与数据库交互。如果submit_post.php文件发生异常，比如db.php连接到数据库失败，就会显示Error。

viewer.php的代码&原理：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>;Posts Page</title>
<style>
body {
background-color: #f0f0f0;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
top:0;
padding:5px;
position:sticky;
position:-webkit-sticky;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.post {
background-color: white;
margin: 20px auto;
padding: 20px;
width: 450px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.post h3 {
margin: 0;
}
.post small {
color: gray;
}
.post span {
display: block;
font-size: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="topnav">
<a href="viewer.php" target="_blank">论坛bbs</a>
<a href="editor.php" target="_blank">创作edit</a>
<a href="index.php">主页</a>
<a href="#" style="float:right">登陆</a>
</div>
<?php include 'application/db_api/db.php'; ?>
<?php
$sql = "SELECT id, author, time, title, content FROM posts";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '<div class="post">';
echo '<h3>' . htmlspecialchars($row['title']) . '</h3>';
echo '<small>' . htmlspecialchars($row['author']) . ' | ' . htmlspecialchars($row['time']) . '</small><br>';
echo '<span>' . htmlspecialchars($row['content']) . '</span>';
echo '</div>';
}
} else {
echo "No posts found.";
}
$conn->close();
?>
</body>
</html>

复制代码

原理：
html部分有三个链接，分别链接到viewer.php,editor.php和index.php；
php部分首先构建一条查询posts表格的SQL语句，把这个语句发送给数据库，数据库就会把posts表格里的内容返回给网页，然后网页用while循环把帖子按标题作者日期内容的顺序输出成html，就达到了查看帖子的效果。如果数据库返回的结果为null，则输出no posts.没有帖子。

index.php的代码&原理：就是一个主页模板，其中的文章是假的，唯一用处就是上面的3个链接。代码在上文

## 最终这个CMS的效果如图
发帖

)
看帖

)

Part3 总结与后续
本期，我在ai助手的帮助下完成了这个CMS的基础功能：
1. 一个简约好看的主页
2. 查看帖子的页面和看帖功能
3. 发布帖子的页面和发帖功能

不过这个cms系统仍有不足：
1.查看帖子页面应该在主页
2.发帖虽然格式化的其中内容，不会有XSS攻击，但无法换行，其UI和字体功能等任待开发
3.这个cms没有任何sql注入防御机制，攻击者可能在发帖页面输入SQL注入命令，安全问题较大
4.主页的登陆按钮和文章（假）仍是摆设

更新方向：
**1编写登录、用户系统
2完善发帖、看帖UI界面和完善SQL注入漏洞**
3完善更多论坛功能

最后，我为这个cms系统起名为：

>_ CodeCMS

版本v0.1 [点击下载](https://codecraft.czlj.net/v0.1.zip "点击下载")

敬请期待下一版本更新！

Nixx0328 · 发表于 2025-2-2 07:59:23

@_CX_

Nixx0328 · 发表于 2025-2-3 18:38:20

v0.2版本更新中！
来官网可以看更新文档与进度：https://codecraft.czlj.net

		自动登录	找回密码
密码			立即注册