Vue.js實現注冊功能

本文轉載自查看原文 2019-04-23 15:01 1754 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 + "";
    }

}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue.js如何實現彈窗功能 Vue.js實現登錄功能【Vue.js實戰案例】- Vue.js遞歸組件實現組織架構樹和選人功能 vue.js 使用axios實現下載功能 vue.js實現購物車功能用vue.js實現購物車功能 Vue.js實現的計算器功能完整示例 VUE.JS實現購物車功能 vue.js 組件注冊實例 Vue.js——使用$.ajax和vue-resource實現OAuth的注冊、登錄、注銷和API調用