溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue.js登錄代碼如何寫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue.js登錄代碼如何寫文章都會有所收獲，下面我們一起來看看吧。
1.我們通過安裝需要的框架和插件，在新的項目中創建.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">
<!--<h3 class="form-signin-heading">登錄</h3>-->
<!-- 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>我們在代碼中使用的css內嵌樣式與JavaScript代碼從而實現我們的效果，
2.既然要實現登錄的話，我們就需要使用到數據庫，那么下面是有關于數據交互的代碼：
@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登錄代碼如何寫”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue.js登錄代碼如何寫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
