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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
原生js实现购物车
Sep 23 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP 快速排序算法详解
2014/11/10 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python分析学校四六级过关情况
2017/11/22 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
应届生高等护理求职信
2013/10/12 职场文书
美国留学经济担保书
2014/05/20 职场文书
个性与发展自我评价
2015/03/06 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js