requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无…

vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SE…

一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给刷新也面.刷新页面后就为变为404页面. 二.原因:nginx 在解析路径的时候:比如: localhost/a     这个路由.其实nginx 在解析路径 时候.为去root根路径下去找a文件.但是找不到.所有就会报错. 但是在单页面应用中localhost/a 其实是 VUE, 和react…

只有两种人最具有吸引力,一种是无所不知的人,一种是一无所知的人 问:学生问追一个女孩总是追不上怎么办?回答:女孩不是追来的,是吸引来的,你追的过程是吸引女孩的过程,如果女孩没有看上你,再追都是没有用的. 也许用更多的时间丰富自己,让自己变得更有内涵,再出现在女孩面前,她就喜欢你了.另外,爱是有缘分的,哪怕再有内涵气质的人,也不能让所有女孩喜欢. 结语:真主安拉,two words -> 看脸(捂脸表情~),至少你可以吸引爬虫@~@ 读在最前面: 本文内容以国内SEO(Search Engine…

遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面 SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么 都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐…

1.下载phantomjs,并配置环境变量为   eg:E:\phantomjs-2.1.1-windows\bin 2.下载angular-seo-server 3.windows下:cmd eg:phantomjs --disk-cache=no D:\nginx-1.10.0\angular-seo-server.js 9090 http:127.0.0.1/fengdai_pc 4.git命令下:eg:curl 'http://localhost:9090/?_escaped_fragm…

苍苍之天不得久视,堂堂之地不得久履 当你小心翼翼的开启服务端渲染的同时,一个问题不得不注意,使用内存模式去保存渲染过的页面,这样服务断掉重启后,缓存也没有了,所以这里我们使用mongdodb进行本地化存储 读在最前面: 1.本文主题:使用mongodb 进行 预渲染的本地化缓存服务 2.主机环境为Windows Server 2012 3.seo是个需要长期投入维护的东西,不可能立杆见效,如果对SEO有强排名要求,可以交由第三方SEO公司进行付费协同优化 来来来,聪敏的小孩 1.安装本地mong…

最近做项目的时候,被要求做seo,由于项目已经开发完毕,且只需首页做seo,所以考虑再三,决定用prerender-spa-plugin结合vue-meta-info来实现首页的seo.如果你的页面是动态的,比如通过v-for或v-if等来动态渲染的dom,则不适合此方法,可以考虑官方的SSR. 代码已更新到github,点击查看 言归正传,第一步:安装prerender-spa-plugin,vue-meta-info npm install prerender-spa-plugin vue-…

vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介…

一.简介 1.何为SEO? SEO(search engine optimization),翻译为搜索引擎优化,是利用搜索引擎的搜索规则来提高在相关搜索引擎的排名以及访问量的方式. 2.目的 为了获取更多的流量.排名以及点击率从而实现品牌的推广以及营销,提高影响力. 二.如何在HTML进行代码优化 1.为什么要进行HTML优化? 我们做SEO,最直接的目的就是想通过搜索引擎获得好的关键词排名和流量,而搜索引擎工作又是依赖它们的"蜘蛛"程序进行的.所谓搜索引擎蜘蛛只是搜索引擎开发的&qu…

设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender-spa-plugin(https://github.com/chrisvfritz/prerender-spa-plugin)形成更优的配合 更多使用介绍:https://zhuanlan.zhihu.com/p/29148760?group_id=890298677627879424…

一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O…

ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei/blog/issues/10 1.ng提供了许多内置的服务,例如常用的$scope\$http\$window\$location等. http:POST请求: var app = angular.module('myApp', ['ng']); app.run(function($http){…

心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无,主要是给团队中实…

直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute("favicon.ico"); routes.MapMvcAttributeRoutes(); //…

说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的模块化,模块间低耦合高内聚,目的就为了团队合作效率: 可扩展性.这个不用说了. 学习成本.一个框架再好,团队新成员难以掌握,学习难度大,结果很容易造成代码混乱. 而根据实际经验来看,方便是必然首要地位,除此之外,应该是代码管理了.团队合作过程中,各种协作,代码冲突等等,都会给一个优秀框架带来各种奇怪…

什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应用或者原生App一样流畅. 有很多JS框架可以用来构建SPA,Ember.js.vue.js.React.Angular等等,甚至即使你用的是jQuery开发,也有相应的框架可以用来开发SPA,比如:page.js. 本文介绍如何用Angular构建SPA,其他的依葫芦画瓢就是了,原理都差不多. (…

Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成了pajax,这里有一个demo,具体怎么用可以点我 cnodejs github想要star更多,需要时间投入开源的怀抱,让我想起了经常在cnodejs上的api,想想是不是可以做点什么,然后结合最近的工作,想起了通过api才做一个web app ,其中有一个做的很不错的,基于VUE的cnodej…

视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, 该项目采用了: ASP.NET Core 2.1 做API Identity Server 4 Angular 6 Angular Material 这个项目比较简单, 适合ASP.NET Core Web API 和 Angular 初学者. 项目最终完成的效果如图: 视频目录 视频专辑地址: h…

net core 2.0 web api + Identity Server 4 + angular 5前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第1部分:http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.cnblogs.com/cgzl/p/7640077.html 第3部…

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

本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构. 简单理解:单页面应用,锚点值切换,一个路由对应一个页面. 路由:此时会创建一个信息保存路由的信息,之后对页面a标签进行操作,会进入路由表中查找与之匹配的路由信息. ----html <div> <a href='#/news'>跳转到news</a> <a href='#/share'>跳转到share</a> <router-view></r…

用angulara.js做单页面开发时,由于不能跨页面取数据,又需要传参,可以采用:$scope.step=0/1来解决这个问题,设置初始值为想要的页面即可.…

公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践资料分享出来的也比较少,略懵,前后花了一番功夫总算完成了.在这里记录下来,做一个总结,也希望能够帮助在做类似工作的朋友少走一点弯路.还是建议需要seo的网站技术选型尽量不要使用angular react一类的单页面框架.如果你和我一样网站做完了发现需要seo,那么往下看吧.如果各位已有更优的方案欢迎…

处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美解决方案 - 简书 https://www.jianshu.com/p/6be9424a358d 入口机器Nginx server { listen 80; server_name www.abc.com ; location / { proxy_set_header Host $host:$pro…

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a…

首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 用NUXT 来做 SSR,作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵循这个库的一些规则就能轻松实现 SSR,原理就是将我们的 html 在服务端渲染,合成完整的 html 文件再输出到浏览器. 详细:https://segmentfault.com/a…

路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. 不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!! 于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧”. ngRoute vs ui.router 首先,无论是使用哪种路由,作为框架额外的附加功能,它们都将以模块依赖的形式被引入,简而言之就…

单页面网站,比如vue.recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面. 但是搜索引擎的爬虫可没有这么智能(实际上google就有这么智能,拿到js文件自动帮你渲染好,但身在CN,将就下百度这个阿斗吧),为了SEO,要想爬虫爬到你的网站的内容,就得先由服务器把页面渲染好后再发送给爬虫,这就尴尬了,传统的服务器渲染是多页面的,一个请求对应一个页面,但SPA不是啊,本来就一个单页面,你叫我写各种路由对应渲染好了再给你?…

Windows Server 2003/2008 单网卡搭建VPN 1.打开[控制面板] --> [管理工具] --> [路由和远程访问] 2.鼠标右击你要管理的电脑 在弹出式菜单中选中[配置并启用路由和远程访问] 3.选中[自定义],因为你只有一块网卡嘛,所以选中第一项或第三项的话,你会得到一个“必须两块网卡”的提示  4.下一步就是选中[VPN访问],然后系统会问你“要不要启动服务” 当然要启动了. 5.启动成功后,会得到如下图所示的情形,鼠标右击 要管理的电脑(这里的[KTVSERVER…