Thinkjs3新手入门之如何使用静态资源目录


Posted in Javascript onDecember 06, 2017

静态资源访问

项目开发时,一般都需要在模版里引用静态资源。

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

如果一切正常的话,会出错!

Thinkjs3新手入门之如何使用静态资源目录

0x2 同学,请填写符合基本法的URL

正确的路径应该是 127.0.0.1:8360/static/fuck.js

Thinkjs3新手入门之如何使用静态资源目录

0x3 什么?你不喜欢static这个名字

那么可以通过修改src/config/middleware.js中resource的参数来修改:

修改前:

....
 {
 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,就有了:

Thinkjs3新手入门之如何使用静态资源目录

0xSegmentFuck 感性认识

  • Thinkjs项目的目录结构在一定程度上对应着网站的URL(结合第一章)。
  • 官网不可尽信。
  • 调整src/config/middleware.js可以调整对项目中用到的中间件。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
深入理解React高阶组件
Sep 28 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 #Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 #Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 #Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 #Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 #Javascript
js 两数组去除重复数值的实例
Dec 06 #Javascript
js 提取某()特殊字符串长度的实例
Dec 06 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
web前端开发也需要日志
2010/12/09 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
常用DOM整理
2015/06/16 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
PHP7新特性简述
2017/06/11 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Python实现替换文件中指定内容的方法
2018/03/19 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
python如何实现图片压缩
2020/09/11 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
android面试问题与答案
2016/12/27 面试题
个人作风剖析材料
2014/02/02 职场文书
企业元宵节主持词
2014/03/25 职场文书
捐款倡议书
2014/04/14 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
企业文化标语口号
2014/06/09 职场文书
车辆工程专业求职信
2014/06/14 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
看雷锋电影观后感
2015/06/10 职场文书
《小小的船》教学反思
2016/02/18 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python