“Vue前后端通信”的版本间的差异
跳到导航
跳到搜索
| 第1行： | 第1行： | ||
== [[Vue环境搭建|环境搭建]] == | == [[Vue环境搭建|'''环境搭建''']] == | ||
== [[Vue项目搭建|项目搭建]] == | == [[Vue项目搭建|'''项目搭建''']] == | ||
== 前后端通信 == | == '''前后端通信''' == | ||
=== | === axios的相关介绍 === | ||
=== | === 安装axios === | ||
npm install axios --save | npm install axios --save | ||
[[文件:Axios.png|无|缩略图|577x577像素]] | [[文件:Axios.png|无|缩略图|577x577像素]] | ||
=== | === 安装VScode用于前端开发 === | ||
参考地址：<nowiki>https://blog.csdn.net/qq_42367703/article/details/88074154</nowiki> | 参考地址：<nowiki>https://blog.csdn.net/qq_42367703/article/details/88074154</nowiki> | ||
=== | === 用VScode 打开项目文件夹 === | ||
[[文件:Vscode.png|无|缩略图|490x490像素]] | [[文件:Vscode.png|无|缩略图|490x490像素]] | ||
'''在src文件夹下新建src/view/demo.vue''' | |||
=== '''在src文件夹下新建src/view/demo.vue''' === | |||
[[文件:Demo.png|无|缩略图|497x497像素]] | [[文件:Demo.png|无|缩略图|497x497像素]] | ||
'''在demo编写前端代码'''<syntaxhighlight line="1" start="1"> | === '''在demo编写前端代码''' === | ||
<syntaxhighlight line="1" start="1"> | |||
<!--前端页面编写--> | <!--前端页面编写--> | ||
<template> | <template> | ||
| 第67行： | 第69行： | ||
</style> | </style> | ||
</syntaxhighlight>'''修改app.vue指向demo文件'''<syntaxhighlight line="1" start="1"> | </syntaxhighlight> | ||
=== '''修改app.vue指向demo文件''' === | |||
<syntaxhighlight line="1" start="1"> | |||
<template> | <template> | ||
<!--demo组件--> | <!--demo组件--> | ||
| 第94行： | 第99行： | ||
</style> | </style> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== '''启动后端项目''' === | |||
待编写 | 待编写 | ||
'''启动前端项目''' | === '''启动前端项目''' === | ||
[[文件:Start.png|无|缩略图|667x667像素]] | [[文件:Start.png|无|缩略图|667x667像素]] | ||
'''启动后访问地址''' | === '''启动后访问地址''' === | ||
[[文件:地址.png|无|缩略图|475x475像素]] | [[文件:地址.png|无|缩略图|475x475像素]] | ||
[[文件:访问.png|无|缩略图|1110x1110像素]] | [[文件:访问.png|无|缩略图|1110x1110像素]] | ||
'''点击掉后台按钮''' | === '''点击掉后台按钮''' === | ||
[[文件:访问后端.png|无|缩略图|611x611像素]] | [[文件:访问后端.png|无|缩略图|611x611像素]] | ||
2021年11月12日 (五) 09:38的版本
环境搭建
项目搭建
前后端通信
axios的相关介绍
安装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>启动后端项目
待编写
启动前端项目
启动后访问地址
点击掉后台按钮
如果报错
'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"
}