[オンライン]プロジェクト研究の研究ノートのday02

単一ページ

解釈Baiduの：
利点：
1、ユーザ体験は良い操作で、ユーザーがページを更新する必要はありません、全体の相互作用プロセスはアヤックスによって運営されています。
図2は、別個の前端と後端の開発のため、HTTPサーバは、JSを使用して、レンダリングクライアントに対して、フロントエンドにHTTPリクエストを取得するためのインターフェース、データインターフェースを提供します。
短所：
1、遅いロードのホームページ
単一ページのアプリケーション大きなファイルまたはパッケージスマンは場合は、ページの表示を読み込む際にファイルにパッケージJS、CSSは、パッケージファイルをロードする
ユーザーエクスペリエンスが良くありません。
2、SEO非友好的な
検索エンジン向けに最適化SEO（検索エンジン最適化）。これは、検索エンジンでサイト改善するために、検索エンジンのルールを使用して検索で
のランキングの方法を。単一ページのアプリケーションの使用が大幅にサイトに検索エンジンを軽減しますので、現在、様々な検索エンジンJSサポートは、良いではありません。

ルーティングページ

ディレクトリのCMSでIndex.js設定ファイル

import Home from "../../home/page/home";
import page_list from "../page/page_list";

export default [{
  path: '/',
  component: Home,
  name: 'CMS内容管理',
  hidden: false,
  children: [{
    path: '/cms/page/list',
    component: page_list,
    name: '页面列表',
    hidden: false,
  }
  ]
}
]

注：提供されるルーティング構成成分を、インポートする必要が主にコンポーネントパスへのアクセスパスを定義する

ルーティングベースディレクトリ内に配置されました

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// 定义路由配置
let routes = []
let concat = (router) => {
  routes = routes.concat(router)
}
// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)
export default routes;

page_list.vueページを書きます

<template>
  <div>
    <el-button style="margin-top: 10px;" type="primary" size="small" @click="query">查询</el-button>
    <!--表格-->
    <el-table
      :data="list"
      stripe
      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="120">
      </el-table-column>
      <el-table-column prop="pageWebPath"  label="访问路径"  width="120">
      </el-table-column>
      <el-table-column prop="pagePhysicalPath"  label="物理路径"  width="120">
      </el-table-column>
      <el-table-column prop="pageCreateTime"  label="创建时间"  width="120">
      </el-table-column>
      <el-table-column prop="pageType"  label="页面类型"  width="120">
      </el-table-column>
    </el-table>
    <el-pagination style="float: right"
                   background
                   layout="prev, pager, next"
                   :total="total"
                   :current-page.sync="params.page"
                   :page-size.sync="params.size"
                   @current-change="handleCurrentChange"
    >
    </el-pagination>

  </div>
</template>

<script>
  import * as cmsApi from '../api/cms'

  export default {
    name: "page_list",
    data() {
      return {
        list: [],
        params: {
          page: 2, //当前页码
          size: 5,  //每页显示数据
        },
        total: 50
      }
    },
    methods: {
      //处理页码改变
      handleCurrentChange(page) {
        // alert(page);
         this.params.page = page;
         this.query();
      },
      //分页查询
      query() {
        cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
          console.log(res)
          this.total = res.queryResult.total;
          this.list = res.queryResult.list;
        })
      },
    },
    mounted() {
      this.query();
    }
  }
</script>

<style>

</style>

cms.js CMSモジュールで定義されたAPIのディレクトリ、

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) => {
  return http.requestQuickGet(apiUrl +'/cms/page/list/'+page+'/'+size)
}

どのようなフロントページでAPIを呼び出します

import * as cmsApi from '../api/cms'

アクセスデータへの設定は、proxyTable内のconfig / index.js達成クロスドメイン問題のフロントエンドサーバー

 '/api/cms': {
        target: 'http://localhost:31001',
        pathRewrite: {
          '^/api': '' //实际去掉api
        }
        //target: 'http://127.0.0.1:50201'

      }

サーバーのデータにアクセスする前にページにアクセスする場合も、VUEのライフサイクルに応じて、使用することができマウント方法

mounted() {
      this.query();
    }

ページのテスト