学成在线--2.CMS前端页面查询开发

文章目录

0.思路总结
1.创建CMS模块的目录架构
2.创建页面并配置路由
- 1）在page目录新建page_list.vue，扩展名为.vue。
- 2）在cms的router下配置路由。
- 3）在base目录下的router导入cms模块的路由
3.使用Table组件完善页面内容
4.Api调用服务器端查询接口获取数据
- 1）在cms模块的api目录定义cms.js。
- 2）在前端页面page_list.vue中导入cms.js，获取后端返回的数据。
5.解决调用接口的跨域问题
6.实现指定页面的分页查询
- 1）定义分页视图
- 2）定义数据模型对象
- 3）定义分页方法，接收页码参数
7.使用钩子函数实现进入页面时立即查询

0.思路总结

1）在浏览器输入前端url
2）前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面
3）首先执行page_list.vue中的钩子方法
4）在钩子方法中调用query方法
5）在query方法中调用cms.js中的page_list方法
6）cms.js中的page_list方法通过axios请求服务端接口
7）采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list)
8）服务端处理，将查询结果响应给前端
9）成功响应调用then方法，在then方法中处理响应结果，将查询结果res赋值给数据模型中的total和list变量。
10）vue.js通过双向数据绑定将list数据渲染输出。

1.创建CMS模块的目录架构

在module目录中创建cms模块的目录结构，如下所示：

2.创建页面并配置路由

1）在page目录新建page_list.vue，扩展名为.vue。

.vue文件的结构如下：

<template>
<!‐‐编写页面静态部分，即view部分‐‐>
测试页面显示...
</template>
<script>
/*编写页面静态部分，即model及vm部分。*/
</script>
<style>
/*编写页面样式，不是必须*/
</style>

注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。

2）在cms的router下配置路由。

在router目录下新建index.js，路由代码如下：

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

3）在base目录下的router导入cms模块的路由

// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)

3.使用Table组件完善页面内容

本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
Element-UI官方站点：https://element.eleme.cn/#/zh-CN

本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库，我们需要Table 表格、Form表单及Pagination 分页组件。

进入Element-UI官方，找到Table组件，拷贝源代码到page_list.vue页面中。

根据需求完善页面内容，完善列表字段，添加分页组件。

<template>
<div>
<el‐button type="primary" v‐on:click="query" size="small">查询</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="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="创建时间" width="180" >
</el‐table‐column>
</el‐table>
<el‐pagination
layout="prev, pager, next"
:page‐size="this.params.size"
v‐on:current‐change="changePage"
:total="total" :current‐page="this.params.page" style="float:right;">
</el‐pagination>
</div>
</template>
<script>
export default {data() {return {list:[],
total:50,
params:{page:1,//页码
size:2//每页显示个数
}
}
},
methods:{//分页查询
changePage:function () {this.query()
},
//查询
query:function () {alert("查询")
}
}
}
</script>

测试结果如下：

4.Api调用服务器端查询接口获取数据

1）在cms模块的api目录定义cms.js。

在cms.js中定义如下js方法，此方法实现http请求服务端页面查询接口。

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'
export const page_list = (page,size,params) => {return http.requestQuickGet('http://localhost:31001/cms/page/list/'+page+'/'+size)
}

axios实现了http方法的封装，vue.js官方不再继续维护vue-resource,推荐使用 axios。

2）在前端页面page_list.vue中导入cms.js，获取后端返回的数据。

调用cms.js中的page_list 方法，请求服务端页面查询接口，并返回数据，将数据封装到res中。

import * as cmsApi from '../api/cms'//查询
query:function () {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
})
}

5.解决调用接口的跨域问题

测试上边的代码，结果报错，如下：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost:11000' is therefore not allowed access.

原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决：采用proxyTable解决。

proxyTable是什么？

vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxymiddleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域。
具体的配置如下：
1）修改api方法中url的定义
请求前加/api前缀

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'
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)
}

2）在config/index.js下配置proxyTable。
以/api/cms开头的请求，代理请求http://localhost:31001

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

6.实现指定页面的分页查询

1）定义分页视图

使用v-on监听更改分页事件

<el‐pagination
layout="prev, pager, next"
:page‐size="this.params.size"
v‐on:current‐change="changePage"
:total="total" :current‐page="this.params.page" style="float:right;">
</el‐pagination>

2）定义数据模型对象

data() {return {list:[],
total:50,
params:{page:1,//页码
size:2//每页显示个数
}
}

3）定义分页方法，接收页码参数

//分页查询，接收page页码
changePage(page){this.params.page = page;
this.query()
}

7.使用钩子函数实现进入页面时立即查询

目前实现的功能是进入页面点击查询按钮向服务端表求查询，实际的需求是进入页面立即查询。如何实现？

这要用到vue的钩子函数，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、
编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子
的函数，这给了用户在不同阶段添加自己的代码的机会。

通常使用最多的是created和mounted两个钩子：
created：vue实例已创建但是DOM元素还没有渲染生成。
mounted：DOM元素渲染生成完成后调用。

本例子在两个方法的任意一个都满足需求：
添加如下代码：

mounted() {//默认查询页面
this.query()
}