简单的JAVA项目制作（三）

(day03)

开始学习本次内容之前最好有一些SpringMVC的基础知识，具体可以参考廖雪峰的官方网站来进行浏览，本篇内容也会对所使用到的知识进行解释

1.新建一个后端的类

首先要在main的Java包下的com.example.bootvueadmin包下新建一个名为Controller的包，再在此包内新建一个名为UserController的类

2、需要使用的两个注解

/*
一个注释为@RestController
一个注释为@RequestMapping
所谓注解，其实变相来看是与接口差不多的，注解更像是一种标签，把它贴到你所写的类或
者你所写的方法上，就可以使用了，编译器可以通过注解来识别你的代码
*/

这里介绍一下@RequestMapping，括号内的参数就是我们之前在前端请求的前置路由

前置路由设置完毕了，接下来我们要设置子路由并定义我们的接口了

3.设置接口

首先我们要使用RequestMapping的RequestMethod.POST方法并定义子路由，代码如下

public class UserController {
    //这里中的value就是我们的子路由，method就是我们要是用的这个注解的方法
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String login(){
        //先返回一个SUCCESS测试一下
        return "SUCCESS";
    }
}

重新启动代码，来看看浏览器效果

这里可以看到，状态以及由之前的404转为200，证明我们的接口是有效的

这里可以看到我们所设置的SUCCESS

至此可以说明，我们的前端与后端已经连通起来了，接下来将进行点击登陆后页面的跳转与用户名密码的验证

4.页面的跳转

首先说一下一个失败的案例

打开login.html文件，添加了如图代码

因为前面看到状态为200，所以想通过检验状态码与返回参数是不是SUCCESS来判别是否连接成功，但是重启代码后输入账号密码点击登录会显示账号密码错误，

经检验发现，由于res返回的是对象而不是字符串，所以要先对res进行一下处理才可以

---

思路还是同上，根据返回的是否为SUCCESS来进行判断

修改代码如下：

function login() {
    var username = document.getElementById("usernameInput").value
    var password = document.getElementById("passwordInput").value
    fetch("/user/login",{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({username: username,password: password})
    }).then(res =>{
        console.log(res)
        return res.text() //获取到后台数据
    })   //对res进行处理
        .then(res =>{
        console.log(res)
        if(res ==='SUCCESS')  //判断是否请求成功
            location.href = '/'   //跳转网页的方法
        else
            alert("账号或密码错误")
        })
}

先通过一个.then来对res进行字符串的操作，此时res变为字符串，然后直接判断res是否为SUCCESS来判别是否连接成功。

测试成功，跳转到主页。

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