仿照小米官网项目具体操作与细节
2024-04-25 12:33:43
本项目已上传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代码
<?phpheader('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 代码
<?phpheader('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}
})
至此 仿照小米官网的项目到此结束
仿照小米官网项目具体操作与细节相关推荐
- 小米官网项目制作——javascript知识分享上
目录 前言 一.整体架构 二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节 三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子 四.轮播图 1.本体的部件 ...
- 小米官网项目制作——javascript知识分享下
目录 前言 一.观察页面内容 二.切换界面 三.登录表单界面 1.选中的效果 2.错误提示 3.不选中的效果 4.密码框 四.注册界面 五.链接跳转 总结 前言 之前我分享了关于小米官网主页的java ...
- 项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
- 仿照（小米官网首页轮播图）特效js代码
最近跟轮播图杠上了,以前也接触过这个轮播图的写法,但是一般都是用插件,久而久之就忘记了!昨晚有学习了一下自己写这个js,虽然是依靠零散的记忆写出来的,可能自己并未真正理解吧!!!以下是我写的代码: & ...
- Web项目实战分享——小米官网
Web项目实战分享--小米官网 大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
- 项目三《小米官网仿写》
文章目录 前言 一.下载APP 二.下拉菜单 三. 小米侧边栏 四.登录注册界面 五.lation实现界面切换 总结 前言 本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...
- 电商项目：仿小米官网纯HTML+css布局
前言 时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
- 项目一：《小米官网》
一.项目介绍 "小米旗舰商城".二十一世纪是网络休闲生活的时代,在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式.如今信息网络的发展可以说是一日千里,透过网络的运用,可 ...
- CSS项目基础实战：实现小米官网+详细步骤分析+出错问题总结
1.有关项目的基本结构:|--html 文件与 CSS 文件单独设置分开.|--在html中引入:|--重置样式表|--网页基本样式表:所有网页所共有使用的部分:网页宽度.网页字体.颜色.设置最小宽度 ...
最新文章
- VS打开文件，解决方案资源管理器自动定位到文件位置
- python3 unicode字符串_【已解决】Python3中如何声明字符串是unicode类型以避免log日志打印出错...
- hp服务器修改bios设置,HP服务器BIOS详解.pdf
- 高精度练习- P1015 回文数
- python序列化模块struct_Python-序列化模块-json-62
- 数据库之ODPS中sql语句指南
- appstore 客户端技术
- hdu 4512 吉哥系列故事——完美队形I（最长公共上升自序加强版）
- 查看CDH平台各个组件的版本
- telnet的基本配置（cisco、H3C、huawei 三个例子）
- 模拟支付宝服务窗环境
- Geohot使用绿雨的BETA4越狱iPhone4 4.1固件详细教程
- 系统性的学会 Pandas， 看这一篇就够了！
- CICD实战——使用Jenkins实现自动化部署和环境隔离
- 基于java小区物业管理系统
- 关于hive报错expression not in group by key ‘.....‘
- matlab三维图渲染颜色,三维图颜色渐变
- 13异步多线程（三）Parallel,线程安全
- 微信发红包测试点整理
- xmind 使用教程