How does vue connect to the backend and get backend data

Without encapsulation:

//不用传数据回给后端时，用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)
      })
    }

Package situation: 

1. Create related js files in the encapsulated api folder

export function Circular(params){
    return request ({
        url:'URL',//后端给URL的后半部分
        method:'post',
        params
    })
}

2. In the pages that need to be cited

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