Vue.js
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

vuejs怎么设置登录

发布时间：2022-05-22 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vuejs怎么设置登录，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vuejs设置登录功能的方法：1、编写htML文件；2、通过“vue-resource.js”库向后台提交数据；3、通过“public class UserController {...}”接收数据即可。

vuejs怎么设置登录

本文操作环境：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>
<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>

后台接收数据

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

推荐：《最新的5个vue.js视频教程精选》

以上就是vuejs怎么设置登录的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的vuejs怎么设置登录全部内容，希望文章能够帮你解决vuejs怎么设置登录所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：vuejs
猜你在找的Vue.js相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程
热门Vue.js教程