3.2すべてのクエリ
分析3.2.1需要
のページを入力する最初の時間のためには、任意の検索条件を入力しないと、デフォルトのクエリページネーションのフルコース。3.2.2 APIメソッド
このプロジェクトのために使用されるディレクトリを作成するためのクラスのAPI APIメソッドで、public.jsといくつかの他のカテゴリを抽出するために使用されるAPIクラスメソッド：
/api/public.js-------------抽出方法/api/util.js----------------- axiosツール/コングラム/シスコンFiのg.jsに基づい ---- システム構成クラス、システム変数の設定パラメータ
コースを作成.jsファイル、コース関連事業モジュールなどのAPIメソッドクラス。
[AppleScriptの] プレーンテキストビューは、 コードをコピー
？
| 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検索方法
のアイデアを実現するため、以下の通りである：
1を、ユーザの要求は、このページのNode.jsの到着
2を、asyncData方法でサーバーへのカリキュラムの問い合わせ要求
3、サーバー側のレンダリングを実行するasyncData方法を開始するために完成された
検索をasyncDataで行われ、以下のように、コードは次のとおりです。
[AppleScriptの] プレーンテキストビューは、 コードをコピー
？
| 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の] プレーンテキストビューは、 コードをコピー
？
| 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ページは、
ページ内のコースのリストを示します。
[AppleScriptの] プレーンテキストビューは、 コードをコピー
？
| 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サーバコード
[AppleScriptの] プレーンテキストビューは、 コードをコピー
？
| 1 2 |
... //分页 //当前页码 if(page<=0){
page = 1; } //起始记录下标 int from = (page ‐1) * size; searchSourceBuilder.from(from); searchSourceBuilder.size(size); ...
|
3.3.2フロントエンドコード
のEL-ページ付けタブ素子UIウィジェットを使用して：
[AppleScriptの] プレーンテキストビューは、 コードをコピー
？
| 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>
|
カスタムページングトリガ方法：
[AppleScriptの] プレーンテキストビューは、 コードをコピー
？
| 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; } ...
|