Vue 发送数据请求

这边是将我之前开发的一个项目开发记录进行分享一下吧，可能写的不是很好，毕竟还只是一个在校生。只能说还是一个新手小白的开发记录吧。

有需要的可以借鉴一下，有问题哈哈 也欢迎指出，毕竟发现问题才能更好的进步

Vue 发送数据请求

首先，我们需要在终端 安装axios

npm install axios --save
这时候就可以在任何地方进行引用

需要用到的时候就在该地方输入

import axios from 'axios'

原先书写的方式

      axios.post(
          "http://127.0.0.1:8000/axios-server",
          {
            account: document.getElementById("account").value,
            pwd: document.getElementById("psd").value,
          },
          {
            //url
            params: {
              account: document.getElementById("account").value,
              pwd: document.getElementById("psd").value,
            },
            //请求头参数
            // headers: {
            //     height: 180,
            //     weight: 180,
            // },
            // 设置请求体
          }
        )
        .then((value) => {
          console.log(value);
        });

每个页面单写接口 不方便统一修改管理 且重复过多

于是我们创建api页面 整个数据请求由api 页面进行发送

import axios from 'axios'
const mytry2 = function (data) {
    axios.post(
        "http://127.0.0.1:8000/axios-server",
        {
            id: data
        },
        {
            //url
            params: {
                id: data
            },
            //请求头参数
            // headers: {
            //     height: 180,
            //     weight: 180,
            // },
            // 设置请求体
        }
    )
        .then((value) => {
            console.log(value);
        });

    if (pwd.value == 123 && account.value == "root") {
        // window.location.href = "";
    } else {
        alert("账号密码错误！");
    }
}
// 这里再统一导出
export default {
    mytry,
}

但是这样依旧也是太长了

我的代码

import axios from 'axios'
// 一个方法封装 一次
export function mytry(data){
    const url =`http://127.0.0.1:8000/axios-server` //要发送的路径
    const mydata = `stuId=${data}`
    return axios.post(url,mydata)
}

// //只获取 信息 url 可以拼接 可以定义
// export function getStuInfo(){
//     const url=`/user/getInfo`
//     return $http.post(url)
// }

// 这里再统一导出 就算前面用的是export 依旧还是得统一导出
export default {
    mytry,
    // mytry2
}

对于数据传输的格式

// API中
import axios from 'axios'

// 一个方法封装 一次  可以选择在页面定义好data 进行拼接好 或者直接使用字符串拼接的方式发送
export function mytry(data){
    const url =`http://127.0.0.1:8000/axios-server`
    // 字符串拼接 数据拼接的方式发送
    const mydata = `adminAccount=${data.adminAccount}&adminPassword=${data.adminPassword}`
    return axios.post(url,mydata)
}
export function mytry2(data){
    const url =`http://127.0.0.1:8000/axios-server`
    // 整个数据发送
    return axios.post(url,data)
}
// 这里再统一导出 就算前面用的是export 依旧还是得统一导出
export default {
    mytry,
    mytry2
}

// 对应的vue 页面中

  // 整个对象进行传输 
  var mydata ={
    // 以下是已经获取定义好的 account psd， 直接使用键值对的形式
    adminAccount:account,
    adminPassword:psd
  }
  
      api.mytry2(mydata).then(res=>{
        if (1) {
        // window.location.href = "";
      } else {
        alert("账号密码错误！");
      }
        console.log(res);
      }).catch(res=>{
        // 如果请求失败
        console.log(res)
        alert("数据问题，请咨询管理员！")
      })

父向子组件传递

父组件关键语句：

  <top v-bind:cmovies="movies" :cmessage="message"></top>
  这里  是通过 v-bind 传递给子组件
   cmovies  和 message  是在父组件中定义的数据

这里是父组件 的数据存放的地方**记得data(){} 里头一定要包含return{} 数据写在return{} 里

   data() {
    //  data 是一个实例 必须要有返回实例
    return {
      message: "hello world！",
      movies: ["海王", "海贼王", "海尔兄弟"],
    };
  },

子组件关键语句

  // props: 是用来接受 父组件传递过来的数据的 
  props: ["cmovies", "cmessage"],

子组件的使用

//数据都拿到了 想怎么用不是都可以 最贱单的直接输出效果展示
{{cmovies}}

关于子组件拿父组件的数据实时更新问题

开发过程中 子组件会需要用到父组件传递过来的数据，但是单单只是通过设置 父向子组件传递，子组件接受还是不够的，会出现 能接受到数据，但是数据并不会跟随父组件的数据变化而变化的情况。

这时候就要用到watch 方法

data(){
  return {
    // mydataMsg: ''
    mydataMsg: this.dataMsg,
  },
},
props:{
  dataMsg: {
   type: String, // 这里写你接收的值是什么类型，什么类型就写什么类型
   default:'' //这是设置接受的默认值， 如果没有接受到 就会使用这个默认值 如果是数组就写[] ,对象就写{}
 }
},
watch:{
  dataMsg(newVal,oldVal){
    //newVal 是新值，oldVal 是旧值
    this.mydataMsg= newVal
  }
}

通过子组件调用 watch 的方式，就能够实时获取到父组件传递过来的实时更新的数据了

---

又是一个样式 一搓头发的一天