[JavaScript知识库]day2021-12-10(学生系统综合案例，查询所有＋条件查询)

课程安排

• 第一阶段：SSM回顾
• 第二阶段：前端vue、spa 等
• 第三阶段：spring cloud 、spring alibaba
• 第四阶段：项目
  • 摸底
  • vue的框架：Nuxt.js
  • Mybatis Plus
  • 项目

1 查询所有学生

1.1 查询所有：直接axios

<template>
  <div>
    学生列表
    <table border="1">
      <tr>
        <td>学生ID</td>
        <td>班级ID</td>
        <td>学生性别</td>
        <td>年龄</td>
        <td>生日</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(student,index) in pageInfo.list" :key="index">
        <td>{{student.sid}}</td>
        <td>{{student.cid}}</td>
        <td>{{student.sname}}</td>
        <td>{{student.age}}</td>
        <td>{{student.birthday}}</td>
        <td>{{student.gender}}</td>
        <td>修改删除</td>
      </tr>
    </table>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  data() {
    return {
      pageInfo: {   //分页
        pageNum: 1,
        pageSize: 3
      },
      studentVo: {  //条件

      }
    }
  },
  methods: {
    conditionFn() {
      var url = `http://localhost:10010/student-service/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`
      axios.post(url,this.studentVo)
      .then( response => {
        // 处理结果
        var baseResult = response.data
        if(baseResult.code == 20000) {
          this.pageInfo = baseResult.data
        }
      })
      .catch(err => {
        console.error(err);
      })
    }
  },
  mounted() {
    // 查询所有
    this.conditionFn()
  },
}
</script>

<style>

</style>

1.2 条件查询：直接axios

<template>
  <div>
    <!-- 查询条件 -->
    <form action="">
      班级：<select v-model="studentVo.cid">
            <option value="">请选择</option>
            <option value="1">Java12班</option>
            <option value="2">Java34班</option>
            <option value="3">Java56班</option>
          </select>
      姓名：<input type="text" v-model="studentVo.sname" />
      年龄：<input type="text" v-model="studentVo.startAge" />
           -<input type="text" v-model="studentVo.endAge" />
      <input type="button" value="查询" @click="conditionFn(1)" />
    </form>

    <!-- 学生列表 -->
    <table border="1">
      <tr>
        <td>学生ID</td>
        <td>班级ID</td>
        <td>学生性别</td>
        <td>年龄</td>
        <td>生日</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(student,index) in pageInfo.list" :key="index">
        <td>{{student.sid}}</td>
        <td>{{student.cid}}</td>
        <td>{{student.sname}}</td>
        <td>{{student.age}}</td>
        <td>{{student.birthday}}</td>
        <td>{{student.gender}}</td>
        <td>修改删除</td>
      </tr>
    </table>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  data() {
    return {
      pageInfo: {   //分页
        pageNum: 1,
        pageSize: 3
      },
      studentVo: {  //条件

      }
    }
  },
  methods: {
    conditionFn(pageNum) {
      if(pageNum) {
        this.pageInfo.pageNum = pageNum
      }
      var url = `http://localhost:10010/student-service/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`
      axios.post(url,this.studentVo)
      .then( response => {
        // 处理结果
        var baseResult = response.data
        if(baseResult.code == 20000) {
          this.pageInfo = baseResult.data
        }
      })
      .catch(err => {
        console.error(err);
      })
    }
  },
  mounted() {
    // 查询所有
    this.conditionFn()
  },
}
</script>

<style>

</style>

1.3 分页查询：直接axios

<template>
  <div>
    <!-- 查询条件 -->
    <form action="">
      班级：<select v-model="studentVo.cid">
            <option value="">请选择</option>
            <option value="1">Java12班</option>
            <option value="2">Java34班</option>
            <option value="3">Java56班</option>
          </select>
      姓名：<input type="text" v-model="studentVo.sname" />
      年龄：<input type="text" v-model="studentVo.startAge" />
           -<input type="text" v-model="studentVo.endAge" />
      <input type="button" value="查询" @click="conditionFn(1)" />
    </form>

    <!-- 学生列表 -->
    <table border="1">
      <tr>
        <td>学生ID</td>
        <td>班级ID</td>
        <td>学生性别</td>
        <td>年龄</td>
        <td>生日</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(student,index) in pageInfo.list" :key="index">
        <td>{{student.sid}}</td>
        <td>{{student.cid}}</td>
        <td>{{student.sname}}</td>
        <td>{{student.age}}</td>
        <td>{{student.birthday}}</td>
        <td>{{student.gender}}</td>
        <td>修改删除</td>
      </tr>
    </table>
    <!-- 分页 -->
    每页
    <select v-model="pageInfo.pageSize" @change="conditionFn(1)" >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="5">5</option>
    </select>
    条，
    <a href="" v-for="(num,index) in pageInfo.pages" :key="index" @click.prevent="conditionFn(num)">{{num}}</a>
    ，跳转到第
    <input type="text" v-model="pageInfo.pageNum" @keyup.enter="conditionFn()">
    页
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  data() {
    return {
      pageInfo: {   //分页
        pageNum: 1,
        pageSize: 3
      },
      studentVo: {  //条件

      }
    }
  },
  methods: {
    conditionFn(pageNum) {
      if(pageNum) {
        this.pageInfo.pageNum = pageNum
      }
      var url = `http://localhost:10010/student-service/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`
      axios.post(url,this.studentVo)
      .then( response => {
        // 处理结果
        var baseResult = response.data
        if(baseResult.code == 20000) {
          this.pageInfo = baseResult.data
        }
      })
      .catch(err => {
        console.error(err);
      })
    }
  },
  mounted() {
    // 查询所有
    this.conditionFn()
  },
}
</script>

<style>

</style>

1.4 axios优化：axios方法抽取

• 拷贝两个文件

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8cNyf8S-1639139684155)(assets/image-20211210180050873.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0L5ENHlV-1639139684159)(assets/image-20211210180015883.png)]

• request.js 对axios进行增强，对响应结果进行预先处理。

  之前代码 then( response => ...)
  处理后   then( baseresult => ...)
  

<template>
  <div>
    <!-- 查询条件 -->
    <form action="">
      班级：<select v-model="studentVo.cid">
            <option value="">请选择</option>
            <option value="1">Java12班</option>
            <option value="2">Java34班</option>
            <option value="3">Java56班</option>
          </select>
      姓名：<input type="text" v-model="studentVo.sname" />
      年龄：<input type="text" v-model="studentVo.startAge" />
           -<input type="text" v-model="studentVo.endAge" />
      <input type="button" value="查询" @click="conditionFn(1)" />
    </form>

    <!-- 学生列表 -->
    <table border="1">
      <tr>
        <td>学生ID</td>
        <td>班级ID</td>
        <td>学生性别</td>
        <td>年龄</td>
        <td>生日</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(student,index) in pageInfo.list" :key="index">
        <td>{{student.sid}}</td>
        <td>{{student.cid}}</td>
        <td>{{student.sname}}</td>
        <td>{{student.age}}</td>
        <td>{{student.birthday}}</td>
        <td>{{student.gender}}</td>
        <td>修改删除</td>
      </tr>
    </table>
    <!-- 分页 -->
    每页
    <select v-model="pageInfo.pageSize" @change="conditionFn(1)" >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="5">5</option>
    </select>
    条，
    <a href="" v-for="(num,index) in pageInfo.pages" :key="index" @click.prevent="conditionFn(num)">{{num}}</a>
    ，跳转到第
    <input type="text" v-model="pageInfo.pageNum" @keyup.enter="conditionFn()">
    页
  </div>
</template>

<script>
// 导入axios
//import axios from 'axios'
import axios from '@/utils/request.js'

export default {
  data() {
    return {
      pageInfo: {   //分页
        pageNum: 1,
        pageSize: 3
      },
      studentVo: {  //条件

      }
    }
  },
  methods: {
    conditionFn(pageNum) {
      if(pageNum) {
        this.pageInfo.pageNum = pageNum
      }
      var url = `/student-service/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`
      axios.post(url,this.studentVo)
      .then( baseResult => {
        if(baseResult.code == 20000) {
          this.pageInfo = baseResult.data
        }
      })
      .catch(err => {
        console.error(err);
      })
    }
  },
  mounted() {
    // 查询所有
    this.conditionFn()
  },
}
</script>

<style>

</style>

1.5 axios优化：抽取api

• 将axios的访问路径，抽取到api文件中

• 在vue中通过解构，获得抽取后的函数，并调用函数，发送ajax

• student.js

  // 导入工具 request.js
  import axios from '@/utils/request.js'
  
  // 编写功能方法
  export function condition(studentPage, studentVo) {
      return axios.post(`/student-service/student/condition/${studentPage.pageSize}/${studentPage.pageNum}`, studentVo)
  }
  

