Vue3 结合 .NetCore WebApi 前后端分离跨域请求简易实例

1、本地安装Vue3环境

参考:VUE3中文文档-快速上手

注意:初始安装vue时,需要安装router,否则后续也要安装

2、安装axios组件

比如:npm install axios@latest 或 pnpm install axios@latest

3、设置跨域请求代理

打开vue3项目根目录的 vite.config.js文件,插入跨域请求设置

这样实现的效果,假设你的前端域名是 http://localhost:8088

那么你访问 http://localhost:8088/api/hello 等于访问 http://localhost:5153/api/hello

javascript 复制代码
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  //跨越请求代理设置
  server:{
    proxy: {
        '/api': {
            target: 'http://localhost:5153',
            changeOrigin: true,
        }
},
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

4、后端.Net Core Webapi 接口返回JSON

cs 复制代码
using Microsoft.AspNetCore.Mvc;
using MyProj.Models;
using System.Text.Json;
namespace MyProj.Controllers
{

    [Route("api/login")]
    [ApiController]
    public class LoginController : ControllerBase
    {
        [HttpGet]
        public JsonResult Get(string pms)
        {
            //自定义Model,含2个属性。先初始化
            Rmessage r1 = new Rmessage("hello", "no data");

            //根据接口请求的参数值判断处理
            if(pms=="001")
            {
                r1.message = "right";
            }
            else
            {
                r1.message = "wrong";
            }
            //把最终的Rmessage实例JSON化返回
            return new JsonResult(r1);
        }

   
    }
}

5、Vue3前端发送请求,接收返回值

javascript 复制代码
import { ref } from 'vue'
import axios from 'axios'

let message = ref('please impress the button')

//按钮单击函数
function getApiData() {
        //axios触发GET请求,传递pms参数
        axios.get('api/login',{
          params: {
            pms:'001'
          }
        })
           .then(response => {
               //因为返回的是JSON,所以可以response.data直接读取message的值
                message.value = response.data.message
            })
           .catch(error => {
                console.log(error)
           })
}
相关推荐
麦麦大数据4 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节
麦麦大数据6 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节