拼夕夕(模仿淘宝登录界面)

前言

看着学了这么久的前端和后端，来一个实战当然必不可少，所以在前天也就是2020/02/07，

我下了个决定：写一个模仿淘宝的网站，并且用拼多多的惯用名称拼夕夕作为ID创建一个网站。

首先放几张目标图~

第一张：是二维码登录界面

第二张：是密码登录界面

第三张：注册页

使用技术

html/html5
css/css3
jquery
servlet
mysql
ps

事先准备

图片
- 上面的三个图片作为模板，ps测量距离，从而设计
- 个人QQ二维码（这里我将二维码登录换成了扫码关注我QQ~因为二维码登录的技术还没了解）
- 拼夕夕logo（网上找了可以商用的字体，稍微排版了一下就ok了）
- 用户名密码的字体图标（上阿里巴巴矢量图标库找的）
接口

设计了前后端的接口规则（没用RAP2的，用了docway的来设计

数据库

mysql创建了一个专门给拼夕夕用的数据库，包含了用户名和密码字段

工具包

jar包：mysql的jar包，jackson的jar包
js框架：jQuery框架资源

tomcat服务器环境

遇到问题

尺寸问题
当我按照截取的图片设计时，发现位置明显不对。原本测量版心宽在我1920*1080的显示屏下居然占了满屏，
后来排查发现是计算机有一个文本放大125%的系统设置。
于是我将截取的图片改成了80%，因为假设实际尺寸为x，现在截取尺寸为y，则有x*125%=y*100%,则x=y*80%,所以要缩放80%。
经过修改完成了尺寸问题。
热点图的设置
下面这张图的二维码是三角形。一开始一直找不到自己map在哪里，后来发现是我的js语句写在了图片上，而不是map的area里面
，从而导致了没有响应的问题，而且才发现小手的图标要用pointer作为cusor，而不是hand~
背景图设计

算不上难点吧，但是要设计一个稍微不一样的还是想了一伙儿~
footer部分设计
一直在想他们的：a | b| c 。中间的|是不是用border做出来的，结果发现,就是普通的 | 字符，但是后来由于没啥合作方，所以footer就不写了
字体图标的添加
现在还在好奇淘宝的字体图标明明在input的上面写的，为什么图标还是在input-text的上面显示，难道浮动了？
但是我的登录面板已经float了，所以提升不了了吧~这一块我还是没大明白，但是我采用了换个顺序，先text再字体图标定位上去。
margin失效？
在注册页遇到不少排版的问题，主要是居中不起来；后来稍微总结了一下margin-right要在浮动后才有用，盒子要有宽高才能margin。
当然更科学的解释应该不是这样，还需要多练习基础，熟悉盒子模型的margin处理。
submit后页面刷新了
原本submit将数据交给后端后返回json，后按照json返回的code设置页面，却发现页面一直没有改变。
后来明白，每次提交后的页面实际上和提交前的页面不是一个页面了，所以在提交后，如果不期望页面跳转，仍然需要return false。
ajax校验后布局出问题了
由于一开始布局就是marin-top的，而且为了整齐表单用的右对齐的显示方式，如果校验数据插在每个input后面，会布局错乱。
如果放在input下面,由于margin会变得很丑，于是不得不用绝对定位。
password=null?
在编写后端的过程中，密码获取一直为null，于是我在数据库获得处加了debug，在servlet中加了debug，发现都没有值，最后发现是前端少写了个 .
即使用户名存在依然可以注册，用户名为空时校验为不存在(~确实不存在~)
于是jquery调整了一下，校验时js加上判断是否为空，提交时重新校验。