web页面搭建需要准备什么工具

首先我们会和设计师沟通我们需要一些检验设计的工具

ps 自动裁图自动测量工具

（我这里安利一下一个工具我用的cutterman)

sketch 可以使用阿里的工具 marketch

拿到界面不要急着做看看有什么问题

有些我都会问

pc端

ie8问题如果要兼容ie8 我要考虑成本
如果是webapp 一个人办可能会出现时间的问题这个不要惊讶一个人做webapp会不停重构

mobile端

uc问题

除此之外最重要的控制住ui节奏和ui搞好关系告诉他们自己大约什么进度要学会交流不要设计出来自己安排不过来就傻眼了

和后端沟通

咋们这页面怎么和后端配合 ajax怎么测会不会有mockdata

沟通通常前端的位置是定位于前后端桥梁的这个我会在后文多次强调另外咱么这个文章是一系列的每个ui的实现我可能会解读一下w3c文档可能就会占用一篇文章

构建和审查工具

gulp
jshint
等等

技术选型

sass
postcss
typescript 或者 es6

登陆页面简单吗

好像貌似很简单不就是一个表单吗

表单简单吗如果简单js会因此流行开来吗

表单当然不简单验证怎么做

先做页面好的这里问题来了

公司有没有前端库呢有的话还简单点没有就只能自己搭了

首先确认一下既然做指南说下兼容目标 ie8 可以看 ie9 可以用
ie8 最后解决 ie8解决问题至少该pc端项目得配两个人

如何给css加ie的hack

<!doctype html>

<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->

<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->

ie 的模式

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

也许有的页面会移动端也用

    <meta name="viewport"

          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

360的保护

<meta name="renderer" content="webkit">

听说标准很值钱 dom4 有classlist奥

<script src="/assets/static/js/dom4.min.js"></script>

开始写

不急我们先规划下
首先node_modules已成为事实上前端包管理目录所以我们要在里面建立一个ui库

我自己一直在稳定更新自己的ui库zhilizhili-ui

ui布局一开始要确定的
color
font

--某个项目静态目录

  -- framework

     -- elements

  -- my module

      -- sass

        _color.scss

        _font.scss

__color.scss

$custom-color: (

        "blue": (

                "500": #0f8ffe,

                "600": #0088ff

        ),

        "red": (

                "600": #f26c4f

        ),

        "green": (

                "600": #d6e9ba

        ),

        "yellow": (

                "600": #ecf82c

        ),

        "purple": (

                "600": #e22cf8

        ),

        "grey": (

                "400": #c2c2c2,

                "500": #898989,

                "600": #464646

        )

) !global;

@function get-custom-color($name, $level: "600") {

  @return map-deep-get($custom-color, $name, $level);

}

_font.scss

@import "../../../../../node_modules/sassstd/src/sassstd";

@import "../../../../../node_modules/sassyjson/stylesheets/SassyJSON";

@import "../../../../../node_modules/scss-zhilizhili-mei/stylesheets/mei";

@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/full-parent";

@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/size";

@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/bem";

@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/query-selector";

@import "../../../../../node_modules/zhilizhili-ui/framework/sass/common/sim-querySelector";

@mixin interface-font() {

  .font {

    @content;

  }

}

@mixin use-font() {

  $defaults: (

    ".font": (

    )

  );

  @include interface-font() {

    @include register-hook("font");

    @content;

  }

}

@mixin use-amazeui-font($sel: body) {

  #{$sel} {

    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

  }

}

font.scss 使用的是自己整合的sassstd 这是自己搜集的sass库
提供一些string map list的高级方法还有等等啦
scss-zhilizhili-mei 提供了一些简单的设计想法

大家平时一定要遵循dry法则

大家编写样式时尽量使用sass或者postcss写法不要直接写css 这样做目的希望代码可读性增加模块化就算现在只有你一个人如果团队来新人或者你离职代码交给别人维护大家都是程序员何苦为难自己人

_color.scss

$custom-color: (

        "blue": (

                "500": #0f8ffe,

                "600": #0088ff

        ),

        "red": (

                "600": #f26c4f

        ),

        "green": (

                "600": #d6e9ba

        ),

        "yellow": (

                "600": #ecf82c

        ),

        "purple": (

                "600": #e22cf8

        ),

        "grey": (

                "400": #c2c2c2,

                "500": #898989,

                "600": #464646

        )

) !global;

@function get-custom-color($name, $level: "600") {

  @return map-deep-get($custom-color, $name, $level);

}

首先项目一开始会有一个color的基本表述文件定义为sass的一个全局变量
但是一些活动页面会有一些特殊的颜色怎么办呢

