Vue前后端通信

前后端通信

axios的相关介绍

参考地址：https://www.jianshu.com/p/df464b26ae58

安装axios

npm install axios --save

生成缩略图出错：无法找到文件

安装VScode用于前端开发

参考地址：https://blog.csdn.net/qq_42367703/article/details/88074154

用VScode 打开项目文件夹

生成缩略图出错：无法找到文件

在src文件夹下新建src/view/demo.vue

生成缩略图出错：无法找到文件

在demo编写前端代码

<!--前端页面编写-->
<template>
  <div class="hello">
  <!--msg后台返回信息展示-->
  <h1>{{msg}}</h1>
  <button type="primary" @click="query">掉后台按钮</button>
  </div>
</template>
<!-- vue逻辑编写 -->
<script>
//引入axios访问后台
import axios from 'axios';
export default {
  name: 'demo',
  props: {
  },
  data: function () {
    return {
      msg:''
      }
  },
  methods: {
    //掉后台方法
    query(){
       //后台接口url
       const url = 'http://10.249.253.234:8101/announce/sys-announce/selectAnnounce'; 
       axios.post(url,{title:'456'}).then(response => {
                    this.msg=response.data[0].annid
                }
            ).catch(response => {
                    alert('请求失败');
                },
            );
    }
  },
  mounted () {
  }
}
</script>

<!-- css编写区域 scoped局部生效 -->
<style scoped>
h1 {
  margin: 40px 0 0;
}
</style>

修改app.vue指向demo文件

<template>
  <!--demo组件-->
  <demo />
</template>
<script>
//引入组件
import demo from './view/demo.vue'
export default {
  name: 'App',
  //声明组件
  components: {
    demo
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

启动后端项目

请参考文档：后端demo

启动前端项目

生成缩略图出错：无法找到文件

启动后访问项目

生成缩略图出错：无法找到文件

生成缩略图出错：无法找到文件

访问后端

点击掉后台按钮

生成缩略图出错：无法找到文件

实践中可能出现的问题

'response' is defined but never used

这个问题，是由于 vue 项目安装了 ESLint 。
暴力解决：直接关闭 ESLint
在package.json 文件中 添加 
rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
}