問(wèn)題描述

問(wèn)題解答

當(dāng)我們將模板的后綴都改為html的時(shí)候，訪問(wèn)頁(yè)面發(fā)現(xiàn)了報(bào)錯(cuò)，很明顯是后綴配置不正確。

{ 'message': 'Could not render view 'index'. Tried locating view file @ '/Users/sun.huajie/Documents/Workspace/node_sails/myapp/views/index'. Layout configured as 'layout', so tried using layout @ '/Users/sun.huajie/Documents/Workspace/node_sails/myapp/views/layout')', 'code': 'E_VIEW_FAILED', 'status': 500, 'view': { 'name': 'index', 'root': '/Users/sun.huajie/Documents/Workspace/node_sails/myapp/views', 'defaultEngine': 'ejs', 'ext': '.ejs' }}

我去查找了Could not render view這段代碼，發(fā)現(xiàn)多出來(lái)一個(gè)節(jié)點(diǎn)view，這時(shí)候我尋找一個(gè)關(guān)鍵字defaultEngine來(lái)進(jìn)行了全文搜索，找到了一處定位。

// view if (!view) { view = new (this.get(’view’))(name, { defaultEngine: this.get(’view engine’), root: this.get(’views’), engines: engines }); . . .

按照上面的代碼來(lái)看，說(shuō)明default Engine是從view engine的配置中獲取的。那我們?cè)倮^續(xù)搜索view engine。找到如下代碼：

// Configure views if hook enabled if (sails.hooks.views) {// TODO: explore handling this differently to avoid potential// timing issues with view engine configurationsails.after(’hook:views:loaded’, function() { var View = require(’./view’); // Use View subclass to allow case-insensitive view lookups expressApp.set(’view’, View); // Set up location of server-side views and their engine expressApp.set(’views’, sails.config.paths.views); // Teach Express how to render templates w/ our configured view extension expressApp.engine(sails.config.views.engine.ext, sails.config.views.engine.fn); // Set default view engine sails.log.verbose(’Setting default Express view engine to ’ + sails.config.views.engine.ext + ’...’); expressApp.set(’view engine’, sails.config.views.engine.ext);});

通過(guò)上面的代碼我們可以看出 這個(gè)view engine實(shí)際上是來(lái)自sails.config.view.engine.ext的配置，跟我們的配置文件路徑一樣。

/Users/sun/Documents/Workspace/node_sails/myapp/config/view.js

這個(gè)時(shí)候我們?cè)谶@代碼里打一個(gè)斷點(diǎn)

console.info(sails.config);

然后奇妙的事情出現(xiàn)了

... views: { engine: { name: ’ejs’, ext: ’ejs’, fn: [Function] }, layout: ’layout’, partials: false },...

看來(lái)這就是對(duì)應(yīng)的配置，但是當(dāng)我打開(kāi)這個(gè)文件的時(shí)候發(fā)現(xiàn)里面的engine是這樣定義的

engine:’ejs’

wtf！，這是什么情況，為什么格式不對(duì)。我以為會(huì)是json的字符串。

然后大膽的來(lái)調(diào)整一下吧

engine: { name:’ejs’, ext:’html’ },

再次輸出就得到了正確的配置改變

{ engine: { name: ’ejs’, ext: ’html’, fn: [Function] },

這個(gè)時(shí)候我們滿懷信心重啟后刷新頁(yè)面，卻發(fā)現(xiàn)了另外一個(gè)報(bào)錯(cuò)！?。?！wtf

Error: ENOENT: no such file or directory, open ’/Users/sun.huajie/Documents/Workspace/node_sails/myapp/views/header.ejs’ at Error (native) at Object.fs.openSync (fs.js:640:18) at fs.readFileSync (fs.js:508:33) at Object.exports.parse (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/node_modules/ejs/lib/ejs.js:160:19) at exports.compile (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/node_modules/ejs/lib/ejs.js:225:15) at Object.exports.render (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/node_modules/ejs/lib/ejs.js:285:10) at Object.exports.renderFile (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/node_modules/ejs/lib/ejs.js:319:20) at module.exports (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/index.js:85:7) at /usr/local/lib/node_modules/sails/node_modules/ejs-locals/index.js:131:7 at Object.exports.renderFile (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/node_modules/ejs/lib/ejs.js:319:3) at SailsView.module.exports [as engine] (/usr/local/lib/node_modules/sails/node_modules/ejs-locals/index.js:85:7) at SailsView.View.render (/usr/local/lib/node_modules/sails/node_modules/express/lib/view.js:76:8) at Function.app.render (/usr/local/lib/node_modules/sails/node_modules/express/lib/application.js:565:10) at ServerResponse.res.render (/usr/local/lib/node_modules/sails/node_modules/express/lib/response.js:845:7) at ServerResponse.res.view (/usr/local/lib/node_modules/sails/lib/hooks/views/res.view.js:284:16) at Object.index (/Users/sun.huajie/Documents/Workspace/node_sails/myapp/api/controllers/UserController.js:36:14) at wrapper (/usr/local/lib/node_modules/sails/node_modules/@sailshq/lodash/lib/index.js:3250:19) at routeTargetFnWrapper (/usr/local/lib/node_modules/sails/lib/router/bind.js:181:5) at callbacks (/usr/local/lib/node_modules/sails/node_modules/express/lib/router/index.js:164:37) at param (/usr/local/lib/node_modules/sails/node_modules/express/lib/router/index.js:138:11) at param (/usr/local/lib/node_modules/sails/node_modules/express/lib/router/index.js:135:11) at pass (/usr/local/lib/node_modules/sails/node_modules/express/lib/router/index.js:145:5)

報(bào)錯(cuò)發(fā)生了變化，說(shuō)明剛剛的修改肯定是有作用的。然后這個(gè)時(shí)候我單獨(dú)把header的后綴名改回ejs發(fā)現(xiàn)，前端頁(yè)面正常了?？磥?lái)這個(gè)header文件加載的時(shí)候，后綴名是程序里面寫(xiě)好的了。

剩下的流程就是判斷到底哪兒的問(wèn)題了，根據(jù)報(bào)錯(cuò)的執(zhí)行順序來(lái)找下到底那兒的問(wèn)題！

if (0 == js.trim().indexOf(’include’)) {var name = js.trim().slice(7).trim();if (!filename) throw new Error(’filename option is required for includes’);var path = resolveInclude(name, filename);include = read(path, ’utf8’);include = exports.parse(include, { filename: path, _with: false, open: open, close: close, compileDebug: compileDebug });buf += '’ + (function(){' + include + '})() + ’';js = ’’; }

定位到上面的代碼，發(fā)現(xiàn)是path變量除出了問(wèn)題，導(dǎo)致沒(méi)有找到。我們打印一下name和filename

header/Users/sun.huajie/Documents/Workspace/node_sails/myapp/views/layout.html

這個(gè)時(shí)候我們定位到了方法resolveInclude

function resolveInclude(name, filename) { var path = join(dirname(filename), name); var ext = extname(name); if (!ext) path += ’.ejs’; return path;}

看到了吧，說(shuō)明這個(gè)地方是進(jìn)行拼接了，但是只有在extname返回為空的情況下才會(huì)拼接，說(shuō)明這里的name傳遞進(jìn)來(lái)的時(shí)候是沒(méi)有攜帶后綴名的！！！！

所以看到這里基本上明白了，在模板layout.html中，使用了include命令來(lái)加載了header

<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <% include header %>

所以我們將這里的header改為header.html然后再重新訪問(wèn)，就正常了。

那你為什么不試試jade模板了，可以直接用原生html寫(xiě)