ホームページ > ウェブフロントエンド > jsチュートリアル > Thinkjs3 で静的リソース ディレクトリを使用する方法

Thinkjs3 で静的リソース ディレクトリを使用する方法

亚连
リリース: 2018-06-22 15:31:10
オリジナル
1899 人が閲覧しました

私は最近 thinkjs3 を勉強していますが、まだ整理する必要があることがわかりました。次の記事では、Thinkjs3 の初心者向けに静的リソース ディレクトリの使用方法に関する関連情報を中心に紹介します。友達はそれを参照できます。

静的リソースへのアクセス

プロジェクトを開発するときは、通常、テンプレートで静的リソースを参照する必要があります。

thinkjs コマンドを使用してプロジェクトを作成すると、www/static ディレクトリが自動的に作成され、このディレクトリは JS、CSS、画像などの静的リソースを保存するために特別に使用されます。

0x0 新しいプロジェクトには自動的に 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.js0x3である必要があります? static

という名前が気に入らない場合は、src/config/middleware.js のリソースパラメータを変更して変更できます:

変更前:

....
 {
 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 プロジェクトのディレクトリ構造は、Web サイトの URL にある程度対応しています (第 1 章と合わせて)。

公式サイトは信用できません。
  • src/config/middleware.jsを調整して、プロジェクトで使用されるミドルウェアを調整します。
  • 上記は私があなたのためにまとめたものです。
  • 関連記事:

  • JS で Web バージョンの電卓を実装する方法

Angular2 で URL の # 記号を削除する方法 (詳細なチュートリアル)

放物線軌道の動きを実装する方法JSを使用した小さなボール

以上がThinkjs3 で静的リソース ディレクトリを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート