Java的新项目学成在线笔记-day12（十）

3.2 查询全部 
3.2.1 需求分析 
初次进入页面，没有输入任何查询条件，默认查询全部课程，分页显示。 3.2.2 API方法 
在api目录创建本工程所用的api方法类，api方法类使用了public.js等一些抽取类：
/api/public.js-------------抽取axios 的基础方法 /api/util.js-----------------工具类 /config/sysConfig.js----系统配置类，配置了系统参数变量
  创建course.js，作为课程相关业务模块的api方法类。

[AppleScript] 纯文本查看 复制代码

?

import http from './public' import qs from 'qs' let config = require('~/config/sysConfig') let apiURL = config.apiURL let staticURL = config.staticURL if (typeof window === 'undefined') {   apiURL = config.backApiURL   staticURL = config.backStaticURL } /*搜索*/ export const search_course = (page,size,params) => {
 let querys = qs.stringify(params);
 return http.requestQuickGet(apiURL+"/search/course/list/"+page+"/"+size+"?"+querys); }

3.2.3搜索方法 
实现思路如下：
1、用户请求本页面到达node.js
2、在asyncData方法中向服务端请求查询课程 
3、asyncData方法执行完成开始服务端渲染
  在asyncData中执行搜索，代码如下：
 

[AppleScript] 纯文本查看 复制代码

?

async asyncData({ store, route }) {//服务端调用方法
     //搜索课程
    let page = route.query.page;
 if(!page){
   page = 1;
   }else{
  page = Number.parseInt(page)
    }
  console.log(page);
   //请求搜索服务，搜索服务
    let course_data = await courseApi.search_course(page,2,route.query);
    console.log(course_data)
    if (course_data &&  course_data.queryResult ) {
      let keywords = ''
     let mt=''
   let st=''
     let grade=''
     let keyword=''
    let total = course_data.queryResult.total
     if( route.query.mt){
    mt = route.query.mt
    }
  if( route.query.st){
      st = route.query.st
    }         if( route.query.grade){
       grade = route.query.grade
     }
   if( route.query.keyword){
      keyword = route.query.keyword
    }
 return {
        courselist: course_data.queryResult.list,//课程列表
        keywords:keywords,
          mt:mt,

[AppleScript] 纯文本查看 复制代码

?

st:st,
       grade:grade,
      keyword:keyword,
        page:page,
   total:total,
   imgUrl:config.imgUrl
     }       }else{
     return {
     courselist: {},
    first_category:{},
     second_category:{},
     mt:'',
   st:'',
     grade:'',
      keyword:'',
       page:page,
    total:0,
 imgUrl:config.imgUrl
      }
  }
    }

3.2.5 页面 
在页面中展示课程列表。
 

[AppleScript] 纯文本查看 复制代码

?

<div class="content‐list">
          <div class="recom‐item" v‐for="(course, index) in courselist">
               <nuxt‐link :to="'/course/detail/'+course.id+'.html'" target="_blank">
            <div v‐if="course.pic">
      <p><img :src="imgUrl+'/'+course.pic" width="100%" alt=""></p>
                </div>
            <div v‐else>
                <p><img src="/img/widget‐demo1.png" width="100%" alt=""></p>
               </div>
               <ul >
               <li class="course_title"><span v‐html="course.name"></span></li>
     <li style="float: left"><span v‐if="course.charge == '203001'">免费</span> <span v‐if="course.charge == '203002'">￥{{course.price | money}}</span>
                <!‐‐ <em> ∙ </em>‐‐>  <!‐‐<em>1125人在学习</em>‐‐></li>
              </ul>
         </nuxt‐link>
           </div>
       <li class="clearfix"></li>
           </div>

3.3.1 服务端代码

[AppleScript] 纯文本查看 复制代码

?

... //分页 //当前页码 if(page<=0){
   page = 1; } //起始记录下标 int from  = (page ‐1) * size; searchSourceBuilder.from(from); searchSourceBuilder.size(size); ...

3.3.2 前端代码 
使用Element-UI的el-pagination分页插件：
 

[AppleScript] 纯文本查看 复制代码

?

<div style="text‐align: center">
  <el‐pagination
   background
   layout="prev, pager, next"
   @current‐change="handleCurrentChange"
   :total="total"
   :page‐size="page_size"
   :current‐page="page"
   prev‐text="上一页"
  next‐text="下一页">
 </el‐pagination> </div>

定义分页触发方法：
 

[AppleScript] 纯文本查看 复制代码

?

methods:{   //分页触发
  handleCurrentChange(page) {
   this.page = page
 this.$route.query.page = page
   let querys = querystring.stringify(this.$route.query)
   window.location = '/course/search?'+querys;   }   ...