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">
  
      <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" onclick="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 + "";
      }
  
  }