I am back-电商网站开发&jQuery，back-电商_PHP教程

php中文网

发布时间：2016-07-12 09:00:06

1180人浏览过

来源于php中文网

原创

I am back-电商网站开发&jQuery，back-电商

之前有将近两周的时间没有更新，除了懒就是其他的事情耽误了。现在好了，回家了，虽然家里停水，外面又有积雪，天寒地冻的，但诸多不便，都比不过有点闲的好。

开搞每个学PHP的必经之路——电商网站的开发。

1、电商网站开发——前端

立即学习“PHP免费学习笔记（深入）”；

一、首页制作

1.1 概况&准备

整个电商网站包括什么呢，就是首页信息，后面的分类信息页，商品详情页，购物页面，售后页面等等，所以就一步步做。自己做的时候可以简单的画个概况图来指导开发，免得逻辑搞混。

准备：项目文件夹，其中要有images（图片素材），js（javascript），style（css）三个子文件夹中。工具的话，看个人爱好，不过涉及的是前端，一般上习惯用DS的多，我比较懒，直接用zend+浏览器算求。

其中准备中有一部是实现reset.css，也就是清零/清除css效果。css我基本算是个白痴，找个源码贴出来，侵删：

@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}

1.2 顶部结构

用fireworks做，我还不会，先去学习下。

--------真是蛋疼，做个开头就发现自己naive，先完成web进阶的jQuery吧----------

2、jQuery

十二、jQuery在线聊天室

12.1 基本功能介绍

登陆后才能进入（用于基本信息的在线显示）；

动态显示交流后的内容；

文字和表情的沟通实现（表情也是字符代号编码）

技术重点：ajax的无刷新技术展示数据

12.2 实现效果

利用jq中的ajax函数（比如$.ajax等）实现登陆，登陆时，显示登陆中，正确或失败，有相应的动作；

聊天室就是聊天内容区域，输入区域，人员显示区域。

12.3 流程

登录页面——》向服务器请求登录信息（用户名和密码信息）——》成功：跳转到聊天主页；否则，跳回登录页面。

IBM Watson

IBM Watson文字转语音

下载

聊天页面——》请求聊天数据——》获取聊天数据；

在线人员信息——》请求——》获取；

所以，可以简单作图，这里我掠过了，然后清楚的看到需要做的页面数量，请求和响应的逻辑和对应关系。

12.4 登录页面开发login

--功能

验证登录信息；

进入聊天室；

--代码

以前在PDO中讲过的一种，直接用POST方法传递表格参数的方法：

然后后续工作在login.php中实现就好了；

header('content-type:text/html;charset=utf-8');
$username=$_POST['username'];
$password=$_POST['password'];
try {
$pdo=new PDO('mysql:host=localhost;dbname=imooc','root','');
$pdo->exec('use imooc_pdo');
$sql="select * from user where username=? and password=?";
$stmt=$pdo->prepare($sql);
$stmt->execute(array($username,$password));
//$stmt=$pdo->query($sql);

$shit=$stmt->rowCount();//显示结果集statement对象中的行数
echo $shit;
if($shit == 1){
//$url="ChatMain.html";
echo "<script language='\"javascript\"'>";<br> echo "alert(\"登录成功\")";<br> echo "</script>";
echo "<script language='\"javascript\"'>";<br> echo "document.location=\"ChatMain.html\"";<br> echo "</script>";
}else{
echo "<script language='\"javascript\"'>";<br> echo "alert(\"用户名或密码错误\")";<br> echo "</script>";
echo "<script language='\"javascript\"'>";<br> echo "document.location=\"login2.html\"";<br> echo "</script>";
}

} catch (PDOException $e) {
echo $e->getMessage();
}

----------------------------------------------

我们在这里想要的是jQuery实现方法：换一种实现，同时把登录做的稍微好看一点点哈（我觉得好看，一个在于对应的css文件的编写，另一个在html中实现，DS工具实现要方便一点，有时间也得整着学一下）；

登录
<script type="text/javascript" src="jq/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jsLogin.js"></script>

用户登录

用户：

密码：

其中，js是javascript逻辑控制文件；jq是jquery实现文件；css是css文件；后面的span标签，是为了实现某些功能暂时留下的。

$(function(){
//元素绑定全局ajaxStart事件
//这里就是用到span的标签，给出过程
$("#divMsg").ajaxStart(function(){
$(this).show().html("正在发送登录请求...");
})
$("#divMsg").ajaxStop(function(){
$(this).html("请求处理已完成！").hide();
})
$("#Button1").click(function(){
var $name=$("#txtName");
var $pass=$("#txtPass");
if($name.val() !== "" && $pass.val()!==""){
UserLogin($name.val(),$pass.val());
}else{
if($name.val()==""){
alert("用户名不能为空！");
$name.focus();
return false; // 阻止进一步的动作，很重要的一步
}else{
alert("密码不能为空！");
$pass.focus();
return false;
}
}
})
});