0

0

在Thinkjs3中如何使用静态资源目录

亚连

亚连

发布时间:2018-06-22 15:31:10

|

2029人浏览过

|

来源于php中文网

原创

最近在学习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的参数来修改:

修改前:

传媒公司模板(RTCMS)1.0
传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://

下载
....
 {
 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如何实现小球抛物线轨迹运动

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

183

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

226

2025.12.18

resource是什么文件
resource是什么文件

Resource文件是一种特殊类型的文件,它通常用于存储应用程序或操作系统中的各种资源信息。它们在应用程序开发中起着关键作用,并在跨平台开发和国际化方面提供支持。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

181

2023.12.20

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6228

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

492

2023.09.01

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 22.5万人学习

Node.js 教程
Node.js 教程

共57课时 | 13.2万人学习

CSS3 教程
CSS3 教程

共18课时 | 7.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号