码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-23 21:03:58      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

  hi

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

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

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

一、首页制作

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 流程

登录页面——》向服务器请求登录信息(用户名和密码信息)——》成功:跳转到聊天主页;否则,跳回登录页面。

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

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

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

12.4 登录页面开发login

--功能

验证登录信息;

进入聊天室;

--代码

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;chraset=UTF-8">
<title>登录</title>
</head>
<body>
<form action=‘login.php‘ method=‘post‘>
用户名:<input type=‘text‘ name=‘username‘/><br/>
密 码:<input type=‘password‘ name=‘password‘/><br/>
<input type=‘submit‘ value=‘登录‘/>
</form>
</body>
</html>

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

<?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\">";
echo "alert(\"登录成功\")";
echo "</script>";
echo "<script language=\"javascript\">";
echo "document.location=\"ChatMain.html\"";
echo "</script>";
}else{
echo "<script language=\"javascript\">";
echo "alert(\"用户名或密码错误\")";
echo "</script>";
echo "<script language=\"javascript\">";
echo "document.location=\"login2.html\"";
echo "</script>";
}

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

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

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

<!DOCTYPE html>
<HTML>
<head>
<TITLE>登录</TITLE>
<SCRIPT type="text/javascript" src="jq/jquery-1.8.2.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jsLogin.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="style/cssLogin.css" />
</head>
<body>
<div id="divLogin">
<h3>用户登录</h3>
<div class="content">
<div>用户:<input id="txtName" type="text" class="txt" /></div>
<div>密码:<input id="txtPass" type="text" class="txt" /></div>
<div class="btnCenter">
<input id="Button1" type="button" value="登录" class="btn" />
&nbsp;&nbsp;
<input id="Button2" type="button" value="取消" class="btn" />
</div>
<span id="divMsg" class="clsTip"></span>
</div>
</div>
</body>
</HTML>

其中,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;
}
}
})
});

function UserLogin(name,pass){
$.ajax({
type: "GET", //提交方式
url: "index.php", //提交对象
data:"action=Login&d="+new Date()+"&name="+name+"&pass="+pass, //提交数据
success:function(data){
if(data=="1"){
window.location="ChatMain.html";
}else{
alert("用户名或密码错误!");
return false;
}
}
});
}

其实这里面还是有错误的,实现起来感觉没有第一种实现方法简单明了,希望了解的兄弟们指点下,两种方法的优缺点。

我还是稍微完善了下第一种PDO方法,直接在html中post表格数据,与数据库进行比对,然后返回信息。

 当然呢,第二种,也就是本来应该采用的这种方式,很明显的优点在于其模块化实现,对于开发人员来说也是清晰明了。但,私以为,小型任务中,如果没有统一规划好的名称啊,什么的,这样子模块化是不是显得冗余,毕竟还需要看模块是否匹配啊什么的,不知道理解的对不对。

12.5 聊天室页面ChatMain

从页面本身来说,就是head包含jq文件,js文件,css文件;body实现当前页面的效果,也有接口功能的实现;

从布局来说,就是聊天窗口的样子,三个框框搞定(可是尼玛老子不会用css啊!!!!);

 -----晚上不一定还会写,先发了吧-----

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

标签:

原文地址:http://www.cnblogs.com/andy1202go/p/5153004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!