$custom-color: map-extend($custom-color, (

        "pink": (

                "600": #f54c72

        ),

        "green": (

                "600": #4bbf4a

        ),

        "blue": (

                "600": #5093e1

        ),

        "purple": (

                "600": #442488

        ),

        "grey": (

                "200": #fbfbfb,

                "300": #EDEFF5,

                "400": #EAECEC,

                "500": #A4ADBF,

                "600": #50535E

        )

)) !global;

使用map-extend 就可以修改custom-color颜色如果当前页面有特殊颜色需求就这么解决

一个标准的项目准备开始我们需要什么呢我们可以看张图

这是android material design的设计下篇文章我们把前端样式这边梳理一下

编写页面代码

    <div class="center-set">

        <div class="center-set__item">

            <form id="loginForm" action="" class="form login-form">

                <div class="form__group">

                    <div id="email" class="form-field" data-regex="if: input, do: isEmail;"

                         v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess" >

                        <input type="text" placeholder="Email">

                    </div>

                    <div class="tip">

                        <span class="icon"></span>

                    </div>

                </div>

                <div class="form__group">

                    <div id="password" class="form-field" data-regex="if: input, do: min(6) | max(15);"

                         v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess">

                        <input type="password" placeholder="Password">

                    </div>

                    <div class="tip">

                        <span class="icon"></span>

                    </div>

                </div>

                <div class="form__group">

                    <button id="submit" type="submit" class="btn form__btn submit-btn">提交</button>

                </div>

                <div class="form__group">

                    <div class="center-set remeberme-set">

                        <div class="center-set__item">

                            <div class="form-checkbox">

                                <input type="checkbox">

                                <div></div>

                            </div>

                        </div>

                        <div class="center-set__item">

                            <span>keep me logged in</span>

                        </div>

                    </div>

                </div>

            </form>

        </div>

    </div>

没什么好说的就是一些表单元素

编写js代码

在编写代码的之前解决一些浏览器bug

ie9 input事件bug

// ie9 input 事件polyfill

(function (d) {

    if (navigator.userAgent.indexOf('MSIE 9') === -1) return;

    var elements = [], values = [], ev = d.createEvent('CustomEvent');

    ev.initCustomEvent('input', true, true, {});

    d.addEventListener('selectionchange', function() {

        var actEl = d.activeElement;

        if (actEl.tagName === 'TEXTAREA' || (actEl.tagName === 'INPUT')) {

            var idx = elements.indexOf(actEl), el = elements[idx] || elements.push(actEl);

            if (actEl.type === 'text' || actEl.type === 'password' || actEl.type === 'search') {

                if (el.value !== values[idx]) {

                    values[idx] = el.value;

                    el.dispatchEvent(ev);

                }

            }

        }

    });

})(document);

对于登陆而言 js验证时一件很重要的事通常需要解决输入时检测提示提交时监测提示

这里我的想法是提供一种通用写法具体实现可以不一样

<div id="email" class="form-field" data-regex="if: input, do: isEmail;"

     v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess" >

    <input type="text" placeholder="Email">

</div>

假设整个项目有一个通用的validator的对象这个实现不强求
我用的是validator.js if 后面是触发事件名称 do 是验证方法
这种在html上写的语句我叫做sml

// 解析sml

