java实战（4）-----写⼀个登录的前端页⾯上节课是引⼊了antD，引⼊的原因是因为提供了⽽很多现成的插件~抄⼀抄改⼀改就好~
那么我们来做⼀个练习，写⼀个登录页⾯。
①背景知识介绍：
HTML：是，该⽂档本⾝只有页⾯结构，可以显⽰页⾯内容；
CSS：，通过设置对应的样式属性可以修改html⽂档内各元素的显⽰、位置等样式；
如修改颜⾊、字体、字号、宽⾼、位置、背景等。java修改html文件
Javascript：动态，⼴泛应⽤于web应⽤的功能开发以及丰富页⾯体验，可以动态控制页⾯内容；
如修改页⾯⽂字、图⽚、各种效果、功能等；
⼀个通俗的例⼦：HTML就像⼈的⾝体，CSS就像⼈的⾐服，Javascript就像⼈的思想和⾏为。
②因为我们引⼊了antD，所以可以直接进去复制粘贴修改得到⾃⼰想要的页⾯：
先查看antD引⼊以后带来的demo内容：
（初始引⼊的状态应该为js，会提⽰语法错误，需要修改为jsx语法），直接import就⾏
③页⾯分解：
①⽤户名的⽂本输⼊框
②密码的⽂本输⼊框
③提交按钮
⽅法⼀、去antD抄袭
查看地址:
⽅法⼆、⾃⼰⼿写，仿照着App.jsx和App.css。在div中放⼊⾃⼰的js⽂件即可。
import React, { Component } from 'react';
import './App.css';
export class Login extends Component {
render() {
return(
<div>
</div>
)
}
}
④粘贴完毕后进⾏修改
step1、修改login.js⽂件。改成⼀个可以对外访问的
step2、修改index.js的指向⽂件，指向login.js
（注意层层引⼊）
⑤启动前端⽂件~查看
进⼊antD-demo，使⽤yarn start启动
⑥这时候会发现样式有丢失，原因是index.css⾥⾯缺少引⼊antd.css
引⼊成功以后再查看页⾯：如下图
⾄此~这个登录的页⾯就算是写好，且可以访问了。
⑦常见问题
（1）问题1，修改login.js时最后⼀⾏置灰，提⽰Unused default…
原因：这个是置灰的这个地⽅还没有被引⽤
解决办法：去index⾥⾯不仅仅要修改指向的是login，更需要⼿动对这个⽂件进⾏引⼊，如图：
（2）问题2，启动前端时页⾯提⽰如下
解决办法：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。