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"> <!--<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实现登录功能的更多相关文章
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- 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实现注册功能
编写html,通过vue-resource.js库向后台提交数据 <!DOCTYPE html> <html lang="en"> <head> ...
- 利用Vue.js实现登录/登出以及JWT认证
JSON Web Token 入门教程:http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html 后端代码地址:https ...
- 学习笔记-vue.js快捷登录 enter
一般监听在输入密码的input监听keyup事件,加enter修饰符.如果input是组件,加上.native修饰符.<div id="app"> <input ...
- vue.js+koa2项目实战（三）登录注册模态框
登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...
- vue.js之组件篇
Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...
随机推荐
- 浏览器加载 CommonJS 模块的原理与实现
就在这个周末,npm 超过了 cpan ,成为地球上最大的软件模块仓库. npm 的模块都是 JavaScript 语言写的,但浏览器用不了,因为不支持 CommonJS 格式.要想让浏览器用上这些模 ...
- Python爬虫入门教程 60-100 python识别验证码，阿里、腾讯、百度、聚合数据等大公司都这么干
常见验证码 之前的博客中已经解决了一些常见验证码的问题,但是验证码是层出不穷的,目前解决验证码除了通过常规手段解决以外,还可以通过人工智能领域的深度学习去解决 深度学习?! 无疑对爬虫coder提高了 ...
- javascript-发布订阅模式与观察者模式
设计模式"(Design Pattern)是针对编程中经常出现的.具有共性的问题,所提出的解决方法.著名的<设计模式>一书一共提出了23种模式. 发布订阅模式 它定义了一种对象间 ...
- Python 转化成 PB 格式数据
一.概述 Protocol Buffers 是 Google 公司开发的一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯 ...
- 阿里云ecs centos7安装 postgresql 9.4
rpm -Uvh http://yum.postgresql.org/9.4/redhat/rhel-7-x86_64/pgdg-centos94-9.4-3.noarch.rpm yum insta ...
- 一款Android图文识别与扫描软件
OCR图文识别App 是一款准确高效的 OCR文字识别与扫描软件,识别准确度高,速度快,扫描文件清晰,可导出TXT.Excel. 免费使用. 技术 基于百度在业界领先的人工智能与深度学习技术,提供对身 ...
- MAC中使用APICloud同步代码错误解决办法
在MAC上使用APICloud同步代码时出现错误,其实就是git位置的问题,简单点就是把路径映射下. 问题提示: Can't locate SVN/Core.pm in @INC (you may n ...
- git 的常用命令
1. 添加远程仓库地址 git remote add origin xxxxxxxxxxxx 2.初始化仓库 git init 3.创建分支 git checkout -b xxxxxx 4. 查看当 ...
- redis-dump实现redis库迁移
最近公司有切换redis库的需求,找了个简单的redis迁移方法,不过也有缺点.就是对于实时性要求很高的redis库迁移无法做到数据的实时同步.不过对于简单的redis库备份和迁移还是可以的,各位看官 ...
- Liunx-mv命令
mv要是不明白什么意思,你就把它想象成Windows里面剪切文件夹/文件,然后再去粘贴的操作,你就会明白的. 1. 移动一个文件夹(rightr文件夹,移动到/201904/a目录) 出现这个错误的原 ...