0-1前端在线网页微博思路

最新推荐文章于 2024-01-12 11:42:39 发布

初学C于晏

最新推荐文章于 2024-01-12 11:42:39 发布

阅读量1.1k

点赞数

分类专栏：前端小项目文章标签：前端 javascript html ajax

本文链接：https://blog.csdn.net/weixin_53011469/article/details/121890923

版权

前端小项目专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文档详细介绍了如何使用jQuery库、HTML、CSS和Ajax技术实现一个简单的微博应用。包括用户发布微博、点赞、删除等功能，并通过Ajax与PHP后端进行数据交互。同时，利用Wampserver搭建本地服务器，实现页面刷新后信息的持久化。此外，还涉及了cookie的使用和管理，以及页面分页功能的实现。在过程中，强调了错误处理和数据一致性的重要性。

摘要由CSDN通过智能技术生成

实现效果与思路：

效果：
1.再次刷新页面，服务器已经保存，再次刷新读取服务器信息继续渲染
2.实现翻页效果,通过关闭再次开启，仍保存着点赞，删除等信息
在这里插入图片描述

思路：
用户访问网页，就是访问网页服务器。此项目利用wampserver软件将本机搭建成一个服务器。访问也就是从本机文件地址栏访问。
在这里插入图片描述

工具,知识点

工具：phpstorm，wampserver，
知识：jQuery库，html，css，js知识，jQ-Ajax

步骤与思路：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新浪微博-jQuery基础</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery-1.12.4.js"></script>
<!--  <script src="js/jquery.cookie.js"></script>-->
  <script src="js/index.js"></script>
</head>
<body>
<div class="nav">
  <img src="images/nav.png" alt="">
</div>

<div class="content">
  <img src="images/left.png" alt="" class="left">
  <div class="center">
    <textarea class="comment"></textarea>
    <input type="button" value="发布" class="send" disabled>
  </div>
  <img src="images/right.png" alt="" class="right">
  <div class="messageList"></div>
</div>
<div class="page">
  <a href="javascript:;" class="cur">1</a>
  <a href="javascript:;">2</a>
  <a href="javascript:;">3</a>
</div>
</body>
</html>
        }

css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    background: url("../images/body_bg.jpg") no-repeat center 0;
}
.nav{
    width: 100%;
    height: 48px;
}
.nav>img{
    width: 100%;
}
.content{
    width: 1000px;
    height: auto;
    overflow: hidden;
    background: #ebdbd4;
    margin: 200px auto 0 auto;
}
.content>.left{
    float: left;
    width: 150px;
}
.content>.right{
    float: right;
    width: 240px;
}
.content>.center{
    float: left;
    width: 600px;
    height: 168px;
    background: url("../images/comment.png") no-repeat 0 0;
    background-size: 600px 168px;
}
.center>.comment{
    width: 570px;
    height: 73px;
    margin-top: 45px;
    margin-left: 15px;
    /*background: red;*/
    resize: none;
    border: none;
    outline: none;
}
.center>.send{
    width: 82px;
    height: 30px;
    margin-top: 4px;
    margin-left: 506px;
    border: none;
    background: #fd8040;
    color: white;
}
.content>.messageList{
    width: 600px;
    background: white;
    float: left;
}
.messageList>.info{
    padding: 10px 20px;
    border-bottom: 2px solid #ccc;
}
.info>.infoText{
    line-height: 25px;
    margin-bottom: 10px;
}
.info>.infoOperation{
    width: 100%;
    overflow: hidden;
}
.infoOperation>.infoTime{
    float: left;
    font-size: 13px;
    color: #ccc;
}
.infoOperation>.infoHandle{
    float: right;
    font-size: 13px;
}
.infoHandle>a{
    text-decoration: none;
    color: #ccc;
    background: url("../images/icons.png") no-repeat 0 0;
    padding-left: 25px;
    margin-left: 10px;
}
.infoHandle>a:nth-child(2){
    background-position: 0 -17px;
}
.infoHandle>a:nth-child(3){
    background-position: 0 -33px;
}
.page{
    width: 1000px;
    height: 40px;
    background: #9f5024;
    margin: 0 auto;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;
}
.page>a{
    text-decoration: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 20px;
    color: #2b2b2b;
    margin-right: 10px;
}
.page>a:hover{
    background-color: red;
}
.page>.cur{
    background-color: red;
}

