2.2 单页面应用介绍

什么是单页应用？引用百度百科：单页面应用的优缺点：优点：1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。 2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。缺点：1、首页加载慢 单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则 用户体验不好。2、SEO不友好 SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎 排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。总结：本项目的门户、课程介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发。3 CMS前端页面查询开发 3.1 页面原型 3.1.1 创建页面3.1.1.1 页面结构 在model目录创建 cms模块的目录结构在page目录新建page_list.vue，扩展名为.vue。.vue文件的结构如下：

[mw_shl_code=applescript,true]
      

在页面的template中填写 “测试页面显示...”。 注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。[/mw_shl_code] 3.1.1.2 页面路由

在cms目录下创建page_list.vue页面。现在先配置路由，实现url访问到页面再进行内容完善与调试。 1、在cms的router下配置路由

[mw_shl_code=applescript,true] 
      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}   ]  }]  [/mw_shl_code]

2、在base目录下的router导入cms模块的路由

[mw_shl_code=applescript,true]// // 导入路由规则import HomeRouter from '@/module/home/router'import CmsRouter from '@/module/cms/router' // 合并路由规则concat(HomeRouter)concat(CmsRouter)[/mw_shl_code]

3、测试 启动工程，刷新页面，页面可以外正常浏览，并且看到“测试页面显示...”字样 3.1.2 Table组件测试 3.1.2.1 Element-UI介绍

本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组 件库。Element-UI官方站点： 3.1.2.2 Table组件测试 本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库，我们需要Table 表 格、Form表单 及Pagination 分页组件。 进入Element-UI官方，找到Table组件，拷贝源代码到vue页面中，如下：

[mw_shl_code=applescript,true] // // 导入路由规则 import HomeRouter from '@/module/home/router' import CmsRouter from '@/module/cms/router' // 合并路由规则 concat(HomeRouter) concat(CmsRouter)
     测试：[/mw_shl_code]

通过查看代码发现：

el-table组件绑定了tableData模型数据。

tableData模型数据在script标签中定义。