最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么实现登录功能

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js实现登录功能的方法:

    1、编写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>
    <div>
        <!--<div id="demo" v-show="show" class="alert alert-success">
            <span v-if="alert_tips">成功!很好地完成了提交。</span>
        </div>-->
        <form id="form">
            <div>
                <!--<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="密码">
               
                <div>
                    <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>

    2、后台接收数据

    @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怎么实现登录功能的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么实现登录功能
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 536稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情