Foreword
Use of technology
Prepared
Encounter problems
Current progress
The front end of the source file

Foreword

Studies looking at the front and rear so long, of course, essential to a real, so the day before yesterday is 2020/02/07 ,

I made a decision: to write an imitation of Taobao site, and to fight with a lot of fight Xixi conventional name as the ID to create a website.

First, put a few goals map -

First: a two-dimensional code login screen

Second: is the password login screen

Third: sign-up page

Use of technology

html/html5
css/css3
jquery
servlet
mysql
ps

Prepared

image
- The above three pictures as templates, ps measure the distance, so design
- Personal QQ two-dimensional code (QR code Login here I will sweep into the yard because of technical concerns me QQ ~ two-dimensional code login yet understand)
- Fight Xixi logo (the Internet can find commercial fonts, layout a little bit on ok)
- Username Password font icon (on Alibaba vector icon library to find)
interface

Interface design rules front and rear ends (RAP2 useless, and with the design of docway

database

mysql create a dedicated database used to fight Xixi, it contains the user name and password fields

Toolkit

jar package: mysql jar package, jackson jar package
js framework: jQuery framework resources

tomcat server environment

Encounter problems

Size matters
when I designed in accordance with the interception of the picture, find the location of obvious wrong. The original version of the measure in my heart wide screen 1920 * 1080 actually accounted for a full screen,
and later investigation found that the computer has a text magnified 125% of system settings.
So I changed the picture will be taken by 80%, because it is assumed the actual size of x, now intercept size y, then there is x * 125% = y * 100 %, then x = y * 80%, so to zoom 80% .
After completion of editing the size of the problem.
FIG set of hot
two-dimensional code is a triangle below this FIG. Start their own map could not find where I later found the js statement written on the picture, not the map of the area inside
, resulting in a problem that is not responding, but found little hand pointer icons to use as cusor rather than 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加上判断是否为空，提交时重新校验。