• 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%;
                   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 + "";
          }
      
      }
  • 相关阅读:
    perl6中函数参数(2)
    perl6中函数参数(1)
    上传绕过(转载)
    perl6中的hash定义(1)
    mssql手工注入2
    mssql手工注入1
    mssql注入中的储存用法删除与恢复
    perl 复制exe文件的简单方法
    python shell
    perl中设置POST登录时的重定向
  • 原文地址:https://www.cnblogs.com/fatRabbit-/p/10756482.html
Copyright © 2020-2023  润新知