vue怎么连接后端,获取后端的数据
vue获取后端的数据的方法
·
没有封装的情况:
//不用传数据回给后端时,用post时将get改成post即可
function1(){
axios.get('http://localhost:8080/essential/queryAll')//后端给的链接
.then(res => {
console.log(res.data)//输出后端返回的数据
this.tableData=res.data//把后端返回的数据赋值
})
.catch(err => {
console.error(err);
})
},
//需要传数据给后端时,用post时将get改成post即可
banji(){
axios.get('http://localhost:8080/banji/queryByFid',{
params:{
fid: this.value1
}}) //有时会无法向后端传值
.then(res => {
console.log('11121111', res.data)
this.options2=res.data
console.log('123',this.options2)
})
.catch(err => {
console.error(err);
})
},
//需要传数据给后端时的另一种方法 用post时将get改成post即可
handleLook(row){
axios.get('http://localhost:8080/courseView/queryAllBySid?sid='+row.studentid,{
params:{
sid: row.studentid
}})
.then(res => {
console.log('11', res.data)
this.options=res.data
})
.catch(err => {
console.error(err);
})
},
//当以上方法把都报错500时
enterexam () {
axios({
url: 'http://xxx.xxx.x.xxx:8080/user/login',
method: 'post', //或者get
params: {
username: this.username,
password: this.password
}
}).then(res => {
console.log(res)
this.$router.replace('/home')
}).catch(err => {
console.error(err)
})
}
封装的情况:
1、在封装好的api文件夹中创建相关的js文件
export function Circular(params){
return request ({
url:'URL',//后端给URL的后半部分
method:'post',
params
})
}
2、在需要引用的页面的
<script>
import {Smallicon} from '@/api/HomeSgy'//api文件夹的相对地址
export default {
methods:{
smallicon(){
const params={
'CompanyName':this.CompanyName
}
Smallicon(params).then(res=>{
this.cedianshu=res.data.data
})
},
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)