自己电脑上做网站别人访问,赣州工作室,四川高速公路建设开发集团有限公司网站,仁茂网络seo文章目录0.思路总结1.创建CMS模块的目录架构2.创建页面并配置路由1#xff09;在page目录新建page_list.vue#xff0c;扩展名为.vue。2#xff09;在cms的router下配置路由。3#xff09;在base目录下的router导入cms模块的路由3.使用Table组件完善页面内容4.Api调用服务器…
文章目录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方法 6cms.js中的page_list方法通过axios请求服务端接口 7采用proxyTable解决跨域问题node.js将请求转发到服务端(http://localhost:31001/cms/page/list) 8服务端处理将查询结果响应给前端 9成功响应调用then方法在then方法中处理响应结果将查询结果res赋值给数据模型中的total和list变量。 10vue.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 typeprimary v‐on:clickquery sizesmall查询/el‐button
el‐table
:datalist
stripe
stylewidth: 100%
el‐table‐column typeindex width60
/el‐table‐column
el‐table‐column proppageName label页面名称 width120
/el‐table‐column
el‐table‐column proppageAliase label别名 width120
/el‐table‐column
el‐table‐column proppageType label页面类型 width150
/el‐table‐column
el‐table‐column proppageWebPath label访问路径 width250
/el‐table‐column
el‐table‐column proppagePhysicalPath label物理路径 width250
/el‐table‐column
el‐table‐column proppageCreateTime label创建时间 width180
/el‐table‐column
/el‐table
el‐pagination
layoutprev, pager, next
:page‐sizethis.params.size
v‐on:current‐changechangePage
:totaltotal :current‐pagethis.params.page stylefloat: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-proxymiddlewarehttps://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
layoutprev, pager, next
:page‐sizethis.params.size
v‐on:current‐changechangePage
:totaltotal :current‐pagethis.params.page stylefloat:right;
/el‐pagination2定义数据模型对象
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两个钩子 createdvue实例已创建但是DOM元素还没有渲染生成。 mountedDOM元素渲染生成完成后调用。
本例子在两个方法的任意一个都满足需求 添加如下代码
mounted() {
//默认查询页面
this.query()
}
