• 编写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. OSI七层协议与TCP连接

    概述 为了追求效率,我们写代码,不可能去关注底层知识,但往往到出了问题,或者性能调优.我们就会速手无策,仔细为自己查缺补漏,总结知识点. 网络协议 互联网的本质就是一系列的网络协议,让不同计算机能够互 ...

  2. JVM 第一次学习总结（2019年4月）

    1.内存模型 起源:在计算机系统,加入了一层读写速度尽可能接近处理器运算速度的高速缓存来作为内存和处理器之间的缓冲. 问题:缓存一致性.在多处理器系统中,每个处理器都有自己的高速缓存(抽象为工作内存) ...

  3. linux服务器 jboss-7安装

    jBoss简介 JBoss是一个运行EJB的J2EE应用服务器.它是开放源代码的项目,遵循最新的J2EE规范.从JBoss项目开始至今,它已经从一个EJB容器发展成为一个基于的J2EE的一个web 操 ...

  4. 基于滴答清单 Web 开发的 PC 客户端

    基于滴答清单 Web 开发的 PC 客户端 关于「滴答清单」 滴答清单是一款不可多得的 GTD 效率工具,它有着清晰明了的界面设计.恰到好处的功能设置.稳定的同步服务,如果你还缺少一款简洁而有效的 G ...

  5. 漫谈“采样”（sampling）

      越学越懵了,计算机中是怎么进行采样的,用了这么久的 rand() 函数,到现在才知道是怎么做的. 从均匀分布中采样   计算机中通过线性同余发生器(linear congruential gene ...

  6. 微服务架构 - SpringCloud整合分布式服务跟踪zipkin

    1.zipkin zipkin是Twitter的一个开源项目,它基于Google Dapper实现.我们可以使用它来收集各个服务器上请求链路的跟踪数据,并通过它提供的REST API接口来辅助我们查询 ...

  7. Qt之表格控件蚂蚁线

    一.蚂蚁线 摘自互动百科:在图像影像软件中表示选区的动态虚线,因为虚线闪烁的样子像是一群蚂蚁在跑,所以俗称蚂蚁线.在Poshop,After Effect等软件中比较常见. 背景:用过excel的同学 ...

  8. 微信小程序 组件通信相关知识整理

    1.自定义组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm ...

  9. .Net Project 常规结构

    目录:一个.NET网站的成长历程 在个人的日常工作和学习中,接触到不少的项目,这些项目结构大同小异,其结构的核心思想无外乎“分层“. 分层?从字面上理解,看似简单,实则不然.这需要从多个维度去看待这个 ...

  10. pfSense配置基于时间的防火墙规则

    基于时间的规则允许防火墙规则在指定的日期和/或时间范围内激活.基于时间的规则与任何其他规则的功能相同,只是它们在预定时间之外的规则集中实际上不存在. 基于时间的规则逻辑处理基于时间的规则时,调度计划确 ...