【京东个人中心】——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>

<!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">&nbsp;&nbsp;&nbsp;用户名：</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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：</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 ...

随机推荐

【bzoj1367】[Baltic2004]sequence 可并堆
题目描述输入输出一个整数R 样例输入 7 9 4 8 20 14 15 18 样例输出 13 题解可并堆,黄源河<左偏树的特点及其应用>Page 13例题原题 #include & ...
BZOJ2123 [Sdoi2013]森林【主席树 + 启发式合并】
题目输入格式第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负 ...
【bzoj3685】普通van Emde Boas树线段树
普通van Emde Boas树 Time Limit: 9 Sec Memory Limit: 128 MBSubmit: 1969 Solved: 639[Submit][Status][Di ...
Java EE 学习（9）：IDEA + maven + spring 搭建 web（5）- 博客文章管理
转载:Gaussic(一个致力于AI研究却不得不兼顾项目的研究生) . 注:在阅读本文前,请先阅读: Java EE 学习(5):IDEA + maven + spring 搭建 web(1) Jav ...
python（3）-- 语句：条件、循环、break、continue...
1. 条件语句执行条件:判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. [Python程序语言指定任何非0和非空(null)值为true,0 或 ...
mybatis 从数据库查询的信息不完整解决办法
List<Product> products = productService.getProductListWithPage(productQuery); 今天碰到一个很奇怪的现象,上面的 ...
关于C++的字符串操作
自己懒得打,就贴一个dalao的网址吧.常用. http://blog.csdn.net/fenxinzi557/article/details/51457829
Union和Concat的区别，以及它们的速度 (C# Linq)
原文发布时间为:2011-06-29 -- 来源于本人的百度文章 [由搬家工具导入] Union 会去重复后合并。而Contact不去重直接合并。所以Contact当然比较快了。所以如果你不用去重的 ...
【Visual Studio】Visual Studio 2010 "LNK1123: 转换到 COFF 期间失败: 文件无效或损坏" 的解决方法
1.将项目|项目属性|配置属性|连接器|清单文件|嵌入清单 “是”改为“否”. 2.找到 C:\Windows\winsxs\x86_netfx-cvtres_for_vc_and_vb_b03f5 ...
RSTP介绍
1. 介绍 RSTP(Rapid Spanning Tree Protocol),快速生成树协议,标准为802.1w(已合入802.1D-2004)RSTP是对STP技术的修改和补充,最大特点就是快速 ...

【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面

【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面的更多相关文章

随机推荐

热门专题