• 编写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实现登录功能的更多相关文章

  1. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  2. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  3. 一周一个小demo — vue.js实现备忘录功能

    这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~  demo原git ...

  4. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  5. Vue.js实现注册功能

    编写html,通过vue-resource.js库向后台提交数据 <!DOCTYPE html> <html lang="en"> <head> ...

  6. 利用Vue.js实现登录/登出以及JWT认证

    JSON Web Token 入门教程:http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html 后端代码地址:https ...

  7. 学习笔记-vue.js快捷登录 enter

    一般监听在输入密码的input监听keyup事件,加enter修饰符.如果input是组件,加上.native修饰符.<div id="app"> <input ...

  8. vue.js+koa2项目实战（三）登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

  9. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

随机推荐

  1. 『zkw线段树及其简单运用』

    阅读本文前,请确保已经阅读并理解了如下两篇文章: 『线段树 Segment Tree』 『线段树简单运用』 引入 这是一种由\(THU-zkw\)大佬发明的数据结构,本质上是经典的线段树区间划分思想, ...

  2. 事务是什么？事务的4个特点（ACID）,事务的开启与结束

    事务是指作为单个逻辑工作单元执行的一组相关操作.这些操作要求全部完成 或者全部不完成.使用事务是为了保证数据的安全有效. 事务有一下四个特点:(ACID) 1.原子性(Atomic):事务中所有数据的 ...

  3. CART决策树和随机森林

    CART 分裂规则 将现有节点的数据分裂成两个子集,计算每个子集的gini index 子集的Gini index: \(gini_{child}=\sum_{i=1}^K p_{ti} \sum_{ ...

  4. Linux 系统目录结构说明

    在刚开始接触Linux系统时,对其目录结构迷茫的很,尤其是很少使用或者刚开始接触Linux系统的同学:我也是最近项目需要开始上手,所以查看了些资料,特整理出来供大家互相学习: 1.目录结构总揽 以下是 ...

  5. Docker入门学习

    Python爬虫 最近断断续续的写了几篇Python的学习心得,由于有开发经验的同学来说上手还是比较容易,而且Python提供了强大的第三方库,做一个小的示例程序还是比较简单,这不我之前就是针对Pyt ...

  6. DSAPI多功能组件编程应用-HTTP监听服务端与客户端_指令版

    前面介绍了DSAPI多功能组件编程应用-HTTP监听服务端与客户端的内容,这里介绍一个适用于更高效更快速的基于HTTP监听的服务端.客户端. 在本篇,你将见到前所未有的超简化超傻瓜式的HTTP监听服务 ...

  7. 教程：关于如何通过Maven仓库安装Spire系列的 Java产品

    Spire系列库中已发布的Java产品目前有三个,即Spire.PDF for Java.Spire.Presentation for Java.Spire.Barcode for Java.使用该J ...

  8. Win10下搭建Git服务器

    一. 搭建Git服务器环境前的必要准备 1.Windows10 2.Java环境 3.GitBlit服务器 4.Git版本管理工具 二. 开始搭建 第一步.安装JAVA运行环境 https://www ...

  9. 'module' object has no attribute 'Thread'解决方法及模块加载顺序

    源码片段: class myThread(threading.Thread): def __init__(self, threadID, name, counter): threading.Threa ...

  10. node项目自动化部署--基于Jenkins,Docker,Github(1)安装Jenkins

    前言 每次项目代码更新后都要重新部署,如果只有一台服务器还好. 但是如果是分布式系统,动不动就很多台服务器,所以代码的自动部署就显得十分重要了. 这里用几篇文章来记录一下如何使用Jenkins,Doc ...