他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)网站有几十个页面，可以做成单页应用么？
· 50 天前 · 1108 次点击
目前准备开发一个对内的网站管理系统，界面风格与一般网站后台一致，上部，左部菜单栏，右部显示内容这种。功能包括各种数据管理，基本上就是一些数据展示和表单页面，还可能涉及到小部分的数据可视化。内容不算复杂，但是页面比较多。整个站点不用考虑移动端，适配到 1360 的笔记本即可，兼容到 IE9+，请问这种类型适合做成单页应用么？（ PS:目前想用 vuejs 来做）
19 回复 &| &直到
20:00:32 +08:00
& &50 天前
Vue 不支持 IE9 吧
后台系统用 SPA 没啥问题，兼容性如果不考虑了直接上吧
& &50 天前
vue2.0 是支持 IE9 的。
& &50 天前
哦看了下 Vue 支持 IE9
那就没啥问题了，如果是我 肯定会选择上 SPA 的，至于是 Vue 还是 react 还是 angular 就看个人选择了
& &50 天前
@ 但是页面这么多，做成一个单页，页面打开的时候会不会很慢呢？
& &50 天前
@ 页面可能有 60+
& &50 天前
很适合，做成单页不是说要一次把所有页面打开，是通过路由动态加载
& &50 天前
对于单页面的认识可能有点歧义~
& &50 天前
@ 我的理解是，因为页面结构都大致相同，当到达不同路由时，请求数据，然后通过 js 动态创建 DOM，这样是可行的吧。
& &50 天前
@ 差不多，半懂不懂的样子。。。
& &50 天前
@ 我司产品好几百个页面呢。。 怕啥，
而且不能说是 js 动态创建 DOM，实际上还是多个 html 片段通过路由拼接的，不过这也不属于单页面的特性。。感觉说不清楚了。。
& &50 天前
没毛病，放心用；
vue 单页做过 80+页面的，也是 80+的路由，合理管理组件就行；
第一次加载是慢点，路由组件可以按需加载
& &50 天前
@ 好的，多谢~
& &50 天前
@ js 再怎么操作最终还是要落实到 HTML 上面去的吧 0.0
& &50 天前
放心用。如果 spa 的话，肯定是要用路由的，路由原理就是根据匹配的 url，加载对应的组件。每个组件都包含自己的 html+css+js。
& &50 天前
@ 没有什么问题，完全可行
& &50 天前
@ 第一次 TP90 是多少哈？
& &50 天前 via iPhone
当然可以啊。最近在写一个上百个页面的。
& &50 天前
对内，圈起来
对内随便啦，反正不关心首屏、体验、后退前进、缓存什么的。有坑留着也没问题。
PC 还是不建议单页的，因为有需要多标签打开的情况。
& &50 天前
问题不大，之前写过一个。vue 全家桶 + express 搭建的
& · & 654 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 54ms · UTC 20:49 · PVG 04:49 · LAX 13:49 · JFK 16:49? Do have faith in what you're doing.当前位置 :
& spa单页 & &共
分类：格式：0 播放
播放 排序:1/ 5相关搜索：spa单页图片SPA养生会所单页印刷CDR模板美容单页spa 单页美容单页美容单页SPA折页图片养生单页英文版按摩单页图片精油开背单页图片美容美体单页设计图片美容单页图片减肥广告 单页图片足浴单页美容单页佐登妮丝开业单页图片美容单页图片美容单页图片水玲珑减肥美容单页图片活动单页图片单页设计足浴dm单页图片化妆品单页图片美容产品活动单页图片经络培训单页美容单页招聘单页图片美博士活动单页图片五一dm单页图片梁子汗蒸单页图片雨莲 单页2迎国 庆迎中秋花之恋单页花之恋 单页图片雨莲 美容生活 单页美容单页图片 1
& 共5页 & 到第
千图网是专注免费设计素材下载的网站,提供spa单页,spa单页图片,spa单页素材, spa单页模板等免费下载服务!暂无数据暂无数据spa单页图片素材免费下载，千图网为中国设计师们免费提供包括，，。
登录千图网
或该帐号还未注册，该帐号还未注册，勾选代表你同意&
添加到收藏夹
您还未创建收藏夹，点击创建增加新收藏夹吧！
您创建的收藏会显示在此处
创建到收藏夹
QQ客服: 工作日：9:00 - 22:00节假日：9:00 - 18:00电话客服: 400-9987011工作日：9:00 - 18:00节假日：9:00 - 18:00反馈时告知客服这串数字哦微信扫码领取大礼包欢迎回来3天原创VIP
（20次/天）已到账
欢迎来到千图网您还有 1 项新手任务未完成完成任务可获得积分1、单页面应用（SPA）的概念：
1、single-page application是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。
2、简单来说SPA的网页只有一个页面，而这个网页的实际方式要能够回应使用者所使用的各种装置并且赋值使用者在电脑上使用软件的体验，让使用者可以更容易和有效的使用网站。按照正常情况下，我们会在一个页面中链接到其他的很多个页面，进行页面的跳转，但是如果使用单页面应用的话，我们始终在一个页面中，通常使用a标签的描点来实现。
2、作用（好处）
1、由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。得益于Ajax，可以实现无跳转刷新，由于与浏览器的history机制，可以使用hash的b变化从而可以实现推动界面变化。
2、只要使用支持HTML5和CSS3的浏览器就可以执行复杂的SPA,因此，开发人员不必为了写SPA网站而特别学习另一个开发方式，而使用者也不额外安装软件，所以，让开发SPA网页程序的入门和使用门槛降低不少。
以SPA方式开发的网站不容易管理也不够安全。
因为没了一页一页的网页给搜索引擎的爬虫来爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花费额外的功夫。
因为没有换页，需要自定义状态来取代传统网页程序以网址来做判断。
4、实现SPA
1、处理#后面的字符
2、局部刷新
1、#后面的字符
后面的字符，其实是location对象的hash属性的值，即是说，我们可以轻松拿到这个#后面字符的变化值，代码如下：
var hash = location.
既然值能拿到，就可以直接通过一个a标签跳转。
&a href="#luoxuan"&罗旋&/a&;
&a href="#xiexing"&谢星&/a&;
&a href="#luoli"&罗粒&/a&;
&a href="#luobo"&罗卜&/a&;
2、局部刷新（Ajax）
代码实现：
window.addEventListener('haschange',function(){
= document.location.
switch(hash){
case '#luoxuan':
url:'./json/luoxaun.json',
success:function(){
document.write("罗旋是小仙女！！！")
case '#xiexing':
url:'./json/xiexing.json',
success:function(){
document.write("谢星是个帅哥哥哦~~~")
阅读(...) 评论()移动前端开发-单页应用(spa)模型_Javascript教程_动态网站制作指南
移动前端开发-单页应用(spa)模型
来源：人气：2470
移动前端开发-单页应用(spa)模型一门新的技术诞生总会引来一番争议，单页Web应用程序也不例外，其最大的优势在于用户体验，对于内容的改动不需要加载整个页面；对服务器压力很小，消耗更少的带宽，与面向服务的架构更好地结合。使用HTML++Scrt编写应用程序，能使更多的开发者都加入到程序开发的行列。单页面应用是指用户通过浏览器加载独立的HTML页面并且无需离开此导航页面，这也是其独特的优势所在。对用户操作来说，一旦加载和执行单个页面应用程序通常会有更多的响应，这就需要返回到后端Web服务器，而单页面应用为用户提供了更接近一个本地移动或桌面应用程序的体验。单页Web应用程序的优点：首先，最大的好处是用户体验，对于内容的改动不需要加载整个页面。这样做好处颇多，因为数据层和UI的分离，可以重新编写一个原生的移动设备应用程序而不用（对原有数据服务部分）大动干戈。单页面Web应用层程序最根本的优点是高效。它对服务器压力很小，消耗更少的带宽，能够与面向服务的架构更好地结合。在艾伦项带领的项目组工作也有一年多了，他实现了一套非常完整的单页应用框架。非常复杂，到今天我也还没有理清里边的所有实现。下面请允许我展示一下这个应用的结果看起来和原生应用程序没有什么两样吧。于是呢，我就做了一个简单的模型，和往常一样，只是用来演示原理。下面发一下我的模型图：虽然样子是丑陋了一点，但是用来学习刚刚好，下面看一下具体的代码：/* * Swipe 2.0 * @author bjtqti * @description 基于javascript的单页应用 * Copyright 2014, MIT License **/function Swipe(container, options) {
"use strict";
// quit if no root element
if (!container)
options = options || {};
this.container =
//页面数据
this.pages = options.pages||[];
this.pointer = {};
//设备屏宽
this.screenWidth = 640;
this.init();}Swipe.ototype = {
init : function(){
var maxLen = this.pages.
var index =
Number(localStorage.getItem('index'))||0;
if(!maxLen)
//创建页面基础元素
this.createLeftButton();
this.createSwipeWrap();
this.createRightButton();
//缓存页码索引信息
this.curIndex =
this.maxLen = maxL
this.pointer.cur = this.createPage(index);
if(maxLen ==1)
switch(index){
next = this.createPage(index+1);
case maxLen -1:
prev = this.createPage(index-1);
prev = this.createPage(index-1);
next = this.createPage(index+1);
this.pointer.next =
this.pointer.prev =
next && this.move(next,this.screenWidth);
prev && this.move(prev,-this.screenWidth);
//创建翻页容器
createSwipeWrap : function(){
var ele = document.createElement('ul');
ele.className = "xut-container";
this.container.appendChild(ele);
this.box =
//创建左翻页按钮
createLeftButton : function(){
var that =
this.createBtn({
name : "xut-left",
text : "&",
: function(){
that.prev();
//创建右翻页按钮
createRightButton : function(){
var that =
this.createBtn({
name : "xut-right",
text : "&",
: function(){
that.next();
//创建按钮
createBtn : function(options){
var ele = document.createElement('div');
ele.className = options.
ele.innerHTML = options.
this.container.appendChild(ele);
ele.addEventListener('click',options.fn,false);
//创建页面
createPage : function(index){
var li = document.createElement('li');
li.setAttribute('class','xut-flip');
li.innerHTML =
//这里可以进行自由扩展,数据从this.pages添加
this.box.appendChild(li);
prev : function(){
if(this.curIndex & 0){
var prev = this.pointer.
= this.pointer.
this.curIndex--;
//当前页移到右边
this.slide(cur,this.screenWidth);
//上一页移到中间
this.slide(prev,0);
//清除下下一页
this.destory(this.pointer.next);
//更新标记
this.pointer.next =
this.pointer.cur =
//预创建上一页
if(this.curIndex -1 & -1){
this.pointer.prev = this.createPage(this.curIndex-1);
this.move(this.pointer.prev,-this.screenWidth);
this.pointer.prev =
localStorage.setItem('index',this.curIndex)
next : function(){
if(this.curIndex & this.maxLen-1){
var next = this.pointer.
= this.pointer.
this.curIndex++;
//当前页移到左边
this.slide(cur,-this.screenWidth);
//下一页移到中间
this.slide(next,0);
//清除上上一页
this.destory(this.pointer.prev);
//更新标记
this.pointer.prev =
this.pointer.cur =
//预创建下一页
if(this.curIndex+1 & this.maxLen){
this.pointer.next = this.createPage(this.curIndex+1);
this.move(this.pointer.next,this.screenWidth);
this.pointer.next =
localStorage.setItem('index',this.curIndex)
slide : function(ele,distance){
var time = 300;
ele.style['webkitTransitionDuration'] = time+'ms';
this.move(ele,distance);
move : function(ele,distance){
ele.style['-webkit-transform'] = 'translate3d('+distance+'px, 0, 0)';
destory : function(ele){
this.box.removeChild(ele);
}}这段代码没有做滑动翻页的模拟，为的尽量简化。如果大家有兴趣，可以下载下来演示一下。https://github.com/bjtqti/xxt/tree/master/spa
优质网站模板