专栏首页云前端前端开发中的几种资源重定向方法

前端开发中的几种资源重定向方法

在前端开发,尤其是开发SPA(单页应用)的时候,一个常见的需求是在调试和测试环境下搭建服务器实现资源的重定向。简单说就是静态资源直接返回,前端路由统归index.html,而ajax请求都指向入口请求地址等

嗯,但是为嘛需要这么做呢...... 这道题面试中也真有很多稀里糊涂做完类似的项目,却答不上来的小伙伴,那你自个儿寻思去吧~

简单梳理一下就会发现,我们林林总总的新老项目中,根据前端开发阶段技术选型的不同,面对同样的重定向问题,会有几种不同的解决方法,本文就来简单梳理一下:

1. Apache + PHP

一些老项目中,直接编写php提供调试假数据,用apache服务器搭配php模块的方法提供环境,这种情况下就要采用.htaccess文件:

  • .htaccess主要的作用有:URL重写、自定义错误页面、MIME类型配置以及访问权限控制等
  • .htaccess的用途范围主要针对当前目录
# [apache服务器的 httpd.conf]   #开启模块
   LoadModule rewrite_module modules/mod_rewrite.so
   
    ...    
   #建一个虚拟主机目录
   Listen 8081
   NameVirtualHost *:8081    
      <VirtualHost *:8081>
     ServerName localhost:8081
     DocumentRoot  "X:/path/to/your/dir"
     <Directory "X:/path/to/your/dir">
       Require all granted
       AllowOverride All      
         </Directory>
   </VirtualHost>

# [项目目录的 .htaccess]
   
   #开启重定向
   RewriteEngine On
   
   #遇到已有的文件或目录就直接访问
   RewriteCond %{REQUEST_FILENAME} !-f    
    RewriteCond %{REQUEST_FILENAME} !-d    
   
    #根据规则分别重定向前后端路由
   RewriteRule !^ajaxprefix /index.html    
    RewriteRule ^ajaxprefix.* /index.php

2. PHP Built-in web server

对上述老项目稍加改造,就可实现项目中自启动一个测试服务器;方法是利用 PHP 5.4.0 起提供的一个内置的Web服务器(Built-in web server)

  • URI请求会被发送到PHP所在的的工作目录(Working Directory)进行处理,除非你使用了-t参数来自定义不同的目录
  • 如果请求未指定执行哪个PHP文件,则默认执行目录内的index.php 或者 index.html。如果这两个文件都不存在,服务器会返回404错误
  • 启动这个Web Server时,如果指定了一个PHP文件,则这个文件会作为一个“路由”脚本,意味着每次请求都会先执行这个脚本。如果这个脚本返回 FALSE ,那么直接返回请求的文件(例如请求静态文件不作任何处理)。否则会把输出返回到浏览器

这种方法摆脱了对外部apache的依赖,但仍要求机器上装有php环境

//Gruntfile.js
php: { //此处利用了grunt-php这个封装
   dist: {
       options: {
           hostname: 'localhost',
           port: 8081,
           base: "path/to/your/dir",
           keepalive: false,
           silent: true,
           open: 'index.html',
           router: 'router.php' //“路由”文件
       }
   }
},

# router.php
<?php

$uri = $_SERVER["REQUEST_URI"];

//静态资源直接访问
if (preg_match('/\.(?:png|jpg|jpeg|gif|css|js)$/i', $uri)) {   
 return false;
}

//根据规则分别重定向前后端路由
if (preg_match('/^\/ajaxprefix\//', $uri)) {	
    include_once __DIR__.'/path/index.php';
} else {	
    include_once __DIR__.'/path/index.html';
}
   
?>

3. webpack dev server + express

红红火火恍恍惚惚的流行开发工具webpack,就不须多说了,直接看关键配置:

  • historyApiFallback的意思是当路径匹配的文件不存在时不出现404, 而是定向到配置的选项historyApiFallback.index对应的文件(或直接到index.html),也就实现了前端重定向
  • proxy选项代理请求到一个http服务器(用express配置的ajax响应),从而实现ajax请求重定向
  • 该组合一般用于开发时调试
//webpack.config.js
devServer: {
   port: serverConfig.port,
   hot: true,
   contentBase: [
     resolve(__dirname, 'path/to/dir'),
     serverConfig.mock_path
   ],
   watchContentBase: true,
   publicPath: '/',
   stats: {
     colors: true,
   },
   proxy: {
     [`ajaxprefix/*`]: `http://mock.test.com`
   },
   historyApiFallback: true
 },

4. nodejs + express

在一些小项目中,或对webpack项目的发布目录预览时,直接使用nodejs简单达到目的也是可以的:

const app = new express;
app.set('view engine', 'html');
app.set('views', __dirname + '/');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(express.static(dir, {index: 'index.html'}));

//重定向前端路由等
app.use(new RegExp('^(?!\\ajaxprefix)'), (req, res) => {
 res.sendFile(
    join(__dirname, './path/to/index.html')
   );
});

const server = http.createServer(app);

//对ajax请求应用规则
app.get('path', (res, req)=>{});
app.post('path', (res, req)=>{});...

-------------------------------------

有前端开发的简历欢迎推荐!可在文章底部留言或在公众号直接发消息,谢谢~

本文分享自微信公众号 - 云前端(fewelife),作者:lua

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-05-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 处理 JavaScript 中的非预期数据

    原文:https://dev.to/khaosdoctor/dealing-with-unexpected-data-in-javascript-2kda

    江米小枣
  • 富文本编辑器开发简介

    富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。

    江米小枣
  • [译] 更可靠的 React 组件:提纯

    原文摘自:https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-c...

    江米小枣
  • 从ORA-01950报错我们能了解的知识

    开发同学提了一个问题,说有个性能测试的数据库,正在准备数据,使用如下批量操作的语句,报错ORA-01950,无法执行插入,

    bisal
  • 如何在SAP gateway系统配置路由到后台系统的OData服务路径

    看这张架构图,SAP Gateway系统也叫frontend系统,通过RFC远程调用SAP后台系统的OData服务实现。

    Jerry Wang
  • SAP官网发布的react教程

    大家学习React的时候,用的是什么教程呢?Jerry当时用的阮一峰博客上的入门教程,因为React使用的JSX语法并不是所有的浏览器都支持,所以还得使用bro...

    Jerry Wang
  • Hystrix是个什么玩意儿

    Hystrix是Netflix的一个开源框架,地址如下:https://github.com/Netflix/Hystrix

    xcbeyond
  • MyBatis源码解读(2)——MapperProxy

    SqlSession可以说是整个MyBatis的重中之重,在SqlSession中涉及到前一篇四大对象:Executor、StatementHandler、Pa...

    用户1148394
  • vSphere集成Docker容器

    VMware更新了其核心虚拟化平台——vSphere。其中一个关键的改进是开发人员现在可以在Docker容器中创建应用程序,然后这些容器可以在部署在vSpher...

    SDNLAB
  • Python学习之类

    之前写的博客,都是借鉴别的博文或者是环境的配置,没有自己的东西,掌握的很少。以后的博文,我都会尽力加上一些自己的东西。现在开始进入我的python世界吧!

    py3study

扫码关注云+社区

领取腾讯云代金券