찾다
php教程php手册I am back-电商网站开发&jQuery,back-电商

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

  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方法传递表格参数的方法:





登录



用户名:

密 码:




然后后续工作在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 "";
echo "";
}else{
echo "";
echo "";
}

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

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

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




登录






用户登录



用户:

密码:



  






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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.