utils.sml = (function() {

    function parse(str) {

        var parseobj = {};

        parseobj["event"] = str.match(/(?:if:)\s*\w*/g)[0].replace("if:", "").trim();

        parseobj["regex"] = str.match(/(?:do:)[\s\w\(\),|]+/g)[0].replace("do:", "").split("|").map(function(item) {

            var args = [];

            var reg = /(?:\()[\w\s,]+/g;

            if (item.indexOf("(") > -1 && item.indexOf(")") > -1) {

                var val = item.match(reg)[0].replace("(", "").split(",");

                args = args.concat(val);

            }

            return {

                name: item.trim().replace(reg, "").replace(")", ""),

                args: args

            };

        });

        return parseobj;

    }

    return {

        parse: parse

    }

})();

data-regex="if: input, do: min(6) | max(15);"

如果有多个验证就是用分隔符隔开多个验证第一次错误时就退出

任何验证都要提供 regex-error 和 regex-success 两个方法

再说组件每个html 组件目前我是用vue实现的但是我决定用angular2做了所以不怎么说了

框架的validtor 需要保留每个待验证的方式以便使用submit提交时可以验证以便实现组件于页面逻辑的结构

form 组件我会写几篇文章

编写大型项目web页面从写web登陆页面开始的更多相关文章

使用Vue写一个登陆页面并在管理页面查看和修改
注册页面代码如下html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
.Net程序猿玩转Android开发---(3)登陆页面布局
这一节我们来看看登陆页面如何布局.对于刚接触到Android开发的童鞋来说.Android的布局感觉比較棘手.须要结合各种属性进行设置,接下来我们由点入面来了解安卓中页面如何布局,登陆页面非常eas ...
Java Web(十四) 编写MyBookStore项目的总结
这几天一直没有发博文,原因是在写一个书城的小项目,作为web学习的最后沉淀,接下来就要到框架的学习了. --WH 一.项目介绍从网上找的一个培训机构的小项目,名称叫做书城购物网站吧,其中就是分前 ...
分分钟教会你使用HTML写Web页面
在学习怎样使用HTML编写网页之前,我们必须先搞清楚什么是HTML?当然了不是系统的给大家介绍HTML的前世今生,假设对其身世感兴趣的小伙伴能够去问度娘,她会给你想要的答案. 所谓HTML,就是我们常 ...
[置顶] 自己动手写Web容器之TomJetty之六：动态页面引入
传送门 ☞ 1.Web服务内功经脉传送门 ☞ 2.让服务动起来传送门 ☞ 3.掀起请求盖头来传送门 ☞ 4.静态页面起步传送门 ☞ 5.包装请求参数在上一节,我们已经完成了TomJetty服 ...
第三方页面嵌入到web项目的方案之使用iframe嵌入
有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...
JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署
接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...
一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面
SpringBoot springboot的目的是为了简化spring应用的开发搭建以及开发过程.内部使用了特殊的处理,使得开发人员不需要进行额外繁锁的xml文件配置的编写,其内部包含很多模块的配置只 ...
第一次写Web API接口
API是什么?只知道是网络接口,具体怎么写?不会!如何调用?不会!那怎么办? 第一次的经历~~ 需求:为其他项目提供一个接口功能:为项目提供询盘信息和商家信息,格式为Json字符串拿过来,就开始做 ...

随机推荐

XML序列化与反序列化接口对接实战，看这篇就够了
关键字:c# .NET XML 序列化反序列化本文为接口对接实践经验分享,不对具体的XML概念定义进行阐述:涉及工具类及处理方法已在生产环境使用多年,可放心使用.当然如果你发现问题,或有不同想法, ...
矩池云 | Tony老师解读Kaggle Twitter情感分析案例
今天Tony老师给大家带来的案例是Kaggle上的Twitter的情感分析竞赛.在这个案例中,将使用预训练的模型BERT来完成对整个竞赛的数据分析. 导入需要的库 import numpy as np ...
『现学现忘』Docker基础 — 16、Docker中的基本概念和底层原理
目录 1.Docker的底层原理 2.Docker中常用的基本概念 3.run命令的运行流程 4.为什么Docker比VM快 Docker架构图: 我们依照Docker架构图进行Docker基础概念的 ...
.NET6: 开发基于WPF的摩登三维工业软件 (8) - MVVM
基于WPF开发界面的一个很大优势是可以方便地基于MVVM设计模式开发应用.本文从应用的角度基于MVVM实现参数化管材的创建界面. 1 MVVM MVVM是Model-View-ViewModel的简写 ...
layui 数据表格的使用（分页+总条数）
下载地址 https://www.layui.com/ 点击实例,找到layui适合模板 2. 新建html将代码复制到对应模板,修改对应样式路径. 5.修改对应参数(url,field) 追加以下参 ...
php 23种设计模式 - 设计模式简介以及分类
一. Introduction[介绍] 设计模式:提供了一种广泛的可重用的方式来解决我们日常编程中常常遇见的问题.设计模式并不一定就是一个类库或者第三方框架,它们更多的表现为一种思想并且广泛地应用在系 ...
神经网络中的Heloo，World，基于MINST数据集的LeNet
前言最近刚开始接触机器学习,记录下目前的一些理解,以及看到的一些好文章mark一下 1.MINST数据集 MNIST 数据集来自美国国家标准与技术研究所, National Institute of ...
fashion_mnist 计算准确率、召回率、F1值
本文发布于 2020-12-27,很可能已经过时 fashion_mnist 计算准确率.召回率.F1值 1.定义首先需要明确几个概念: 假设某次预测结果统计为下图: 那么各个指标的计算方法为: A ...
linux mac 命令行远程连接ssh提示IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY解决
➜ ~ ssh adleytales@192.168.1.10 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNIN ...
内置方法 __new__ __del__
1.__new__ 构造方法实例化对象是先执行__new__方法,但是类中没有__new__方法,所以先到父类object类中的new方法,开辟一个属于对象的空间,然后再执行init方法设计模式: ...

编写大型项目web页面 从写web登陆页面开始

web页面搭建需要准备什么工具

首先我们会和设计师沟通 我们需要一些检验设计的工具

和后端沟通

沟通 通常前端的位置是定位于前后端桥梁的 这个我会在后文多次强调 另外咱么这个文章是一系列的 每个ui的实现 我可能会解读一下w3c文档 可能就会占用一篇文章

构建和审查工具

技术选型

登陆页面简单吗

先做页面 好的 这里问题来了

公司有没有前端库呢 有的话还简单点 没有就只能自己搭了

开始写