澳门新葡萄京官网注册 2

澳门新葡萄京官网注册狗屎一样的React(第七节,前端路由这个玩意)

在首页使用了很多布局之后,加载首页速度很慢,这个时候就需要生成静态页来提升网站首页的访问速度!但是之前使用的是www.xx.com访问,现在变成www.xx.com/index.html 结果就不一样了。

本来这一节是想按着顺序,从前面的react首页结束,开始说React-router这一节的,但我觉得很又必要大概说一下,我们为什么要使用前端路由,关于前端路由我们所能想到的一些知识点。

#运行用户
user www;
#启动进程,通常设置成和cpu的数量相等
worker_processes 1;

这个时候就需要隐藏index.html,接着往下看:

1、先说说后端路由

#全局错误日志及PID文件
error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

首先我们需要删除首页的index.php的文件:

说起前端路由,我们肯定会想到后端路由,我们以前经常看见访问一个网址,大概路径是这个样子的,比如:

#工作模式及连接数上限
events {
use epoll; #epoll是多路复用IO(I/O
Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
worker_connections 1024;#单个后台worker process进程的最大并发链接数
#澳门新葡萄京官网注册 , multi_accept on;
}

<?php

/**
 * @version        $Id: index.php 1 9:23 2010-11-11 tianya $
 * @package        DedeCMS.Site
 * @copyright      Copyright (c) 2007 - 2010, DesDev, Inc.
 * @license        http://help.dedecms.com/usersguide/license.html
 * @link           http://www.dedecms.com
 */
if (!file_exists(dirname(__FILE__) . '/data/common.inc.php')) {
    header('Location:install/index.php');
    exit();
}
//自动生成HTML版
if (isset($_GET['upcache']) || !file_exists('index.html')) {
    require_once (dirname(__FILE__) . "/include/common.inc.php");
    require_once DEDEINC . "/arc.partview.class.php";
    $GLOBALS['_arclistEnv'] = 'index';
    $row = $dsql->GetOne("Select * From `dede_homepageset`");
    $row['templet'] = MfTemplet($row['templet']);
    $pv = new PartView();
    $pv->SetTemplet($cfg_basedir . $cfg_templets_dir . "/" . $row['templet']);
    $row['showmod'] = isset($row['showmod']) ? $row['showmod'] : 0;
    if ($row['showmod'] == 1) {
        $pv->SaveToHtml(dirname(__FILE__) . '/index.html');
        include(dirname(__FILE__) . '/index.html');
        exit();
    } else {
        $pv->Display();
        exit();
    }
} else {
    header('HTTP/1.1 301 Moved Permanently');
    header('Location:index.php');//改成 header('Location:/');
}
?>

www.xx.com/index

#设定http服务器,利用它的反向代理功能提供负载均衡支持
http {
#设定mime类型,类型由mime.type文件定义
include /etc/nginx/mime.types;
default_type application/octet-stream;
#设定日志格式
access_log /var/log/nginx/access.log;

澳门新葡萄京官网注册 1

www.xx.com/index.do

#sendfile 指令指定 nginx 是否调用 sendfile 函数(zero copy
方式)来输出文件,对于普通应用,
#必须设为 on,如果用来进行下载等应用磁盘IO重负载应用,可设置为
off,以平衡磁盘与网络I/O处理速度,降低系统的uptime.
sendfile on;
#tcp_nopush on;

然后设置iis或者Apache :

www.xx.com/index.action

#连接超时时间
#keepalive_timeout 0;
keepalive_timeout 65;
tcp_nodelay on;

澳门新葡萄京官网注册 2

www.xx.com/index.jsp

#开启gzip压缩
gzip on;
gzip_disable “MSIE [1-6].(?!.*SV1)”;

接着我们在访问网页www.xx.com 这个时候就没有转跳到www.xx.com/index.html 。

www.xx.com/index.html

#设定请求缓冲
client_header_buffer_size 1k;
large_client_header_buffers 4 4k;

希望以上的文章可以解决大家的问题!

等等这些,其实都大概可以看出后端路由的影子,这些平台或者网站,你几乎每添加一个展示页面,都需要后台代码的支撑,或者需要后台架构某些配置项的支撑,否则你添加的页面是无法展示到客户眼前的。

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

文章由爱资料原创本文地址:

而且既然是后台路由,那么我们展示的每个url路径肯定是受后台控制的,言外之意就是我们本来要访问index.html,但当用户输入www.xx.com/index.html的时候,后台是可以做拦截处理的,后台甚至可以把路径进行重定向,结果给我们展示了list.html;所以只有后台给我们拦截以后再放开这个拦截,前端的页面才得以展示;这样我们就可以得出,几乎每个页面的展示都要受网速的限制,受我们后台架构是否足够优化的限制,我们大多数页面都需要用ajax来获取数据来进行展示,但当我们点击浏览器的回退按钮的时候,经常会出现这样一个bug,前一个页面的ajax数据就不见了,不得不重新获取,而且网页回退,你会发现你的js逻辑会重新走一遍,但如果前一个页面因为我们用js逻辑修改过html内容,html是不会重新渲染的。说得更直白点就是,比如我们有一个div,我们用js给他动态添加了一个自定义属性aname=”1″
,当点击回退按钮的时候,aname=“1”还在,html内容不会重新渲染。

#设定负载均衡的服务器列表
upstream mysvr {
#weigth参数表示权值,权值越高被分配到的几率越大
#本机上的Squid开启3128端口
server 192.168.8.1:3128 weight=5;
server 192.168.8.2:80 weight=1;
server 192.168.8.3:80 weight=6;
}

2、前端路由又有哪些好处?

server {
#侦听80端口
listen 80;
#定义使用www.xx.com访问
server_name www.xx.com;

刚才我们说了后端路由,其实后端路由有点原始,甚至是好几年前的前后台不分工的情况下很常用的,那个时候天还是蓝的没有什么雾霾,苹果也是用来吃的,人们对页面要求度也是不高的,更多的是关注后台逻辑功能,慢慢的互联网行业起来了,人们发现前台页面是否友好,效果是否绚烂,色觉是否舒服,交互是否顺畅,流程是否简约,加载速度是否够快,都在一定程度上决定着你这个网站在用户心中的分值。

#设定本虚拟主机的访问日志
access_log logs/www.xx.com.access.log main;

那么前端路由给我们带来什么好处呢?

#默认请求
location / {
root /root; #定义服务器的默认网站根目录位置
index index.php index.html index.htm; #定义首页索引文件的名称

(1)
有了前端路由,其实更利于我们做前后端分离开发,后端写他们自己的后台逻辑,给我们提供一些跨域的接口,或者是我们本地模拟跨域,后台先给我们准备一些测试数据,这样将更有利于我们前端开发;以前开发前端,总是等待后台给添加数据,这样无形中造成了时间成本;等项目开发完成,前端代码可以部署在独自一台服务器下,也可以再和后台代码进行整合,部署在同一台服务器下;

fastcgi_pass www.xx.com;
fastcgi_param SCRIPT_FILENAME
$document_root/$fastcgi_script_name;
include /etc/nginx/fastcgi_params;
}

(2)前端路由就是前端控制跳转,这个页面的展示速度不再受后台控制,甚至比我们刚学html的时候,通过a标签的href跳转更快;

# 定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /root;
}

(3)前端路由虽然表现的和后端路由也比较相似,但很多时候通过前端路由我们可以做模块化思路开发,让思路变得更清晰,而且使用了react以后你会慢慢发现,我们甚至可以多个人协同完成同一个页面的内容,因为我们可以每人完成一个小组件;

#静态文件,nginx自己处理
location ~ ^/(images|javascript|js|css|flash|media|static)/ {
root /var/www/virtual/htdocs;
#过期30天,静态文件不怎么更新,过期可以设大一点,如果频繁更新,则可以设置得小一点。
expires 30d;
}
#PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI默认配置.
location ~ .php$ {
root /root;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME /home/www/www$fastcgi_script_name;
include fastcgi_params;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic “NginxStatus”;
auth_basic_user_file conf/htpasswd;
}
#禁止访问 .htxxx 文件
location ~ /.ht {
deny all;
}

(4)前端路由形式也很多,现在比较提倡app单页开发,所以前端路由用于单页开发以后,你会发现点击浏览器回退按钮后,之前的ajax获取的数据仍然是存在的,为我们节省了前后台数据交互

}
}

其实好处那么多,我更看中第一条,前端可以脱离开后台架构的路由控制

3、前端路由有哪些形式?

前端路由形式也很多,这些都是架构决定的,换言之就是写前端框架的人的思路。我们很多时候总会羡慕别人发家致富,很多时候我们也惊奇的发现别人起家的思路我们也曾有过,所以不管在哪个时代,有思路的人值得我们羡慕,将思路可以很好的运用的人更值得我们崇拜。

(1)
之前用过jquery-mobile的时候,其实整个APP会在一个大htm里来开发,每个小页面在一个小div里进行开发,当前需要展示那个div,就把其他div都隐藏,把当前这个div进行展示。因为大部分数据是需要后台获取的,所以加载页面的时候页面里可能更多的是一些空的dom元素,这样也不会太影响页面的加载速度;当我们点击切换到其他页面的时候再进行数据获取;当我们再切换到其他页面的时候,这个页面的数据已经被缓存,达到了一个很好的单页面APP的效果。

这种思路,首页路径展示为www.xx.com/index.html,列表页(其实也就是列表那个div)路径展示为www.xx.com/index.html#list,其实列表页的那个div的id就是list,对应着的详情页路径展示为www.xx.com/index.html#detail,所以详情页的对应div的id页应该是detail

(2)react-router
同样也是单页面开发的前端路由,只不过时代进步了,他更多的体现出了模块化区分开发的思路。每个页面就不是一个div了,而且采用es6的模块化,每个所谓的页面变成了独立的模块,后续我们会说到react-router使用后,每个页面的展示思路;

(3)
接触过angularjs的小伙伴们会发现,前端路由可以指配html页面,根据angular前端路由来控制哪个路径下应该由哪个html的内容渲染到我们的主页面上;

其实说了那么多,小伙伴们可能觉得很麻烦,我还不如准备好多html,自己来控制a标签的href跳转呢。这就看你的项目更适合哪种情况,你杀死了敌人,不会有首长因为你使用的是菜刀而不是大炮而批评你的,大炮虽然更先进,但需要花时间去学习如何使用,会消耗炮弹,需要运送费用等等,所以我们的开发中,没有最适合,只有更合适。

4、绝对路径的base标签

既然说到前后断分离开发,那么就会有一个绝对路径和相对路径的问题。以前做jsp项目开发的时候,大部分时候使用的绝对路径,后来做分离开发使用的是相对路径,但上线要和后台代码部署到同一个tomcat下,结果我的相对路径就出了问题,很不好改。html中有base这个标签,base标签会有href属性,这个是页面的基准路径。举个栗子,比如我们给页面设定
base href=”www.xx.com/”  ,然后页面引入css的时候 link rel=”stylesheet”
href=”style/demo.css”
 ,其实最终你的这个demo.css展示的路径就是www.xx.com/style.demo.css了,是不是很好用呢。

相信随着时间和技术的发展,前端路由以后一定会出现更多种形式,而且react-router的各个版本使用姿势都不一样。我们期待着以后的架构将会学习成本越来越低,功能越来越强悍,我们也期待着自己懂得越来越多,但事情往往事与愿违,我们总是需要不断得跟随着先行者们去学习。前端框架不断得出现,先行者们不断得发大招,我们不经意间就被秒杀得体无完肤,但却也是更多得无奈,还是得勇敢得站起来,去学习,去进取以避免被快速得技术发展所淘汰。我还是希望能给更多得小伙伴带来一些易学易懂得东西,喜欢得小伙伴请关注下一节:狗屎一样的React(第八节,React-router
4.0的使用姿势)

发表评论

电子邮件地址不会被公开。 必填项已用*标注