“Vue前后端通信”的版本间的差异

来自小能手俱乐部
跳到导航 跳到搜索
（创建页面，内容为“== 环境搭建 == == 项目搭建 == == 前后端通信 == '''安装VScode用于前端开发''' 参考地址：<nowiki>…”）
 
 
（未显示同一用户的8个中间版本）
第1行： 第1行：
== [[Vue环境搭建|环境搭建]] ==
== [[Vue环境搭建|'''环境搭建''']] ==


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


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


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


'''安装VScode用于前端开发'''
=== 安装axios ===
参考地址：<nowiki>https://blog.csdn.net/qq_42367703/article/details/88074154</nowiki>
'''用VScode 打开项目文件夹'''
 
'''安装axios'''
  npm install axios --save
  npm install axios --save
[[文件:Axios.png|无|缩略图|577x577像素]]


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


'''在src文件夹下新增src/view/demo.vue'''
=== 用VScode 打开项目文件夹 ===
 
[[文件:Vscode.png|无|缩略图|490x490像素]]
'''在demo编写前端代码'''
 
'''修改app.vue指向demo文件'''
 
'''启动后端项目'''
 
待编写
 
'''启动前端项目'''
 
'''启动后访问地址'''
 
'''点击掉后台按钮'''
 
 
如果报错


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


这个问题，是由于 vue 项目安装了 ESLint 。
=== 在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>


   暴力解决：直接关闭 ESLint
<!-- css编写区域 scoped局部生效 -->
<style scoped>
h1 {
   margin: 40px 0 0;
}
</style>


  在  package.json 文件中 添加
</syntaxhighlight>


 "rules": {
=== 修改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>


    "generator-star-spacing": "off",
</syntaxhighlight>


    "no-tabs":"off",
=== 启动后端项目 ===
请参考文档：[[后端demo]]


    "no-unused-vars":"off",
=== 启动前端项目 ===
[[文件:Start.png|无|缩略图|667x667像素]]


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


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


    "no-debugger": "off"
== '''实践中可能出现的问题''' ==


}
=== '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>

2021年11月15日 (一) 03:30的最新版本

环境搭建

项目搭建

前后端通信

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"
}
取自“http://123.56.229.83:8088/mediawiki/index.php?title=Vue前后端通信&oldid=658”