学成在线--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()
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java.util.IdentityHashMap.entrySet()方法实例

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 entrySet() 方法是用来获取此映射中包含的映射关系的set视图。 声明 以下是java.util.IdentityHashMap.entrySet()方法的声明。 publ…

URL转微信可识别的二维码

jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 &#xff0c;使用它可以很方便的在页面上生成二维条码。 用法&#xff1a; 1、引入jquery.qrcode.min.js <script src"jquery.min.js"></script> <script src"jquery.qrc…

javascript数组及操作方法

数组及操作方法 数组就是一组数据的集合&#xff0c;javascript中&#xff0c;数组里面的数据可以是不同类型的。 定义数组的方法 //对象的实例创建 var aList new Array(1,2,3);//直接量创建 var aList2 [1,2,3,asd];操作数组中数据的方法 1、获取数组的长度&#xff1a;aLi…

如何创建比C语言更快的编程语言?

【CSDN编译整理】近日&#xff0c;beza1e1上发表了一篇博客《Faster than C》&#xff0c;在Hacker News和Reddit Programming上引发了开发者们的激烈讨论。现将此文编译&#xff0c;我们一起来探讨下。 单从编程语言特性来判断&#xff0c;虽然Fortran语言也以快而著称&#…

面向对象方法学

面向对象技术强调在软件开发过程中面向客观世界或问题域中的事物&#xff0c;采用人类在认识客观世界的过程中普遍运用的思维方法&#xff0c;直观、自然地描述客观世界中的有关事物。 面向对象的分析方法是利用面向对象的信息建模概念&#xff0c;如实体、关系、属性等&#x…

学成在线--3.CMS页面管理开发(自定义条件查询)

文章目录0.需求分析1.服务端--Dao2.服务端--Service3.服务端--Controller4.前端1&#xff09;page_list.vue中增加查询表单2&#xff09;page_list.vue中添加数据模型对象3&#xff09;在钩子方法中构建siteList站点列5.Api调用1&#xff09;修改 cms.js&#xff0c;向服务端传…

动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证

PS&#xff1a; 游戏公司后台开发&#xff0c;工作模式&#xff1a;996。 于是写博客这事也荒废了.... 想想还是写一点吧。 呵呵&#xff0c;请不要笑话我注释写这么多&#xff0c;习惯了&#xff0c;我上班写代码都是有注释的。 我建两个相似的表是为了&#xff0c;给后台使…

安装 PrestaShop 1.6 - 详细的安装指南

2019独角兽企业重金招聘Python工程师标准>>> 详细的安装指南 下载和解压 PrestaShop 程序代码包 你可以从 PrestaShop 官方下载最新的版本&#xff0c;下载地址为&#xff1a;http://www.prestashop.com/en/download. 这里你只有一个选项&#xff0c;只能下载最新的…

tinydate.js[v0.3] 新增了字符串格式化为日期对象的函数

更新说明 加入了String类型的扩展成员 convertToDate() 可以直接将 字符串格式的日期转换为Date对象。加入了String类型的扩展成员 convertToTimeSpan() 可以将 字符串格式的日期转换为TimeSpan对象。修复了日期格式化为字符串的format函数中的bug。tinydate.js v0.3 Date.prot…

面向对象方法学的四个要点

面向对象方法学的要点面向对象方法学的出发点和基本原则&#xff0c;是尽可能模拟人类习惯的思维方式&#xff0c;使开发软件的方法与过程尽可能接近人类认识世界解决问题的方法与过程&#xff0c;也就是使描述问题的问题空间(也称为问题域)与实现解法的解空间(也称为求解域)在…

学成在线--4.CMS页面管理开发(新增页面)

文章目录1.定义新增页面接口1&#xff09;在model工程中定义响应模型2&#xff09;在api工程中添加接口2.新增页面服务端开发1&#xff09;Dao2&#xff09;Service3&#xff09;Controller3.新增页面前端开发1&#xff09;创建page_add.vue2&#xff09;配置路由3&#xff09;…

嵌套For循环性能优化

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。1 案例描述某日&#xff0c;在JavaEye上看到一道面试题&#xff0c;题目是这样的&#xff1a;请对以下的代码进行优化 Java代码 for (int …

docker-ce安装

1、安装 sudo yum -y install docker 2、加入开机自启systemctl enable docker转载于:https://www.cnblogs.com/runnerjack/p/8618524.html

python-study-17

复习 上节课复习1、什么是模块模块是一系列功能的集合体2、为何用模块拿来&#xff08;内置或第三方的模块&#xff09;主义&#xff0c;提升开发效率自定义模块可以让程序的各部分组件重用模块内的功能3、如何用模块大前提&#xff1a;模块是被执行文件导入使用&#xff0c;模…

面向对象方法学的优点

1.与人类习惯的思维方法一致面向对象的软件技术以对象为核心&#xff0c;用这种技术开发出的软件系统由对象组成。对象是由描述内部状态表示静态属性的数据&#xff0c;以及可以对这些数据施加的操作(对象的动态行为)&#xff0c;封装在一起所构成的统一体。面向对象的设计方法…

如何学好C语言

我相信&#xff0c;这可能是很多朋友的问题&#xff0c;我以前也有这样的感觉&#xff0c;编程编到一定的时候&#xff0c;发现能力到了瓶颈&#xff0c;既不深&#xff0c;也不扎实&#xff0c;半吊子。比如&#xff1a;你长期地使用Java和.NET &#xff0c;这些有虚拟机的语言…

学成在线--5.CMS页面管理开发(修改页面)

文章目录1.修改页面流程1&#xff09;前端逻辑2&#xff09;后端逻辑2.修改页面接口定义3.后端开发--Dao4.后端开发--Service5.后端开发--Controller1&#xff09;根据id查询页面2&#xff09;保存页面信息6.前端开发--页面处理流程7.前端开发--编写page_edit.vue8.前端开发--配…

在树莓派上播放音频

https://blog.csdn.net/qinxiandiqi/article/details/39155593转载于:https://www.cnblogs.com/Baronboy/p/9206164.html

Map四种获取key和value值的方法,以及对map中的元素排序

2019独角兽企业重金招聘Python工程师标准>>> 获取map的值主要有四种方法&#xff0c;这四种方法又分为两类: 一类是调用map.keySet()方法来获取key和value的值&#xff0c; 另一类则是通过map.entrySet()方法来取值&#xff0c; 两者的区别在于&#xff0c;前者主要…

配置Oracle Instant Client环境

1.配置Oracle Instant Client环境 到Oracle官网下载Oracle Instant Client&#xff0c;注意选择x86平台&#xff0c;Toad只认32位的Oracle Instant Client。至于版本号&#xff0c;没有特别要求&#xff0c;版本向下兼容。 桌面上&#xff0c;右键点“我的电脑”&#xff0c;选…