【 CMS前端页面查询开发 】
1 CMS前端页面查询开发
1.1 页面原型
1.1.1 创建页面
1.1.1.1 页面结构 在model目录创建 cms模块的目录结构
文章图片
在page
目录新建page_list.vue
,扩展名为.vue。
.vue文件的结构如下:
测试页面显示...
>
/* 编写页面静态部分,即model及vm部分 */
>
/* 编写页面样式,不是必须 */
在页面的template中填写 “测试页面显示…”。
注意:template内容必须有一个根元素,否则vue会报错,这里我们在template标签内定义一个div。
1.1.1.2
页面路由
现在先配置路由,实现url访问到页面再进行内容完善与调试。1、在
cms
的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}
]
}]
2、在base目录下的router导入cms模块的路由
index.js
// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)
3、测试
启动工程,刷新页面,页面可以外正常浏览,并且看到“测试页面显示…”字样
文章图片
1.1.2 Table组件测试
1.1.2.1 Element-UI介绍 本项目使用Element-UI来构建界面,Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
Element-UI官方站点:
http://element-cn.eleme.io/#/zh-CN/component/quickstart
1.1.2.2 Table组件测试 本功能实现的页面列表,用户可以进行分页查询、输入查询条件查询,通过查看Element-UI库,我们需要Table 表格、Form表单 及Pagination 分页组件。
进入Element-UI官方,找到Table组件,拷贝源代码到vue页面中,如下:
>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
>
/*css样式*/
注意:template 下面需要有 div测试:
文章图片
通过查看代码发现:
- el-table组件绑定了tableData模型数据。
- tableData模型数据在script标签中定义。
根据需求完善页面内容,完善列表字段,添加分页组件。
文章图片
查询
>
export default {
data() {
return {
list:[],
total:50,
params:{
page:1,//页码
size:2//每页显示个数
}
}
},
methods:{
//分页查询
changePage:function () {
this.query()
},
//查询
query:function () {
alert("查询")
}
}
}
1.2Api调用 1.2.1 Api方法定义
在 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。
1.2.2 Api调用
前端页面导入
cms.js
,调用js方法请求服务端页面查询接口。1)在
page_list.vue
中导入cms.js文章图片
import * as cmsApi from '../api/cms'
在query方法中调用 page_list方法
//查询
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
})
}
1.3 跨域问题解决 测试 上边的代理 ,结果报错如下 :
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,基本原理是用服务端代理解决浏览器跨域:
文章图片
cms 跨域解决原理:
1、访问页面http://localhost:11000/
2、页面请求 http://localhost:11000/cms 由于url由http://localhost:31001/cms…改为“http://localhost:11000/cms.",所以不存在跨域
3、通过proxyTable由node服务器代理请求 http://localhost:31001/cms.
服务端不存在跨域问题
具体的配置如下:
1)修改api方法中url的定义
请求前加/api前缀
cms.js
//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
}
1.4 分页查询测试 1、定义分页视图
使用v-on监听更改分页事件
2、定义数据模型对象
data() {
return {
list:[],
total:50,
params:{
page:1,//页码
size:2//每页显示个数
}
}
3、定义分页方法,接收页码参数
//分页查询,接收page页码
changePage(page){
this.params.page = page;
this.query()
}
修改完毕,测试分页效果。
1.5 进入页面立即查询 目前实现的功能是进入页面点击查询按钮向服务端表求查询,实际的需求是进入页面立即查询。
如何实现?
这要用到vue的钩子函数,每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
文章图片
文章图片
通常使用最多的是created和mounted两个钩子:
- created:vue实例已创建但是DOM元素还没有渲染生成。
- mounted:DOM元素渲染生成完成后调用。
添加如下代码:
mounted() {
//默认查询页面
this.query()
}
重新刷新页面。
2 前后端请求响应流程小结
文章图片
【【 CMS前端页面查询开发 】】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方法中处理响应结果,将查询结果赋值给数据模型中的total和list变量。
10、vue.js通过双向数据绑定将list数据渲染输出。
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境,人生还很长