vuejs怎么设置登录

时间：2021-10-11 来源：互联网

今天PHP爱好者给大家带来vuejs设置登录功能的方法：1、编写html文件；2、通过“vue-resource.js”库向后台提交数据；3、通过“public class UserController {...}”接收数据即可。希望对大家有所帮助。

本文操作环境：Windows7系统、vue2.9.6版，DELL G3电脑。

vuejs怎么设置登录？

Vue.js实现登录功能

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

<!DOCTYPE html><html><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><p>    <!--<p id="demo" v-show="show" class="alert alert-success">        <span v-if="alert_tips">成功！很好地完成了提交。</span>    </p>-->    <form id="form">        <p>            <!--<h2>登录</h2>-->            <!--将label标签隐藏 -->            <label for="exampleInputUsername">用户名</label>            <!-- 会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源 -->            <input type="text" v-model="formObj.username" id="exampleInputUsername" name="username"                   placeholder="用户名">            <label for="exampleInputUsername">密码</label>            <input type="password" v-model="formObj.password" id="exampleInputPassword"                   name="password"                   placeholder="密码">                       <p>                <label>                    <!--<input type="checkbox">                    记住密码-->                </label>            </p>            <button class="btn btn-lg btn-primary btn-block" onclick="ajaxRegister()" type="button">注册            </button>        </p>    </form></p></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>

后台接收数据

@RestControllerpublic 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 + "";    }}

以上就是vuejs怎么设置登录的详细内容，更多请关注php爱好者其它相关文章！