【学成在线】项目学习笔记day02

单页面

百度解释：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则
用户体验不好。
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎
排名的方法。目前各家搜索引擎对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,
  }
  ]
}
]

注意：配置路由需要导入该组件，该设置主要是定义了组件的访问路径path

在base目录下配置路由

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模块的api目录定义cms.js，

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'

在config/index.js下配置proxyTable实现前端跨域问题去访问服务端数据

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

      }

另外根据vue的生命周期,如果想在访问页面前访问服务端数据可以使用mounted方法

mounted() {
      this.query();
    }

页面测试