cms01-前端-page_List页面编写与整合后端运行

在module中创建CMS页面原型

定义cms目录,创建相应接口

在page目录中创建page_list页面

在router页面中创建index.js路由组件

import Home from '@/module/home/page/home.vue';
import page_list from "../page/page_list";
export default [{
  path: '/',
  component: Home,
  name: 'CMS',
  hidden: false,
  children:[
    {path: '/cms/page/list',name:'页面列表',component: page_list }
  ]
}
]

这样在home组件中,就可以获取到路与信息,并渲染成树状列表显示

仿照home路由组件,创建cms路由默认显示,并且设置管理页面的子路由

在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

(1)开发查询页面信息界面

1.使用element-ui中的table组件,将数据模型定义好

2.表格有了之后,在底部插入分页组件,在data中添加total,page,size等分页信息

data() {
      return {
        list: [
        ],
        total:0,
        params:{
          page:1,
          size:10
        }
      }
    },

3.查询element的api,对data中数据进行绑定

//分页组件
<el-pagination
      background
      layout="prev, pager, next"
      :total="total "
      :page-size="params.size"
      :current-page="params.page"
      pager-count="8"
      @current-change="changePage"
      style="float: right"
    >
    </el-pagination>

(2)后端接口调用

1.在cms中api文件夹中定义查询接口,引用base/api的public公共接口

2.调用里面的快速get请求方法,在路径中添加参数与地址,将数据返回

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

//定义方法名为page_list,括号为参数的接口方法
export const page_list=(page,size,params) =>{
//定义方法,请求服务端页面请求接口,返回结果
 return  http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size);
}

3.在页面中引入js,调用接口方法,传入参数,再将得到的数据赋给data

4.代理配置,在config/index.js中配置代理路径

proxyTable: {
      '/api/cms': {
        target: 'http://localhost:31001',
        //把-api替换为空字符串,//最终为/cms/...
        pathRewrite: {
          '^/api': ''
        }
        //target: 'http://127.0.0.1:50201'
      }

5.定义分页点击按钮刷新界面.

 //点击不同页,更新查询
      changePage:function (page) {//形参就是当页码
        //将当前页码赋值给data数据对象
        this.params.page=page;
        //调用query方法
        this.query(page);
      }

6.定义钩子函数,页面加载就直接查询

 mounted() {
      //实现进入页面立即查询,直接调用查询方法
     this.query();
   }

注意:这个简单的前后分离调用注意的问题是:

​ elementui的正确使用,将前端定义好后,再开始使用axios编写api放法调用后台接口,

​ 代理的配置,以及请求路径的修改,不能硬编码

​

(3)条件查询表单开发

 <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" v-on:click="query" size="small">查询</el-button>
    </el-form>

在表格头部添加多条件查询表单

siteList:[],//站点列表
        list: [],
        total:0,
        params:{
          siteId:'',
          pageAliase:'',
          page:1,
          size:10,
        }

添加数据绑定

mounted() {
      //实现进入页面立即查询,直接调用查询方法
     this.query();
     //初始化站点列表
     this.siteList = [
       {
         siteId:'5a751fab6abb5044e0d19ea1',
         siteName:'门户主站'
       },
       {
         siteId:'102',
         siteName:'测试站'
       }
     ]
   }

在钩子中添加,下拉列表静态假数据,由于后端的查询站点id的接口没有编写,所以先这样

​ 已编写,和查询一样,在后端编写接口查询,前端修改在钩子调用函数渲染即可.

cms.js

import querystring from 'querystring'
export const page_list=(page,size,params) =>{
  //将params对象数据拼装为json串
  let queryString=querystring.stringify(params);
//定义方法,请求服务端页面请求接口,返回结果
 return  http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+"?"+queryString);

}

由于后端接口,请求的路径有变化,由于有表单元素,所以后面会有?跟上json数据提交,因此使用querystring,工具类进行拼接参数,修改请求路径即可.