vue3+elementUIplus登陆_vue3 + elementplus 登陆界面+提示el-alert-CSDN博客

本文链接：https://blog.csdn.net/fhaitao2009/article/details/137355999

本文展示了如何在HTML中使用Vue框架和ElementPlus库创建一个简单的表单，用户输入后通过axios发送POST请求至服务器进行注册。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!-- element-plus-->
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
</head>

<body>
    <div id="app">

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item >
              <el-input v-model="username" placeholder="用户名" clearable />
            </el-form-item>
            <el-form-item >
                <el-input v-model="password" placeholder="密码" clearable />
              </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="refFun">提交</el-button>
            </el-form-item>
          </el-form>
    </div>


    <script>
        const { createApp, ref, reactive } = Vue;
        const username = ref('');
        const password = ref('');

        createApp({
            setup() {
                //写完函数也要去注册
                function refFun() {
                    axios.post('http://192.168.5.220:8083/system/register', {
                        username: username.value,
                        password: password.value
                    })
                        .then(function (response) {
                            alert(response.data);
                            console.log(response.data);
                        })
                        .catch(function (error) {
                            alert(response.data);
                            console.log(error);
                        });

                }
                return {
                    username,
                    password,
                    refFun,
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>


</body>

</html>