[已解決] 想请问一下前辈们,(egg.js )如果我想将所有的 url request访问,都以/Myapp/index.html作为response,请问大概要怎麽写
发布于 5 年前 作者 Solomonqoo 3826 次浏览 来自 问答

想请问一下前辈们,(egg.js )如果我想将所有的 url request访问,都以/Myapp/index.html作为response,请问大概要怎麽写 下面这个写法是node.js + express app.get(’*’, function(req,res){ res.sendFile(__dirname + ‘/MyApp/index.html’); });

我现在想要用egg.js,不晓得大概如何写。因为我前端是用extjs 5,我查看了很多的github开源项目,其中有一个配置我觉得切割的最好。 一、 首先在利用egg-init 脚手架工具建立好相关egg项目目录结构 image.png

然後在这个egg建立起来的项目名称d:\ext5egg\建立web目录,用以作为senchaCmd脚手架工具生成的目录位置(指令如下) D:>sencha -sdk d:\ext-5.1.1-gpl\ext-5.1.1 generate app ext5egg d:\ext5egg\web

二、 将egg的静态资源目录,指向d:\ext5egg\web (意即将整个web目录作为静态资源目录) image.png

三、 将所有的对egg伺服端的rul requert ,都导向 web\index.html (index.html是extjs5的程式入口) 前面2步我作好了,第三步不太会写,请问有前辈可以指导一下吗?感谢!

以下是我参考github开源项目,node-server side编写的server.js档案内容,启动>>node server.js (express 框架) image.png

感谢各位前辈

7 回复

可能找到答案了,今天上班来验证一下:

参考网址 https://blog.csdn.net/qq_34803821/article/details/84654569

koa2实现express4.x res.sendFile()功能 目前炙手可热的2大框架express和koa。Express诞生已有时日,是一个简洁而灵活的web开发框架,使用简单而功能强大。Koa相对更为年轻,是Express框架原班人马基于ES6新特性重新开发的敏捷开发框架,现在可谓风头正劲,大有赶超Express之势。虽然两个框架为同一个团队开发,但是express中的很多函数和用法在koa2中已经不适用了,koa2用更多的中间件来实现原本express自带的功能;

言归正传,首先我们来看一下express4.x res.sendFile()的实现: var app = require(‘express’)(); var http = require(‘http’).Server(app);

app.get(’/’, function(req, res){ res.sendFile(__dirname+’/index.html’); }); http.listen(5566, function(){ console.log(‘listening on *:5566’); });

当我们使用koa2时,我们发现这个函数已经不适用了(包括 res.send()),取而代之的是ctx.response.body,对于要加载的HTML文件,我们采用读取文件再写入到body中的方式实现。

// index.html位于根目录下 router.get(’/’, async(ctx, next) => { var htmlFile = await (new Promise(function(resolve, reject){ fs.readFile(‘index.html’, (err, data) => { if (err){ reject(err); }else{ resolve(data); } }); })) ctx.type = ‘html’; ctx.body = htmlFile; });

//还可以是用ReadStream,更简单 router.get(’/’,(ctx, next) => { ctx.type = ‘html’; ctx.body = fs.createReadStream(‘index.html’); });

  • 其实你可以直接把它丢到 app/view 目录下,作为一个 tpl 来渲染。(你后面应该会需要服务端预渲染一些数据到页面的,如 csrf 之类的)
  • 你是想用 html5 mode 吧?可以参考下 egg 的 vue 的几个实现。
  • 你那种方式也可以,不过每次请求都要读取一次文件,最好是要 cache 下。
  • 注意下 js 和 css 的引入路径(如果你会有构建,替换为 cdn 地址,就无所谓)

@atian25 感谢您的建议。 我有思考过您说的方式,但是观查过几个开源的项目,多数都是将Extjs的项目,放置在app/public目录下,而app/view,则是由egg作ssr,向app/view/index.html作渲染,然後index.html内的script,指向app/public/javascript/bootstrap.js ;

但是随著我的Extjs版本由4升到5,而且目前我规划是采用脚手架工具来创业前後端的目录结构(sencha cmd 、egg-init),以及利用脚手架工具Ext sencha Cmd建立controller、model等等;

还有就是先规划好未来有可能前後端会独立分割成不同的主机,所以看了许多开源的作法,目前这个作法,小弟自认为还满简单、清楚,未来也要分割、搬迁。感谢您的宝贵建议。

以上是我采用这种方式的 思想,谢谢您! 等一下就来实作一下,看是不是ok。

关於:「你那种方式也可以,不过每次请求都要读取一次文件,最好是要 cache 下。」,我弄好後,在用工具trace一下,很感谢您的提醒!

搞定了!但是还要用egg的写法完善一下。

1、egg默认的目录结构与档案config\config.default.js

‘use strict’;

module.exports = appInfo => {

const config = exports = {};

// use for cookie sign key, should change to your own and keep security

config.keys = appInfo.name + ‘_1558503991854_359’;

//配置(修改)靜態資源路徑

config.static = { //solomonqoo say:将默认prefix:’/public’ ,改为’/‘
prefix:’/’, dir:‘D:\ext5egg\web’ //solomonqoo say: ;目录指定为’D:\ext5egg\web’ (记得要使用跳脱字元"") };

// add your middleware config here config.middleware = [];

// add your user config here const userConfig = { // myAppName: ‘egg’, };

return { …config, …userConfig, }; }; ###############

2、egg默认的目录结构与档案app\router.js

const fs = require(‘fs’); //solomonqoo say:我先引入了fs模块。之後在用egg的写法改写 module.exports = app => { const { router, controller } = app; //router.get(’/’, controller.home.index);

router.get(’/’,function(ctx,next){ //solomonqoo say:访问首页,将ctx.type定为html 格式 ctx.type = ‘html’; ctx.body = fs.createReadStream(‘web/index.html’); //solomonqoo say:以read stream的方式,读入indel.html档案到body里 }); };


3、成功访问首页 image.png***

@atian25 前辈您好,关於 「你那种方式也可以,不过每次请求都要读取一次文件,最好是要 cache 下。」

我用browser查看了一下,它只有第一次浏览的时候有载入,後面的操作都是ExtJs接手,ExtJs是纯ajax的前端富框架,只访问egg/node的服务,索取数据。

不晓得我有没有不正确的地方,还请前辈指正,感谢您!

你在你代码 fs.readFile 的前面输入条日志,然后每一个用户访问就会加载一次,或者整个页面刷新。

@atian25 好的,我来试试,感谢您!

回到顶部