【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面
一、引言
接着上一篇，京东个人中心的所有功能数据分析完成之后，现在需要把静态页面完成，实现过程中要用到的技术有：Bootstrap、html5表单新特性等。除此之外，还要利用Node.js的Express框架实现向客户端提供折现静态资源。
二、注册/登录页面
小知识点：用视频做背景
- 定义class=“bg-video”，作为背景video
- 加属性autoplay，可以让视频在无法控制播放的背景状态下，自动播放
- 加属性loop，使视频在作为背景时可以循环播放
- 加属性muted，因为视频是作为背景存在，不能有声音，所以加这个属性静音
- 给视频做绝对定位，让视频定位到容器的底部，只有这样，才可以再容器中作为背景存在
- 同时，为了让它在所有元素的下方，要给它加一个z-index，为负值，往下走，其他元素为正
<style>
.main{
position:relative;
}
.bg-video{
position: absolute;
z-index: -1;
width:100%;
}
</style> <div class="container main">
<video class="bg-video" src="res/snow.mp4"
autoplay loop muted></video>
</div>
register.html完整代码(login,html基本相同，此处省略)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="icon" href="img/favicon.ico">
<title>用户注册</title>
<style>
.main{
position:relative;
}
.bg-video{
position: absolute;
z-index: -1;
width:100%;
}
.box{
width:600px;
min-height:200px;
background: rgba(255,255,255,0.7);
border-radius:5px;
margin:200px auto;
padding:5em 1em;
}
</style>
</head>
<body>
<div class="container">
<h3>欢迎注册</h3>
</div>
<!--主体 使用视频做背景-->
<div class="container main">
<video class="bg-video" src="res/snow.mp4"
autoplay loop muted></video>
<div class="box">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="uname"> 用户名：</label>
</div>
<div class="col-sm-5">
<input class="form-control" id="uname" placeholder="请输入您想注册的用户名">
</div>
<div class="col-sm-5">
<span class="help-block">用户名可以包含数字或字母</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="upwd"> 密码：</label>
</div>
<div class="col-sm-5">
<input class="form-control" id="upwd" placeholder="请输入您注册的密码">
</div>
<div class="col-sm-5">
<span class="help-block">密码长度在6~12位之间</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<input class="btn btn-success btn-block"type="button" value="注册">
</div>
</div>
</form>
</div>
</div>
<div class="container"></div>
</body>
</html>
小坑：这里form表单中不能写action，因为action即便里面不写内容，也有默认属性，那就是提交到本页面，并且，这里的<input...>中的type值也绝对不可以写成submit，一定要写成button，因为，这样才能实现异步数据加载，否则，anction和submit都会使页面数据变成同步加载。
效果：
三、用户中心页面
首先，要先异步加载页头页尾，login.html和footer.html。
注意：此处两页面就是单纯的html部分，不需要像php一样在头部加请求头（如下），因为在node.js中会自动添加这样的请求头，不需要自己再写。
<?php
header('Content-Type:text/html;charset=UTF-8');
?>
usercenter,js中异步请求：
//页面加载完，异步请求页头和页尾
$('#header').load('header.html');
$('#footer').load('footer.html');
usercenter,html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--页面标题小图标-->
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/jd_index.css">
<title>用户中心 - 京东商城</title>
</head>
<body>
<!--异步加载的页头-->
<div id="header">加载中...</div>
<!--页面主体-->
<div id="main"> </div>
<!--异步加载的页尾-->
<div id="footer">加载中...</div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/usercenter.js"></script>
</body>
</html>
此处页面主体部分，后面具体实现功能的时候，会详细说明。
效果：
四、提供静态资源
在public文件夹的同级目录中，创建app.js，作为执行的主程序。使用Node.js中Express框架的特有函数app.use(express.static('public'));向客户端提供所有的静态资源。
/*整个项目的主模块文件：
* 负责创建web服务器对象，监听指定端口
* 并向客户端提供静态资源+动态资源服务*/ //mysql连接数据库会另建模块对应订单等页面，
//这里主模块只负责创建web服务器
const http = require('http');
const express = require('express');var app = express();//请求处理函数
http.createServer(app).listen(8080); //向客户端提供静态资源的响应
app.use(express.static('public'));
运行app.js，可以在地址栏验证是否提供成功：127.0.0.1:8080/usercenter.html
注：转载请注明出处
【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面的更多相关文章
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之功能与数据分析
一.引言 在学习了Nodejs和HTML5之后,发现了Nodejs的使用很方便,和php是完全不同的另一种后台语言.我也明白了,在一个项目里,是不可能同时存在Apach服务器(php)和Web服务器( ...
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听
一.引言 在数据库和静态页面都创建好之后,下面就该接着完成后台Node.js监听注册和登录的部分了.这个部分主要使用的技术是:Node.js的Express框架和ajax异步请求.登录和注册的代码实现 ...
- centos7安装Mysql爬坑记录
centos7安装Mysql爬坑记录 查看是否已安装 使用下列命令查看是否已经安装过mysql/mariadb/PostgreSQL 如果未安装,不返回任何结果(ECS的centos镜像默认未安装 ...
- 前端工作日常爬坑之——单页面微信开发Jssdk相关，以及jssdk图片直传自己服务器的实现。
日常爬坑 遇到的情况大致说明: 项目基于Vue2全家桶实现,vue-router控制前端路由,路由模式是History(主要是领导追求太高,觉得hash带#号太丑,然后遇到了小坑...),主要是服务于 ...
- 日均5亿查询量的京东订单中心，为什么舍MySQL用ES?
阅读本文大概需要 8 分钟. 来源:京东技术订阅号(ID:jingdongjishu) 作者:张sir 京东到家订单中心系统业务中,无论是外部商家的订单生产,或是内部上下游系统的依赖,订单查询的调 ...
- python使用bs4爬取boss静态页面
思路: 1.将需要查询城市列表,通过城市接口转换成相应的code码 2.遍历城市.职位生成url 3.通过url获取列表页面信息,遍历列表页面信息 4.再根据列表页面信息的job_link获取详情页面 ...
- 轻松上手nodeJs爬取想要页面的数据
开始之前请先确保自己安装了Node.js环境!!!!!!!! 1.在项目文件夹安装两个必须的依赖包 npm install superagent -S SuperAgent(官网是这样解释的) --- ...
- AJAX 与 MySQL
AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 实例 Select a person: P ...
- 使用nodejs+express+socketio+mysql搭建聊天室
使用nodejs+express+socketio+mysql搭建聊天室 nodejs相关的资料已经很多了,我也是学习中吧,于是把socket的教程看了下,学着做了个聊天室,然后加入简单的操作mysq ...
随机推荐
- [oldboy-django][5python基础][高级特性]Iterator迭代器
# 区分可迭代对象iterable, 迭代器iterator, 生成器generator a. iterable 可直接用for循环的对象,都称为可迭代对象, from collections imp ...
- [oldboy-django][2深入django]xss攻击 + csrf
1 xss攻击 xss攻击(跨站脚本攻击,用户页面提交数据来盗取cookie) - 慎用safe, 和mark_safe -- 如果要用,必须要过滤 - 定义: 用户提交内容,在页面展示用html显示 ...
- 关于mybitis的异常总结
由于原项目中系统登录用户表中新添加了字段来关联其他表,但原来的mapper和bean就得重新再逆向出来,逆向后,就参照着原来你mapper来添加一些自定义在mapper的方法,那么接下来就爆出异常了 ...
- 多IP指定出口IP地址 如何指定云服务器源IP?
如果一个主机绑定有多个IP地址,那么在被动响应和主动发起连接两种方式中,源IP地址的选择机制肯定是有所差异的.主机在接收外部数据包,并发送响应数据包时,响应源地址显然就是客户端请求的地址,这是非常容易 ...
- POJ 3368：Frequent values（线段树区间合并）
题目大意,给出一段非降序列,求一些区间中出现频率最高的数的出现次数. 分析: 显然,区间中一个数多次出现必然是连续的,也就是最长的连续相等的一段. 用线段树解决,维护三个信息:一个区间最长连续的区间的 ...
- UVALive 6609 Minimal Subarray Length（RMQ-ST+二分）
题意:给定长度为N的数组,求一段连续的元素之和大于等于K,并且让这段元素的长度最小,输出最小长度即可,若不存在这样的元素集合,则输出-1 题目链接:UVAlive 6609 做法:做一个前缀和pref ...
- 【01】react 之 hello world
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...
- C# 获取NTP远程同步时间
收到一个需要定时同步远程服务器的需求,用C# 实现 网上搜索到解决方案,代码如下: 获取远程时间 参数配置:"NTPServer" 远程时间服务器地址 获取远程服务器时间代码: ...
- SPOJ QTREE4 SPOJ Query on a tree IV
You are given a tree (an acyclic undirected connected graph) with N nodes, and nodes numbered 1,2,3. ...
- 【jetty】jetty服务器的使用
1.下载jetty服务器: http://www.eclipse.org/jetty/previousversions.html 2.下载后解压: