路由的优化
来源:互联网 发布:淘宝怎么卖二手手机 编辑:程序博客网 时间:2024/06/05 20:13
开发单页面应用时,url会出现#号字符。为了简洁设计,解决方案:
$locationProvider.html5Mode(true)
然而,会出现一种情况,便是点击路由后,刷新页面报404错误。
原因 (查资料):
- 1. 用户如果是先访问 首页(http://onbook.me),然后再跳转到 页面(http://onbook.me/book),则这个跳转是由AngularJS前台管理的URL,访问是正常的。
- 2. 用户直接访问 页面(http://onbook.me/book)时,请求是先被提交到了WebServer后台,后台路由没有对应页面(http://onbook.me/book)的路由管理,就会出现404的错误。
因此,此处有为2种解决方案 (查资料):
- 1. 静态网站:纯前台网站(JS+HTML+CSS),通过Nginx提供Web服务。
- 2. 动态网站:前台(JS + HTML + CSS) + 后台Node.js提供Web服务。
1.静态网站,我们需要修改的地方包括3个文件
2.动态网站的解决方案
- index.html : ng-app的定义文件
- app.js : 对应ng-app的控制文件
- nginx.conf : nginx的网站配置文件
编辑 index.html,增加base标签。
<html lang="zh-CN" ng-app="book"><head> <base href="/">// 省略代码</head>编辑app.js,增加 $locationProvider.html5Mode(true);
book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) { $routeProvider .when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'}) .otherwise({redirectTo: '/'}); $locationProvider.html5Mode(true);}]);编辑nginx的配置文件,增加try_files配置。
server { set $htdocs /www/deploy/mysite/onbook; listen 80; server_name onbook.me; location / { root $htdocs; try_files $uri $uri/ /index.html =404; }}
2.动态网站的解决方案
- index.html : ng-app的定义文件
- app.js : 对应ng-app的控制文件
- server.js : Express框架的路由访问控制文件
index.html 和 app.js两个文件修改,同静态网站的解决方案。动态网站,一般不是通过Nginx直接路由,而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。
打开Express框架的路由访问控制文件server.js,增加路由配置。
app.use(function (req, res) { console.log(req.path); if(req.path.indexOf('/api')>=0){ res.send("server text"); }else{ //angular启动页 res.sendfile('app/index.html'); }});
阅读全文
0 0
- 路由的优化
- thinkphp 路由优化
- 优化 ExpressRoute 路由
- [转]ASP.NET MVC路由设置优化的两个方法
- 谈下路由建站的速度优化,令人满意
- 一步步构建iOS路由(自己已优化出新的版本)
- 路由查找算法优化心得
- 【路由】不同的路由协议
- 路由的几个基本概念-直连路由/网关路由/主机路由/网络路由/动态路由/静态路由/默认路由
- 路由的几个基本概念-直连路由/网关路由/主机路由/网络路由/动态路由/静态路由/默认路由
- 互联网IP路由的逐跳全局最优化原则-Dijkstra算法证明
- Linux 3.6版本内核后关于路由cache的一个优化
- 自学Node.js 三:优化路由逻辑
- thinkphp3.2.3中设置路由,优化url
- 分享codeigniter 路由(URL)终极优化
- 静态路由 | 动态路由 | 默认路由的配置方法
- 路由协议之间 路由的重新分配
- 有类路由协议的路由通告
- 【CS 2833】奇怪的梦境(拓扑排序top_sort)
- <10>——Regular Expression Matching
- dubbo系统学习(一)-dubbo入门实例
- 51nod 1270 数组的最大代价
- 【JavaScript】找出数组中两数之和为指定值的所有整数对
- 路由的优化
- java >; 转义成 >
- bzoj 4033(树形dp)(背包dp)
- 深入理解Java之线程池
- 下拉刷新上拉加载更多
- linux 部分常用技巧
- java方法练习
- 【BZOJ3997】【TJOI2015】组合数学
- LintCode 字符串置换 python