vue3+elementPlus登录向后端服务器发起数据请求Ajax-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+elementPlus登录向后端服务器发起数据请求Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

后端的url登录接口

vue3 alova向后端写数据,前端,服务器,ajax,运维

先修改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');

页面显示部分 
<template>
    
        <el-form ref="loginForm" :model="loginForm" :rules="rules"  > 
       
          <el-form-item label="用户">
            <el-input  v-model="loginForm.username" placeholder="请输入用户名"> </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input  v-model="loginForm.password" type="password" placeholder="请输入密码" show-password></el-input>
          <el-form-item>  
            <el-button  @click="login">登录</el-button>
          </el-form-item> 
      </div>
    </div>
</template>
登录过程的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')
        })
      }
  }

}

vue3 alova向后端写数据,前端,服务器,ajax,运维

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

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页面

vue3 alova向后端写数据,前端,服务器,ajax,运维

完整的后端登录方法

消息提示使用elementPlus 的Elmessage 文章来源地址https://www.toymoban.com/news/detail-802105.html

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)
            }
          })

        })
      }
  }

到了这里，关于vue3+elementPlus登录向后端服务器发起数据请求Ajax的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！