目标：从零开始实现一个登录页，体验真正的程序开发
好久没来了，最近也是比较忙（懒）。
看到这个标题，可能有些同学会很失望：都学到第9章了，才搞个登录页？ 未免有些太低端了吧！
其实，看似简单的登录页，并不简单，要注意的地方不少，下面我们一步一步来体验下。
本章会有比较多的布局/调样式的内容，如果对css不了解，建议先花点时间看一下这个教程
https://www.runoob.com/css/css-tutorial.html
本来也想把css单独做一篇来讲的，但是这个教程写的太好了，自己再啰嗦没有意义
代码部分接上回，先把views/Login.vue这个文件备份下，之前我们在里面写了点东西的，不要浪费了。
然后把Login.vue里面的代码删掉，像这样
运行yarn serve启动服务，访问地址http://localhost:8080/#/login，可以看到一个空白页面。
现在我们往里面填东西，最基本的想法是要有用户名和密码的输入框，还要一个登录按钮。
之前说过，提交内容一般用表单。
打开element表单的文档 https://element.eleme.cn/#/zh-CN/component/form
把这个典型表单的代码抄进去，像这样
保存，刷新浏览器页面，已经看到内容了，很顺利
但是这个输入框有点太长了，占满了整个浏览器，有点难看。
我们先在表单上加点样式，把尺寸弄小点。el-form标签上添加class
然后在style区域添加css样式，设置宽度400像素，高度300像素。
（如果这个样式表看不懂，建议先去看我上面推荐的css教程，翻一翻有个大概印象）
保存，再看看页面，好看很多了有没有
现在我们把里面乱七八糟的东西干掉，只留两个输入框，一个按钮
再看看页面，有点形状了！
试试在用户名这里输入点东西看看，发现密码框的内容也会自动同步
这是因为密码输入框的v-model和用户名的一样，绑定了相同的数据源。
试试把这个v-model删掉看看，发现密码输入框都不能输入了！
我们把数据源定义这里改一下，增加password，不要的都干掉，像这样
同时，密码输入框的v-model改成form.password
再看看页面，可以愉快的输入了
但是这个密码，有点尴尬，没有显示成星号，问题不大，把type设置成password就好了
这里我还加了个show-password，这样最右侧会出来一个小图标，可以显示和隐藏密码，看起来很专业！
现在还有个小问题，就是我们的表单挤在左上角，有点难看。一般来说都是居中的
我们来调下样式表，设置表单的位置，像这样。（position这个样式建议仔细看看教程）
再看下页面，貌似剧中了，其实有点歪，表单的左上角这个点是居中的，整体偏右下
现在我们用外边距margin，把这个偏移量校正
注意这个写法，偏移量是表单尺寸的一半。不管屏幕尺寸怎么调整，都是可以正好居中的。
太棒了！ 可以自动居中，还能自适应屏幕尺寸，很不错。
再观察下我们这个页面，大面积惨白的背景，显得有点单调，试着加个背景色看看。
我们先在表单元素的最外面，加一个div，然后把这个div设置成全屏幕那么大，再加上背景样式就好了
样式如下
观察下效果，比之前还难看了！表单内容看不清了， 而且左侧和头上都有漏风
先解决漏风的问题，在.bgDiv里面加上 left:0px;top:0px; 把这个div对齐到最角上，问题解决。
再解决表单难看的问题，现在表单是继承了.bgDiv的背景色，我们给他也加一个不一样的背景
效果如下，有点难看！
继续调样式，加上内边距padding，把表单里的子元素，和表单边框分开点
再看看，舒服多了，但是我们这个表单，像一张纸漂在上面，没有质感
现在我们给表单加个边框，显得厚重一点
再观察下，有点进步了
我们再给边框加个阴影，加强立体感
有点立体感了
现在系统没有名字，我们给加个标题
样式不能少
看看现在的效果，label和标题不对齐，有点难看
把label改成placeholder,代码如下
页面效果
现在登录按钮显得有点可怜，用样式把宽度设成100%
看看效果，整齐了
再优化一下，给两个输入框加上图标（参考element文档：https://element.eleme.cn/#/zh-CN/component/icon）
再瞅瞅，图标有了。但是这个大片蓝色的背景，还是丑，很单调
我们把这个背景改成渐变色试试（渐变色除了线性的，还可以设置径向，可以自己看教程试试效果）
再看效果，感觉舒服太多了！ 彻底摆脱了丑陋
更多的时候，我们是放一张背景图，我们试一下
先找一张图片放到这里
然后在背景的div上加:style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}"
这里是动态加载的图片，不用require直接在css里面写路径是不行的（也可能有好办法我没找到）
样式里面，设置图片不重复，完全覆盖
看看效果，还不错，科技风。
背景图也可以弄一个很小的图片，设置成repeat，这样可以省流量，多大屏幕都不会模糊。自己可以体验下
现在我们把多语言加进去，没这个显得不太专业 （LangSelect.vue是之前做的模块，正好用上）
设置下样式，把这个下拉框摆到右边，和输入框右对齐
看看样子，很不错
不过我们现在页面上的字符串都是写死的中文，下拉框点了没起作用
改成多语言的写法，资源文件里别忘了 （参考下第4章）
再看看，多语言有了，高大上！
如果是面向互联网的系统，一般都会有忘记密码和新用户注册的功能，我们给他加上
弄两个文字按钮，放到登录按钮下面，靠右就行了
（之前设置的窗口高度有点大，从300px调整到240了）
写样式的时候，代码放置的顺序，最好和元素在页面上的顺序一致。
因为样式会越来越多，乱放的话自己找起来麻烦
看一下，是不是像一个能交差的作品了？
外观上看是不差了，但是有个大问题，就是没有任何功能！ 点了登录按钮啥也不能干。
不过，贴图贴的有点累了，要休息下，剩下的事情只能第10章来解决了，本章完。
网友评论