HTML、CSS、JS/JQuery、PHP、Mysql数据库实现简易论坛（体验前后端交互）

最新推荐文章于 2023-10-28 21:54:10 发布

嗨还阔以

最新推荐文章于 2023-10-28 21:54:10 发布

阅读量1.8k

点赞数 3

分类专栏：前端学习文章标签： javascript jquery php mysql

本文链接：https://blog.csdn.net/xs86467/article/details/116453621

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

体验前后端交互？（前端小白的第一个简易论坛）

最近在做web课设，想做一个前后端分离的小项目，于是就做了个极其简易的小论坛。主要的功能是发布文字评论和图片评论。下面带来一些心得体会。

用到的技术

前端：HTML+CSS+JS/JQuery 、后端：PHP 、数据库：MySQL以及数据库sql语句增删改查相应操作计算机网络基础知识

1.利用jQuery生成评论

         var str;
         str += "<p class = 'userName'>"
         str += "XX这里是评论内容XX";
         str += "</p>"
         $(".XXX").append(str);

2.登录与注册

大致的思想是JS从前端获取注册的信息，利用Ajax的POST方法提交到PHP，PHP将注册数据上传至数据库。

下面是前端获取数据的部分代码：

		//获取注册信息以及简单验证
		var userName = $('#inName').val();
        var passWord = $("#inPassword").val();
        var passWord2 = $("#inPassword2").val();
            //注册的前端验证
        if (userName == "" || passWord == "" || passWord2 == ""){
            alert("用户名和密码均不能为空！");
        }else if (passWord != passWord2){
            alert("两次输入不一致！")
        }else{
            ............
        }

Ajax 的应用：获取到数据之后，我们需要将这些数据移交给PHP。这就需要一个中间桥梁——Ajax，利用Ajax的post方法将数据提交给PHP，让PHP对数据做进一步处理，下面是Ajax部分的代码。此外，还需了解一些Json的相关用法：

		 $.post("XXXXXXX.php",             
            {
                "username":userName,   //提交的用户信息
                "password":passWord 

            },function(data,status){
                alert(data+"状态"+status); 
                //加入回调函数
             	.....
            });

好啦！现在PHP要做的是接收这些数据，然后将数据提交至Mysql数据库。

            $name = $_POST['loginname']; 	//从Ajax获取用户名
            $pwd = $_POST['password'];		//从Ajax获取用户设置的密码

下面我们要用PHP与数据库建立连接

			$servername = "localhost";		
            $username = "root";				// 数据库的用户名
            $pwd = "XXXX";					// 密码
            $dbname = "User";    		//数据库名称
            $conn = mysqli_connect($servername, $username, $pwd, $dbname);//连接
            if (!$conn) {
                die("连接失败: " . mysqli_connect_error());
            }
            mysqli_query($conn,"SET NAMES utf8");//设置编码为UTF-8(支持中文)

插入sql语句，将用户信息输入数据库相应的用户表中：

			mysqli_query($conn,"SET NAMES utf8");  //设置编码格式
            $sql = "INSERT INTO users(Usersname, Pword)  //sql语句，将数据输入数据库
            VALUES ('$getName', '$getPwd')";
            mysqli_query($conn, $sql);		//执行sql语句
            mysqli_close($conn);	//关闭连接

3.保持登录状态

由于http协议是无状态的，我们登录过后的状态是无法保存的，那么页面怎样知道我们已经登录了呢？我们可以利用cookie技术来存储用户的登录状态，cookie会将用户的登录信息保存至本地浏览器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uA8l7iOp-1620282956576)(https://s3.ax1x.com/2020/12/04/DqDBYn.md.png)]

(我浏览器中所记录的cookie)

**我解决登录状态的基本思路是：后端PHP在获取到登录信息之后，创建一个用于存储用户登录状态的cookie，在每次刷新页面时。前端会去获取这个cookie 以验证用户身份。这样，我们的页面就知道我们是谁啦！ **

PHP获取用户信息后创建cookie

	setcookie("user",urlencode($name),time()+60*60*24*3,"/"); //创建用户cookie  有效期为三天 且所有页面均可访问

4.评论内容如何保存？保存在数据库的评论又该怎样渲染到前端页面上？我当时的思路是这样滴：

1.发送评论至后端：点击提交按钮，发送Ajax请求。将userName，评论时间发送给后端。后端将其保存至数据库。

2.刷新页面时将评论从后端渲染到前端：在刷新页面后有一个函数会向后端发送请求，请求数据库中所有评论信息。后端将其返回给前端。（用Json格式返回给前端）应该采用循环的方式将json数据插入字符串中，最后用Jquery相应函数将它生成(第一条已经提到)。

前端渲染所用的load函数：

        function load(){
          $.ajax({
            url: "XXXXX.php",
            type: "GET",
            dataType: 'json',
            timeout : 1000,
            async: false,
            success:function(data){     //从后端获取到的json格式数据  

              for(i in data){
                var str;
                str += "<p class = 'userName'>";
                str += data[i].name;
                str += "</p>";
                  ......
                  .....
                  ...
                $(".XXX").append(str);
              }

            }
          });
        }

5.图片评论怎么搞？？？咋把图片存进数据库嘞？我当时的思路是这样滴：

图片无法直接放入数据库中，这可怎么办？上网查找资料，一种解决方案是在数据库中存储图片的路径。没看懂，我好像不太会嗷。。。另一种方案是将图片转换为Base64编码格式，数据库存储图片的Base64编码。emmm, 好像听着可行？

但问题来了，我要在前端生成的是<img> 标签，一般都是在src =中放入图片的路径才能将图片显示。这种方案存入数据库的是Base64编码，那我应该怎样用Base64编码将图片显示到页面上呢？。。感觉一筹莫展时，我无意中了解到img标签的src属性可以直接放入Base64编码，我去？？？？好像问题解决了？？？，半信半疑。网上有专门转换图片为Base64的网站，随便找了张图便得到一大串编码，半信半疑的创建了个img标签，把编码赋值给src属性。。。。。！！！真的可以。说干就干

后面也没有遇到什么大问题，唯一的问题时数据库存图片的字段类型一直不够大，最后设成了mediumText才够用。

1.图片上传思路：

点击“上传图片按钮”，弹出选择本地图片的选项。点击后，将图片转换为base64编码模式。通过ajax提交给PHP ,经PHP处理上传至MySQL数据库。

2.加载图片评论思路：

加载页面时，Ajax 向后端请求图片的base64编码，在回调函数中创建img标签，将图片的base64编码赋给src的img属性（src中的base64编码可以被img标签渲染）

附上图片转base64的代码

  if(/image/.test(files.type)){
        fileReader.readAsDataURL(files);
        type = 'image';
    } else {
        fileReader.readAsText(files,'utf-8');
        type = 'text';
    }
    fileReader.onerror = function (err) {
      console.log(err)
    }
    fileReader.onload = () => {
      console.log(typeof fileReader.result)  //控制台打印类型为String, fileReader.result即为图片的Base64编码
    }