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 学习之旅 (2)
Feb 05 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 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
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js动态生成指定行数的表格
2013/07/11 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
js实现日历的简单算法
2017/01/24 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python中List的sort方法指南
2014/09/01 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
行政助理的职责
2013/11/14 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
大型会议接待方案
2014/03/01 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
齐云山导游词
2015/02/06 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript