在Thinkjs3中如何使用靜態資源目錄

最近在學習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 感性認識

• Thinkjs專案的目錄結構在一定程度上對應著網站的URL（結合第一章）。

• 官網不可盡信。

• 調整src/config/middleware.js可以調整專案中用到的中間件。

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JS中如何實作網頁版計算器

在Angular2中如何去除url中的#號（詳細教學）

使用JS如何實作小球拋物線軌跡運動

以上是在Thinkjs3中如何使用靜態資源目錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！