首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-22 15:31:10
原創
1880 人瀏覽過

最近在學習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: &#39;resource&#39;,
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, &#39;www&#39;),
 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板