运维 vue3+elementPlus登录向后端服务器发起数据请求Ajax

后端的url登录接口

先修改main.js文件

// 导入Ajax 前后端数据传输

import axios from "axios";

const app = createApp(App)

//vue3.0使用app.config.globalProperties.$http

app.config.globalProperties.$http = axios

app.mount('#app');

login.vue

页面显示部分

登录过程的js 点击登录按钮 methos里面调用login登录方法

export default {

name: "Login",

data(){

return{

// 登录表单的数据绑定对象

loginForm: {

username: 'admin',

password: '123'

}

},

methods:{

login(){

this.$refs.loginForm.validate(valid => {

if (!valid) return

//登录调用的doLogin进行登录

const result = this.$http.post('/api/doLogin',this.loginForm)

//先打印到浏览器控制台，看结果

console.log(result)

// 跳转到home页面

this.$router.push('/home')

})

}

}

}

此时前端有跨域问题 先配置跨域

vue.config.js  项目中如果没有这个文件 请自行创建。

module.exports = {

// 基本路径 baseURL已经过时

publicPath: './',

// 输出文件目录

outputDir: 'dist',

// eslint-loader 是否在保存时检查

lintOnSave: false,

devServer: {

// 前端显示端口号

port: 8080,

// 配置不同的后台API地址

proxy: {

'/api': {

target: 'http://localhost:8000/api', // 后台地址，根据实际后端接口

ws: true,

changeOrigin: true, //允许跨域

secure: false, //是否为https接口

pathRewrite: {

'^/api': ''

}

}

}

}

}

此时可以看到跳转到登录到home页面

 完整的后端登录方法 

消息提示使用elementPlus 的Elmessage 

methods:{

login(){

const that = this

this.$refs.loginForm.validate(async valid => {

if (!valid) return

// 将loginForm对象转换为查询字符串

var data = qs.stringify(this.loginForm)

// 由于data属性是一个json对象，需要进行解构赋值{data:result}，进行状态码判断

await this.$http.post('/api/doLogin',data).then(function (response){

if (response.data.status === 200){

console.log('登录成功')

that.$message.success("登录成功")

that.$router.push('/home')

}else {

console.log('登录失败，api后端接口状态',response.data.status)

that.$message.error("登录失败接口状态", response.data.status)

}

})

})

}

}

参考链接