前言

看着學了這么久的前端和后端，來一個實戰當然必不可少，所以在前天也就是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加上判斷是否為空，提交時重新校驗。