使用SSM和Vue+axios发送POST请求来实现简单的前后端分离，这里实现的是登录功能。

项目目录如下：

其中只介绍前台login.html文件和后端处理UserController.java的代码。

login.html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!--引入Vue.min.js-->
    <script src="../js/vue.min.js"></script>
    <!--引入axios.min.js-->
    <script src="../js/axios.min.js"></script>
    <title>登录</title>
</head>
<body>
<form id="loginForm">
    <table cellspacing="0" cellpadding="0">
        <tr align="center">
            <th colspan="3" style="text-align: center;">
                <h2>登录管理</h2>
            </th>
        </tr>
        <tr>
            <td>身份：</td>
            <td colspan="2">
                <select v-model="identity">
                    <option value="">请选择身份</option>
                    <option value="学生">学生</option>
                    <option value="教师">教师</option>
                    <option value="管理员">管理员</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>用户名：</td>
            <td colspan="2"><input type="text" v-model="username">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td colspan="2">
                <input type="password" v-model="password">
            </td>
        </tr>
        <tr>
            <td>验证码：</td>
            <td><input type="text" v-model="verificationCode"></td>
            <td><img src="#" id="code"><a href="#">看不清</a></td>
        </tr>
        <tr align="center">
            <td><input type="checkbox" value="rememberMe" name="rememberMe" v-model="rememberMe">记住我
            </td>
            <td><input type="button" class="btn btn-primary" name="loginButton" value="登录" v-on:click="login()">
            </td>
            <td><input type="button" class="btn btn-warning" name="resetButton" value="重置" v-on:click="reset()">
            </td>
        </tr>
        <tr align="center">
            <td colspan="3">没有账户，立即<a href="#">注册</a></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    new Vue({
        el: "#loginForm",
        data: {
            identity: "",
            username: "",
            password: "",
            verificationCode: "",
            rememberMe: false
        },
        methods: {
            login: function () {
                var postdata = JSON.stringify({
                    identity: this.identity,
                    username: this.username,
                    password: this.password,
                    verificationCode: this.verificationCode
                });
                console.log(postdata);
                axios.post('/user/login', postdata, {headers: {'Content-Type': 'application/json;charset=UTF-8'}}).then(function (res) {
                    var b = confirm(res.data.msg);
                    if (b) {
                        window.location.href = res.data.page;
                    }
                }).catch(function (reason) {
                    alert(reason);
                });
            },
            reset: function () {
                this.identity = "",
                    this.username = "",
                    this.password = "",
                    this.verificationCode = "",
                    this.rememberMe = false
            }
        }
    });
</script>
</body>
</html>

使用@RequestBody Map<String,String>的方式获取前台传来的JSON数据信息，其UserController.java代码如下：

package controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import pojo.ResultInfo;
import service.UserService;

import java.util.Map;

/**
 * 处理用户注册、登录及注销
 *
 * @author lck100
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/login")
    @ResponseBody
    public ResultInfo login(@RequestBody Map<String, String> map) {
        // 获取用户名
        String username = map.get("username");
        // 获取密码
        String password = map.get("password");
        // 判断是否登录成功
        if (userService.login(username, password) != null) {
            return new ResultInfo(1, "登录成功", "html/success.html");
        } else {
            return new ResultInfo(0, "用户名或密码错误", "html/login.html");
        }
    }

}

使用@RequestBody LoginUser user获取前台传来的JSON数据的UserController.java代码如下：

package controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import pojo.LoginUser;
import pojo.ResultInfo;
import service.UserService;

/**
 * 处理用户注册、登录及注销
 *
 * @author lck100
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/login")
    @ResponseBody
    public ResultInfo login(@RequestBody LoginUser user) {
        // 获取用户名
        String username = user.getUsername();
        // 获取密码
        String password = user.getPassword();
        // 判断是否登录成功
        if (userService.login(username, password) != null) {
            return new ResultInfo(1, "登录成功", "html/success.html");
        } else {
            return new ResultInfo(0, "用户名或密码错误", "html/login.html");
        }
    }

}

运行效果如下：

 

如果对完整源码有兴趣。

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【CSDN202001252245】可获取本节源码。

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue