- 编写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"> <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="密码"> <label for="exampleInputUsername" class="sr-only">邮箱</label> <input type="email" class="form-control" v-model="formObj.email" id="exampleInputEmail" name="email" placeholder="邮箱"> <label for="exampleInputUsername" class="sr-only">手机</label> <input type="tel" class="form-control" v-model="formObj.phone" id="exampleInputPhone" name="phone" placeholder="手机"> <div class="checkbox"> <label> <!--<input type="checkbox"> 记住密码--> </label> </div> <button class="btn btn-lg btn-primary btn-block" οnclick="ajaxRegister()" type="button">注册 </button> </div> </form> </div> </body> <script> function ajaxRegister() { var param = new FormData(document.getElementById("form")); param = convert_FormData_to_json(param); console.log(param); Vue.http.post("/register", param).then(function (res) { console.log(res.bodyText); }, function (res) { console.log(res.status); }); return false; } /** * 将formData数据转为JSON格式 * @param formData */ var convert_FormData_to_json = function (formData) { var objData = {}; for (var entry of formData.entries()) { objData[entry[0]] = entry[1]; } return JSON.stringify(objData); } </script> </html>
- 后台接收数据
@RestController public class UserController { @Autowired private UserService userService; //通过RequestBody实现与json交互 @RequestMapping(value = "/register", method = RequestMethod.POST) public String insert(@RequestBody User user) throws ParseException { //设置注册时间 user.setRegisterTime(GenUtils.getCurrentDate()); //设置用户权限 user.setRoot(1); int result = userService.insert(user); JSONObject jsonObject = JSONObject.fromObject(result); return jsonObject + ""; } }
转载于:https://www.cnblogs.com/fatRabbit-/p/10756482.html