静态资源访问

项目开发时,一般都需要在模版里引用静态资源。

使用 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可以调整对项目中用到的中间件。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对Devmax的支持。

Thinkjs3新手入门之如何使用静态资源目录的更多相关文章

  1. iOS – 开始iOS教程 – 变量之前的下划线?

    这是正确的还是我做错了什么?

  2. Swift开发快速上手系列教程目录-陆续完善,由浅入深

    Swift开发教程一.Swift基础Swift教程01-使用switfc终端命令编译运行swift程序Swift教程02-抓住下一个浪潮之巅Swift教程03-playground剖析swift语言Swift教程04-定义声明变量重要原则Swift教程05-基本数据类型(一)整型浮点型Swift教程06-基本数据类型(二)Bool布尔类型对比Java-boolean,Objc-BOOLSwift教

  3. Swift2.0不深入只浅出入门教程-01-The Basic

    本套视频教程是Swift2.0的入门教程,如果你看过其他的教程,可以不看这套教程,录制这套教程的目的,一个是为了自学,一个是为之后自己的另一套教程打基础。本期教程主要介绍Swift语言的一些基础知识。由于CSDN学院的课程审核还没有通过,所以暂时就放到了百度网盘。

  4. Swift教程-视频拍摄教程

    在此教程中,我们将拍摄一段保存到手机相册的视频。教程运行在iOS8.4和Xcode6.4下。打开Xcode并创建一个newSingleViewApplication,项目名称为IOS8SwiftTakeVideoPlayerTutorial,接着填上你的OrganizationName和OrganizationIdentifier,选择Swift语言,在设备一栏只选择iPhone。ImagePickerController的数据可以是Camera或Movie两种类型。视频的maximum长度设置为10秒。

  5. 详解 SiriKit - SiriKit 教程Part 2

    此文章是SiriKit教程系列的第二篇,建议先去阅读第一篇。处理SiriKit请求为了让集成的Siri更有用,可以使用INSendMessageIntentHandling协议的回调方法增加信息内容。协议有以下可选方法:只要实现这些方法,就可以给SiriKit提供更多信息,例如接收者、内容、小组名字、服务名字或者发送者。后面会详细说明区别,现在先介绍如何使用Siri提供的数据。Siri传入的intent对象包含文字版的消息内容。现在当我们尝试发送消息时,SiriKit就明白必须要提供内容值。

  6. swift 学习资源 - Swift 语言指南

    对于精选项目及文章,可直接访问《Swift项目精选》和《Swift文章精选》。对于Swift开源及跨平台开发的同学,可以关注swift.org教程文章开源项目推荐网站苹果官方Swift:Swift概述、博客以及开发资源。swift.org:开源后独立出来的Swift开源社区。ksm/SwiftInFlux:作者将AppleDeveloperForums上有关Swift特性、缺陷及变更讨论分类汇总并更新到GitHub,具有很好的可读性。从中可以一窥Swift缺陷及未来潜在地变化。近期第一时间出了三本Swif

  7. [译] NSCollectionView 入门教程

    Mac中自带的Finder和Photos就是使用了它:通过一个CollectionView来展示所有的文件和图片。NSCollectionView最早在OSX10.5被推出,它可以非常方便地布局一组具有相同大小的item,并把它们展示在一个可以滑动的ScrollView中。在OSX10.11ElCapitan中,参照iOS上的UICollectionView,NSCollectionView被全面进行了升级。在这个NSCollectionView的入门教程中,你将会创造一个叫SlideMagic的app,

  8. unity3d – Android游戏开发使用统一3D教程

    我是团结3D的新手.我打算用Unity3D开发一个安卓游戏,我已经在网上搜索了Unity3D中的android相关教程,但是找不到一个好的开发人员教我一个应用程序启动,所以大家请建议我一个网站我可以启动.我需要android教程,而不是独立的平台教程.提前致谢.解决方法你可以使用Google或Unity3Dofficialdocumentation.

  9. Arduino和Android的“Hello World”教程

    我当然知道Arduino网站和Android开发者文档,但它们过于复杂……解决方法你问两个问题:我如何编程Arduino?

  10. android – 自定义导航抽屉的涟漪效果

    我正在开发我的第一个应用程序,为它提供新的材料外观.我有点迷失了所以我正在按照一些教程来实现工具栏,导航抽屉等等.我不得不说我正在做它提供兼容前棒棒糖的Android版本,所以我正在使用支持图书馆.我的问题是,我刚刚在本教程之一中实现了导航抽屉,并使用以下库来实现兼容性:我认为代码实现太长了,不能把它放在这里,所以我将提供本教程的链接,我完全按照here说的那样完成.我的问题是,当我从导航抽屉的行

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部