vuejs怎麼設定登入 - tw511教學網

vuejs設定登入功能的方法：1、編寫html檔案；2、通過「vue-resource.js」庫向後臺提交資料；3、通過「public class UserController {...}」接收資料即可。

本文操作環境：Windows7系統、vue2.9.6版，DELL G3電腦。

vuejs怎麼設定登入？

Vue.js實現登入功能

編寫html，通過vue-resource.js庫向後臺提交資料

<!DOCTYPE html>
<html>
<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>
    <!--<div id="demo" v-show="show" class="alert alert-success">
        <span v-if="alert_tips">成功！很好地完成了提交。</span>
    </div>-->
    <form id="form">
        <div>
            <!--<h2>登入</h2>-->
            <!--將label標籤隱藏 -->
            <label for="exampleInputUsername">使用者名稱</label>
            <!-- 會忽略所有表單元素的value、checked、selected特性的初始值，而總是將Vue範例的資料作為資料來源 -->
            <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">註冊
            </button>
        </div>
    </form>
</div>
</body>
<script>
    function ajaxRegister() {
        //Vue的非同步Get請求
        /*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>

後臺接收資料

@RestController
public class UserController {
    @Autowired
    private UserService userService;
    //通過RequestBody實現與json互動
    @RequestMapping(value = "/register", method = RequestMethod.POST)
     //接收從使用者端傳過來的FormData()資料
    @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[]>轉成Map物件
        Map map = GenUtils.toParameterMap(parameterMap);
        //將Map物件生成為指定的Pojo物件
        User user = GenUtils.mapGetObj(User.class, map);
        //
        user = userService.selectByUser(user);
        //
        JSONObject jsonObject = JSONObject.fromObject(user);
        return jsonObject + "";
    }
}

推薦：《》

以上就是vuejs怎麼設定登入的詳細內容，更多請關注TW511.COM其它相關文章！