前端Vue 项目部署 并且简单模拟前端调用本地后端方法

1. npm install  下载依赖

2. npm run dev 启动运行

3. 前端定义 调用本地后端代码

vue.config.js 中的指向后端配置为指定

devServer.proxy 的[process.env.VUE_APP_BASE_API] 为 target: `http://127.0.0.1:8102/`,

 4. 定义一个前端调用后端的接口

demo 方法举例如下:

4.1 在某个文件夹的js 中指定 一个后端方法

 4.2 在该index.vue 文件中 使用该方法

//1. 指定方法 引用的文件和方法
import {activityCompareTest } from '@/api/slf'; 


//2.在vue 中定义要使用的方法名和 使用位置 如 定义methods 中使用doActivityCompareTest 该方法真实指向的是activityCompareTest 方法。
export default {

//3.创建 初始化方法中 立即使用该方法。即页面初始化vue 时调用
created(){
  this.doActivityCompareTest();
}

//4. 定义方法
methods:{


    // 定义该test 使用的方法
    async doActivityCompareTest(){
      let res = await activityCompareTest().catch(err => {
      console.log(err);
      })
      if(!res) return;
          console.log("rsss")
        },

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值