Vue.js实现登录功能

编写html，通过vue-resource.js库向后台提交数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用户注册</title>

    <link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="js/jquery.js"></script>

    <script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script>

    <script src="js/vue.js"></script>

    <!-- 异步提交的库 -->

    <script src="js/vue-resource.min.js"></script>

    <style>

        .container {

            margin-top: 15%;

            width: 35%;

        }

        .btn-primary {

            background-color: #337ab7;

            border-color: #337ab7;

        }

        .form-control {

            margin-bottom: 4px;

        }

    </style>

</head>

<body>

<div class="container">

    <!--<div id="demo" v-show="show" class="alert alert-success">

        <span v-if="alert_tips">成功！很好地完成了提交。</span>

    </div>-->

    <form id="form">

        <div class="form-signin">

            <!--<h2 class="form-signin-heading">登录</h2>-->

            <!-- class="sr-only"将label标签隐藏 -->

            <label for="exampleInputUsername" class="sr-only">用户名</label>

            <!-- 会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源 -->

            <input type="text" class="form-control" v-model="formObj.username" id="exampleInputUsername" name="username"

                   placeholder="用户名">

            <label for="exampleInputUsername" class="sr-only">密码</label>

            <input type="password" class="form-control" v-model="formObj.password" id="exampleInputPassword"

                   name="password"

                   placeholder="密码">

            <div class="checkbox">

                <label>

                    <!--<input type="checkbox">

                    记住密码-->

                </label>

            </div>

            <button class="btn btn-lg btn-primary btn-block" onclick="ajaxRegister()" type="button">注册

            </button>

        </div>

    </form>

</div>

</body>

<script>

    function ajaxRegister() {

        //Vue的异步Get请求

        /*Vue.http.get("/test").then(function (res) {

            console.log(res.bodyText);

        }, function (res) {

            console.log(res.status);

        });*/

        var param = new FormData(document.getElementById("form"));

       // param = convert_FormData_to_json(param);

        console.log(param);

        Vue.http.post("/login", param).then(function (res) {

            console.log(res.bodyText);

            console.log("登录成功");

        }, function (res) {

            alert("登录失败");

        });

        return false;

    }

</script>

</html>

后台接收数据

@RestController

public class UserController {

    @Autowired

    private UserService userService;

    //通过RequestBody实现与json交互

    @RequestMapping(value = "/register", method = RequestMethod.POST)

     //接收从客户端传过来的FormData()数据

    @RequestMapping(value = "/login", method = RequestMethod.POST)

    public String login(HttpServletRequest request) throws ParseException {

        MultipartHttpServletRequest params = (MultipartHttpServletRequest) request;

        // List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");

        Map<String, String[]> parameterMap = params.getParameterMap();

        //将Map<String,String[]>转成Map对象

        Map map = GenUtils.toParameterMap(parameterMap);

        //将Map对象生成为指定的Pojo对象

        User user = GenUtils.mapGetObj(User.class, map);

        //

        user = userService.selectByUser(user);

        //

        JSONObject jsonObject = JSONObject.fromObject(user);

        return jsonObject + "";

    }

}

秒客网

Vue.js实现登录功能

相关文章