19.前后端数据交互,ajax请求，axios，跨域，vite.config，mockjs

示例一： fetch

<template>
  <div>
    <h1>Ajx请求</h1>
    <div v-for="(item, i) in store.state.duanziList" :key="i">
      <p>
        {{ item.text }}
      </p>
    </div>
  </div>
</template>


<script>
import store from "./store/index.js";
export default {
  name: "App",
  // 放到App，其他可以引用
  provide: {
    store,
  },
  setup() {
    let api = "https://api.apiopen.top/getJoke?page=1&count=2&type=text";
    fetch(api)
      .then((res) => res.json())
      .then((result) => {
        store.setDzList(result.result);
        console.log(result);
      });
    return { store };
  },
};

import { reactive } from 'vue'
const store = {
    //全局存放数据的地方
    state: reactive({
        duanziList:[]
    }),
    setDzList(list){
        this.state.duanziList=list
    }
}

export default store

示例二： axios

cnpm install axios --save

<template>
  <div>
    <h1>Ajx请求</h1>
    <div v-for="item,i in store.state.duanziList" :key="i">
      <p>
        {{item.text}}
      </p>
    </div>
  </div>
</template>


<script>
import store from './store/index.js'
import axios from 'axios'
export default {
  name: 'App',
  components: {
  },
  // 放到App，其他可以引用
  provide:{
    store
  },
  setup(){
    let api = 'https://api.apiopen.top/getJoke?page=1&count=2&type=text'
    axios.get(api).then((result)=>{
      console.log(result)
      store.setDzList(result.data.result)
    })
    return {store}

  }
}
</script>

示例三：跨域

根目录添加配置文件vite.config

//这个文件类似vue2中的vue.config.js
module.exports = {
    proxy:{
        '/api':{
            target:'https://pvp.qq.com',
            changeOrigin:true, //是否允许跨域
            // 将api的地址，替换成空
            rewrite:path => path.replace(/^\/api/,'')
        }
    }

}

<template>
  <div>
    <h1>Ajx请求</h1>
    <div v-for="item,i in store.state.duanzilist" :key="i">
      <p>
        {{item.cname}}  ==> {{item.title}}
      </p>
    </div>
  </div>
</template>


<script>
import store from './store/index.js'
import axios from 'axios'
export default {
  name: 'App',
  components: {
  },
  // 放到App，其他可以引用
  provide:{
    store
  },
  setup(){
    //No 'Access-Control-Allow-Origin' 跨域的报错
    // 发现有地址中有api的 会触发代理 发送到https://pvp.qq.com
    // 最终地址https://pvp.qq.com/web201605/js/herolist.json
    let api = 'api/web201605/js/herolist.json'
    axios.get(api).then((result)=>{
      console.log(result)
      //store.setDzList(result.data.result)
      store.setDzList(result.data)
    })
    return {store}

  }
}
</script>

import { reactive } from 'vue'

// 创建store对象
const store = {
    //创建响应式对象
    state:reactive({
        message:"helloworld",
        duanzilist:[]
    }),
    setMessage(value){
        this.state.message = value
    },
    setDzList(list){
        this.state.duanzilist= list
    },
}
// 可以将其导出
export default store;

示例四： mock.js

作用：发送ajax请求，中途可以进行拦截，并且将数据返回。
发送请求，用上了mock.js,就可以模拟后端返回数据
http://mockjs.com/
作用： 1. 模拟后端数据
2. 对ajax的请求可以做劫持，和处理。再返回

npm install mockjs --save

mock/index.js

import Mock  from 'mockjs'

// 模拟设置一下模拟返回数据的时间
Mock.setup({
    timeout:'200-600'
})

// 模拟后端数据
var data = Mock.mock(
    // 请求用户信息,遇到/user/userinfo 就做劫持进行处理
    "/user/userinfo",
    // 得到下面信息
    'get',
    (req)=>{
        console.log(req)
        return {
            username:"老陈",
            type:"帅"
        }
    }
)


Mock.mock(
    // 使用正则匹配
    /\/account.*/,
    // 得到下面信息,(req,res) req代表请求 res代表响应
    'get',
    (req)=>{
        console.log(req)
        return {
            info:"登录成功"
        }
    }
)

store/index.js

import { reactive } from 'vue'

// 创建store对象
const store = {
    //创建响应式对象
    state:reactive({
        message:"helloworld",
    }),
    setMessage(value){
        this.state.message = value
    },
}
// 可以将其导出
export default store;

mian.js

import { createApp,reactive } from 'vue'
import App from './App.vue'
import './index.css'
// 如果需要做劫持处理，加上mockjs，如果不需要就去掉
import './mock/index.js'


// 从app导入进去
createApp(App).mount('#app')

App.vue

<template>
  <div>
    <h1>Ajx请求</h1>
    <div>
      <p>
        {{store.state.message}}
      </p>
    </div>
  </div>
</template>


<script>
import store from './store/index.js'
import axios from 'axios'
export default {
  name: 'App',
  components: {
  },
  // 放到App，其他可以引用
  provide:{
    store
  },
  setup(){
    let api = '/user/userinfo'
    axios.get(api).then((result)=>{
      console.log(result)
      store.setMessage(result.data.username+result.data.type)
    })
    axios.get('/account?username=laochen&password=123456').then((result)=>{
    console.log(result)
    })
    return {store}

  }
}
</script>