js的前端服务请求

用户输入数据传入远程服务器：
步骤一：
结合后端给出的apl文档，利用ajax提交至服务器，获得响应
1.apl：
在这里插入图片描述 weibo.php为文件位置，act=add&content为key value，xxx为用户输入的内容

2.提交，服务器返回一个字符串（注意服务器返回是否一致）
在这里插入图片描述

3.jSon字符串转换为对象并拼接
注意点：标准的json字符串才能用parse方法转换成对象，可以使用wval方法万能转换

在这里插入图片描述
4.获取某页微博数据（即点击进去就是第几页的内容）
4.1根据api，向服务器请求

4.2

4.3服务器返回json数组，类似json字符串转对象的eval方法
数组
4.4数组转为对象再遍历

4.5类似上面创建节点

5.顶踩删，向服务器保存（刷新后数据不变）
服务器返回的对象中有id，在原生dom上添加属性，属性上保存对象id
在所有的创建节点添加属性保存对象id
在这里插入图片描述

info就是一个微博信息

踩与删只需替换一下参数：

bug1：点击发布console未接受到服务器响应。解决：清空历史记录

6.获取页数
6.1服务器请求，获得数组，转换为对象，遍历

在这里插入图片描述

6.2转换为对象，遍历
在这里插入图片描述
6.3每发布一次就要重新获取一次页码（注意还会出现重复页码需要清空之前内容）

function getMsgPage(){
        $(".page").html("");
        // 清空之前页数
        // weibo.php?act=get_page_count	获取页数
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=get_page_count",
            success: function (msg) {
                // console.log(msg);
                var obj = eval("("+msg+")");
                for(var i = 0; i < obj.count; i++){
                    // 页数从第一页开始
                    var $a = $("<a href=\"javascript:;\">"+(i+1)+"</a>");
                    if(i === (number-1)){
                        // 判断是否为第一页
                        $a.addClass("cur");
                    }
                    $(".page").append($a);}},
                   // 每次发布重新添加

7.页数点击跳转，点击按钮的切换
7.1实现页数跳转
在这里插入图片描述
7.2实现当前页面六条信息
8.实现cookie的获取，删除，形成工具类，实现插件效果来保存页码。但

将numbei作为参数传入js文件

// 形成闭包
;(function ($, window) {
    $.extend({
        addCookie: function (key, value, day, path, domain) {
            // 1.处理默认保存的路径
            var index = window.location.pathname.lastIndexOf("/")
            var currentPath = window.location.pathname.slice(0, index);
            path = path || currentPath;
            // 2.处理默认保存的domain
            domain = domain || document.domain;
            // 3.处理默认的过期时间
            if(!day){
                document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
            }else{
                var date = new Date();
                date.setDate(date.getDate() + day);
                document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
            }
        },
        getCookie:function (key) {
            // console.log(document.cookie);
            var res = document.cookie.split(";");
            // console.log(res);
            for(var i = 0; i < res.length; i++){
                // console.log(res[i]);
                var temp = res[i].split("=");
                // console.log(temp);
                if(temp[0].trim() === key){
                    return temp[1];
                }
            }
        },
        delCookie:function (key, path) {
            addCookie(key, getCookie(key), -1, path);
        }
    });
})(jQuery, window);

在这里插入图片描述

Api与后端php

<?php
/*
**********************************************
	usage:
			weibo.php?act=add&content=xxx	添加一条
				返回：{error: 0, id: 新添加内容的ID, time: 添加时间, acc: 点赞数, ref: 点踩数}

			weibo.php?act=get_page_count	获取页数
				返回：{count:页数}

			weibo.php?act=get&page=1		获取一页数据
				返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]

			weibo.php?act=acc&id=12			顶某一条数据
				返回：{error:0}

			weibo.php?act=ref&id=12			踩某一条数据
				返回：{error:0}

			weibo.php?act=del&id=12			删除一条数据
				返回：{error:0}

	注意：	服务器所返回的时间戳都是秒（JS是毫秒）
**********************************************
*/

error_reporting(E_ALL ^ E_DEPRECATED);
//创建数据库之类的
$db=@mysql_connect('localhost', 'root', '') or @mysql_connect('localhost', 'root', 'admin');

mysql_query("set names 'utf8'");
mysql_query('CREATE DATABASE nj_ajax');

mysql_select_db('nj_ajax');

$sql= <<< END
CREATE TABLE  `nj_ajax`.`weibo` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`content` TEXT NOT NULL ,
`time` INT NOT NULL ,
`acc` INT NOT NULL ,
`ref` INT NOT NULL
) CHARACTER SET utf8 COLLATE utf8_general_ci
END;

