想请问一下前辈们,(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项目目录结构
然後在这个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目录作为静态资源目录)
三、 将所有的对egg伺服端的rul requert ,都导向 web\index.html (index.html是extjs5的程式入口) 前面2步我作好了,第三步不太会写,请问有前辈可以指导一下吗?感谢!
以下是我参考github开源项目,node-server side编写的server.js档案内容,启动>>node server.js (express 框架)
感谢各位前辈
可能找到答案了,今天上班来验证一下:
参考网址 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、成功访问首页 ***
@atian25 前辈您好,关於 「你那种方式也可以,不过每次请求都要读取一次文件,最好是要 cache 下。」
我用browser查看了一下,它只有第一次浏览的时候有载入,後面的操作都是ExtJs接手,ExtJs是纯ajax的前端富框架,只访问egg/node的服务,索取数据。
不晓得我有没有不正确的地方,还请前辈指正,感谢您!
你在你代码 fs.readFile
的前面输入条日志,然后每一个用户访问就会加载一次,或者整个页面刷新。
@atian25 好的,我来试试,感谢您!