How to use static resource directories in Thinkjs3

I have been studying thinkjs3 recently and found that some places still need to be sorted out. The following article mainly introduces to you the relevant information on how to use the static resource directory for beginners in Thinkjs3. The article introduces it in detail through sample code. Friends in need can refer to it.

Static resource access

When developing a project, you generally need to reference static resources in the template.

When you use the thinkjs command to create a project, the www/static directory will be automatically created, which is specially used to store static resources such as JS, CSS, and pictures.

0x0 I heard that new projects automatically have www/static!?

It is said that the default project structure created is as follows:

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

It contains the www/static directory, but now the project created through thinkjs new does not have this directory, so you need to create it yourself:

$ mkdir www && cd www
$ mkdir static

0x1 Add files to it

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

Here I create a fuck.js file in my usual style. You can also add other files according to your mood

Then start the project and view the corresponding page 127.0.0.1 :8360/fuck.js

If everything is normal, something will go wrong!

0x2 Students, please fill in the URL that complies with the Basic Law

The correct path should be 127.0.0.1 :8360/static/fuck.js

0x3 What? If you don’t like the name static

, then you can modify it by modifying the resource parameters in src/config/middleware.js:

Before modification:

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

After modification:

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

It’s not finished yet. Correspondingly, www/static must be modified to www/public:

Before modification

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

After modification

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

You're done, now visit 127.0.0.1:8360/public/fuck.js and you will have:

##0xSegmentFuck Perceptual understanding

• #The directory structure of the Thinkjs project corresponds to the URL of the website to a certain extent (combined with Chapter 1).

• The official website cannot be trusted at all.

• Adjust src/config/middleware.js to adjust the middleware used in the project.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement a web version of the calculator in JS

How to remove the # sign in the url in Angular2 ( Detailed tutorial)

How to use JS to realize the parabolic trajectory movement of the ball

The above is the detailed content of How to use static resource directories in Thinkjs3. For more information, please follow other related articles on the PHP Chinese website!