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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
angular实现商品筛选功能
Feb 01 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
基于vue.js实现的分页
Mar 13 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php函数连续调用实例分析
2015/07/30 PHP
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python实现类之间的方法互相调用
2018/04/29 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Django数据库迁移常见使用方法
2020/11/12 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
2013英文求职信模板范文
2013/11/15 职场文书
三方合作协议书范本
2014/04/18 职场文书
小学班长竞选稿
2015/11/20 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers