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

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

ps 自动裁图 自动测量工具

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

sketch 可以使用阿里的工具 marketch

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

有些我都会问

pc端

  1. ie8问题 如果要兼容ie8 我要考虑成本

  2. 如果是webapp 一个人办 可能会出现时间的问题 这个不要惊讶 一个人做webapp会不停重构

mobile端

  1. uc问题

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

和后端沟通

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

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

构建和审查工具

gulp
jshint
等等

技术选型

sass
postcss
typescript 或者 es6

登陆页面简单吗

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

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

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

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

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

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

  1. 如何给css加ie的hack

  1. <!doctype html>
  2. <!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
  3. <!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
  4. <!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->
  1. ie 的模式

  1. <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
  1. 也许有的页面会移动端也用

  1. <meta name="viewport"
  2. content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  1. 360的保护

  1. <meta name="renderer" content="webkit">
  1. 听说标准很值钱 dom4 有classlist奥

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

开始写

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

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

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

  1. --某个项目静态目录
  2. -- framework
  3. -- elements
  4. -- my module
  5. -- sass
  6. _color.scss
  7. _font.scss

__color.scss

  1. $custom-color: (
  2. "blue": (
  3. "500": #0f8ffe,
  4. "600": #0088ff
  5. ),
  6. "red": (
  7. "600": #f26c4f
  8. ),
  9. "green": (
  10. "600": #d6e9ba
  11. ),
  12. "yellow": (
  13. "600": #ecf82c
  14. ),
  15. "purple": (
  16. "600": #e22cf8
  17. ),
  18. "grey": (
  19. "400": #c2c2c2,
  20. "500": #898989,
  21. "600": #464646
  22. )
  23. ) !global;
  24. @function get-custom-color($name, $level: "600") {
  25. @return map-deep-get($custom-color, $name, $level);
  26. }

_font.scss

  1. @import "../../../../../node_modules/sassstd/src/sassstd";
  2. @import "../../../../../node_modules/sassyjson/stylesheets/SassyJSON";
  3. @import "../../../../../node_modules/scss-zhilizhili-mei/stylesheets/mei";
  4. @import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/full-parent";
  5. @import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/size";
  6. @import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/bem";
  7. @import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/query-selector";
  8. @import "../../../../../node_modules/zhilizhili-ui/framework/sass/common/sim-querySelector";
  9. @mixin interface-font() {
  10. .font {
  11. @content;
  12. }
  13. }
  14. @mixin use-font() {
  15. $defaults: (
  16. ".font": (
  17. )
  18. );
  19. @include interface-font() {
  20. @include register-hook("font");
  21. @content;
  22. }
  23. }
  24. @mixin use-amazeui-font($sel: body) {
  25. #{$sel} {
  26. 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;
  27. }
  28. }
  1. font.scss 使用的是自己整合的sassstd 这是自己搜集的sass库
    提供一些string map list的高级方法 还有等等啦

  2. scss-zhilizhili-mei 提供了一些简单的设计想法

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

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

  1. _color.scss

  1. $custom-color: (
  2. "blue": (
  3. "500": #0f8ffe,
  4. "600": #0088ff
  5. ),
  6. "red": (
  7. "600": #f26c4f
  8. ),
  9. "green": (
  10. "600": #d6e9ba
  11. ),
  12. "yellow": (
  13. "600": #ecf82c
  14. ),
  15. "purple": (
  16. "600": #e22cf8
  17. ),
  18. "grey": (
  19. "400": #c2c2c2,
  20. "500": #898989,
  21. "600": #464646
  22. )
  23. ) !global;
  24. @function get-custom-color($name, $level: "600") {
  25. @return map-deep-get($custom-color, $name, $level);
  26. }

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

  1. $custom-color: map-extend($custom-color, (
  2. "pink": (
  3. "600": #f54c72
  4. ),
  5. "green": (
  6. "600": #4bbf4a
  7. ),
  8. "blue": (
  9. "600": #5093e1
  10. ),
  11. "purple": (
  12. "600": #442488
  13. ),
  14. "grey": (
  15. "200": #fbfbfb,
  16. "300": #EDEFF5,
  17. "400": #EAECEC,
  18. "500": #A4ADBF,
  19. "600": #50535E
  20. )
  21. )) !global;

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

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

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

编写页面代码

  1. <div class="center-set">
  2. <div class="center-set__item">
  3. <form id="loginForm" action="" class="form login-form">
  4. <div class="form__group">
  5. <div id="email" class="form-field" data-regex="if: input, do: isEmail;"
  6. v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess" >
  7. <input type="text" placeholder="Email">
  8. </div>
  9. <div class="tip">
  10. <span class="icon"></span>
  11. </div>
  12. </div>
  13. <div class="form__group">
  14. <div id="password" class="form-field" data-regex="if: input, do: min(6) | max(15);"
  15. v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess">
  16. <input type="password" placeholder="Password">
  17. </div>
  18. <div class="tip">
  19. <span class="icon"></span>
  20. </div>
  21. </div>
  22. <div class="form__group">
  23. <button id="submit" type="submit" class="btn form__btn submit-btn">提交</button>
  24. </div>
  25. <div class="form__group">
  26. <div class="center-set remeberme-set">
  27. <div class="center-set__item">
  28. <div class="form-checkbox">
  29. <input type="checkbox">
  30. <div></div>
  31. </div>
  32. </div>
  33. <div class="center-set__item">
  34. <span>keep me logged in</span>
  35. </div>
  36. </div>
  37. </div>
  38. </form>
  39. </div>
  40. </div>

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

编写js代码

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

