Bagaimana untuk menyediakan log masuk dalam vuejs-View.js-php.cn

Bagaimana untuk menyediakan log masuk dalam vuejs

藏色散人

Lepaskan： 2023-01-13 00:45:41

asal

1680 orang telah melayarinya

Cara menyediakan fungsi log masuk dalam vuejs: 1. Tulis fail html; 2. Serahkan data ke latar belakang melalui perpustakaan "vue-resource.js" 3. Terima data melalui "Pengawal Pengguna kelas awam {; ...}" Itu sahaja.

Bagaimana untuk menyediakan log masuk dalam vuejs

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk menyediakan log masuk dalam vuejs?

Vue.js melaksanakan fungsi log masuk

Tulis html dan serahkan data ke latar belakang melalui perpustakaan 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>

Salin selepas log masuk

Menerima data di latar belakang

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

Salin selepas log masuk

Disyorkan: "Pilihan tutorial video 5 vue.js terbaharu"

Atas ialah kandungan terperinci Bagaimana untuk menyediakan log masuk dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!