3.2 All query
analysis 3.2.1 demand
for the first time to enter the page, do not enter any search criteria, the default query a full course of pagination. 3.2.2 API method
in class api api methods to create a directory used for this project, api class method used to extract public.js and some other categories:
/api/public.js------------- extraction the basis of the method /api/util.js----------------- axios tools / con fi g / sysCon fi g.js ---- system configuration class, the configuration parameters of the system variables
created course .js, api method class as courses related business modules.
[AppleScript] plain text view Copy the code
?
1 2 3 |
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 search method
to realize ideas are as follows:
1, the user request arrives this page node.js
2, curriculum inquiry request to the server in asyncData method
3, asyncData method of performing server-side rendering is completed to start
a search is performed in asyncData, the code is as follows:
[AppleScript] plain text view Copy the code
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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] plain text view Copy the code
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 |
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 page
shows a list of courses in the page.
[AppleScript] plain text view Copy the code
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 |
< 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 server code
[AppleScript] plain text view Copy the code
?
1 2 |
... / / 分页 / / 当前页码 if ( page < = 0 ) { page = 1 ; } / / 起始记录下标 int from = ( page ‐ 1 ) * size; searchSourceBuilder. from ( from ) ; searchSourceBuilder.size ( size ) ; ... |
3.3.2 front-end code
using the el-pagination tab Element-UI widget of:
[AppleScript] plain text view Copy the code
?
01 02 03 04 05 06 07 08 09 10 11 |
< 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 > |
Custom paging triggering method:
[AppleScript] plain text view Copy the code
?
1 2 3 4 5 6 |
methods : { / / 分页触发 handleCurrentChange ( page ) { this.page = page this.$route.query.page = page let querys = querystring.stringify ( this.$route.query ) window . location = ' / course / search?' + querys; } ... |