ie9 input事件bug

  1. // ie9 input 事件polyfill
  2. (function (d) {
  3. if (navigator.userAgent.indexOf('MSIE 9') === -1) return;
  4. var elements = [], values = [], ev = d.createEvent('CustomEvent');
  5. ev.initCustomEvent('input', true, true, {});
  6. d.addEventListener('selectionchange', function() {
  7. var actEl = d.activeElement;
  8. if (actEl.tagName === 'TEXTAREA' || (actEl.tagName === 'INPUT')) {
  9. var idx = elements.indexOf(actEl), el = elements[idx] || elements.push(actEl);
  10. if (actEl.type === 'text' || actEl.type === 'password' || actEl.type === 'search') {
  11. if (el.value !== values[idx]) {
  12. values[idx] = el.value;
  13. el.dispatchEvent(ev);
  14. }
  15. }
  16. }
  17. });
  18. })(document);

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

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

  1. <div id="email" class="form-field" data-regex="if: input, do: isEmail;"
  2. v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess" >
  3. <input type="text" placeholder="Email">
  4. </div>

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

  1. // 解析sml
  2. utils.sml = (function() {
  3. function parse(str) {
  4. var parseobj = {};
  5. parseobj["event"] = str.match(/(?:if:)\s*\w*/g)[0].replace("if:", "").trim();
  6. parseobj["regex"] = str.match(/(?:do:)[\s\w\(\),|]+/g)[0].replace("do:", "").split("|").map(function(item) {
  7. var args = [];
  8. var reg = /(?:\()[\w\s,]+/g;
  9. if (item.indexOf("(") > -1 && item.indexOf(")") > -1) {
  10. var val = item.match(reg)[0].replace("(", "").split(",");
  11. args = args.concat(val);
  12. }
  13. return {
  14. name: item.trim().replace(reg, "").replace(")", ""),
  15. args: args
  16. };
  17. });
  18. return parseobj;
  19. }
  20. return {
  21. parse: parse
  22. }
  23. })();
  1. data-regex="if: input, do: min(6) | max(15);"

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

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

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

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

form 组件我会写几篇文章

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

  1. 使用Vue写一个登陆页面并在管理页面查看和修改

    注册页面代码如下html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. .Net程序猿玩转Android开发---(3)登陆页面布局

    这一节我们来看看登陆页面如何布局.对于刚接触到Android开发的童鞋来说.Android的布局感觉比較棘手.须要结合各种属性进行设置,接下来我们由点入面来 了解安卓中页面如何布局,登陆页面非常eas ...

  3. Java Web(十四) 编写MyBookStore项目的总结

    这几天一直没有发博文,原因是在写一个书城的小项目,作为web学习的最后沉淀,接下来就要到框架的学习了. --WH 一.项目介绍 从网上找的一个培训机构的小项目,名称叫做 书城购物网站 吧,其中就是分前 ...

  4. 分分钟教会你使用HTML写Web页面

    在学习怎样使用HTML编写网页之前,我们必须先搞清楚什么是HTML?当然了不是系统的给大家介绍HTML的前世今生,假设对其身世感兴趣的小伙伴能够去问度娘,她会给你想要的答案. 所谓HTML,就是我们常 ...

  5. [置顶] 自己动手写Web容器之TomJetty之六:动态页面引入

    传送门 ☞ 1.Web服务内功经脉 传送门 ☞ 2.让服务动起来 传送门 ☞ 3.掀起请求盖头来 传送门 ☞ 4.静态页面起步 传送门 ☞ 5.包装请求参数 在上一节,我们已经完成了TomJetty服 ...

  6. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  7. JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署

    接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...

  8. 一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面

    SpringBoot springboot的目的是为了简化spring应用的开发搭建以及开发过程.内部使用了特殊的处理,使得开发人员不需要进行额外繁锁的xml文件配置的编写,其内部包含很多模块的配置只 ...

  9. 第一次写Web API接口

    API是什么?只知道是网络接口,具体怎么写?不会!如何调用?不会!那怎么办? 第一次的经历~~ 需求:为其他项目提供一个接口 功能:为项目提供询盘信息和商家信息,格式为Json字符串 拿过来,就开始做 ...

随机推荐

  1. P1424

    #include <stdio.h> int main(){ int s = 250; int x, n, distance = 0; scanf("%d %d",&a ...

  2. 04-SpringMVC之请求处理流程

    SpringMVC之请求处理流程 我们知道DispatcherServlet就是一个HttpServlet,而HttpServlet的请求就从doGet/doPost开始 DispatcherServ ...

  3. vue监听有无网络

    mounted () {     window.addEventListener('offline', function ($event) { alert('offline'); });     wi ...

  4. laravel 怎么获取public路径

    app_path()   app_path函数返回app目录的绝对路径: $path = app_path();   你还可以使用app_path函数为相对于app目录的给定文件生成绝对路径: $pa ...

  5. cookie与session(全面了解)

    目录 一:cookie与session 1.什么是Cookie? 2.Cookie主要用于以下三个方面 3.什么是Session? 4.Cookie与Session有什么不同? 5.为什么需要Cook ...

  6. NTFS权限详解

    NTFS权限是作为一个Windows管理员必备的知识,许多经验丰富的管理员都能够很熟悉地对文件.文件夹.注册表项等进行安全性的权限设置,包括完全控制.修改.只读等.而谈论NTFS权限这个话题也算是老生 ...

  7. NTFS权限概述

    NTFS权限概述 NTFS是我常见的一种磁盘格式,在Windows系统中使用广泛,它打破了FAT的局限性.在我使用ntfs格式分区的时候经常会涉及到ntfs权限设置问题,来帮助我们对文件的处理.那么什 ...

  8. java 中判断输入是否合法 if (变量名.hasNextInt())

    //案例: Scanner sc = new Scanner(System.in); System.out.println("你选择了新修改商品功能!"); System.out. ...

  9. CF1106F题解

    居然没人写常系数齐次线性递推/jy 题意明确. 首先我们注意到这个系数是在幂上面的,这道题的各种信息都是建立在乘法上的,十分不好处理,考虑求一个 \(\ln\) 将这些信息建立在加法上. \[\ln ...

  10. LGP6788题解

    太慢了!太慢了!我的替身 [The World] 是最强的替身! \(O(n^{\frac 2 3})\) 的解法!不清楚用 sbt 能不能更快一些,可能会吧.灵感来源于BZOJ4176,同时也可看到 ...