java实战(4)-----写一个登录的前端页面
上节课是引入了antD,引入的原因是因为提供了而很多现成的插件~抄一抄改一改就好~
那么我们来做一个练习,写一个登录页面。
①背景知识介绍:
HTML:是静态网页,该文档本身只有页面结构,可以显示页面内容;
CSS:层叠样式表,通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式;
如修改颜色、字体、字号、宽高、位置、背景等。
Javascript:动态脚本语言,广泛应用于web应用的功能开发以及丰富页面体验,可以动态控制页面内容;
如修改页面文字、图片、各种效果、功能等;
一个通俗的例子:HTML就像人的身体,CSS就像人的衣服,Javascript就像人的思想和行为。
②因为我们引入了antD,所以可以直接进去复制粘贴修改得到自己想要的页面:
先查看antD引入以后带来的demo内容:
(初始引入的状态应该为js,会提示语法错误,需要修改为jsx语法),直接import就行
③页面分解:
①用户名的文本输入框
②密码的文本输入框
③提交按钮
方法一、去antD抄袭
查看地址:
https://ant.design/components/form-cn/
方法二、自己手写,仿照着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,启动前端时页面提示如下
原因:React没有被定义
解决办法: