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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
js的闭包的一个示例说明
Nov 18 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
vue-dialog的弹出层组件
May 25 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
为什么要使用Vuex的介绍
Jan 19 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&amp;mysql(六)
2006/10/09 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
优秀企业获奖感言
2014/02/01 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis