测试项目(四):前后端数据连接
好家伙,
测试用的vue3项目寄了,这里用回vue2
在前端,我们用axios发起网络请求
1.vue2中安装axios
npm install axios -S
随后在main.js中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';
Vue.config.productionTip = false
new Vue({
router,
axios,
render: h => h(App)
}).$mount('#app')
来到我们的组件页面中,
<template>
<div class="about">
<table>
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios'
export default {
name: 'Home',
data() {
return {
msg: '没有数据了',
books: [
{
id: 1,
name: '好书',
author: '好人'
},
{
id: 1,
name: '好书',
author: '好人'
},
]
}
},
created() {
const _this=this;
axios({
method: "get",
url: "http://localhost:8011/mydb/getUsers",
}).then(res => {
// this.data = res.data /* 将拿到的值,赋值给data */
_this.books=res.data;
})
}
}
</script>
将网络请求写到生命周期函数created中
created() {
const _this=this;
axios({
method: "get",
url: "http://localhost:8011/mydb/getUsers",
}).then(res => {
// this.data = res.data /* 将拿到的值,赋值给data */
_this.books=res.data;
})
}
在这里,我们发起请求后,拿到的数据会返回到res中,我们再将res.data赋值给books,
这样在页面中,就可以看见真数据了
后端的没跑起来,请求接口暂时无法使用,
来到页面中
2.把后端跑起来
随后再解决一个跨域问题,解决方案如下
测试项目(三):在后端解决跨域问题 - 养肥胖虎 - 博客园 (cnblogs.com)
(成功显示)
至此,前端成功拿到了数据库中的数据并把它渲染了出来
呼,终于搞定了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2021-10-14 第三十二篇:vue的响应式原理