vue怎么连接后端，获取后端的数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了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、在需要引用的页面的文章来源地址https://www.toymoban.com/news/detail-507487.html

<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>

到了这里，关于vue怎么连接后端，获取后端的数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！