App下載

vue.js登錄代碼怎么寫(xiě)？登錄實(shí)例代碼分享！

猿友 2021-06-21 11:42:04 瀏覽數(shù) (3031)
反饋

網(wǎng)頁(yè)登錄和其他的一些登錄方式大家應(yīng)該都有過(guò)相關(guān)的經(jīng)歷，那么今天我們就來(lái)說(shuō)說(shuō)“vue.js登錄代碼怎么寫(xiě)？”這個(gè)問(wèn)題吧！下面是一些有關(guān)于這個(gè)問(wèn)題的相關(guān)代碼分享，希望對(duì)大家有所幫助！

1.我們通過(guò)安裝需要的框架和插件，在新的項(xiàng)目中創(chuàng)建.html文件然后再輸入代碼，設(shè)置我們的靜態(tài)頁(yè)面，代碼如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶注冊(cè)</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>
    <!-- 異步提交的庫(kù) -->
    <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">
    <!--<div id="demo" v-show="show" class="alert alert-success">
        <span v-if="alert_tips">成功！很好地完成了提交。</span>
    </div>-->
    <form id="form">
        <div class="form-signin">
            <!--<h2 class="form-signin-heading">登錄</h2>-->
            <!-- class="sr-only"將label標(biāo)簽隱藏 -->
            <label for="exampleInputUsername" class="sr-only">用戶名</label>
            <!-- 會(huì)忽略所有表單元素的value、checked、selected特性的初始值，而總是將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源 -->
            <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="密碼">        
            <div class="checkbox">
                <label>
                    <!--<input type="checkbox">
                    記住密碼-->
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" onclick="ajaxRegister()" type="button">注冊(cè)
            </button>
        </div>
    </form>
</div>
</body>
<script>
    function ajaxRegister() {
        //Vue的異步Get請(qǐng)求
        /*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>

我們?cè)诖a中使用的css內(nèi)嵌樣式與JavaScript代碼從而實(shí)現(xiàn)我們的效果，

2.既然要實(shí)現(xiàn)登錄的話，我們就需要使用到數(shù)據(jù)庫(kù)，那么下面是有關(guān)于數(shù)據(jù)交互的代碼：

@RestController
public class UserController {
    @Autowired
    private UserService userService;
    //通過(guò)RequestBody實(shí)現(xiàn)與json交互
    @RequestMapping(value = "/register", method = RequestMethod.POST)
     //接收從客戶端傳過(guò)來(lái)的FormData()數(shù)據(jù)
    @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[]>轉(zhuǎn)成Map對(duì)象
        Map map = GenUtils.toParameterMap(parameterMap);
        //將Map對(duì)象生成為指定的Pojo對(duì)象
        User user = GenUtils.mapGetObj(User.class, map);
        //
        user = userService.selectByUser(user);
        //
        JSONObject jsonObject = JSONObject.fromObject(user);
        return jsonObject + "";
    }
}
總結(jié)：

這就是有關(guān)于“vue.js登錄代碼怎么寫(xiě)？”這個(gè)問(wèn)題的代碼分享，當(dāng)然如果你覺(jué)得哪里不好或者你有更好的方法也可以提出來(lái)和大家分享，更多的有關(guān)于vue這方面的編程知識(shí)和基礎(chǔ)的話我們都可以在 vue.js 1.0 教程中進(jìn)行學(xué)習(xí)和了解。


Vue.js

0 人點(diǎn)贊