看了下angular 的route,用它做个非常简单的单页面应用,记录一下. 顺便说下,好处是,页面改变时不需要刷新,而每个页面都展现不同的数据.尤其在使用模板页的时候,非常方便. 快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com…

上面两节我们说了vue的一些概念,其实说的知识一点基础,这部分知识我觉得更希望大家到官网进行学习,因为在这里说的太多我觉得也只是对官网的照搬照抄而已.今天我们来学习一下vue-cli的一些基础知识,并且用vue-cli来搭建一个单页富应用.那么我们首先介绍一下什么是vue-cli? 首先要学习vue-cli,我觉得我们需要知道什么是cli吧!首先回到“原始”前端,什么是前端?无非就是html,css,js,虽然定义有些粗略.但是随着前端的不断发展,前端的内容越来越多,也越来越丰富.前端开发的革命…

写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方式构建单页应用.用到的技术angularjs+webapi+mvc.在网上找到了一些相关的文章,关于anguar的位置也没有一个比较好的一个标准.这里也是抛砖引玉,希望通过讨论,得到一个更好的结构. 项目结构 结构说明: _Layout.cshtml:该文件作为模板文件,这里将应用的js,及css文…

写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片段.完整的代码将在文章下面提供链接. demo 数据来源通过webapi的方式提供.获取对产品的查询,分页,增加商品,删除,修改等操作. webapi public class ProductController : ApiController { private List<Product> ls…

开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项目前后端不分离,而且使用的 js 语法基本上停留在远古时代:ES5甚至更久远以前--) 之前尝试过模拟,但是模拟太痛苦了,而且一堆问题,还不好维护. 于是想着自己用原生 js 写一个简单的单页应用路由吧. 效果 话不多说,先上效果图 源码 gitee:https://gitee.com/chen33…

比如可以在github上打开的网页是这种网址形式的:https://01xunsicheng.github.io/yumeihua/ 1.登录后首页找到 New repository 2.新建一个文件目录 3.成功后点击 setting 选项 4.滑动到底部找到选择主题部分 5.任选一个主题 6.返回后继续点击 setting 按钮 7.滑动到刚才的主题部分 8.哈哈,这个链接就是我们建立的网址啦,打开看看,惊不惊喜,意不意外? 9.传上我们的代码就大功告成啦.…

SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个“原生”应用. 在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,所以当再次刷新页面时新添加的DOM元素会“丢失”,通过单页面应可以很好的解决这个问题 在…

也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序一样.特别是在当今的移动时代,单页程序如果放在移动设备上去浏览就能够拥有像native app一样的体验,也许我们web开发者们应该期待这种技术的大力普及,这样不管前端还是后端都是我们的天下啊,让那些Andrioid和IOS开发者们追赶我们吧!好吧,废话不说了,我们会从0开始搭建这样一个单页的web…

目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(index.html)文件才不至于返回404. nginx 部署一个单页应用很简单: location / { root html; try_files $uri /index.html index.html; } root是web服务器目录,try_files 为文件匹配,先找真实的地址($uri)…

目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(index.html)文件才不至于返回404. nginx 部署一个单页应用很简单: location / { root html; try_files $uri /index.html index.html; } root是web服务器目录,try_files 为文件匹配,先找真实的地址($uri)…

摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应很迅速,跟传统的网页明显不一样,它们是什么呢?这就是单页Web应用. 所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用…

一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于内部系统的开发,有时候也显得笨重了,更不用说开发以上这类运行在互联网上的系统. jQuery由于偏重DOM操作,它的插件体系又比较松散,所以比ExtJS这个体系更适合开发在公网运行的单页系统,整个解决方案会相对比较轻量.灵活. 但由于jQuery主要面向上层操作,它对代码的组织是缺乏约束的.如何在代…

在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方式(jade.路由都需要在服务端编译),我们将用Angular在客户端浏览器上跑起来.PS:在正常的开发流程上,我们可能不会在服务器端创建了一个网站,然后又用SPA重建它.但从学习的角度来说这还不错,这样掌握了两种构建方式. 上一节所有Angular相关的代码都在一个js里面,这不便管理和维护,这一…

React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架是如何构建起一个单页应用的. 前言 首先在学习这门框架前,你需要对以下知识有所了解: 原生JS基础 CSS基础 npm包管理基础 webpack构建项目基础 ES6规范 以上五个知识点也是目前学习其他前端框架所必须了解的前置任务.JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具…

我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型介绍性传送带图片展示区,配有自定义的响应式欢迎信息: □ 一个客户留言区,显示为带标题的图片墙,就像砖垒的一样: □ 一个功能清单,使用大号 Font Awesome 图标: □ 一个带有自定义价目表的注册区: □ 一个带动态滚动的 ScrollSpy 导航条. 1.概况 有一位潜在客户联系我们,她…

问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!如下: 问题原因:刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径.如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访…

注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家参考. 去年,除了翻译<Pro ASP.NET MVC 4>之外,另外还翻译了两本书.一本是<HTML5+CSS3开发实战>(亚马逊.京东),由清华大学出版社出版.另一本是<ASP.NET MVC 4实战>(亚马逊.京东),也由人民邮电出版社出版. CHAPTER 27 第…

若文章中存在内容无法加载的情况,请移步作者其他博客. 简书 CSDN 最近在看 Vue 的时候,别人给我安利了一个国外的小案例,通过 Vue 和 Vuex 来实现一个记事本. 仔细剖析下,发现“麻雀虽小,五脏俱全”,是一个挺适合初学者学习分析的一个案例,所以自己也将自己的学习过程整理,得出本文. 国际惯例,首先感谢原文作者. 参考案例传送门: Learn Vuex by Building a Notes App 之后是内容声明: 原文是2016年 4 月 20 日就出现了的,所以很多小伙伴可能已…

vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使用 vue-router 实现单页路由3.使用 vuex 管理我们的数据流4.使用 vue-resource 请求我们的 node 服务端5.使用 .vue文 件进行组件化的开发PS:本文 node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vue…

问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是因为我打包的时候把所有第三方依赖都打包放进去了:要怎么分离出去呢, 看下面步骤: 一.解决打包后vendor.js 很大,导致上线后页面首次加载速度异常慢: vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于…

前言 之前,我们形成了页面片相关的mvc结构,但是该结构还仅适用于view(页面)级,那么真正的全局控制器app应该干些什么事情呢?我觉得至少需要干这些: 功能点 ① 提供URL解析机制,以便让控制器可以根据URL获得当前是要加载哪个view的实例,比如 http://www.baidu.com/index.html#index http://www.baidu.com/index 若是使用hashChange实现浏览器跳转便直接取出index这个键值: 若是使用pushState方案的话,便需…

前言 首先发一点牢骚,互联网公司变化就是快,我去一个团队往往就一年时间该团队就得解散,这不,公司居然把无线团队解散了,我只能说,我那个去!!! 我去年还到处让人来呢,一个兴兴向荣的团队说没就没了啊!我找谁哭去...... 于是我们团队一个大哥说他去哪哪就解散,我老大说他去哪哪就倒霉,如此看来,不是我们导致团队解散,而是所有的团队变化都快啊...... 于是换了个团队,近几周情绪较低落啊,但是低落也不能不干实事,所以在此收拾心情明天开始好好干事情吧! 在去年的时候,我们初略的学习了下backbon…

常用的需要调到首页来的单页内容,比如企业简介.联系我们等等内容,我们在首页可能都要进行体现.通过常规的方式,包括查阅dede官方论坛资料,都找不到比较合适的答案.今天我们就提供两种方式进行调用. 我们知道,单页内容的模板调用标签是 {dede:field.content/} ,经过试验,在首页使用 {dede:channelartlist } {dede:field.content/} {/dede:channelartlist } 进行调用,即可顺利的调出相关的数据. 但是我们发现,这种调用只…

看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的 时候恶补了一下vue ,觉得还不错,不过想想前端的东西毕竟还是太广博了.我也不知道怎么写反正应用起来有点别扭,就是资料太少了,成型的东西 也太少了,就说说简单的思路吧. vue相当于前段的框架,用于更新数据,废话不多说, 仅仅说应用引入vue 第一,我想做一个单页应用 第二,静态文件又http服务器转发给客户端,而服务端就可以不参数与这些文件的更新,仅仅保持数据通讯即可 第三,假期确实闲着无聊,我是知道react 的,但是纠…

说起文章自定义自段,大家都会想到 wordpress 的自定义字段,确实 wordpress 系统很强大,字段可以很灵活的在后台进行添加与更新,并能够很好的在前台进行调用,对于这点 phpcms v9 就有点弱爆了,phpcms v9 是没有自定义字段这个功能的,只能要我们来进行二次开发. phpcms v9 文章内容的添加与更新选项已经很多了,基本上趋于完善,而关于 phpcms v9 单页 page就显得很简单,使用的字段只有三个:标题.关键词.内容,这往往不够使用,有时候需要添加更多的选项…

以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷. 基于上面一点,SPA相对对服务器压力小. 良好的前后端分离.SPA和RESTful架构一起使用,后端不再负责模板渲染.输出页面工作,web前端和各种移动终端地位对等,后端API通用化. 对前端人员javascript技能要求更高,促使团队技能提升. 缺点: 不利于SEO. 初次…

基于vue.vuex.express.mongodb的一个单页应用,包括前后端,前端主要是使用vue,后端是node的express,数据库是使用的mongodb 1.下载使用 git clone https://github.com/rainbowChenhong/vue-config-demo.git cd vue-config-demo cd node-server npm install //安装后端依赖包 cd config-page npm install //安装前端依赖包 2.启…

VUE2的单页应用框架有人分享了,多页应用框架也有人分享了,这里就分享一个单页和多页的混合应用框架吧,初现雏形,还有很多需要优化和改善的地方... 结尾有github地址. 项目结构 │ ├─build /* webpack的配置目录 */ │ ├─config.js /* 公共常量,用于配置文件 */ │ ├─utils.js /* 工具函数,用于配置文件 */ │ ├─webpack.base.conf.js /* 公共配置文件 */ │ ├─webpack.dev.conf.js /* 开…

路由是一个单页应用的核心,大部分前端框架都实现了一个复杂的路由库,包括动态路由,路由钩子,组件生命周期甚至服务器端渲染等复杂的功能.但是对于前端开发者而言,路由组件的核心是URL路径到函数的映射,了解了这个概念,便可以亲自实现一个简单的路由功能. 1．路由的原理 路由(Route)在前端可以理解为URL路径到函数的映射.当访问到一个特定的路径时执行特定的函数.另一个概念Router,用于管理各种Route,也就是匹配路径到函数的过程. 2．实现路由 Web端实现路由有两种技术模式. 基于Hash…

  本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用. 下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的Seinfeld电视秀的粉丝,那么你一定知道Donna Chang这个名字.Jerry跟Donna见面,Donna其实不是华人,但是却因在谈论其对中国的固有印象比如在针灸上的兴趣,以及偶然的一次单词发音带上了点儿中文口音,她将自己末尾的名字缩成了Chang Donna 在电话上同George的母亲交谈…