Vue.js实现注册功能
- 编写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实现注册功能的更多相关文章
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- Vue.js实现登录功能
编写html,通过vue-resource.js库向后台提交数据 <!DOCTYPE html> <html lang="en"> <head> ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- Vue.js 登录注册实现
转载 http://www.jb51.net/article/118003.htm
- Vue.js 2.x：组件的定义和注册（详细的图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- vue.js+koa2项目实战（三）登录注册模态框
登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 说说new 和 malloc()
熟悉c++的朋友应该都知道,c++提供给了程序员与硬件打交道的可能性,比如说内存管理.一个高水平的c++程序员可以将c++程序的性能优化到极致,榨干硬件资源.而现在我想说说与内存管理有关的new 和 ...
- 使用ESMap的地图平台开发三维地图
本文简单的介绍使用ESmap的SDK开发(DIY自己地图的)一个地图的过程.若有不足,欢迎指正. 一.创建地图 只需四步,从无到有,在浏览器中创建一个自己的三维地图,炫酷到爆! 第一步:引入ESM ...
- MIP 与 AMP 合作进展（3月7日）
"到目前为止,全网通过 MIP 校验的网页已超10亿.除了代码和缓存, MIP 还想做更多来改善用户体验移动页面." 3月7日,MIP 项目负责人在首次 AMP CONF 上发言. ...
- 跳动在网页中间的精灵----Javascript
今天开始js的内容整理,跳动在网页里的精灵就是它了. 一.简介 1.什么是Javascript JavaScript 是一种具有面向对象能力的.解释型的程序设计语言.更具体一点,它是基于对象和事件驱动 ...
- quillJS 富文本编辑器源码分析系列1
quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量, ...
- 从壹开始 [ Id4 ] 之一║ 授权服务器 IdentityServer4 开篇讲&计划书
前言 哈喽大家周四好!时间过的很快,现在已经是三月份了,我的 IdentityServer4 教程也拖了一定的时间了,正好最近有精力学新东西了,主要中间被小伙伴要求写一个管理后台,目前1.0已经上线( ...
- DES加解密
package encrypt; import java.security.Key; import java.security.SecureRandom; import java.util.Base6 ...
- 我们必须要知道的RESTful服务最佳实践
看过很多RESTful相关的文章总结,参齐不齐,结合工作中的使用,非常有必要归纳一下关于RESTful架构方式了,RESTful只是一种架构方式的约束,给出一种约定的标准,完全严格遵守RESTful标 ...
- 从零到一详聊如何创建Vue工程及遇到的常见问题
前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm in ...
- Dynamics 365中自定义工作流活动更新了输入输出参数后获取的方法
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复245或者20170309可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...