学成在线项目总结 - Day2 CMS前端开发

项目CMS前端的搭建使用Vue.js。由于这不是学习的重点,一些基础内容就不在这里提及了。主要记录搭建过程。

Vue.js 使用步骤

学成在线项目总结 - Day2 CMS前端开发

Webpack 使用步骤

学成在线项目总结 - Day2 CMS前端开发

CMS 前端的开发

由于单页面交互通过Ajax,有用户操作体验好,不用刷新页面操作以及适合前后端分离的优点;但是有首页加载慢,搜索引擎优化不友好等缺点,我们项目的的门户、课程介绍不采用单页面应用架构去开发,对于需要用户登录的管理系统采用单页面开发。

创建页面原型

页面结构

所有.vue文件均以一下模板布局

<template>
<!‐‐编写页面静态部分,即view部分‐‐>
测试页面显示...
</template>
<script>
/*编写页面静态部分,即model及vm部分。*/
</script>
<style>
/*编写页面样式,不是必须*/
</style>
  • 在page文件夹中添加前端页面
  • 在router文件夹中配置路由信息
  • 在base文件夹的router添加该路由,这样才能访问相应页面

Table组件添加

可以从Element组件库挑选可用的组件,改用其代码。
这一步将表格界面创建完成,可以显示出一个初步的列表了。

学成在线项目总结 - Day2 CMS前端开发

其中分页和查询还未定义具体方法,将在下一步完成。

查询功能

页面图中有一个查询按钮,现在我们需要的功能是点击查询,能够查到数据库中所有的页面信息。

所有和数据相关的内容都应该写在<script></script>标签中。比如需要从数据库返回的列表数据写在data()中;分页,查询具体的方法实现写在methods()中,为了解决点开列表页面即能看到查询结果,这使用了vue中的钩子函数mounted()实现……
里面的方法如何写,我给自己的要求是能看懂,照葫芦画瓢写出来即可。

此外,需要注意的是,我们读取数据,要用到别的库中的方法,所以需要引用其他库。
import * as cmsApi from '../api/cms.js'
而且我们要在api/cms/cms.js中定义一个js方法,此方法实现http请求服务端页面查询接口。

// 定义方法,请求服务端页面查询接口
export const pagelist = (page, size, params) =>{
  // 请求服务端的页面查询接口
  // 通过ajax调用获取页面数据
  return http.requestQuickGet(apiUrl + '/cms/page/list/' + page + '/' + size);
}

跨域问题

注意到,上个部分的返回连接中使用到了apiUrl这样一个参数。这是为了解决跨域调用问题的。
如果我们使用页面原本的域名http://localhost:11000/#/xxx,由于浏览器的同源策略,会使得我们无法获取数据库的数据,因为数据库端口是http://localhost:31001/
所以我们需要一个中间件解决端口不一致的问题。

proxyTable

proxyTable的底层使用了http-proxymiddleware,基本原理是用服务端代理解决浏览器跨域。

学成在线项目总结 - Day2 CMS前端开发

除了在获取服务端请求接口的域名中用apiUrl替换之外,我们还要在config/index.js下配置proxyTable,需要把域名中的../api/..这部分去掉。

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

总结

学成在线项目总结 - Day2 CMS前端开发

代码

代码地址
从7.28号开始的commit查看

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!