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

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

Vue.js 使用步骤

Webpack 使用步骤

CMS 前端的开发

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

创建页面原型

页面结构

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

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

• 在page文件夹中添加前端页面
• 在router文件夹中配置路由信息
• 在base文件夹的router添加该路由，这样才能访问相应页面

Table组件添加

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

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

查询功能

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

所有和数据相关的内容都应该写在<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，基本原理是用服务端代理解决浏览器跨域。

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

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

总结

代码

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

本作品采用《CC 协议》，转载必须注明作者和本文链接