新しい問い合わせの20200206--フロントページの概要

その他 2020-02-21 20:44:02 訪問数: null

フロントからのソースを説明し始めた
page_listがメインのページです

<template>
  <div>
    <el-form :model="params">
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
        v-for="item in siteList"
        :key="item.siteId"
        :label="item.siteName"
        :value="item.siteId">
        </el-option>
      </el-select>
      页面别名：<el-input v-model="params.pageAliase" style="width: 100px"></el-input>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="pageName" label="页面名称" width="120"></el-table-column>
      <el-table-column prop="pageAliase" label="别名" width="120"></el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="150"></el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" width="250"></el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="250"></el-table-column>
      <el-table-column prop="pageCreateTime" label="创建时间"></el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      style="float: right"
      :page-size="params.size"
      :current-page="params.page"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as cmsApi from '../api/cms'
export default {
    name: "page_list",
  data() {
    return {
      siteList:[],
      list: [],
      total:0,
      params:{
        page:1,
        size:10,
        siteId:'',
        pageAliase:''
      }
    }
  },
  methods:{
      query:function () {
        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res) => {
          console.log(res)
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })
        alert("查询")
      },
      changePage:function (page) {
        alert(page);
        this.params.page = page;
        this.query()
      }
  },
  mounted() {
      this.query()
      this.siteList = [{
        siteId:'5a751fab6abb5044e0d19ea1',
        siteName:'门户主站'
      },{
        siteId:'102',
        siteName:'测试站'
      }]
  }
}
</script>

<style scoped>

</style>

これは、クエリ、フォームに相当します

<el-form :model="params">
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
        v-for="item in siteList"
        :key="item.siteId"
        :label="item.siteName"
        :value="item.siteId">
        </el-option>
      </el-select>
      页面别名：<el-input v-model="params.pageAliase" style="width: 100px"></el-input>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form>

キーは唯一の表現で拘束され
たラベルは、ラベルに表示されていることをテキストである
値は、の値に対応するラベルの値に表示されていることをテキストで
サイトリスト結合全体の
サイトリストは、クエリによって得られるべきであるが、しかし、このプロジェクトで私は、静的な初期化を初期搭載しました。

そして、各クエリロジックとページのメソッド

 query:function () {
        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res) => {
          console.log(res)
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })
        alert("查询")
      },
      changePage:function (page) {
        alert(page);
        this.params.page = page;
        this.query()
      }

クエリで

次のAPI CMS定義された方法では、次のインターフェイスのパスに到達し、あなたがジャンプしたい私のルートを変更

import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;


//定义方法：请求服务端的页面查询接口
export const page_list = (page,size,params) =>{
  //请求服务端的查询接口
  //将params对象拼装成key/value串
  let queryString =  querystring.stringify(params);

  return http.requestQuickGet(apiUrl + '/cms/page/list/'+ page + '/' + size + '?' + queryString);
}
まず最初に、訪問した後のサービスに渡された、結合へのバックエンド・コントローラです 
package com.xuecheng.manage_cms.controller;

import com.xuecheng.api.cms.CmsPageControllerApi;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.service.PageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

/**
 * @Classname CmsPageController
 * @Description TODO
 * @Date 2020/2/13 0:43
 * @Created by mmz
 */
@RestController
@RequestMapping("/cms/page")
public class CmsPageController implements CmsPageControllerApi {

    @Autowired
    PageService pageService;

    @Override
    @GetMapping("/list/{page}/{size}")
    public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size")int size, QueryPageRequest queryPageRequest) {
//        //静态数据
//        //定义queryResult
//        QueryResult<CmsPage> queryResult = new QueryResult<>();
//        List<CmsPage> list = new ArrayList<>();
//        CmsPage cmsPage = new CmsPage();
//        cmsPage.setPageName("测试页面");
//        list.add(cmsPage);
//        queryResult.setList(list);
//        queryResult.setTotal(1);
//        QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
        return pageService.findList(page,size,queryPageRequest);
    }
}

主なサービスロジックの定義

package com.xuecheng.manage_cms.service;

import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.dao.CmsPageRepository;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.*;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.PathVariable;

import javax.validation.constraints.Null;

/**
 * @Classname PageService
 * @Description TODO
 * @Date 2020/2/13 15:23
 * @Created by mmz
 */
@Service
public class PageService {
    @Autowired
    CmsPageRepository cmsPageRepository;

    //页面查询
    public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size")int size, QueryPageRequest queryPageRequest){
        if(queryPageRequest == null){
            queryPageRequest = new QueryPageRequest();
        }
        //自定义条件查询
        //定义条件匹配器
        ExampleMatcher exampleMatcher = ExampleMatcher.matching()
                .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());
        //条件值对象
        CmsPage cmsPage = new CmsPage();
        //设置条件值（站点id）
        if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){
            cmsPage.setSiteId(queryPageRequest.getSiteId());
        }
        //设置模板id作为查询条件
        if(StringUtils.isNotEmpty(queryPageRequest.getTemplateId())){
            cmsPage.setTemplateId(queryPageRequest.getTemplateId());
        }
        //设置页面别名作为查询条件
        if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){
            cmsPage.setPageAliase(queryPageRequest.getPageAliase());
        }
        //定义条件对象Example
        Example<CmsPage> example = Example.of(cmsPage,exampleMatcher);
        //分页参数
        if(page <=0){
            page = 1;
        }
        page = page -1;
        if(size<=0){
            size = 10;
        }
        Pageable pageable = PageRequest.of(page,size);
        Page<CmsPage> all = cmsPageRepository.findAll(example,pageable);//实现自定义条件查询并且分页查询
        QueryResult queryResult = new QueryResult();
        queryResult.setList(all.getContent());//数据列表
        queryResult.setTotal(all.getTotalElements());//数据总记录数
        QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
        return queryResponseResult;
    }


}

QueryPageRequest一例では、ロジック、およびクエリのロジック、第一セットCmsPageオブジェクト、連続して、オブジェクトおよび整合のその後cmsPage例を受け取ります。
ページング可能ページサイズを受け入れ、
その後、DAO層を呼び出します

        Page<CmsPage> list = cmsPageRepository.findAll(example,pageable);

クエリは、リストを取得するために
、結果オブジェクトを取得し、結果は結果オブジェクトに渡され、
その後、別のラージオブジェクトResponseオブジェクトがあり、統合状態と結果は、フロントエンドに返されたオブジェクト
のフロントエンドインターフェースにチャンスをレンダリング

宮城詩
公開された735元の記事 ・ ウォン称賛42 ・ ビュー70000 +
彼のメッセージボードの 懸念

おすすめ

転載: blog.csdn.net/qq_36344771/article/details/104343379
おすすめ
ランキング
图神经网络(GNN)-第三方库(工具包)：networkx【处理图的工具包】
どのくらいのスパークマスターデータになるには？
アクセス許可の問題の欠如を示唆し、NPMを使用してMAC
WeChatアプレットを使用して、母親と乳児の店舗での赤ちゃんの入浴回数のカウンターカードを作成するにはどうすればよいですか？JavaScript変数はデータ値のコンテナーです。
el-tree自定义图标，使用图片或者dom自定义图标，element-plus
背景インターフェイスの開発
win10ノートパソコンの睡眠を解決するために、一定期間の後、自動シャットダウンの問題を覚ますことができません
[音声合成] MATLAB線形予測フォルマント検出とピッチパラメーターに基づく音声合成[Matlabソースコード562を含む]
Codeforces 1324E - 眠れる森のスケジュール
[ジャワ] [35]サブリスト傍受部一覧
アーカイブ
もっと
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

コードワールド

© 2018 codetd.com