//引入Vue
import Vue from "vue";
//引入Vue-router
import VueRouter from "vue-router";
//使用VueRouter
Vue.use(VueRouter);
//引入路由組件
import Home from "@/components/Home"
import Search from "@/components/Search"
//對(duì)外暴露一個(gè)Vue實(shí)例
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:'/Home',
            component:Home,
            name:"Home",
            meta:{isshow:true}
        },
        {
            path:'/Search',
            component:Search,
            name:"Search",
            meta:{isshow:false}
        },
        //重定向
        {
            path:'*',
            redirect:"/Home"
        }
    ]
})

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
//引入路由
import router from './router'
new Vue({
  render: h => h(App),
  //配置路由，KV一致，省略V
  //這里使用router之后，組件身上都有$router,$route屬性
  //$router最常用來(lái)跳轉(zhuǎn)push跳轉(zhuǎn)  $route最常用來(lái)獲取參數(shù)
  router
}).$mount('#app')

<template>
  <div id="app">
    <Header/>
    <!-- 路由的出口 -->
    <router-view></router-view>
    <Footer/>
  </div>
</template>
 
<script>
import Header from './components/Header'
import Footer from "@/components/Footer"
export default {
  name: 'App',
  components: {
    Header,
    Footer
  }
}
</script>
 
<style>
 
</style>

//引用axios
import axios from "axios";
const requests = axios.create({
    // baseURL的作用 例如我有一個(gè)接口的網(wǎng)址為www.baidu/api/love
    // 如果很多接口都是www.baidu/api/xxx
    //我可以省略/api，因?yàn)閍xios會(huì)自動(dòng)幫你添上，這就是baseUrl的作用
    baseURL: '/api',
    //請(qǐng)求超時(shí)的時(shí)間為5s
    timeout: 5000,
    
  });
  //請(qǐng)求攔截器，發(fā)請(qǐng)求之前可以做一些事情
  requests.interceptors.request((config)=>{
        //config配置對(duì)象，有一個(gè)屬性 請(qǐng)求頭headers
        return config;
  })
 
  //相應(yīng)攔截器
  requests.interceptors.response((res)=>{
    // 服務(wù)器成功返回
    //簡(jiǎn)化返回的數(shù)據(jù)，只返回data
    return res.data;
  },(error)=>{
    //失敗
    //靜態(tài)函數(shù)Promise.reject返回一個(gè)被拒絕的Promise對(duì)象。通過(guò)使用 Error的實(shí)例 獲取錯(cuò)誤原因（reason）對(duì)調(diào)試和選擇性錯(cuò)誤 捕捉很有幫助。
    Promise.reject(new Error("faile"));
  })

//結(jié)構(gòu)統(tǒng)一管理
import requests from "./request"
 
//method 有g(shù)et 和 post兩種方式
// 有參數(shù)的需要些模板字符串``
export const reqGetSomeInfo = (p)=>requests({url:`"/baidu/${p}"`,method:"get"});
// 無(wú)參數(shù)直接寫
export const reqGetSomeInfo2 = ()=>requests({url:"/baidu",method:"get"});
//需要傳對(duì)象的可以用data屬性
export const reqGetSomeInfo3 = (p,data)=>requests({url:`"/baidu"/${p}`,data:data,method:"get"});

 //配置代理跨域
  devServer: {
    // /api的作用是：當(dāng)?shù)刂分?，出現(xiàn)api時(shí)，瀏覽器會(huì)自動(dòng)向target請(qǐng)求數(shù)據(jù)
    //注意配置這個(gè)，需要重新啟動(dòng)一下項(xiàng)目
    proxy: {
      "/api": {
        target: "http://39.98.123.211",
      },
    },
  },

import { reqGetSomeInfo } from "@/api"
const state = {
    someInfo:[]//此處是空對(duì)象 還是 空數(shù)組要看接口返回的值
}
const mutations = {
    GETSUM(state,someInfo)
    {
        state.someInfo = someInfo;
    }
}
const actions = {
    //params是攜帶的參數(shù)
    async getsum({commit},params)
    {
        let result =  await reqGetSomeInfo;
       if(result.code == 200)//請(qǐng)求成功會(huì)返回code = 200
       {
            commit("GETSUM",result.data)
       }
    }
}
//getter是為了簡(jiǎn)化操作
const getters = {}
 
export default{
    state,
    actions,
    getters,
    mutations
}

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
import Home from "./Home"
export default new Vuex.Store({
    modules:{
        Home,//Home小倉(cāng)庫(kù)在大倉(cāng)庫(kù)里注冊(cè)
    }
})

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
//引入路由
import router from './router'
//引入倉(cāng)庫(kù)
import store  from './store'
new Vue({
  render: h => h(App),
  //配置路由，KV一致，省略V
  //這里使用router之后，組件身上都有$router,$route屬性
  //$router最常用來(lái)跳轉(zhuǎn)push跳轉(zhuǎn)  $route最常用來(lái)獲取參數(shù)
  router,
  //這里使用store后，組件身上都有了$store屬性
  store,
}).$mount('#app')