Thinkjs3新手入門(mén)之如何使用靜態(tài)資源目錄
靜態(tài)資源訪問(wèn)
項(xiàng)目開(kāi)發(fā)時(shí)，一般都需要在模版里引用靜態(tài)資源。
使用 thinkjs 命令創(chuàng)建項(xiàng)目時(shí)，會(huì)自動(dòng)創(chuàng)建 www/static 目錄，該目錄下專(zhuān)門(mén)用來(lái)存放 JS、CSS、圖片等靜態(tài)資源。
0x0 聽(tīng)說(shuō)new的項(xiàng)目自動(dòng)就有www/static!?
傳說(shuō)默認(rèn)創(chuàng)建的項(xiàng)目結(jié)構(gòu)如下：
|--- development.js //開(kāi)發(fā)環(huán)境下的入口文件 |--- nginx.conf //nginx 配置文件 |--- package.json |--- pm2.json //pm2 配置文件 |--- production.js //生產(chǎn)環(huán)境下的入口文件 |--- README.md |--- src | |--- bootstrap //啟動(dòng)自動(dòng)執(zhí)行目錄 | | |--- master.js //Master 進(jìn)程下自動(dòng)執(zhí)行 | | |--- worker.js //Worker 進(jìn)程下自動(dòng)執(zhí)行 | |--- config //配置文件目錄 | | |--- adapter.js // adapter 配置文件 | | |--- config.js // 默認(rèn)配置文件 | | |--- config.production.js //生產(chǎn)環(huán)境下的默認(rèn)配置文件，和 config.js 合并 | | |--- extend.js //extend 配置文件 | | |--- middleware.js //middleware 配置文件 | | |--- router.js //自定義路由配置文件 | |--- controller //控制器目錄 | | |--- base.js | | |--- index.js | |--- service //服務(wù)目錄 | | |--- **.js //用戶(hù)自己定義的服務(wù) | |--- logic //logic 目錄 | | |--- index.js | |--- model //模型目錄 | | |--- index.js |--- view //模板目錄 | |--- index_index.html |--- www | |--- static //靜態(tài)資源目錄 | | |--- css | | |--- img | | |--- js
其中是包含有www/static目錄的，但現(xiàn)在通過(guò)thinkjs new出來(lái)的項(xiàng)目卻沒(méi)有這個(gè)目錄，因此還需自行創(chuàng)建：
$ mkdir www && cd www $ mkdir static
0x1 往其中添加文件
$ touch fuck.js && echo 'fuck 高數(shù)' > fuck.js
這里本人秉承一貫作風(fēng)創(chuàng)建一個(gè)fuck.js文件，你也可按心情添加其他文件
然后啟動(dòng)項(xiàng)目并查看相應(yīng)的頁(yè)面 127.0.0.1:8360/fuck.js
如果一切正常的話，會(huì)出錯(cuò)！
0x2 同學(xué)，請(qǐng)?zhí)顚?xiě)符合基本法的URL
正確的路徑應(yīng)該是 127.0.0.1:8360/static/fuck.js
0x3 什么？你不喜歡static這個(gè)名字
那么可以通過(guò)修改src/config/middleware.js中resource的參數(shù)來(lái)修改：
修改前：
....
{
handle: 'resource',
enable: isDev,
options: {
root: path.join(think.ROOT_PATH, 'www'),
publicPath: /^\/(static|favicon\.ico)/ // <-- 此處將修改
}
},
....
修改后：
....
{
handle: 'resource',
enable: isDev,
options: {
root: path.join(think.ROOT_PATH, 'www'),
publicPath: /^\/(public|favicon\.ico)/ // <-- 此處修改了
}
},
....
還沒(méi)完，對(duì)應(yīng)的還得修改www/static為www/public：
修改前
|--- www | |--- static //靜態(tài)資源目錄 | | |--- fuck.js
修改后
|--- www | |--- public //靜態(tài)資源目錄 | | |--- fuck.js
大功告成，現(xiàn)在訪問(wèn)127.0.0.1:8360/public/fuck.js，就有了：
0xSegmentFuck 感性認(rèn)識(shí)
- Thinkjs項(xiàng)目的目錄結(jié)構(gòu)在一定程度上對(duì)應(yīng)著網(wǎng)站的URL（結(jié)合第一章）。
- 官網(wǎng)不可盡信。
- 調(diào)整src/config/middleware.js可以調(diào)整對(duì)項(xiàng)目中用到的中間件。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要為大家介紹了Node express 官方示例cors跨域解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
node.js +mongdb實(shí)現(xiàn)登錄功能
這篇文章主要介紹了node.js +mongdb實(shí)現(xiàn)登錄功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
Node.js 獲取微信JS-SDK CONFIG的方法示例
這篇文章主要介紹了Node.js 獲取微信JS-SDK CONFIG的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Node.js如何實(shí)現(xiàn)MySQL數(shù)據(jù)庫(kù)連接池
文章介紹了Node.js中實(shí)現(xiàn)MySQL數(shù)據(jù)庫(kù)連接池的方法,通過(guò)預(yù)先建立和管理數(shù)據(jù)庫(kù)連接對(duì)象,優(yōu)化數(shù)據(jù)庫(kù)連接的使用效率2024-11-11
這篇文章主要為大家分享了angularjs表格ng-table使用備忘錄，感興趣的小伙伴們可以參考一下2016-03-03
讓nodeJS支持ES6的詞法----babel的安裝和使用方法
這篇文章主要介紹了讓nodeJS支持ES6的詞法----babel的安裝和使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
node.js中的fs.fchownSync方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.fchownSync方法使用說(shuō)明,本文介紹了fs.fchownSync方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Node.js操作MongoDB數(shù)據(jù)庫(kù)實(shí)例分析
這篇文章主要介紹了Node.js操作MongoDB數(shù)據(jù)庫(kù),結(jié)合實(shí)例形式分析了node.js連接MongoDB數(shù)據(jù)庫(kù)以及增刪改查等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
用npm install時(shí)報(bào)錯(cuò)node-sass npm ERR command
在用npm install時(shí)報(bào)錯(cuò)npm ERR! path D:…\node-sass和npm ERR! command failed 問(wèn)題,本文給大家介紹了如何解決這個(gè)問(wèn)題,文中通過(guò)圖文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
手把手教你通過(guò)nodejs快速搭建一個(gè)服務(wù)器
這篇文章主要給大家介紹了關(guān)于如何通過(guò)nodejs快速搭建一個(gè)服務(wù)器的相關(guān)資料,在node.js中創(chuàng)建一個(gè)服務(wù)器非常簡(jiǎn)單,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10