精华内容
下载资源
问答
  • web前端登录页面设计技巧

    千次阅读 2019-10-25 23:08:44
    好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点 1、精致的外观 外观的重要性不言而喻,外观是给用户...

    首先我们先来了解的用户登录流程,先点击是注册,然后是登录,再有就是忘记密码,然后,每个功能做一个界面,这是最早的流程,现在越来越多的大型网站把登录和首页放在一起设计,原因就在于用户体验度;好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点

    1、精致的外观

    外观的重要性不言而喻,外观是给用户的第一感觉,它的覆盖面比较广,比如配色,布局,文字大小,质感,创意,图标等,还包括鼠标特效,选中状态,提示信息等。做为web前端设计师,在重视代码的准确性的同时,也需要和像素和颜色搞好关系,必须一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。

    2、完美用图

    在web前端开发中,配图非常具有表现力,它与颜色关系密切。所以大部分ui设计网页设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画的表现技法。绘画与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的网页设计师,将插画运用到网页设计中来,生动有趣温情的配色和用途,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力

    3、品牌传达

    虽然仅仅只是一个登录界面,客户停留的时间也比较短,但是作为开发者,我们还是要在里面强化品牌,设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现品牌文化,传播品牌理念的绝佳位置;表现形式可以是图片广告的形式,或者是文字链接的形式,或者是动画的形式等

    4、登录框

    登录界面要说谁最重要,肯定是登录框了,随着用户越来越追去人性化的操作,现在主流的登录框是越来越大,大输入框,可以让用户输入起来感到心情舒畅,登录过程非常愉悦,而且在显示器越来越大的今天,登录框和登录按钮必须要大而明显!后期还需要web工程师添加更好的用户体验效果,比如输入信息的正确性等

    5、简约而不简单

    用户看到的也许只是一个登录界面,但是作为设计师来说,里面包括的知识点是很多的,比如登录框的高度,宽度,比例,阴影,颜色,形状,纹理,背景等。作为web前端设计师来说,需要各种判断,兼容,跳转。总之现在的登录界面越来越倾向于简洁,最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,取消了多余的元素,提高整体的视觉效果,实现真正的简约而不简单。
    在这里插入图片描述

    展开全文
  • 分辨率:对页面设计提供参考,特别是响应式设计 登录率:登陆用户具有更高的分析价值,引导用户登陆是非常重要的 地域分布:访问用户在地理位置上的分布,可以针对不同地域做运营、活动等 网络类型:wifi/3G/2G,为...
  • Java高并发秒杀——webweb(Controller)层:连通前后端 ...  4、BootStrap开发前端页面结构   5、cookie登录、计时、秒杀的前后端交互 一、Restful接口的设计与实现   1、Restful规...

    Java高并发秒杀——web层及前端页面开发

    web(Controller)层:连通前后端

    前端页面开发:BootStrap+JavaScript(模块化)

    Service层分析目录

      1、Restful接口的设计与实现
      2、SpringMVC整合Spring
      3、通过SpringMVC实现Restful接口
      4、BootStrap开发前端页面结构
      5、cookie登录、计时、秒杀的前后端交互

    在这里插入图片描述
    在这里插入图片描述

    一、Restful接口的设计与实现

      1、Restful规范:GET->查询操作;POST->添加/修改操作;PUT->修改操作;DELETE->删除操作
      2、Restful中URL的设计:/模块/资源/{标识}/集合1/…

    在这里插入图片描述

    二、SpringMVC整合Spring

      1、SpringMVC运行流程

    在这里插入图片描述

      2、@RequestMapping注解的好处
        (1)支持标准的URL
        (2)支持Ant风格的URL(即?和和**等字符)——->任意字符但不能没有这一层;**->任意字符且可以没有这一层
        (3)支持带{xxx}占位符的URL
      3、配置spring-web.xml(SpringMVC)
        (1)开启SpringMVC注解模式简化配置
          1>自动注册DefaultAnnotationHandlerMapping,AnnotationMethodHandlerAdapter
          2>提供一系列:数据绑定、数字和日期的format,@NumberFormat,@DataTimeFormat,重点:提供xml,json默认读写支持
    			<mvc:annotation-driven/>
    			<!--  该配置提供xml,json默认读写支持-->
    
        (2)静态资源默认servlet配置
          1>加入对静态资源的处理:js、gif、png
          2>允许使用"/"做整体映射
    			<mvc:default-servlet-handler/>
    		    <!-- 该配置允许使用"/"做整体映射-->
    
        (3)配置jsp,显示ViewResolver——视图解析器
    			<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    			        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
    			        <property name="prefix" value="/WEB-INF/jsp/"/>
    			        <property name="suffix" value=".jsp"/>
    		    </bean>
    
        (4)扫描web相关的bean,将这些bean注入到Spring容器中
    			 <context:component-scan base-package="com.fehead.web"/>
    
      4、在web.xml中同时配置SpringMVC+Spring+MyBatis,直接配置一个dispatcherServlet并在该servlet中初始化spring的配置参数即可完成对ssm的配置
    	<!-- 配置DispatcherServlet-->
    	    <servlet>
    	        <servlet-name>seckill_dispatcher</servlet-name>
    	        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    	        <!-- 配置SpringMVC时需要加载的配置文件——把spring,mybatis,springmvc放在一起加载即可
    	            spring-dao.xml,spring-service.xml,spring-web.xml
    	            MyBatis      ->   spring       ->   springmvc
    	        -->
    	        <init-param>
    	            <param-name>contextConfigLocation</param-name>
    	            <param-value>classpath:spring/spring-*.xml</param-value>
    	        </init-param>
    	    </servlet>
    	    <servlet-mapping>
    	        <servlet-name>seckill_dispatcher</servlet-name>
    	        <!-- 默认匹配所有的请求-->
    	        <url-pattern>/</url-pattern>
    	    </servlet-mapping>
    

    三、通过SpringMVC实现Restful接口

      1、创建与前端交互的DTO,所有ajax请求返回的类型,封装json结果——三个属性:成功与否(success为true或false);返回的json数据的类型(利用泛型定义data);错误信息(若返回失败而返回error信息)
    	package com.fehead.dto;
    
    	/**
    	 * Created by xiaoaxiao on 2019/5/4
    	 * Description:所有ajax请求返回类型,封装json结果
    	 */
    	public class SeckillResult<T> {
    	
    	    private boolean success;
    	    private T data;
    	    private String error;
    	
    	    public SeckillResult(boolean success, T data) {
    	        this.success = success;
    	        this.data = data;
    	    }
    	
    	    public SeckillResult(boolean success, String error) {
    	        this.success = success;
    	        this.error = error;
    	    }
    	
    	    public boolean isSuccess() {
    	        return success;
    	    }
    	
    	    public void setSuccess(boolean success) {
    	        this.success = success;
    	    }
    	
    	    public T getData() {
    	        return data;
    	    }
    	
    	    public void setData(T data) {
    	        this.data = data;
    	    }
    	
    	    public String getError() {
    	        return error;
    	    }
    	
    	    public void setError(String error) {
    	        this.error = error;
    	    }
    	}
    
    
      2、SeckillController的创建
        (1)可以设置@RequestMapping的参数获取url地址(value = “/{seckillId}/exposer”)以及请求提交的方式(method = RequestMethod.POST)以及方法返回类型为json类型(produces = {“application/json;charset=UTF-8”})
        (2)通过@PathVariable(“xxx”)获取路径变量的值({标识符})
        (3)通过@RequestParam获取请求参数的值(key=value)。
         注意@PathVariable(标识符)和@RequestParam(参数)的区别
        (4)通过@ResponseBody与@RequestMapping的将相应ajax请求并返回给前端的DTO设置为json数据类型
        (5)通过@CookieValue读取服务器Cookie中的数据,需要将required设置为false,如果服务器中没有Cookie中value对应的值,SpringMVC不会报错,把Cookie中value的验证放在程序中处理而不是让SpringMVC直接报错
        (6)顺序的设置多个catch,若产生已设定好的异常(RepeatKillException ,SeckillCloseException )则返回该异常对应的信息即可,若是其他异常则统一返回SeckillException
        (7)SeckillController的逻辑代码
    package com.fehead.web;
    
    import com.fehead.bean.Seckill;
    import com.fehead.dto.Exposer;
    import com.fehead.dto.SeckillExecution;
    import com.fehead.dto.SeckillResult;
    import com.fehead.enums.SeckillStatEnum;
    import com.fehead.exception.RepeatKillException;
    import com.fehead.exception.SeckillCloseException;
    import com.fehead.exception.SeckillException;
    import com.fehead.service.SeckillService;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.Date;
    import java.util.List;
    
    /**
     * Created by xiaoaxiao on 2019/5/4
     * Description:
     */
    @Controller
    @RequestMapping("/seckill")     //url:/模块/资源/{id}/细分
    public class SeckillController {
    
        private final Logger logger = LoggerFactory.getLogger(this.getClass());
    
        @Autowired
        private SeckillService seckillService;
    
        @RequestMapping(value = "/list",method = RequestMethod.GET)
        public String list(Model model){
            //获取列表页
            List<Seckill> list = seckillService.getSeckillList();
    
            model.addAttribute("list",list);
            //list.jsp + model = ModelAndView
            return "list";  //  /WEB-INF/list.jsp
        }
    
        @RequestMapping(value = "/{seckillId}/detail",method = RequestMethod.GET)
        public String detail(@PathVariable("seckillId") Long seckillId, Model model){
            if(seckillId==null){
                return "redirect:/seckill/list";
            }
            Seckill seckill = seckillService.getSeckillById(seckillId);
            if(seckill==null){
                return "forward:/seckill/list";
            }
            model.addAttribute("seckill",seckill);
            return "detail";
        }
    
        //ajax,json
        @RequestMapping(value = "/{seckillId}/exposer",
                    method = RequestMethod.POST,
                    produces = {"application/json;charset=UTF-8"})
        @ResponseBody
        public SeckillResult<Exposer> exposer(@PathVariable("seckillId") Long seckillId){
            SeckillResult<Exposer> result;
            try {
                Exposer exposer  = seckillService.exportSeckillUrl(seckillId);
                result = new SeckillResult<Exposer>(true,exposer);
            }catch (Exception e){
                logger.error(e.getMessage(),e);
                result = new SeckillResult<Exposer>(false,e.getMessage());
            }
            return result;
        }
    
        @RequestMapping(value = "/{seckillId}/{md5}/execution",
                        method = RequestMethod.POST,
                        produces = {"application/json;charset=UTF-8"})
        @ResponseBody
        public SeckillResult<SeckillExecution> execute(@PathVariable("seckillId") Long seckillId,
                                                        @PathVariable("md5") String md5,
                                                        @CookieValue(value = "killPhone",required = false) Long phone){
            if (phone==null){
                return new SeckillResult<SeckillExecution>(false,"未注册");
            }
            SeckillResult<SeckillExecution> result;
            try {
    //            SeckillExecution execution = seckillService.executeSeckill(seckillId,phone,md5);
                //通过存储过程+redis缓存调用
                SeckillExecution execution = seckillService.executeSeckillProcedure(seckillId,phone,md5);
                return new SeckillResult<SeckillExecution>(true,execution);
                //即便是报错也需要返回true——可以将错误的信息返回至前端页面
            }catch (RepeatKillException e){
                SeckillExecution execution = new SeckillExecution(seckillId,SeckillStatEnum.REPEAT_KILL);
                return new SeckillResult<SeckillExecution>(true,execution);
            }catch (SeckillCloseException e){
                SeckillExecution execution = new SeckillExecution(seckillId,SeckillStatEnum.END);
                return new SeckillResult<SeckillExecution>(true,execution);
            }catch (Exception e){
                logger.error(e.getMessage(),e);
                SeckillExecution execution = new SeckillExecution(seckillId,SeckillStatEnum.INNER_ERROR);
                return new SeckillResult<SeckillExecution>(true,execution);
            }
        }
    
        @RequestMapping(value = "/time/now",method = RequestMethod.GET)
        @ResponseBody
        public SeckillResult<Long> time(){
            Date now = new Date();
            return new SeckillResult<Long>(true,now.getTime());
        }
        
    }
    
    

    四、BootStrap开发前端页面结构

      1、从BootStrap官网上知道模板,创建几乎所有的页面都会用到的(会共用的)common包下的jsp
        head.jsp:引入BootStrap相关资源
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<!-- 引入 Bootstrap -->
    	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    	
    	<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    	<!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    	<!--[if lt IE 9]>
    	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    	<![endif]-->
    
        tag.jsp:引入jstl相关资源
    	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    	<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    
      2、根据前端+BootStrap的相关知识创建list.jsp(列表页)+detail.jsp(详情页)
        注意事项:(1)使用<%@ include file=“xxx.jsp” %>的方式实现静态包含
             (2)将对js文件的引用放在body标签后,且需要注意:jQuery文件务必在最新的 Bootstrap 核心 JavaScript 文件之前引入
        list.jsp
    	<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    	<%@ include file="common/tag.jsp" %>
    	<!DOCTYPE html>
    	<html>
    	<head>
    	    <title>秒杀列表页</title>
    	    <!-- 静态包含,将引入jsp放入该jsp,当做一个servlet使用,若是动态包含就会当做两个servlet使用-->
    	    <%@ include file="common/head.jsp" %>
    	</head>
    	<body>
    	<!-- 页面显示部分-->
    	<div class="container">
    	    <div class="panel panel-default">
    	        <div class="panel-heading text-center">
    	            <h2>秒杀列表</h2>
    	        </div>
    	        <div class="panel-body">
    	            <table class="table table-hover">
    	                <thead>
    	                <tr>
    	                    <th>名称</th>
    	                    <th>库存</th>
    	                    <th>开始时间</th>
    	                    <th>结束时间</th>
    	                    <th>创建时间</th>
    	                    <th>详情页</th>
    	                </tr>
    	                </thead>
    	                <tbody>
    	                    <c:forEach var="sk" items="${list}">
    	                        <tr>
    	                            <td>${sk.name}</td>
    	                            <td>${sk.number}</td>
    	                            <td>
    	                                <fmt:formatDate value="${sk.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
    	                            </td>
    	                            <td>
    	                                <fmt:formatDate value="${sk.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
    	                            </td>
    	                            <td>
    	                                <fmt:formatDate value="${sk.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
    	                            </td>
    	                            <td>
    	                                <a class="btn btn-info" href="/seckill/${sk.seckillId}/detail" target="_blank">link</a>
    	                            </td>
    	                        </tr>
    	                    </c:forEach>
    	                </tbody>
    	            </table>
    	        </div>
    	    </div>
    	</div>
    	</body>
    	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	</html>
    
    
        最初的detail.jsp
    	<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    	<%@ include file="common/tag.jsp" %>
    	<!DOCTYPE html>
    	<html>
    	<head>
    	    <title>秒杀详情页</title>
    	    <!-- 静态包含,将引入jsp放入该jsp,当做一个servlet使用,若是动态包含就会当做两个servlet使用-->
    	    <%@ include file="common/head.jsp" %>
    	</head>
    	<body>
    	    <div class="container">
    	        <div class="panel panel-default text-center">
    	            <div class="pannel-heading">
    	                <h1>${seckill.name}</h1>
    	            </div>
    	            <div class="panel-body">
    	            		xxx...
    	            </div>
    	        </div>
    	    </div>
    	</body>
    	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	</html>
    
    

    五、cookie登录、计时、秒杀的前后端交互——js实现

      1、cookie登录:根据BootStrap创建登录弹出层,输入电话,引入jQuery cookie操作插件
    <!-- 登录弹出层,输入电话-->
    <div id="killPhoneModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title text-center">
                        <span class="glyphicon glyphicon-phone"></span>秒杀电话:
                    </h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <input type="text" name="killPhone" id="killPhoneKey"
                                placeholder="填手机号^0^" class="form-control"/>
                        </div>
                    </div>
                </div>
    
                <div class="modal-footer">
                    <!-- 验证信息-->
                    <span id="killPhoneMessage" class="glyphicon"></span>
                    <button type="button" id="killPhoneBtn" class="btn btn-success">
                        <span class="glyphicon glyphicon-phone"></span>
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
    
      2、在detail.jsp中边写与resources中js文件的交互逻辑:将页面上的参数通过EL表达式传入到对应js文件中进行处理
    	<!-- 先引入自己写好的js文件-->
    	<script src="/resources/script/seckill.js" type="text/javascript"></script>
    	<!-- 在该jsp文件中使用jquery调用js文件中的方法-->
    	<script type="text/javascript">
    	    $(function () {
    	        //使用EL表达式传入参数
    	        seckill.detail.init({
    	            seckillId:${seckill.seckillId},
    	            startTime:${seckill.startTime.time},    //转换为毫秒
    	            endTime:${seckill.endTime.time}
    	        });
    	    });
    	</script>
    
      3、在resources中创建js文件处理页面中的参数以及与后端Controller层进行交互,JavaScript模块化,模块化的seckill分为三部分:封装秒杀相关的ajax的url+详情页的秒杀逻辑+秒杀逻辑需要用到的其他方法
        (1)处理cookie并验证手机号
        1>在js中创建一个验证手机号的函数,需要判断的是输入的手机号是否为11位数字
        2>先在服务器的cookie中查找手机号进行验证,如果cookie中没有已添加过得手机号或已添加过得手机号不符合11位数字(被篡改),则显示弹出框,如果已经有(添加过的且能通过验证的)手机号则该模块之后的内容都不需要做了。
        3>显示弹出框时需要 将backdrop设置为static:禁止位置关闭——点击别的地方无效;将keyboard设置为false:关闭键盘事件——按键盘中某些按键无效。
        4>获取到前端弹出框中输入的手机号后,将该手机号经过验证后写入到cookie中并刷新页面(重新再进行一个init——验证手机号判断,由于已经存在通过验证的手机号,所以刷新后直接跳过该模块,也不会弹出弹出框),若该手机没有通过验证则提示手机号错误直到输入的手机号为正确为止。
    	//验证手机号
    	    validatePhone: function (phone) {
    	        if (phone && phone.length === 11 && !isNaN(phone)) {
    	            return true;
    	        } else {
    	            return false;
    	        }
    	    },
    
    
    	//手机验证和登录,计时交互
                //规划交互流程
    
                //在cookie中查找手机号,对应detail.jsp中input的name
                var killPhone = $.cookie('killPhone');
    
                //验证手机号
                if (!seckill.validatePhone(killPhone)) {
                    //绑定phone
                    //控制输出
                    var killPhoneModal = $('#killPhoneModal');
                    //显示弹出层
                    killPhoneModal.modal({
                        show: true,//显示弹出框
                        backdrop: 'static',//禁止位置关闭——点击别的地方无效
                        keyboard: false//关闭键盘事件——按键盘某些键无效
                    });
                    $('#killPhoneBtn').click(function () {
                        var inputPhone = $('#killPhoneKey').val();
                        console.log('inputPhone=' + inputPhone);//TODO
                        if (seckill.validatePhone(inputPhone)) {
                            //电话写入cookie
                            $.cookie('killPhone', inputPhone, {expires: 7, path: '/seckill'});
                            //刷新页面
                            window.location.reload();
                        } else {
                            $('#killPhoneMessage').hide().html('<label class="label label-danger">手机号错误!</label>').show(300);
                        }
                    });
                }
    
        (2)处理计时交互
        1>通过detail.jsp传入到js中init方法的参数拿到页面上的seckillId,startTime,endTime,通过ajax请求调用后端Controller的now方法拿到服务器的当前时间nowTime。将时间判断计时交互封装成一个函数(countdown)。
        2>countdown:首先对时间进行判断,若nowTime>endTime则表示秒杀已结束,直接在页面上显示秒杀已结束即可,若nowTime<startTime则表示秒杀还未开始,则需要在页面上显示秒杀倒计时,当倒计时结束后则变为(开始秒杀)按钮,若startTime<nowTime<endTime,则同样变为(开始秒杀)按钮,点击即可执行秒杀交互。
        3>秒杀未开始时的倒计时:将页面的当前时间设置为秒杀开始后的1s(防止各pc端时间不一致,则必须以服务器端为标准),使用event.strftime渲染seckillBox为格式化(‘秒杀倒计时: %D天 %H时 %M分 %S秒’)的时间,并在时间倒计时完成后开启回调事件(.on(‘finish.countdown’, function () ))。
    	//已经登录
    	            //计时交互
    	            var seckillId = params['seckillId'];
    	            var startTime = params['startTime'];
    	            var endTime = params['endTime'];
    	            $.get(seckill.URL.now(), {}, function (result) {
    	                //success和data对应SeckillResult类中的属性
    	                if (result && result['success']) {
    	                    var nowTime = result['data'];
    	                    //时间判断,计时交互
    	                    seckill.countdown(seckillId, nowTime, startTime, endTime);
    	                } else {
    	                    console.log('result:' + result);
    	                }
    	            });
    	
    	 //倒计时(秒杀未开始)/秒杀结束/秒杀中
    	    countdown: function (seckillId, nowTime, startTime, endTime) {
    	        var seckillBox = $('#seckill-box');
    	        //时间判断
    	        if (nowTime > endTime) {
    	            //秒杀已结束
    	            seckillBox.html('秒杀结束!');
    	        } else if (nowTime < startTime) {
    	            //秒杀未开始,计时事件绑定
    	            var killTime = new Date(startTime + 1000);
    	            seckillBox.countdown(killTime, function (event) {
    	                //时间格式
    	                var format = event.strftime('秒杀倒计时: %D天 %H时 %M分 %S秒');
    	                seckillBox.html(format);
    	                //时间完成后回调事件
    	            }).on('finish.countdown', function () {
    	                //在倒计时结束后开始秒杀
    	                seckill.handleSeckillkill(seckillId, seckillBox);
    	            });
    	        } else {
    	            //直接开始秒杀
    	            seckill.handleSeckillkill(seckillId, seckillBox);
    	        }
    	    },
    
        (3)处理秒杀交互
        1>获取秒杀地址:通过ajax请求拿到Controller层返回的SeckillResult中的data中的md5,在js的URL对md5和其他操作请求进行拼接,得到最终的killURL。
        2>执行秒杀:对秒杀绑定一次点击事件(防止多次点击给服务器发送重复无用的请求)——$(’#killBtn’).one(‘click’, function ();当点击按钮后将按钮禁用(防止重复点击),通过ajax向后端Controller层发送请求,得到data中的state与stateInfo(Enum描述——成功/异常信息),将stateInfo显示在页面。
        3>若未开启秒杀:可能有一个原因是不同的pc端的时间之间有微小的差距,所以需要将服务器端的时间传入,再做一遍coutdown操作,重新计算计时逻辑。
    handleSeckillkill: function (seckillId, node) {
            //获取秒杀地址,控制显示逻辑,执行秒杀
            node.hide()
                .html('<button class="btn btn-primary btn-lg" id="killBtn">开始秒杀</button>');//设置秒杀按钮
            $.post(seckill.URL.exposer(seckillId), {}, function (result) {
                //在回调函数中,执行交互过程
                if (result && result['success']) {
                    var exposer = result['data'];
                    if (exposer['exposed']) {
                        //开启秒杀
                        //获取秒杀的地址(包括md5)
                        var md5 = exposer['md5'];
                        var killUrl = seckill.URL.execution(seckillId, md5);
                        console.log("killUrl:" + killUrl);
                        //绑定一次点击事件
                        $('#killBtn').one('click', function () {
                            //执行秒杀请求
                            //1、先禁用按钮
                            $(this).addClass('disabled');
                            //2、发送秒杀请求执行秒杀
                            $.post(killUrl, {}, function (result) {
                                if (result && result['success']) {
                                    var killResult = result['data'];
                                    var state = killResult['state'];
                                    var stateInfo = killResult['stateInfo'];
                                    //3。显示秒杀结果(stateInfo)
                                    node.html('<span class="label label-success">' + stateInfo + '</span>')
                                }
                            });
                        });
                        node.show();
                    } else {
                        //未开启秒杀
                        //未开启秒杀可能有一个原因是:不同的pc端的时间之间有微笑的差距,所以将服务器端的时间传入
                        // 再做一遍countdown
                        var now = exposer['now'];
                        var start = exposer['start'];
                        var end = exposer['end'];
                        //重新计算计时逻辑
                        seckill.countdown(seckillId, now, start, end);
                    }
                } else {
                    console.log('result:' + result);
                }
            })
        },
    
      4、detail.jsp+seckill.js最终代码
        detail.jsp
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ include file="common/tag.jsp" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>秒杀详情页</title>
        <!-- 静态包含,将引入jsp放入该jsp,当做一个servlet使用,若是动态包含就会当做两个servlet使用-->
        <%@ include file="common/head.jsp" %>
    </head>
    <body>
        <div class="container">
            <div class="panel panel-default text-center">
                <div class="pannel-heading">
                    <h1>${seckill.name}</h1>
                </div>
                <div class="panel-body">
                    <h2 class="text-danger">
                        <!-- 显示time图标-->
                        <span class="glyphicon glyphicon-time"></span>
                        <!-- 展示倒计时(未开始)/已结束/进行中-->
                        <span class="glyphicon" id="seckill-box"></span>
                    </h2>
                </div>
            </div>
        </div>
    <!-- 登录弹出层,输入电话-->
    <div id="killPhoneModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title text-center">
                        <span class="glyphicon glyphicon-phone"></span>秒杀电话:
                    </h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <input type="text" name="killPhone" id="killPhoneKey"
                                placeholder="填手机号^0^" class="form-control"/>
                        </div>
                    </div>
                </div>
    
                <div class="modal-footer">
                    <!-- 验证信息-->
                    <span id="killPhoneMessage" class="glyphicon"></span>
                    <button type="button" id="killPhoneBtn" class="btn btn-success">
                        <span class="glyphicon glyphicon-phone"></span>
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
    </body>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- jQuery cookie倒计时插件-->
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <!-- jQuery countDown倒计时插件-->
    <!-- 倒计时插件一定要看准确,是jquery.countdown而不是jquery-countdown...-->
    <script src="https://cdn.bootcss.com/jquery.countdown/2.0.2/jquery.countdown.min.js"></script>
    
    <!-- 开始编写交互逻辑-->
    <!-- 先引入自己写好的js文件-->
    <script src="/resources/script/seckill.js" type="text/javascript"></script>
    <!-- 在该jsp文件中使用jquery调用js文件中的方法-->
    <script type="text/javascript">
        $(function () {
            //使用EL表达式传入参数
            seckill.detail.init({
                seckillId:${seckill.seckillId},
                startTime:${seckill.startTime.time},    //转换为毫秒
                endTime:${seckill.endTime.time}
            });
        });
    </script>
    </html>
    
    
        seckill.js
    //存放主要交互逻辑js代码
    //  javascript模式化
    //  seckill.detail.xxx
    var seckill = {
        //封装秒杀相关ajax的url
        URL: {
            //获取当前服务器时间的url
            now: function () {
                return '/seckill/time/now';
            },
            exposer: function (seckillId) {
                return '/seckill/' + seckillId + '/exposer';
            },
            execution: function (seckillId, md5) {
                return '/seckill/' + seckillId + '/' + md5 + '/execution';
            }
        },
        handleSeckillkill: function (seckillId, node) {
            //获取秒杀地址,控制显示逻辑,执行秒杀
            node.hide()
                .html('<button class="btn btn-primary btn-lg" id="killBtn">开始秒杀</button>');//设置秒杀按钮
            $.post(seckill.URL.exposer(seckillId), {}, function (result) {
                //在回调函数中,执行交互过程
                if (result && result['success']) {
                    var exposer = result['data'];
                    if (exposer['exposed']) {
                        //开启秒杀
                        //获取秒杀的地址(包括md5)
                        var md5 = exposer['md5'];
                        var killUrl = seckill.URL.execution(seckillId, md5);
                        console.log("killUrl:" + killUrl);
                        //绑定一次点击事件
                        $('#killBtn').one('click', function () {
                            //执行秒杀请求
                            //1、先禁用按钮
                            $(this).addClass('disabled');
                            //2、发送秒杀请求执行秒杀
                            $.post(killUrl, {}, function (result) {
                                if (result && result['success']) {
                                    var killResult = result['data'];
                                    var state = killResult['state'];
                                    var stateInfo = killResult['stateInfo'];
                                    //3。显示秒杀结果(stateInfo)
                                    node.html('<span class="label label-success">' + stateInfo + '</span>')
                                }
                            });
                        });
                        node.show();
                    } else {
                        //未开启秒杀
                        //未开启秒杀可能有一个原因是:不同的pc端的时间之间有微笑的差距,所以将服务器端的时间传入
                        // 再做一遍countdown
                        var now = exposer['now'];
                        var start = exposer['start'];
                        var end = exposer['end'];
                        //重新计算计时逻辑
                        seckill.countdown(seckillId, now, start, end);
                    }
                } else {
                    console.log('result:' + result);
                }
            })
        },
        //验证手机号
        validatePhone: function (phone) {
            if (phone && phone.length === 11 && !isNaN(phone)) {
                return true;
            } else {
                return false;
            }
        },
        //倒计时(秒杀未开始)/秒杀结束/秒杀中
        countdown: function (seckillId, nowTime, startTime, endTime) {
            var seckillBox = $('#seckill-box');
            //时间判断
            if (nowTime > endTime) {
                //秒杀已结束
                seckillBox.html('秒杀结束!');
            } else if (nowTime < startTime) {
                //秒杀未开始,计时事件绑定
                var killTime = new Date(startTime + 1000);
                seckillBox.countdown(killTime, function (event) {
                    //时间格式
                    var format = event.strftime('秒杀倒计时: %D天 %H时 %M分 %S秒');
                    seckillBox.html(format);
                    //时间完成后回调事件
                }).on('finish.countdown', function () {
                    //在倒计时结束后开始秒杀
                    seckill.handleSeckillkill(seckillId, seckillBox);
                });
            } else {
                //直接开始秒杀
                seckill.handleSeckillkill(seckillId, seckillBox);
            }
        },
        //详情页秒杀逻辑
        detail: {
            //详情页初始化
            init: function (params) {
                //手机验证和登录,计时交互
                //规划交互流程
    
                //在cookie中查找手机号,对应detail.jsp中input的name
                var killPhone = $.cookie('killPhone');
    
                //验证手机号
                if (!seckill.validatePhone(killPhone)) {
                    //绑定phone
                    //控制输出
                    var killPhoneModal = $('#killPhoneModal');
                    //显示弹出层
                    killPhoneModal.modal({
                        show: true,//显示弹出框
                        backdrop: 'static',//禁止位置关闭——点击别的地方无效
                        keyboard: false//关闭键盘事件——按键盘某些键无效
                    });
                    $('#killPhoneBtn').click(function () {
                        var inputPhone = $('#killPhoneKey').val();
                        console.log('inputPhone=' + inputPhone);//TODO
                        if (seckill.validatePhone(inputPhone)) {
                            //电话写入cookie
                            $.cookie('killPhone', inputPhone, {expires: 7, path: '/seckill'});
                            //刷新页面
                            window.location.reload();
                        } else {
                            $('#killPhoneMessage').hide().html('<label class="label label-danger">手机号错误!</label>').show(300);
                        }
                    });
                }
    
                //已经登录
                //计时交互
                var seckillId = params['seckillId'];
                var startTime = params['startTime'];
                var endTime = params['endTime'];
                $.get(seckill.URL.now(), {}, function (result) {
                    //success和data对应SeckillResult类中的属性
                    if (result && result['success']) {
                        var nowTime = result['data'];
                        //时间判断,计时交互
                        seckill.countdown(seckillId, nowTime, startTime, endTime);
                    } else {
                        console.log('result:' + result);
                    }
                });
            }
        }
    }
    
    展开全文
  • Web前端实战案例

    2020-02-01 20:34:57
    制作404页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录和注册页面设计</title> <style> /*通配选择器*/ *{ m...

    制作404页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录和注册页面设计</title>
        <style>
            /*通配选择器*/
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                font-family: "Microsoft YaHei UI";
                font-size: 80px;
                color: #f1ebe5;
                /*字体阴影*/
                text-shadow: 0 8px 9px #c4b59d,0px -2px 1px rgba(255,46,108,0.73);
                /*设置字体加粗*/
                font-weight: bold;
                text-align: center;
                padding: 20px 100px;
                /*设置颜色渐变*/
                background: linear-gradient(to bottom,#0dc418 0%,#5dc4a3 100%);
            }
            h1{
                border-bottom: 1px solid #fff;
            }
            h2{
                font-size:20px ;
            }
            input{
                background-color: #20a7ff;
                border-radius: 10px;
                border:0;
                height: 30px;
                width: 80px;
                padding: 5px;
                color: white;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <h1>404</h1>
        <h2>抱歉...你找的页面不存在了</h2>
        <input type="button" value="返回首页"/>
        <input type="button" value="联系管理"/>
    </div>
    </body>
    </html>
    

    注释:linear-gradient(direction, color-stop1, color-stop2, ...):颜色渐变函数

    计算借贷支出金额

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自动计算借贷支出金额</title>
        <style>
    
        </style>
    </head>
    <body bgcolor="white">
        <!--表单取名-->
        <form name="loandata">
            <table>
                <!--第一行的的文本占三列-->
                <tr><td colspan="3"><b>输入贷款信息:</b></td> </tr>
                <tr>
                    <td>(1)</td>
                    <td>贷款总额:</td>
                    <!--onchange事件会在域的内容改变时发生,也可用于单选框或复选框改变后触发的事件-->
                    <td><input type="text" name="principal" size="12" onchange="calculate()"/></td>
                </tr>
    
                <tr>
                    <td>(2)</td>
                    <td>年利率(%):</td>
                    <td><input type="text" name="interest" size="12" onchange="calculate()"/></td>
                </tr>
    
                <tr>
                    <td>(3)</td>
                    <td>借款期限():</td>
                    <td><input type="text" name="years" size="12" onchange="calculate()"/></td>
                </tr>
    
                <tr><td colspan="3"><input type="button" value="计算" onclick="calculate()"/></td></tr>
    
                <tr><td colspan="3"><b>输出还款信息:</b></td> </tr>
    
                <tr>
                    <td>(4)</td>
                    <td>每月还款金额:</td>
                    <td><input type="text" name="payment" size="12"/></td>
                </tr>
                <tr>
                    <td>(5)</td>
                    <td>还款总金额:</td>
                    <td><input type="text" name="total" size="12"/></td>
                </tr>
                <tr>
                    <td>(6)</td>
                    <td>还款总利息:</td>
                    <td><input type="text" name="totalinterest" size="12"/></td>
                </tr>
            </table>
        </form>
    </body>
    <script>
        function calculate() {
            //贷款总额
            //把年利率从百分比换成十进制,转换成月利率
            //还款月数
            //获取文本框的值
            var principal=document.loandata.principal.value;
            var interest=document.loandata.interest.value/100/12;
            var payments=document.loandata.years.value*12;
            //计算月支付额
            var x=Math.pow(1+interest,payments);
            var monthly=(principal*x*interest)/(x-1);
            //检查结果是否是无穷大的数
            if(!isNaN(monthly)&&(monthly!=Number.POSITIVE_INFINITY)&&(monthly!=Number.NEGATIVE_INFINITY)){
                document.loandata.payment.value=round(monthly);
                document.loandata.total.value=round(monthly*payments);
                document.loandata.totalinterest.value=round(monthly*payments)-principal;
            }
            else {
                document.loandata.payment.value="";
                document.loandata.total.value="";
                document.loandata.totalinterest.value="";
            }
        }
        function round(x) {
            return Math.round(x*100)/100;
        }
    </script>
    </html>
    

    注释:

    1. 通过文本框的名字获取其值或向文本框传递值
    2. 获取input文本框的值的方法:.valuedocument.getElementById("idName").value$("#idName").val()$("input[id='idName']").val()$("#idName").attr("value")$("input[id='idName']").attr("value")
    3. Math.pow(X,Y)函数:返回X的Y次幂的值,若结果为虚数或负数则返回NaN,若结果过大则返回Number.POSITIVE_INFINITYNumber.NEGATIVE_INFINITY
    4. isNaN():检查参数是否为非数字值,返回值为布尔类型
    5. Math.round():把参数四舍五入为最接近的整数

    制作二级关联菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>制作二级关联菜单</title>
        <style>
    
        </style>
    </head>
    <body onfocus="ChangeCity">
    <h3>选择省份及城市</h3>
    <form name="frm">
        <p>省份:
            <select name="optProvince" size="1" onchange="ChangeCity()">
                <option>--请选择--</option>
                <option>河南省</option>
                <option>河北省</option>
                <option>浙江省</option>
            </select>
        </p>
        <p>城市:
            <select name="optCity" size="1">
                <option>--请选择--</option>
            </select>
        </p>
    </form>
    </body>
    <script>
        var aCity=[["--请选择--"],["--请选择--","郑州市","洛阳市","开封市","南阳市","周口市"],["--请选择--","石家庄市","秦皇岛市","张家口市"],["--请选择--","杭州市","嘉兴市","温州市"]];
        function ChangeCity() {
            var i,iProvinceIndex;
            iProvinceIndex=document.frm.optProvince.selectedIndex;
            iCityCount=0;
            while (aCity[iProvinceIndex][iCityCount]!=null){
                iCityCount++;
            }
            document.frm.optCity.length=iCityCount;
            for (i=0;i<=iCityCount;i++){
                document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
            }
            document.frm.optCity.focus();
        }
    </script>
    </html>
    

    注释:

    1. <form>标签:表单适宜添加name,可以方便获取、使用
    2. <select>标签:下拉列表,<option>标签用于定义列表中的可用选项,相关语法资料
    3. selectedIndex:设置或返回下拉列表中被选选项的索引号,若允许多重选择,则仅返回第一个被选选项的索引号
    4. 下拉列表可以通过<select>标签的name属性以及索引添加option,语法:optionName[i]=new Option(content)
    5. focus():为下拉列表设置焦点

    制作缩进的二级菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>制作伸缩的二级菜单</title>
        <style>
            /*一级菜单风格设置*/
            body{
                background-color: #eed0e0;
            }
            /*id选择器*/
            #navigation{
                width: 200px;
                font-family: Arial;
            }
            /*子选择器*/
            #navigation>ul>li{
                border-bottom: 1px solid #AD9F9F;
            }
            #navigation>ul>li>a{
                display: block;
                padding: 5px 5px 5px 0.5em;
                /*链接去除下划线*/
                text-decoration: none;
                border-left: 12px solid #711111;
            }
            #navigation>ul>li>a:link,#navigation>ul>li>a:visited{
                background-color: #c11136;
                color: #FFFFFF;
            }
            #navigation>ul>li>a:hover{
                background-color: #880020;
                color: #f00;
            }
            h1{
                color: red;
                background-color: #49ff01;
                text-align: center;
                padding: 20px;
            }
            img{
                float: left;
                border: 2px #F00 solid;
                margin: 5px;
            }
            /*二级子菜单风格设置*/
            /*包含选择器*/
            #navigation ul li ul{
                margin: 0px;
                padding: 0px;
            }
            #navigation ul li ul li{
                border-top: 1px solid #ED9F9F;
            }
            #navigation ul li ul li a{
                display: block;
                padding: 3px 3px 3px 0.5em;
                text-decoration: none;
                border-left: 28px solid #a71f1f;
                border-right: 1px solid #711515;
            }
            #navigation ul li ul li a:link,#navigation ul li ul li a:visited{
                background-color: #e85070;
                color: #FFF;
            }
            #navigation ul li ul li a:hover{
                background-color: #c2425d;
                color: #ffff00;
            }
            #navigation ul li ul.myHide{
                display: none;
            }
            #navigation ul li ul.myShow{
                display: block;
            }
        </style>
    </head>
    <body>
    <div id="navigation">
        <ul id="listUL">
            <li>
                <a href="#">个人中心</a>
                <ul>
                    <li><a href="#">个人资料</a> </li>
                    <li><a href="#">与我相关</a> </li>
                    <li><a href="#">好友动态</a> </li>
                </ul>
            </li>
            <li>
                <a href="#">我的主页</a>
                <ul>
                    <li><a href="#">日志</a></li>
                    <li><a href="#">相册</a></li>
                    <li><a href="#">状态</a></li>
                </ul>
            </li>
            <li>
                <a href="#">留言板</a>
            </li>
            <li>
                <a href="#">应用中心</a>
                <ul>
                    <li><a href="#">游戏</a></li>
                    <li><a href="#">音乐</a></li>
                </ul>
            </li>
            <li>
                <a href="#">更多</a>
            </li>
        </ul>
    </div>
    </body>
    <script src="jQuery.js"></script>
    <script>
        function change() {
            var SecondDiv=this.parentNode.getElementsByTagName("ul")[0];
            /*通过CSS交替更换实现隐显*/
            if (SecondDiv.className=="myHide"){
                SecondDiv.className="myShow";
            }
            else {
                SecondDiv.className="myHide";
            }
        }
        window.onload=function () {
            var Ul=document.getElementById("listUL");
            var aLi=Ul.childNodes;
            var A;
            for (var i=0;i<aLi.length;i++){
                if (aLi[i].tagName=="LI"&&aLi[i].getElementByTagName("ul").length){
                    A=aLi[i].firstChild;
                    A.onclick=change;
                }
            }
        }
    </script>
    </html>
    

    注释:

    1. >标签:子选择器,样式效果仅作用于第一个子元素
    2. 标签:包含选择器,作用于所有子元素
    3. border:solid:边框样式(border-style),选项有:dotted:点状,solid:实线,double:双线,dashed:虚线
    4. display属性:规定元素生成的框的属性,常用属性值:none:元素不会被显示;block:块级元素;inline:内联元素
    5. parentNode:返回指定结点的父节点
    6. getElementsByTagName方法:返回带有指定标签名的对象的集合
    7. window.onload:用于在网页加载完毕后立刻执行的操作
    8. childNodes:返回指定结点的子节点
    9. tagName:获取元素的标签名

    Cookie应用实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cookie实例</title>
        <script>
            //设置cookie值的函数,创建一个函数用于存储访问者的名字
            function setCookie(cname,cvalue,exdays) {
                //获取本地时间
                var d=new Date();
                //设置记录的过期时间
                d.setTime(d.getTime()+(exdays*24*60*60*1000));
                var expires="expires="+d.toUTCString();
                document.cookie=cname+"="+cvalue+";"+expires;
            }
            function getCookie(cname) {
                var name=cname+"=";
                var ca=document.cookie.split(';');
                for (var i=0;i<ca.length;i++){
                    var c=ca[i].trim();
                    if (c.indexOf(name)==0){
                        return c.substring(name.length,c.length);
                    }
                }
                return "";
            }
    
            function checkCookie() {
                var user=getCookie("username");
                if (user!=""){
                    alert("再次欢迎您:"+user);
                }
                else {
                    user=prompt("请输入您的姓名:","");
                    if (user!=""&&user!=null){
                        setCookie("username",user,30);
                    }
                }
            }
        </script>
    </head>
    <body onload="checkCookie()">
    </body>
    </html>
    

    注释:

    1. Date():Date对象用于处理日期和时间,对象会自动将当前日期和时间保存为初始值
    2. getTime():Date对象方法,返回1970年1月1日至今的毫秒数
    3. setTime():Date对象方法,以毫秒设置Date对象
    4. toUTCString:根据世界时,把Date对象转换成字符串

    文件引入

    项目的CSS文件与HTML文件以及图片文件不在同一个文件夹中,但是这些文件夹在同一个文件夹中,引入方式如下

    <link rel="icon" href="../img/favicon.ico"/>
    <link rel="stylesheet" href="../css/firstPage.css">
    

    注释:../表示返回上一级目录访问

    设置网页图标

    <link rel="icon" href="../favicon.ico">
    

    CSS选择器

    1. <nav>:定义导航链接的部分,如果文档中有前后按钮,则应该放到<nav>标签中
    2. :link:未被访问的链接的样式
    3. :visited:已被访问的链接的样式
    4. :hover:鼠标浮动在上面的样式
    5. :active:作用于活动链接

    HTML标签

    1. <main>:规定文档的主要内容

    CSS属性

    1. transition:设置完成过度效果的显示时间
    2. opacity:设置div元素的不透明级别,0为完全透明,1为完全不透明
    3. visibility:规定元素是否可见
    4. overflow:规定当内容溢出元素框时发生的事件
    5. position规定属性的定位类型
    6. z-index:设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,可设置为负值,该属性尽在定位元素的上奏效
    7. top:属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。如果 “position” 属性的值为 “static”,那么设置 “top” 属性不会产生任何效果。
    8. alt:属于<img>标签的属性,如果无法显示图像,浏览器将显示替换文本
    9. box-sizing:允许以特定的方式定义匹配某个元素的特定属性
      10.@media:用于针对不同的媒体类型定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式,适用于响应式页面的制作,重置浏览器大小的过程中页面会根据浏览器的大小重新渲染画面
    10. !important: 元素样式优先级
    11. background-position:设置背景图像的起始位置
    12. touch-action:用于指定某个区域是否允许用户自己操作,属性值:auto:有浏览器决定进行哪些操作
      none:不进行任何操作
      manipulatio:浏览器只允许进行滚动和持续缩放操作
    13. table-layout:设置表格单元格、行、列的算法规则,属性值:automatic:列宽度由单元格内容设定
      fixed:列宽由表格宽度和列宽度设定
      inherit:规定应该从父元素继承 table-layout 属性的值。
    展开全文
  • 本文按网站前端网页开发周期论述久风手工艺网站页面实现的全过程,重点论述了久风手工艺网站页面开发的分析、手工艺网站页面设计以及实现过程。系统主要运用HTML、CSS、JavaScript网页制作语言进行布局排版,以...
  • 专业的缘故,入坑了后端,已经很久没有这样纯写前端静态网页了,这个是我大二写的静态页面,实现的是一个科技企业网站,包含主页及二级页面多个页面登录注册用了点php+mysql实现,UI页面效果图是自己原创设计,...

    前言

    最近在整理自己大学写过的demo,曾经,我也是一个设计并写页面的纯前端狗,学着学着渐入偏锋,专业的缘故,入坑了后端,已经很久没有这样纯写前端静态网页了,这个是我大二写的静态页面,实现的是一个科技企业网站,包含主页及二级页面多个页面,登录注册用了点php+mysql实现,UI页面效果图是自己原创设计,哈哈,曾经学过设计,有点设计功底残存。废话不多说,看图~

    实现效果

    实现的全部效果图如下:
    在这里插入图片描述
    我做的页面都比较长,只放部分浏览器截图
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    en~,直接看我之前做的ppt演示吧
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    一、网站需求分析

    (一)网站功能结构
    随着网络技术的发展与互联网的普及,网站建设与网页制作越来越成为各行各业以及个人宣传以及商品销售的有利工具。
    1、 用户对网站的要求是:简约大气风格,并且统一和谐的网页,网页操作合理、方便、友好。
    2、 需要实现的功能和性能是:适当运用bootstrap基础组件进行布局设计网站:
    3、技术要求:
    1).页面使用十二栅格系统进行布局,并适当考虑布局的适应性,在不同分辨率下设计不同的布局模式。
    2).在网页中使用基础布局组件进行页面设计,在表格、表单、按钮、图像、辅助样式这
    些内容中自选 3 种或以上使用。
    3).在网页中使用 CSS 组件进行页面设计,在列表组、缩略图、按钮下拉菜单、下拉
    菜单、标签、导航、导航条、分页导航、输入框组、按钮组、媒体对象、面板等
    的组件内容中自选 7 种或以上使用。
    4).在网页中使用 Javascript 插件进行页面设计,在选项卡、折叠、提示框、过渡效果、
    模态框、下拉菜单、滚动监听、轮播图等的 JavaScript 插件内容中自选 6 种或以
    上使用。
    5).主页或者子页需要包含表单元素(包括注册、搜索、登录或者评论上传等功能,需要 添加表单属性进行输入验证
    设计出简约舒适风格统一和谐的网页;网站正常运行,功能达到设计要求,操作合理、方便、友好,界面具有美感或简约创意,还要符合网站管理的原则。

    (二)网站设计功能概述
    设计说明:致创为一个科技公司,网站页面主要有有首页、商城、产品展示、关于我们、设计研发、联系我们等二级页面。
    1.需要遵循的规则和标准:网页命名要简洁、确保页面的导览性好、保持新鲜感、合理设计视觉效果、为图片添加文字说明、尽量减少拼写和语法错误、页面长度要适中、保持链接的有效性、整个页面风格要一致
    2. 网页色彩搭配原理:主要以科技蓝和黑白色为主
    1).使用十二栅格系统进行布局,并适当考虑布局的适应性,在不同分辨率下设计不同的布局模式。
    2).在网页中实现了使用表格、表单、按钮、图像、基础布局组件以及列表组、缩略图、按钮下拉菜单、下拉菜单、标签、导航、导航条、分页导航输入框组、按钮组、媒体对象、面板等的组件进行页面设计;
    3).在网页中使用了 Javascript 插件页面添加了选项卡、折叠、提示框、过渡效果、模态框、下拉菜单、轮播图等内容;
    4).网站带有注册登录功能,并已实现连接数据库,可登录注册
    5).订单页面使用Vue基础实现一个商品的添加

    (三)网站开发环境‘
    致创科技网站是在Windwos10环境下
    前期用illustrator、Photoshop完成界面的设计,后期用记事本、IDEA、phpStorm、WampServer、mysql.log和等工具完成网站的开发

    二、效果图设计

    (一)效果图设计分析
    网站项目的设计,需要经过前期的问卷调查,根据客户的需求特点,进行功能、特点特色的分析,并设计出网站项目的原型图,我们根据原型图即产品的功能需求进行ps的网页页面效果图的设计,并逐步完成了整个网站中首页和二级页面(包括首页,产品展示,研发团队,新闻中心等)的全部效果图。

    三、网站详细设计

    (一)搭建系统框架
    界面设计:
    网站的样图
    主模块子页的样图:

    (二)网站页面框架设计
    主要运用前端框架bootstrap、CSS、JQ、JAVASCRIPT、PHP、MySQL等语言完成
    (三)公共文件设计
    (四)前台首页设计
    网页页面整体的排版设计也是不可忽略的,要让读者在狭小的电脑屏幕上阅读,很重要的一个原则是合理地运用空间,让自己的网页井井有条,留下必要的空白,人觉得很轻松。不要把整个网页都填得密密实实的,没有一点空隙,这样会给人一种压抑感,或者中间空出大片空白页面
    (五)登陆模块设计
    php+mysql
    (六)分页显示模块
    (七)后台管理模块
    Vue实现商品列表:

    四、分工简介

    进行网页设计功能需求调查和分析

    1. 前期:
      进行网页设计功能需求调查和分析,并完成网页效果图色调主题风格的确定
    2. 设计:
      根据前期网页设计功能需求调查和分析,使用Photoshop,Adobe illustrator等平面软件进行网站UI产品成品效果图整体设计;
    3. 切图标注
      满足开发对效果图的高度还原和优化网站网页加载速率,优化用户体验,对完成的效果图进行标注和切图。

    开发:

    1. 前端静态页面实现;
    2. 后期php+mysql实现注册登录对数据库的操作

    五、总结与心得

    致创科技网站设计理念及心得

    一.关于设计理念及特点:
    对于致创科技网站,我的初忠是设计一个带有科技简约风的网站,未来是智能时代,互联网时代,我们想要的是:智能时代,万物互联,智能创新,不断发展追求的时代精神!
    二.心得体会:
    明白了多动手胜过一切言语,光听不做,都是自废式学习! 每一次练习都能发现自己的诸多不足,不过这样也挺好的。因为在意识到自己的不足,才能不断地改进,…

    这阵子忙于Android项目,时间不是很多,代码文件过多,后面整理再放上来~

    展开全文
  • 大学实验教学示范中心HTML网站模板,DIV+CSS布局设计,两套蓝色风格HTML网站模板,全套模板,包括注册、登录、首页、新闻中心、...web前端期末结课大作业html+css+javascript网页设计大学实验教学示范中心HTML网站模板
  • 1.html是页面的布局设计,就是页面上要放哪些东西,比如登录界面需要按钮,输入框等等;css是被用于使用设计部件和布局,例如哪些部件放在哪里,多宽多大,是否有边框等;js/jQuery是用于实现函数的,比如按按钮会...
  • Web登录:随机验证码的设计和实现

    千次阅读 2018-02-18 20:56:25
    转自Clement-Xu的博客:http://blog.csdn.net/clementad/article/details/48788361基本需求:登录页面显示一个随机验证码图片、有背景干扰用户输入验证码大于3位之后,开始实时验证正确性,如果正确则在输入框后面...
  • 创建登录界面login页面二、后端三、微信小程序四、数据库总结 一、前端vue 1.创建一个vue3.0项目 创建的vue3.0项目选择 bable vue-router vuex scss(node-loader) 2.配置webpack 创建vue.config.js 代码如下(示例...
  • 一、需求分析 ... 可以对班级的信息进行增、删、改的操作 可以对学生的信息进行增、删、改的操作 ...前端页面:用Vue来写,网页的尺寸用px, 后台编程:用Egg来写后台,Cortonter与service来实现功能, 数据库:用的M
  • Jsp页面负责前端展示和获取用户输入的数据。主要功能是实现普通用户的注册和登录,管理员用户的登录。 项目文件结构 数据库设计 本系统使用SQL Serve实现输入输出数据的交互,所有数据都保存在名为u...
  • 一、理解设计原理 问题的关键在于“如何判断第一次打开”,有两种方法: 1、打开页面后本地存一个flag到session; 2、和服务器交互,在登录后存一个唯一标识到数据库,如openId。 在相关位置写下:Taro....
  • 现在的前端工作流程已经发生了很大的改变, 最开始的Web开发阶段, 一般的工作流程是根据邮件交流来理解客户的需求, 然后通过FTP登录他们的服务器, 对网站代码做必要的修改. 这种做法是非常不成熟的. 如果误解了邮件的...
  • bootstrap实现登录页面

    2018-07-04 20:49:37
    实现静态的登录页面,借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 ...
  • Web前端+后端精选免费模板框架收集【持续更新】 本JavaWeb商城系统后端是基于Layuimini框架修改而成,本项目包含了完整的前端购物界面和后端管理界面。 需要项目文件代码的可以,关注《码农云库》公众号,回复 “ ...
  • 我大部分时间都集中在“文章”和“图块”页面设计上,以使它们响应并满足作业规范。 我无法完成在指定时间内写出的以下规格。 登录和流动功能(已完成后端和还原操作,但未启动前端) 管理员用户可以添加和更新...
  • 本次实验任务为实现一个登录页面。具体要求如下:1)实现前端页面的基本布局。要求:a) 布局类似于学校门户b) 顶部需有LOGO栏目;c) 左侧提供轮播图;d) 提供账号密码登录方式;e) 提供手机号码+短信验证码登录方式...
  • 在开发web应用时,前端与后端的交互方式分为以下几种: 1.href页面跳转模式 前端通过url访问后端的servlet,后端返回一个html页面或字符串 可以在url地址后附加参数,例如http://www.123.com?name=jay&a
  • 1.数据库设计 user表 --id 自增 ...3.用到的前端页面 列表页: a.所有会员信息列表 b.通过列表对响应的数据进行修改和删除 c.在列表页,有添加会员的按钮。 添加页面(---通过列表页中的‘添加按...
  • Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能,一个功能复杂的业务应用系统,通过角色授权来控制用户访问,本文通过Form认证,Mvc的Controller基类及Action的权限验证来实现Web系统登录,Mvc前端权限...
  • Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能,一个功能复杂的业务应用系统,通过角色授权来控制用户访问,本文通过Form认证,Mvc的Controller基类及Action的权限验证来实现Web系统登录,Mvc前端权限...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 290
精华内容 116
关键字:

web前端登录页面设计