简单的JAVA项目制作（二）

环境：idea2019 jdk1.8 Navicate12 MySql5.7

（day02）

开始设计一个简单的登录页面

1.设计一个简单的用户名密码界面

首先在static下新建一个名为login的html文件

这个文件就是我们的登录界面的代码

进行如下配置

此时在浏览器内在localhost后加入/login.html，界面显示为

2.对该登录界面进行美化

使用一个新的div将用户名与密码都包裹起来，将所需参数设置在最外层div内，上图中几个参数的具体作用为:定义宽度；上下100码，左右自动居中；文本对齐。更多参数的了解可以查看菜鸟的CSS介绍。

3.设置一个登录按钮并通过一些参数来使图像稍微美观一些

4.开始设置账号密码的验证

首先进行一个初步的简写，在登陆按钮处添加一个名为login的方法

并在login.html文件中添加如下代码：

<script>
    function login() {
        //读取用户名与密码的id
        var username = document.getElementById("usernameInput").value 
        var password = document.getElementById("passwordInput").value
        //进行请求，路径为/use/login
        fetch("/user/login",{
            method:'POST',
            headers:{'Content-Type':'application/json'},
            body:''
        }).then(res =>{        //res就是后台返回的结果。
            console.log(res)
            })
    }
</script>
/*
上述代码中的res=>所使用的技术为js的箭头函数
例：x => x*x 相当于function(x){return(x*x)}.
*/

此时由于fetch中的body没有写任何参数，所以现在我们使用F12打开源码点击登录按钮之后会出现如下提示

点击login

在这里可以看到我们所设置的参数，接下来只需对请求参数进行补全即可

5.向body内添加请求参数

body:JSON.stringify({username: username,password: password})

此时就是将我们的用户名和密码作为参数通过JSON的stringify方法转化为了标准的json字符串

再次点击登录按钮

至此前端的编写全部完成，接下来将开始后台的编写。

以后会持续更新该项目的笔记以及编写中所遇到的问题，喜欢请点个关注吧，欢迎各位初学者一起来讨论