最近在學習thinkjs3,發現有些地方還是有必要整理下的,以下這篇文章主要給大家介紹了關於Thinkjs3新手入門之如何使用靜態資源目錄的相關資料,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考下。
靜態資源存取
專案開發時,一般都需要在模版裡引用靜態資源。
使用 thinkjs 指令建立專案時,會自動建立 www/static 目錄,該目錄下專門用來存放 JS、CSS、圖片等靜態資源。
0x0 聽說new的專案自動就有www/static!?
傳說預設創建的專案結構如下:
|--- development.js //开发环境下的入口文件 |--- nginx.conf //nginx 配置文件 |--- package.json |--- pm2.json //pm2 配置文件 |--- production.js //生产环境下的入口文件 |--- README.md |--- src | |--- bootstrap //启动自动执行目录 | | |--- master.js //Master 进程下自动执行 | | |--- worker.js //Worker 进程下自动执行 | |--- config //配置文件目录 | | |--- adapter.js // adapter 配置文件 | | |--- config.js // 默认配置文件 | | |--- config.production.js //生产环境下的默认配置文件,和 config.js 合并 | | |--- extend.js //extend 配置文件 | | |--- middleware.js //middleware 配置文件 | | |--- router.js //自定义路由配置文件 | |--- controller //控制器目录 | | |--- base.js | | |--- index.js | |--- service //服务目录 | | |--- **.js //用户自己定义的服务 | |--- logic //logic 目录 | | |--- index.js | |--- model //模型目录 | | |--- index.js |--- view //模板目录 | |--- index_index.html |--- www | |--- static //静态资源目录 | | |--- css | | |--- img | | |--- js
其中是包含有www/static目錄的,但現在透過thinkjs new出來的專案卻沒有這個目錄,因此還需自行建立:
$ mkdir www && cd www $ mkdir static
0x1 往其中新增文件
$ touch fuck.js && echo 'fuck 高数' > fuck.js
這裡本人秉承一貫作風創建一個fuck.js文件,你也可按心情添加其他文件
然後啟動專案並查看相應的頁面127.0.0.1 :8360/fuck.js
如果一切正常的話,會出錯!
0x2 同學,請填入符合基本法的URL
正確的路徑應該是127.0.0.1 :8360/static/fuck.js
#0x3 什麼?你不喜歡static這個名字
那麼可以透過修改src/config/middleware.js中resource的參數來修改:
修改前:
.... { 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)/ // <-- 此处修改了 } }, ....
還沒完,對應的還要修改www/static為www/public:
修改前
|--- www | |--- static //静态资源目录 | | |--- fuck.js
修改後
|--- www | |--- public //静态资源目录 | | |--- fuck.js
大功告成,現在訪問127.0.0.1:8360/public/fuck.js,就有了:
##0xSegmentFuck 感性認識
以上是在Thinkjs3中如何使用靜態資源目錄的詳細內容。更多資訊請關注PHP中文網其他相關文章!