Comment utiliser des répertoires de ressources statiques dans Thinkjs3

J'ai récemment étudié thinkjs3 et j'ai découvert que certains endroits doivent encore être réglés. L'article suivant vous présente principalement les informations pertinentes sur la façon d'utiliser les répertoires de ressources statiques pour les débutants dans Thinkjs3. exemple de code. Les amis dans le besoin peuvent s’y référer.

Accès aux ressources statiques

Lors du développement d'un projet, vous devez généralement référencer des ressources statiques dans le modèle.

Lorsque vous utilisez la commande thinkjs pour créer un projet, le répertoire www/static sera automatiquement créé, spécialement utilisé pour stocker des ressources statiques telles que JS, CSS et des images.

0x0 J'ai entendu dire que les nouveaux projets ont automatiquement www/static !?

On dit que la structure de projet par défaut créée est la suivante :

|--- 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

Il contient le répertoire www/static, mais le projet maintenant créé via thinkjs new n'a pas ce répertoire, vous devez donc le créer vous-même :

$ mkdir www && cd www
$ mkdir static

0x1 Ajoutez-y des fichiers

$ touch fuck.js && echo 'fuck 高数' > fuck.js

Ici je crée un fichier fuck.js dans mon style habituel Vous pouvez également ajouter d'autres fichiers selon votre humeur

Ensuite démarrez le projet et visualisez-le La page correspondante 127.0.0.1:8360/fuck.js

Si tout est normal, quelque chose va mal se passer !

0x2 Etudiants, veuillez renseigner l'URL qui est conforme à la Loi fondamentale

Le bon chemin devrait être 127.0.0.1 :8360/static/fuck.js

0x3 Quoi ? Si vous n'aimez pas le nom static

, alors vous pouvez le modifier en modifiant les paramètres de ressource dans src/config/middleware.js :

Avant modification :

....
 {
 handle: 'resource',
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, 'www'),
 publicPath: /^\/(static|favicon\.ico)/ // <-- 此处将修改
 }
 },
....

Après modification :

....
 {
 handle: 'resource',
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, 'www'),
 publicPath: /^\/(public|favicon\.ico)/ // <-- 此处修改了
 }
 },
....

Pas encore terminé, en conséquence, www/static doit être modifié en www/public :

Avant modification

|--- www
| |--- static //静态资源目录
| | |--- fuck.js

Modification Après

|--- www
| |--- public //静态资源目录
| | |--- fuck.js

vous avez terminé, visitez maintenant 127.0.0.1:8360/public/fuck.js et vous aurez :

0xSegmentFuck Connaissances perceptuelles

• La structure des répertoires du projet Thinkjs correspond dans une certaine mesure à l'URL du site Web (combinée avec le chapitre 1).

• On ne peut pas faire confiance au site officiel.

• L'ajustement de src/config/middleware.js peut ajuster le middleware utilisé dans le projet.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter une calculatrice Web en JS

Comment supprimer le signe # de l'url dans Angular2 ( Tutoriel détaillé)

Comment utiliser JS pour réaliser le mouvement de trajectoire parabolique d'une petite balle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!