vue一周小结（7）

一.调取学校接口

<template>
  <div>
    <h1>我是day09组件</h1>
    <button @click="schoolBtn()">调取学校接口</button>
    <!-- -------登录-------- -->
    账号：<input type="text" v-model="logoList.mobile">
    密码：<input type="password" v-model="logoList.password">
    <button @click="logoBtn()">登录</button>
    <button @click="depBtn()">获取部门列表</button>
  </div>
</template>

<script>
import request from '../api/request'
import {getS} from '../api/api'
export default {
    name:"MyDay09",
    data() {
        return {
            logoList:{
                mobile: "13800000002",
                password: "hm#qd@23!"
            }
        }
    },
    methods:{
        // 获取学校
        async schoolBtn(){
            const datas = await request.get("/api2/school");
            console.log(datas);
        },
        // 登录
        async logoBtn(){
            const {data} = await request.post(
                `/api3/api/sys/login`,this.logoList);
            console.log(data);
            console.log(data.data);
            sessionStorage.setItem("token",data.data)
        },
        // 获取部门列表
        async depBtn(){
            // const {data} = await request.get(
            //     `/api3/api/company/department`);
            // console.log(data);
            const dataList = {
                department:"/company/department"
            }
            const {data} = await getS(dataList.department);
            console.log(data);
        }
    }
}
</script>

<style>

</style>

二. 请求拦截

例：

service.interceptors.request.use(function(config){

    console.log(config);

    console.log(sessionStorage.getItem("token"));

    config.headers["Content-Type"] = "application/json";

    config.headers["Authorization"] = `Bearer ${sessionStorage.getItem("token")}`;

    return config;

},function(error){

    return Promise.reject(error)

})

三. 响应拦截

例：

service.interceptors.response.use(function(response){

    // console.log(response);

    // switch (response.status) {

    //     case 200:

    //         console.log("请求成功");

    //         break;

    //     case 404:

    //         console.log("错误信息404");

    //         break;

    //     default:

    //         break;

    // }

    return response

},function(error){

    return Promise.reject(error)

})

export default service;

四.  模块写法需要开启命名空间，方便使用...mapXXXX使用

例：

namespaced:true,

    state:{

        userName:"严学洪",

        age:18,

        sex:"男"

    },

    mutations:{

       

    },

    actions:{

       

    },

    getters:{

       

    }

}

export default stor1;

五.通过mutations中funAdd触发+1的函数， 通过actions中setFun触发+5的函数

例：

 <!-- vueTify适用于做网页 -->
    <hr>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    name:"MyDay11",
    data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
    },
    created(){
        console.log(this.$store);
    },
    methods:{
      // 加1的方法
      addBtn(user){
        this.$store.commit("funAdd",user)
      },
      addsBtn(user){
        this.$store.dispatch("setFun",user)
      }
    },
    computed:{

    }
}
</script>

<style scoped>
.MyDay11 {
    border: 5px solid pink;
    height: 500px;
}
</style>

六. 通过mutations中funAdd触发+2的函数第二种，通过actions中setFun触发+10的函数第二种

<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
    name:"MyDay11s",
    computed:{
      ...mapState(["sum","commit"]),
      ...mapGetters(["bigNum"]),
      ...mapState("stor1",['userName','age','sex']),

    },
    methods:{
        ...mapMutations(["funAdd"]),
        ...mapActions(["setFun"])

    }
}
</script>

<style scoped>
.MyDay11s {
    border: 5px solid red;
    height: 500px;
}
</style>

七.  day12

 

<template>
  <div>
   <router-link to="/About">About组件</router-link>
   <router-link to="/Home">Home组件</router-link>
   <!-- 展示区域 -->
   <div class="box1">
        <router-view></router-view>
   </div>
   
  </div>
</template>

<script>
export default {
    name:"MyDay12",
    data() {
        return {
            
        }
    },
    methods:{

    }
}
</script>

<style>
    .box1{
        width: 500px;
        height: 500px;
        border: 1px #a1a1a1 solid;
    }
</style>

八. 登录页面

<template>
  <div>
    <h1>我是登录页面</h1>
    <router-link to="/home">登录</router-link>
    账号：<input type="text" v-model="userList.mobile">
    密码：<input type="password" v-model="userList.password">
    <button @click="loginBtn()">登录</button>
  </div>
</template>

<script>
import service from "@/api/request"

export default {
    name:"LoginUser",
    data() {
        return {
            userList:{
                mobile:13800000002,
                password:"hm#qd@23!"
            }
        }
    },
    methods:{
        async loginBtn(){
            const {data} = await service.post("/api3/api/sys/login",this.userList);
            console.log(data);
            if(data.code==10000){
                console.log("登录成功");
                this.$router.push("/home");
                sessionStorage.setItem("token",data.data)
            }else{
                console.log("登录失败");
            }
        }
    }
}
</script>

<style scoped>
/* .active {
    color:pink !important;
} */
</style>