查看“Vue前后端通信”的源代码

== [[Vue环境搭建|'''环境搭建''']] ==

== [[Vue项目搭建|'''项目搭建''']] ==

== '''前后端通信''' ==

=== axios的相关介绍 ===
参考地址：https://www.jianshu.com/p/df464b26ae58

=== 安装axios ===
 npm install axios --save
[[文件:Axios.png|无|缩略图|577x577像素]]

=== 安装VScode用于前端开发 ===
 参考地址：https://blog.csdn.net/qq_42367703/article/details/88074154

=== 用VScode 打开项目文件夹 ===
[[文件:Vscode.png|无|缩略图|490x490像素]]

=== 在src文件夹下新建src/view/demo.vue ===
[[文件:Demo.png|无|缩略图|497x497像素]]

=== 在demo编写前端代码 ===
<syntaxhighlight line="1" start="1">
<!--前端页面编写-->
<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>

</syntaxhighlight>

=== 修改app.vue指向demo文件 ===
<syntaxhighlight line="1" start="1">
<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>

</syntaxhighlight>

=== 启动后端项目 ===
请参考文档：[[后端demo]]

=== 启动前端项目 ===
[[文件:Start.png|无|缩略图|667x667像素]]

=== 启动后访问项目 ===
[[文件:访问2.png|无|缩略图|565x565像素]]
[[文件:访问.png|无|缩略图|1110x1110像素]]

=== 访问后端 ===
 '''点击掉后台按钮'''
[[文件:访问后端.png|无|缩略图|611x611像素]]

== '''实践中可能出现的问题''' ==

=== 'response' is defined but never used ===
<syntaxhighlight line="1" start="1">
这个问题，是由于 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"
}
</syntaxhighlight>