Java的新项目学成在线笔记-day2(二）

最新推荐文章于 2023-03-14 21:09:44 发布

weixin_34062329

最新推荐文章于 2023-03-14 21:09:44 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript 前端 ViewUI

原文链接：http://blog.51cto.com/13517854/2334588

本文探讨了单页面应用的优缺点，特别是在用户体验和SEO方面的考量，同时介绍了使用Vue和Element-UI构建CMS前端页面的过程，包括页面结构、路由配置和Table组件的测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.2 单页面应用介绍
什么是单页应用？
引用百度百科：
Java的新项目学成在线笔记-day2(二）
单页面应用的优缺点：
优点：
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模块的目录结构
Java的新项目学成在线笔记-day2(二）
在page目录新建page_list.vue，扩展名为.vue。
.vue文件的结构如下：

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

在页面的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] 
<template> <!‐‐编写页面静态部分，即view部分‐‐> 测试页面显示... </template> <script> /*编写页面静态部分，即model及vm部分。*/ </script> <style> /*编写页面样式，不是必须*/ </style>
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官方站点：http://element.eleme.io/#/zh-CN/component/installation 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)
<template>
  <div>    
<!‐‐相当于编写html的内容‐‐>  
  <el‐table    
   :data="tableData" 
    stripe  
     style="width: 100%"> 
     <el‐table‐column     
   prop="date"     
   label="日期"     
   width="180">  
    </el‐table‐column>   
   <el‐table‐column   
     prop="name"   
     label="姓名"    
    width="180">    
  </el‐table‐column>  
    <el‐table‐column    
    prop="address"     
   label="地址">   
   </el‐table‐column>
</el‐table>  
</div> </template> <script> 
//填写js代码，
实现VM的功能，
创建vue实例 
  export default { 
   data() {  
    return {    
    tableData: [{   
       date: '2016‐05‐02',    
      name: '王小虎',  
        address: '上海市普陀区金沙江路 1518 弄'   
      }, {   
       date: '2016‐05‐04', 
         name: '王小虎',   
      address: '上海市普陀区金沙江路 1517 弄'    
     }, {         
date: '2016‐05‐01',   
name: '王小虎',    
      address: '上海市普陀区金沙江路 1519 弄'   
      }, {   
       date: '2016‐05‐03',       
   name: '王小虎',     
     address: '上海市普陀区金沙江路 1516 弄'     
    }]     
  }   
}
   } </script>
<style>  
/*css样式*/
</style>

测试：[/mw_shl_code]

通过查看代码发现：
Java的新项目学成在线笔记-day2(二）
el-table组件绑定了tableData模型数据。