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

时间：2022-09-04 13:07:19

　　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的更多相关文章

  1. MVC 6 电商网站开发实战

    [原创] ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API 标签: Web API MVC6 创建web API | 博主:powertoolsteam     ASP.NE ...

  2. 项目二：企业级java电商网站开发（服务端）

    声明:项目源于网络,支持正版教程,学习使用,仅记录在此 项目介绍 企业级java电商网站开发(服务端),模块划分:用户管理,商品管理,商品品类管理,订单管理,订单详情管理,购物车管理,收货地址管理,支 ...

  3. 【笔记6-支付及订单模块】从0开始 独立完成企业级Java电商网站开发&lpar;服务端&rpar;

    支付模块 实际开发工作中经常会遇见如下场景,一个支付模块,一个订单模块,有一定依赖,一个同事负责支付模块,另一个同事负责订单模块,但是开发支付模块的时候要依赖订单模块的相关类 ,方法,或者工具类,这些 ...

  4. 从0开始独立完成企业级Java电商网站开发（服务端）

    数据表结构设计 唯一索引unique,保证数据唯一性 CREATE TABLE `mmall_user` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT ...

  5. 电商网站开发记录&lpar;三&rpar; Spring的引入&comma;以及配置详解

    1.web.xml配置注解<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi=& ...

  6. 【笔记8-Redis分布式锁】从0开始 独立完成企业级Java电商网站开发&lpar;服务端&rpar;

    Redis分布式锁 Redis分布式锁命令 setnx当且仅当 key 不存在.若给定的 key 已经存在,则 setnx不做任何动作.setnx 是『set if not exists』(如果不存在 ...

  7. 【笔记7-部署发布】从0开始 独立完成企业级Java电商网站开发&lpar;服务端&rpar;

    阿里云服务 购买 连接 购买域名 域名备案 域名解析 源配置步骤 资源地址 http://learning.happymmall.com/ 配置阿里云的yum源 1.备份 mv /etc/yum.re ...

  8. 【笔记5-购物车及地址模块】从0开始 独立完成企业级Java电商网站开发&lpar;服务端&rpar;

    购物车模块 数据库表设计 购物车表 CREATE TABLE mmall_ cart ( 'id' int(11) NOT NULL AUTO_ INCREMENT, 'user_ id' int(1 ...

  9. 【笔记4-商品模块】从0开始 独立完成企业级Java电商网站开发&lpar;服务端&rpar;

    分类管理模块 数据表结构设计 分类表 CREATE TABLE.mmall_ category' ( 'id' int(11) NOT NULL AUTO_ INCREMENT COMMENT ' 类 ...

随机推荐

  1. &lbrack;原创&rsqb;SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT 'OpenRowset&sol;OpenDatasource' 的访问

    TSQL查询Excel数据使用openrowset通常会报如下错误: 消息 ,级别 ,状态 ,第 行 SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 ...

  2. ECSHOP - 二次开发指南---购物车篇

    第一个问题 保存用户购物车数据ECSHOP的购物车数据,是以Session 方式存储在数据库里,并在Session结束后 ,Distroy 掉,解决方法是: 1.购物车内容读取方式. 更改登陆后购物车 ...

  3. HTTP response codes

    面试被问起了413和503,我觉得也是够BT的,能问出这种无聊的问题.很多返回码几乎很难遇到,不过还是把MDN上很好的描述转过来作为一个reference. HTTP协议状态码表示的意思主要分为五类 ...

  4. iOS 旋转

    实现一张图片的旋转部分角度显示: [cpp] view plaincopy UIImageView image = [[UIImageView alloc]init]; image.frame = C ...

  5. &period;5-Vue源码之AST（1）

    讲完了数据劫持原理和一堆初始化 现在是DOM相关的代码了 上一节是从这个函数开始的: // Line-3924 Vue.prototype._init = function(options) { // ...

  6. 习题9-6 uva 10723

    题意: 给你两个字符串,求一个最短的串,使得输入的两个串均是他的子序列(不一定连续) 思路: 可以看出ans = 两个串的长度和 - 两个串的最长公共子序列,在最后的构造处GG.  在构造时想了很久, ...

  7. idea使用错误及技巧总结合集（一）

    --- Cannot start process, the working directory 'E:\algorithm\algorithm' does not exist 1.点击run后再点击e ...

  8. Vue性能优化

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人 ...

  9. MySQL--Checkpoint基础

    ===================================================== Checkpint 分两种:Sharp Checkpoint : 在服务器正常关闭时,将所有 ...

  10. 【转】 android中的文件操作详解以及内部存储和外部存储

    摘要 其实安卓文件的操作和Java在pc环境下的操作并无二致,之所以需要单独讲解是因为安卓系统提供了不同于pc的访问文件系统根路径的api,同时对一个应用的私有文件做了统一的管理.根据我的经验,初学者 ...

相关文章