• StudentList.vue

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cTziLNVQ-1639139684160)(assets/image-20211210182138050.png)]

  <template>
    <div>
      <!-- 查询条件 -->
      <form action="">
        班级：<select v-model="studentVo.cid">
              <option value="">请选择</option>
              <option value="1">Java12班</option>
              <option value="2">Java34班</option>
              <option value="3">Java56班</option>
            </select>
        姓名：<input type="text" v-model="studentVo.sname" />
        年龄：<input type="text" v-model="studentVo.startAge" />
             -<input type="text" v-model="studentVo.endAge" />
        <input type="button" value="查询" @click="conditionFn(1)" />
      </form>
  
      <!-- 学生列表 -->
      <table border="1">
        <tr>
          <td>学生ID</td>
          <td>班级ID</td>
          <td>学生性别</td>
          <td>年龄</td>
          <td>生日</td>
          <td>性别</td>
          <td>操作</td>
        </tr>
        <tr v-for="(student,index) in pageInfo.list" :key="index">
          <td>{{student.sid}}</td>
          <td>{{student.cid}}</td>
          <td>{{student.sname}}</td>
          <td>{{student.age}}</td>
          <td>{{student.birthday}}</td>
          <td>{{student.gender}}</td>
          <td>修改删除</td>
        </tr>
      </table>
      <!-- 分页 -->
      每页
      <select v-model="pageInfo.pageSize" @change="conditionFn(1)" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="5">5</option>
      </select>
      条，
      <a href="" v-for="(num,index) in pageInfo.pages" :key="index" @click.prevent="conditionFn(num)">{{num}}</a>
      ，跳转到第
      <input type="text" v-model="pageInfo.pageNum" @keyup.enter="conditionFn()">
      页
    </div>
  </template>
  
  <script>
  // 导入axios
  //import axios from 'axios'
  //import axios from '@/utils/request.js'
  import {condition} from '../api/student'
  
  export default {
    data() {
      return {
        pageInfo: {   //分页
          pageNum: 1,
          pageSize: 3
        },
        studentVo: {  //条件
  
        }
      }
    },
    methods: {
      conditionFn(pageNum) {
        if(pageNum) {
          this.pageInfo.pageNum = pageNum
        }
        var url = condition(this.pageInfo,this.studentVo)
        .then( baseResult => {
          if(baseResult.code == 20000) {
            this.pageInfo = baseResult.data
          }
        })
        .catch(err => {
          console.error(err);
        })
      }
    },
    mounted() {
      // 查询所有
      this.conditionFn()
    },
  }
  </script>
  
  <style>
  
  </style>
  
  

1.6 axios优化：async / await

<template>
  <div>
    <!-- 查询条件 -->
    <form action="">
      班级：<select v-model="studentVo.cid">
            <option value="">请选择</option>
            <option value="1">Java12班</option>
            <option value="2">Java34班</option>
            <option value="3">Java56班</option>
          </select>
      姓名：<input type="text" v-model="studentVo.sname" />
      年龄：<input type="text" v-model="studentVo.startAge" />
           -<input type="text" v-model="studentVo.endAge" />
      <input type="button" value="查询" @click="conditionFn(1)" />
    </form>

    <!-- 学生列表 -->
    <table border="1">
      <tr>
        <td>学生ID</td>
        <td>班级ID</td>
        <td>学生性别</td>
        <td>年龄</td>
        <td>生日</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(student,index) in pageInfo.list" :key="index">
        <td>{{student.sid}}</td>
        <td>{{student.cid}}</td>
        <td>{{student.sname}}</td>
        <td>{{student.age}}</td>
        <td>{{student.birthday}}</td>
        <td>{{student.gender}}</td>
        <td>修改删除</td>
      </tr>
    </table>
    <!-- 分页 -->
    每页
    <select v-model="pageInfo.pageSize" @change="conditionFn(1)" >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="5">5</option>
    </select>
    条，
    <a href="" v-for="(num,index) in pageInfo.pages" :key="index" @click.prevent="conditionFn(num)">{{num}}</a>
    ，跳转到第
    <input type="text" v-model="pageInfo.pageNum" @keyup.enter="conditionFn()">
    页
  </div>
</template>

<script>
// 导入axios
//import axios from 'axios'
//import axios from '@/utils/request.js'
import {condition} from '../api/student'

export default {
  data() {
    return {
      pageInfo: {   //分页
        pageNum: 1,
        pageSize: 3
      },
      studentVo: {  //条件

      }
    }
  },
  methods: {
    async conditionFn(pageNum) {
      if(pageNum) {
        this.pageInfo.pageNum = pageNum
      }
      var {data} = await condition(this.pageInfo,this.studentVo)
      // 只有code==20000才会执行当前行，如果不是20000，将在request.js重抛出
      this.pageInfo = data
    }
  },
  mounted() {
    // 查询所有
    this.conditionFn()
  },
}
</script>

<style>

</style>