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 元素,封装可重 ...
随机推荐
- C#中使用Bogus创建模拟数据
原文:CREATING SAMPLE DATA FOR C# 作者:Bruno Sonnino 译文:C#中使用Bogus创建模拟数据 译者: Lamond Lu 背景 在我每次写技术类博文的时候,经 ...
- Bagging之随机森林
随机森林(Random Forest)是一种Bagging(Bootstrap Aggregating)集成算法,在样本随机(样本扰动)的基础上,进一步运用特征随机(属性扰动)的机制,得到比一般的Ba ...
- Named Volume 在 MySQL 数据持久化上的基本应用
原文作者:春哥 初识春哥时,春哥是美术设计大咖.后不久,创业并致力于游戏开发,已有3年.从Unity3D到IOS(Swift)开发,从前端开发到后端以及容器技术,从设计开发测试到产品经理以及CEO,已 ...
- [PHP]实体类基类和序列化__sleep问题
1.构造函数传参2.__get和__set实现,当调用不存在的属性的时候,可以取值和赋值到data属性数组3.__sleep实现,当序列化对象的时候,只序列化data属性数组和类内初始化定义的字段4. ...
- openlayers一：显示地图与鼠标地理坐标
openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...
- 一目了然呀的VS2017 Live Test
刚刚试用了一下VS2017中的单元测试,发现,这一次,覆盖测试会自动标记出来.不用像以前一样要他细检查了.这次会自动帮你全部标记出来. 新建单元测试,使用MS的单元测试方案(VSTS使用的时候方便.) ...
- bat脚本自定义魔兽warIII运行分辨率，去黑边
我们一般平时安装完WarIII后运行时的分辨率默认是800*600,导致有黑边的存在.所以我写了一个bat脚本来自定义WarIII的运行分辨率.需要以管理员身份运行. 下载链接: 链接:https:/ ...
- Exp2后门原理与实践 20164312马孝涛
实验内容 使用netcat获取主机操作Shell,cron启动 (0.5分) 使用socat获取主机操作Shell, 任务计划启动 (0.5分) 使用MSF meterpreter(或其他软件)生成可 ...
- 数据库 【redis】 命令大全
以下纯属搬砖,我用Python抓取的redis命令列表页内容 如果想看命令的具体使用可查去官网查看,以下整理为个人查找方便而已 地理位置GEOADD 将指定的地理空间位置(纬度.经度.名称)添加到指定 ...
- SpringBoot2.0之八 多数据源配置
在开发的过程中我们可能都会遇到对接公司其他系统等需求,对于外部的系统可以采用接口对接的方式,对于一个公司开发的两个系统,并且知道相关数据库结构的情况下,就可以考虑使用多数据源来解决这个问题.Spri ...