实现效果与思路：

效果：
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="data:images/nav.png" alt="">
</div><div class="content"><img src="data:images/left.png" alt="" class="left"><div class="center"><textarea class="comment"></textarea><input type="button" value="发布" class="send" disabled></div><img src="data: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.处理默认保存的domaindomain = 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;
}
?>

核心点：

1.工具类封装，使用

2.ajax向请求使用

3.cookie与hash的理解

0-1前端在线网页微博思路相关推荐

前端在线网页版表格是怎么开发的？教程来咯~~~
前端小伙伴们,随着前端页面的日益强大起来,不知道你是不是还在为开发一款在线版的Excel,在线ppt等发愁,因为这并不是一件很容易的事情,恰好有遇到这种业务需求的时候,那就来看一下这一个特别适用的在 ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
Mongodb网页管理工具,基于Spring Boot2.0，前端采用layerUI实现
源码:https://github.com/a870439570/Mongodb-WeAdmin 项目介绍 Mongodb网页管理工具,基于Spring Boot2.0,前端采用layerUI实现. ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
黑马案例学成在线网页的实现
黑马案例学成在线网页的实现成品: 代码实现: html部分: <!DOCTYPE html> <html lang="en"><head>&l ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
前端_网页编程 Form表单与模板引擎（下）
目录续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
微信公众号网页授权思路解析及具体代码
微信公众号网页授权思路解析及具体代码微信开发文档实现方式也是两种: 1.静默授权登录授权登录以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静 ...

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