时间戳

首页 > 解决方案 > 我在单独的服务文件中与 axios 混淆了

spring-boot - 我在单独的服务文件中与 axios 混淆了

问题描述

我现在正在学习 vue.js，我想从我的后端使用 API（使用 spring）。

这是我的 service.js

import axios from "axios";

class LowonganKerjaService {
    retrieveAllLoker() {
        return axios.get('http://localhost:8081/api/listLoker');
    }

    deleteLoker(idLowongan){
        return axios.delete('http://localhost:8081/api/${idLowongan}');
    }
}

export default new LowonganKerjaService();

这是我的组件

<template>
  <div class="container">
    <h3>All Courses</h3>
    <div v-if="message" class="alert alert-success">
      {{message}}
    </div>
    <div class="container">
      <table class="table">
        <thead>
          <tr>
            <th>Id</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="loker in loker" v-bind:key="loker.idLowongan">
            <td>{{loker.idLowongan}}</td>
            <td>{{loker.deskripsi}}</td>
            <td>
              <button class="btn btn-warning" v-on:click="deleteLokerClicked(loker.idLowongan)">
                Hapus
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import LowonganKerjaService from '../../service/LowonganKerjaService';
export default {
    name : "LokerList",
    data() {
        return{
            loker : []
        };
    },

    methods:{
        refreshLoker(){
            LowonganKerjaService.retrieveAllLoker()
            .then(response => {
                this.loker = response.data;
            });
        },
        deleteLokerClicked(idLowongan){
          LowonganKerjaService.deleteLoker(idLowongan).then(()=> {
            this.message = 'Loker dengan ${idLowongan} berhasil dihapus';
            this.refreshLoker();
          });
        }

    },
    created(){
        this.refreshLoker();
    }
};
</script>

<style>
</style>

我得到了这个错误

编译失败。

./src/service/LowoganKerjaService.js 模块错误（来自 ./node_modules/eslint-loader/index.js）：

D:\Kuliah\TERM 6\Propensi\Implementasi\frontend-sixacti\src\service\LowonganKerjaService.js 10:17 错误 'idLowongan' 已定义但从未使用 no-unused-vars

✖ 1 个问题（1 个错误，0 个警告）

哦，当我在这些服务中使用 ${} 时，我也遇到了错误。为什么该错误状态表明我的“idLowogan”从未使用过？是因为我错了我的语法还是什么？

请有人帮我说明原因

谢谢

**对不起我的语言不好

标签： spring-bootvue.js

解决方案

从代码的外观来看，当您尝试使用 JS 模板文字时，您使用的是单引号 (') 而不是反引号 (`)。您可以在 MSDN 文档中看到一个示例。由于它在您的示例中是一个字符串而不是模板文字，因此永远不会使用函数参数中的变量。

尝试将服务的删除方法中的代码更改为：

return axios.delete(`http://localhost:8081/api/${idLowongan}`)

推荐阅读