本项目已上传github 有需要的可以下载
小米官网项目具体操作
1.gulp的搭建
-
一 , 打开node控制台
-
命令行输入 cd 加文件夹路径 进入当前文件夹
-
命令行输入 cnpm init 将当前文件夹初始化
- 参数不需要改变直接使用默认值即可
-
命令行输入 cnpm install gulp --save -dev 下载gulp
- 自行下载gulp中需要使用的插件 gulp-sass gulp-minify-css gulp-rename
-
在当前文件夹中创建 gulpfile.js 文件 所用对于node的操作代码都在这个文件中编写, 文件名不可以更改
- 注 也可以在命令行中输入 touch gulpfile.js 来创建该文件
-
具体的代码在xiaomi 目录下 的gulpfile.js中查看
-
2.模块化管理系统
- 将require.js 文件添加到当前文件夹中
- 模块化管理是为了便于后期代码的维护
- 在当前html页面中编写
- 其中defer 和 async=“true” 的作用是异步引入js文件
<script src="require.js文件的路径" defer async="true" data-main="你想要作为管理js文件的js文件的路径">
- 在管理js文件的js文件(我将其称为 中转站.js)中编写以下代码
require.config({
paths: {
// 导入该文件所需要的js文件
"jquery": "jquery-1.11.3", // 这里的.js后缀可以省略
....
},
shim:{
// 设置依赖关系 如果引入的js文件有依赖关系需要设置
"jquery-cookie":["jquery"]
}
})
// 以下是将导入的js文件中暴露出来的函数进行调用
require(["nav"],function(nav) {
nav.download();
....
})
- 在各个模块中编写代码时要遵从AMD规范 具体如下
// 所有代码都应该写入在define中 然后将需要暴露的函数用 return 暴露出去 然后再在中转站.js中调用
define(["jquery"],function($) {
function download() {
...
}
return {
download : download,
...
}
}
3.各个模块.js文件编写的注意规范
- 想要在通过异步加载出来的标签中添加事件的话, 不可以之间添加在该标签上, 因为异步加载出来的数据, 在添加事件这个操作之后, 此时是获取不了该标签的. 所以要通过事件委托来添加事件, 将事件委托给原本页面就拥有的标签, 具体是通过jquery中的on方法来添加, 具体代码如下
$("被委托的标签(页面本来就有的标签)").on("事件类型","委托的标签(通过异步加载出来的标签)",function() {
// 函数操作
})
-
编写完的函数代码, 一定要记得通过return 暴露出去, 然后在 中转站.js 文件中调用生效
-
用jquery 的 $.ajax 获取到的数据, jquery已经很贴心地将字符串转换为了代码块, 所以不需要再通过 JSON.parse() 转换
4. 编写注册页面
-
在mysql 数据管理器 或者在 http://localhost/phpMyAdmin/ 中 新建一个数据库 [注]id属性要设置主键属性和自动递增
-
php代码
<?php
header('content-type:text/html;charset="utf-8"');
// var_dump($_POST);
// 定义一个统一的返回格式
$responseData = array("code" => 0,"message" => "");
// 将通过post提交的数据全部取出
$username = $_POST['username'];
$password = $_POST['password'];
$repassword = $_POST['repassword'];
$createtime = $_POST['createtime'];
// 对后台接收到的数据, 进行一个简单的判断
if (!$username) {
$responseData["code"] = 1;
$responseData["message"] = "用户名不能为空";
// 将数据按照统一的返回格式返回
echo json_encode($responseData);
exit;
}
if (!$password) {
$responseData["code"] = 2;
$responseData["message"] = "密码不能为空";
echo json_encode($responseData);
exit;
}
if ($repassword != $password) {
$responseData["code"] = 3;
$responseData["message"] = "两次密码输入不一致";
echo json_encode($responseData);
exit;
}
// 链接数据库, 判断用户名是否已经存在
// PHP7语法 安装PHP5.6的语法
// 天龙八部第一步 链接数据库
$link = mysql_connect("127.0.0.1","root","123456");
// PHP7 $link = mysqli_connect();
// 第二步 判断是否链接成功
if (!$link) {
$responseData['code'] = 4;
$responseData['message'] = "服务器忙";
// 返回到前台页面
echo json_encode($responseData);
exit;
}
// 第三步 设置字符集
mysql_set_charset("utf8");
// 第四步 选择数据库
mysql_select_db("xiaomi");
// 5. 准备sql语句进行 验证用户名是否重名 插入操作
$sql = "select * from users where username='{$username}'";
// 6. 发送sql语句
$res = mysql_query($sql);
// 7. 取出一行数据
$row = mysql_fetch_assoc($res);
// 如果 $row 的值为null 说明连一条语句都查询不出来 说明没有这个用户名
if ($row) { // 如果$row 不为空 则说明重名了
// 用户名重名
$responseData["code"] = 5;
$responseData["message"] = "用户名已存在";
// 将数据按照同意的返回格式返回
echo json_encode($responseData);
exit;
}
// 能进行到这里 说明用户名可以注册了
// 将密码md5加密 md5规则可以自己设定 但是后面解密也要用相同的规则
$str = md5(md5(md5($password)."beijing")."zhonghuo");
// 准备sql语句 存储用户名 密码 创建时间
$sql2 = "insert into users(username,password,createtime) values('{$username}','{$str}',{$createtime})";
// 发送sql语句
$res2 = mysql_query($sql2);
if(!$res2) { // 如果$res2 为真则说明注册成功 如果为假则说明注册失败
$responseData['code'] = 6;
$responseData['message'] = "注册失败";
// 返回到前台页面
echo json_encode($responseData);
} else {
$responseData['message'] = "注册成功";
// 返回到前台页面
echo json_encode($responseData);
};
// 8. 关闭数据库
mysql_close($link);
?>
js代码
define(["jquery"], function ($) {
function registerSend() {
$("#register-button").click(function () {
$.ajax({
type : "post",
url : "./php/register.php",
data : {
username : $(".item_account").eq(0).val(),
password : $(".item_account").eq(1).val(),
repassword : $(".item_account").eq(2).val(),
createtime : new Date().getTime()
},
success : function (result) {
// console.log(result);
// 解析数据
var obj = JSON.parse(result);
if (obj.code) {
$(".err_tip").find("em").attr("class","icon_error");
} else {
$(".err_tip").find("em").attr("class","icon_select icon_true");
setTimeout(function() {
location.assign("login.html");
},1000)
}
$(".err_tip").show().find("span").html(obj.message);
},
error : function (msg) {
console.log(msg);
}
})
})
}
return {
registerSend: registerSend
}
})
5. 编写登陆页面代码
- php 代码
<?php
header('content-type:text/html;charset="utf-8"');
// var_dump($_POST);
// 定义一个统一的返回格式
$responseData = array("code" => 0,"message" => "");
// 将通过post提交的数据全部取出
$username = $_POST['username'];
$password = $_POST['password'];
// 对后台接收到的数据, 进行一个简单的判断
if (!$username) {
$responseData["code"] = 1;
$responseData["message"] = "用户名不能为空";
// 将数据按照统一的返回格式返回
echo json_encode($responseData);
exit;
}
if (!$password) {
$responseData["code"] = 2;
$responseData["message"] = "密码不能为空";
echo json_encode($responseData);
exit;
}
// 链接数据库, 判断用户名是否已经存在
// PHP7语法 安装PHP5.6的语法
// 天龙八部第一步 链接数据库
$link = mysql_connect("127.0.0.1","root","123456");
// PHP7 $link = mysqli_connect();
// 第二步 判断是否链接成功
if (!$link) {
$responseData['code'] = 3;
$responseData['message'] = "服务器忙";
// 返回到前台页面
echo json_encode($responseData);
exit;
}
// 第三步 设置字符集
mysql_set_charset("utf8");
// 第四步 选择数据库
mysql_select_db("xiaomi");
// 5. 准备sql语句进行 验证用户名和密码是否匹配
$str = md5(md5(md5($password)."beijing")."zhonghuo");
$sql = "select * from users where username='{$username}' and password='{$str}'";
// 6. 发送sql语句
$res = mysql_query($sql);
// 7. 取出一行数据
$row = mysql_fetch_assoc($res);
// 如果 $row 如果$row的值不为空则用户名和密码输入正确
if (!$row) { // 如果$row 不为空 则说明输入正确
// 用户名重名
$responseData["code"] = 4;
$responseData["message"] = "用户名或密码错误";
// 将数据按照同意的返回格式返回
echo json_encode($responseData);
exit;
} else{
$responseData["message"] = "登陆成功";
// 将数据按照同意的返回格式返回
echo json_encode($responseData);
}
// 8. 关闭数据库
mysql_close($link);
?>
- js代码
define(["jquery"], function ($) {
function loginUser() {
$("#login-button").click(function () {
$.ajax({
type : "post",
url : "./php/login.php",
data : {
username : $(".item_account").eq(0).val(),
password : $(".item_account").eq(1).val(),
},
success : function (result) {
// console.log(result);
// 解析数据
var obj = JSON.parse(result);
if (obj.code) {
$(".err_tip").find("em").attr("class","icon_error");
} else {
$(".err_tip").find("em").attr("class","icon_select icon_true");
}
$(".err_tip").show().find("span").html(obj.message);
},
error : function (msg) {
console.log(msg);
}
})
})
}
return {
loginUser: loginUser
}
})
至此 仿照小米官网的项目到此结束