mysql_query($sql);

//正式开始

//header('Content-type:zns/json');

$act=$_GET['act'];
$PAGE_SIZE=6;

switch($act)
{
    case 'add':
        $content=urldecode($_GET['content']);
        $time=time();

        $content=str_replace("\n", "", $content);

        $sql="INSERT INTO weibo (ID, content, time, acc, ref) VALUES(0, '{$content}', {$time}, 0, 0)";

        mysql_query($sql);

        $res=mysql_query('SELECT LAST_INSERT_ID()');

        $row=mysql_fetch_array($res);

        $id=(int)$row[0];

        echo "{error: 0, id: {$id}, time: {$time}, acc: 0, ref: 0}";
        break;
    case 'get_page_count':
        $sql="SELECT COUNT(*)/{$PAGE_SIZE}+1 FROM weibo";

        mysql_query($sql);

        $res=mysql_query($sql);

        $row=mysql_fetch_array($res);

        $count=(int)$row[0];

        echo "{count: {$count}}";
        break;
    case 'get':
        $page=(int)$_GET['page'];
        if($page<1)$page=1;

        $s=($page-1)*$PAGE_SIZE;

        $sql="SELECT ID, content, time, acc, ref FROM weibo ORDER BY time DESC LIMIT {$s}, {$PAGE_SIZE}";

        $res=mysql_query($sql);

        $aResult=array();
        while($row=mysql_fetch_array($res))
        {
            $arr=array();
            array_push($arr, 'id:'.$row[0]);
            array_push($arr, 'content:"'.$row[1].'"');
            array_push($arr, 'time:'.$row[2]);
            array_push($arr, 'acc:'.$row[3]);
            array_push($arr, 'ref:'.$row[4]);

            array_push($aResult, implode(',', $arr));
        }
        if(count($aResult)>0)
        {
            echo '[{'.implode('},{', $aResult).'}]';
        }
        else
        {
            echo '[]';
        }
        break;
    case 'acc':
        $id=(int)$_GET['id'];

        $res=mysql_query("SELECT acc FROM weibo WHERE ID={$id}");

        $row=mysql_fetch_array($res);

        $old=(int)$row[0]+1;

        $sql="UPDATE weibo SET acc={$old} WHERE ID={$id}";

        mysql_query($sql);

        echo '{error:0}';
        break;
    case 'ref':
        $id=(int)$_GET['id'];

        $res=mysql_query("SELECT ref FROM weibo WHERE ID={$id}");

        $row=mysql_fetch_array($res);

        $old=(int)$row[0]+1;

        $sql="UPDATE weibo SET ref={$old} WHERE ID={$id}";

        mysql_query($sql);

        echo '{error:0}';
        break;
    case 'del':
        $id=(int)$_GET['id'];
        $sql="DELETE FROM weibo WHERE ID={$id}";
        //echo $sql;exit;
        mysql_query($sql);
        echo '{error:0}';
        break;
}
?>