站長(zhǎng)資訊網(wǎng)
vuejs設(shè)置登錄功能的方法：1、編寫html文件；2、通過(guò)“vue-resource.js”庫(kù)向后臺(tái)提交數(shù)據(jù)；3、通過(guò)“public class UserController {…}”接收數(shù)據(jù)即可。
本文操作環(huán)境：Windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
vuejs怎么設(shè)置登錄？
Vue.js實(shí)現(xiàn)登錄功能
編寫html，通過(guò)vue-resource.js庫(kù)向后臺(tái)提交數(shù)據(jù)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用戶注冊(cè)</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> <!-- 異步提交的庫(kù) --> <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標(biāo)簽隱藏 --> <label for="exampleInputUsername">用戶名</label> <!-- 會(huì)忽略所有表單元素的value、checked、selected特性的初始值，而總是將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源 --> <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">注冊(cè) </button> </div> </form> </div> </body> <script> function ajaxRegister() { //Vue的異步Get請(qǐng)求 /*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>
后臺(tái)接收數(shù)據(jù)
@RestController public class UserController { @Autowired private UserService userService; //通過(guò)RequestBody實(shí)現(xiàn)與json交互 @RequestMapping(value = "/register", method = RequestMethod.POST) //接收從客戶端傳過(guò)來(lái)的FormData()數(shù)據(jù) @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[]>轉(zhuǎn)成Map對(duì)象 Map map = GenUtils.toParameterMap(parameterMap); //將Map對(duì)象生成為指定的Pojo對(duì)象 User user = GenUtils.mapGetObj(User.class, map); // user = userService.selectByUser(user); // JSONObject jsonObject = JSONObject.fromObject(user); return jsonObject + ""; } }
推薦：《最新的5個(gè)vue.js視頻教程精選》
