vuejs에서 로그인을 설정하는 방법
- 藏色散人원래의
- 2021-09-24 16:53:391677검색
vuejs에서 로그인 기능을 설정하는 방법: 1. html 파일을 작성합니다. 2. "vue-resource.js" 라이브러리를 통해 데이터를 백그라운드로 제출합니다. 3. "public class UserController {... }".
이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
vuejs에서 로그인을 설정하는 방법은 무엇입니까?
Vue.js는 로그인 기능을 구현합니다
html을 작성하고 vue-resource.js 라이브러리를 통해 백그라운드에 데이터를 제출합니다.
<!DOCTYPE html>
<html>
<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>
<!--<div id="demo" v-show="show" class="alert alert-success">
<span v-if="alert_tips">成功！很好地完成了提交。</span>
</div>-->
<form id="form">
<div>
<!--<h2>登录</h2>-->
<!--将label标签隐藏 -->
<label for="exampleInputUsername">用户名</label>
<!-- 会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源 -->
<input type="text" v-model="formObj.username" id="exampleInputUsername" name="username"
placeholder="用户名">
<label for="exampleInputUsername">密码</label>
<input type="password" v-model="formObj.password" id="exampleInputPassword"
name="password"
placeholder="密码">
<div>
<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 + "";
}
}위 내용은 vuejs에서 로그인을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.