Thinkjs3新手入门之如何使用静态资源目录
时间:2019-04-11
本文章向大家介绍Thinkjs3新手入门之如何使用静态资源目录,主要包括Thinkjs3新手入门之如何使用静态资源目录使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
静态资源访问
项目开发时,一般都需要在模版里引用静态资源。
使用 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
如果一切正常的话,会出错!
0x2 同学,请填写符合基本法的URL
正确的路径应该是 127.0.0.1:8360/static/fuck.js
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,就有了:
0xSegmentFuck 感性认识
- Thinkjs项目的目录结构在一定程度上对应着网站的URL(结合第一章)。
- 官网不可尽信。
- 调整src/config/middleware.js可以调整对项目中用到的中间件。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 未来机器人大脑将获取互联网知识自我学习
- 【架构拾集】: Android 移动应用架构设计
- Dore 混合应用框架 —— 基于 React Native 的混合应用迁移方案
- Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)
- 程序员,2017年你的技能树上增加了哪些新技能?
- Android6.0源码分析之View(一)
- 2017 年,我挖的那些开源软件坑
- Android6.0蓝牙开发中获取附近低功耗蓝牙设备结果权限问题分析
- 我的技术投资策略:如何决定学习哪一个新技术的?
- 我的技术投资策略:如何决定学习哪一个新技术的?
- Android6.0源码之蓝牙研究汇总(一)--from初学者
- Android6.0蓝牙协议之OPP
- 简单直白教你理解Java中四大引用强引用,软引用,弱引用,虚引用
- ubuntu系统上配置git
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 气象编程 | Google Earth Engine for R——提供250+ 实例
- Anaconda安装和使用
- Redhat7安装docker
- 有个笔记本就可以玩一玩Hadoop
- java如何将String转换为Int
- java中如何将数组转换为List
- 从一个多层嵌套循环中直接跳出
- 如何给3个布尔变量,当其中有2个或者2个以上为true才返回true
- 比较java枚举成员使用equal还是==
- java如何将String转换为enum
- Markdown极简入门教程(1)—为什么要学习Markdown
- Markdown极简入门教程(2)—斜体和粗体
- 标题—Markdown极简入门教程(3)
- 链接—Markdown极简入门教程(4)
- 某企业授权渗透报告