• 编写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">

    <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="密码">
    
            <label for="exampleInputUsername" class="sr-only">邮箱</label>
    
            <input type="email" class="form-control" v-model="formObj.email" id="exampleInputEmail" name="email"
    
                   placeholder="邮箱">
    
            <label for="exampleInputUsername" class="sr-only">手机</label>
    
            <input type="tel" class="form-control" v-model="formObj.phone" id="exampleInputPhone" name="phone"
    
                   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() {

        var param = new FormData(document.getElementById("form"));
    
        param = convert_FormData_to_json(param);
    
        console.log(param);
    
        Vue.http.post("/register", param).then(function (res) {
    
            console.log(res.bodyText);
    
        }, function (res) {
    
            console.log(res.status);
    
        });

        return false;
    
    }

    /**
    
     * 将formData数据转为JSON格式
    
     * @param formData
    
     */
    
    var convert_FormData_to_json = function (formData) {
    
        var objData = {};
    
        for (var entry  of formData.entries()) {
    
            objData[entry[0]] = entry[1];
    
        }
    
        return JSON.stringify(objData);
    
    }

</script>
    
</html>
  • 后台接收数据 
    @RestController
    
public class UserController {

    @Autowired
    
    private UserService userService;
    
    //通过RequestBody实现与json交互
    
    @RequestMapping(value = "/register", method = RequestMethod.POST)
    
    public String insert(@RequestBody User user) throws ParseException {

        //设置注册时间
    
        user.setRegisterTime(GenUtils.getCurrentDate());
    
        //设置用户权限
    
        user.setRoot(1);
    
        int result = userService.insert(user);
    
        JSONObject jsonObject = JSONObject.fromObject(result);
    
        return jsonObject + "";
    
    }

}

Vue.js实现注册功能的更多相关文章

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

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

  2. Vue.js实现登录功能

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

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

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

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

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

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

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

  6. Vue.js 登录注册实现

    转载 http://www.jb51.net/article/118003.htm

  7. Vue.js 2.x：组件的定义和注册（详细的图文教程）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...

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

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

  9. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. Jmeter利用正则表达式提取器提取登录cookie供下一步使用

    最近在学Jmeter,遇到需要登录之后才能进行下一步操作的场景,网上查了各位大神的资料,东拼西凑总算是做好满足需求了,写一下经过和步骤吧. 一.正常调用 按正常流程添加线程组.HTTP请求(登录和添加 ...

  2. javascript正则表达式学习（二）--位置匹配

    文章首发于sau交流学习社区 一.前言 正则表达式是匹配模式,要么是匹配字符,要么匹配位置. 其实在开发中很少用到匹配位置,本篇文章主要包含: 二.什么是位置 位置:相邻字符之间的位置. 三.如何匹配 ...

  3. ASP.NET Razor

    一.为什么要学习Razor? 可以让服务器代码(就是c#和vb)嵌入到网页中,也就是说这个页面中包含html代码和C#(vb)代码.基于服务器的代码可以在网页传送给浏览器时,创建动态 Web 内容.当 ...

  4. Linux遗忘root密码的其中两种解决方法

    由于安全的需要,系统一般只有一个root用户,因此若遗忘root用户的登录密码,因此需要通过其他途径进行修改密码.1.通过单用户模式(1)重启系统,按任意键进入grub菜单.出现grub菜单时,按↑, ...

  5. JS常用正则表达式备忘录

    摘要: 玩转正则表达式. 原文:JS常用正则表达式备忘录 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正则表达式或"regex"用于匹配字符串的各个部分 下面是 ...

  6. 联发科Helio P90(mt6779),P70(mt6775),P60(MT6771),P35,P22(MT6762)芯片参数规格

    Helio P90(mt6779)是一款人工智能处理平台,集成了超级强大的AI专核APU 2.0,具有超强的AI性能和一系列基于人工智能的成像升级.该芯片将重新定义消费者对智能手机AI功能的体验.He ...

  7. 章节九、5-IE Driver

    一.下载IE浏览器驱动,然后解压到存放谷歌和火狐驱动的相同路径中(请观看前面的章节) 下载地址一:http://selenium-release.storage.googleapis.com/inde ...

  8. 代码规范：idea上添加阿里巴巴Java开发插件

    在一个项目中,不可缺少的是书写代码的规范,没有好的代码规范约束,大家各写各的,十分不利于代码的维护与修改.     首先来看看如何在idea上添加这个插件: 直接上图 点击右边的蓝色按钮就可以安装了, ...

  9. 有人WIFI模块使用详解

    补充 模块在连接路由器时如果希望模块固定IP 不过发现固定IP之后好像连接路由器的等待时间增加了 用的这一款 看一下现在可能用到了引脚 这个模块也有三种模式AP,STA,AP+STA 先说一下模块在A ...

  10. Java核心技术第五章——2.Object类

    Object类:所有类的超类 Object类是Java中所有类的始祖,在Java中每个类都是由它扩展而来的.但是并不需要这样写: public class Emloyee extends Object ...