ElementUI之登陆+注册->饿了吗完成用户登录界面搭建,axios之get请求,axios之post请求,跨域,注册界面
首先,我们需要使用ElementUI来构建登录和注册的表单界面,然后使用axios发送HTTP GET和POST请求。
下面是一个简单的例子,展示如何使用ElementUI和axios来完成用户的登录和注册。
- 安装ElementUI和axios:
npm install element-ui axios
- 在Vue组件中引入ElementUI和axios:
import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'
import axios from 'axios'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
- 创建登录和注册的表单:
<template>
<div>
<!-- 登录表单 -->
<el-form ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
<!-- 注册表单 -->
<el-form ref="registerForm" :model="registerForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="registerForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="register">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
- 在Vue组件的script中添加逻辑:
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: ''
}
}
},
methods: {
login() {
axios.get('http://example.com/api/login', {
params: {
username: this.loginForm.username,
password: this.loginForm.password
}
})
.then(response => {
// 登录成功的处理逻辑
Message.success('登录成功')
})
.catch(error => {
// 登录失败的处理逻辑
Message.error('登录失败')
})
},
register() {
axios.post('http://example.com/api/register', {
username: this.registerForm.username,
password: this.registerForm.password
})
.then(response => {
// 注册成功的处理逻辑
评论已关闭