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

总结

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

赞 (0)

相关推荐

  • thinkjs 文件上传功能实例代码

    thinkjs 文件上传功能实例代码

    介绍 ThinkJS 是一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得如此简单.高效.从 3.0 开始,框架底层基于 Koa 2.x 实现,兼容 Koa 的所有功能. 特性 基于 Koa 2.x,兼容 middleware 内核小巧,支持 Extend.Adapter 等插件方式 性能优异,单元测试覆盖程度高 内置自动编译.自动更新机制,方便快速开发 使用更优雅的 async/await 处理异步问题,不再支持 */yield 从 3.2 开始支持 Type

  • Thinkjs3新手入门之添加一个新的页面

    Thinkjs3新手入门之添加一个新的页面

    前言 ThinkJS 是一款拥抱未来的 Node.js Web 框架,致力于集成项目最佳实践,规范项目让企业级团队开发变得更加简单,更加高效. 目前该版本已经在线上多个项目中使用,简单一个命令就可以让你下载使用它: npm install -g think-cli 本文将帮助大家往Thinkjs3中添加一个新的页面,没有原理描述,只提供给入门者一个感性认识. 0x0 首先需要一个Thinkjs3项目 我们创建一个叫做1uck的项目 $ thinkjs new 1uck $ cd ./1uck $

  • thinkjs之页面跳转同步异步操作

    thinkjs之页面跳转同步异步操作

    对于刚入手thinkjs项目的新手来说,时常会犯的一个错误就是"混用"各种代码逻辑,比如:我们经常在做后台管理系统的时候用到的登录框, 其实它原本是有一个路由专门存放自己的代码逻辑,而在点击提交按钮的时候,要达到的效果便是账号密码正确的时候,正常跳转页面,而错误的时候给出提示:为了发现问题,就先把源代码贴出来吧: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • ThinkJS中如何使用MongoDB的CURD操作

    前言 众所周知目前使用Node.js + mongodb已经成为很多公司的技术栈.ThinkJS其实也提供了对mongo的支持,虽然官方文档较少,但是保证了ORM的API的一致性,所以用起来需要查看基本的>Model api 基本的模型文件放在common/model下 获取列表 getList(q, page) { return this.select(); } 分页加条件搜索 search(q, page) { if(q) { q = new RegExp(q,'i'); } return

  • Thinkjs3新手入门之如何使用静态资源目录

    Thinkjs3新手入门之如何使用静态资源目录

    静态资源访问 项目开发时,一般都需要在模版里引用静态资源. 使用 thinkjs 命令创建项目时,会自动创建 www/static 目录,该目录下专门用来存放 JS.CSS.图片等静态资源. 0x0 听说new的项目自动就有www/static!? 传说默认创建的项目结构如下: |--- development.js //开发环境下的入口文件 |--- nginx.conf //nginx 配置文件 |--- package.json |--- pm2.json //pm2 配置文件 |---

  • SpringBoot静态资源目录访问

    SpringBoot静态资源目录访问

    静态资源配置 创建一个StaticConfig 继承 WebMvcConfigurerAdapter package com.huifer.blog.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframewo

  • SpringBoot使用WebJars统一管理静态资源的方法

    SpringBoot使用WebJars统一管理静态资源的方法

    传统管理静态资源主要依赖于复制粘贴,不利于后期维护,为了让大家往后更舒心,让WebJars给静态资源来一次搬家革命吧!! 学习目标 简单两步!快速学会使用WebJars统一管理前端依赖. 快速查阅 源码下载:SpringBoot Webjars Learning 使用教程 一.引入相关依赖 在 WebJars官网找到项目中需要的依赖,例如在项目中引入jQuery.BootStrap前端组件等.例如: 版本定位工具:webjars-locator-core 前端组件:jquery .bootstr

  • 一篇超完整的Vue新手入门指导教程

    前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以发布打包程序,甚至还可以独立连接数据库,当然了,优点与缺点共存,不能向其他语言那样断点调试导致了,它的脉络更难被捕捉,犹如远古时代的代码开发一样,但它还是已经可以称为一门编程技术了,所以学习一门前端开发,已经是一件非常有意义的事儿了. 首先安装Nodejs,然后我们一起学习使用Vue. Vu

  • Springboot静态资源的访问方法介绍

    Springboot静态资源的访问方法介绍

    目录 1.官方文档 2.基本介绍 3.快速入门 4.静态资源访问注意事项和细节 1.官方文档 在线文档 2.基本介绍 只要静态资源放在类路径下: /static . /public . /resources . /META-INF/resources 可以被直接访问- 对应文件 WebProperties.java 直接放到resources目录下是访问不到的,这里的 /resources是指在resource目录的创建resources目录 private static final Strin

  • 解决vue打包之后静态资源图片失效的问题

    1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同

  • Spring Boot实战之静态资源处理

    Spring Boot实战之静态资源处理

    前两章我们分享了Spring boot对Restful 的支持,不过Restful的接口通常仅仅返回数据.而做web开发的时候,我们往往会有很多静态资源,如html.图片.css等.那如何向前端返回静态资源呢?以前做过web开发的同学应该知道,我们以前创建的web工程下面会有一个webapp的目录,我们只要把静态资源放在该目录下就可以直接访问.但是,基于Spring boot的工程并没有这个目录,那我们应该怎么处理? 一.最笨的方式 我们首先来分享一种最笨的办法,就是将静态资源通过流直接返回给前

  • Spring Boot 中的静态资源放置位置

    Spring Boot 中的静态资源放置位置

    当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥Spring Boot 中的静态资源加载问题:"松哥,我的HTML页面好像没有样式?",今天我就通过一篇文章,来和大伙仔细聊一聊这个问题. SSM 中的配置 要讲 Spring Boot 中的问题,我们得先回到 SSM 环境搭建中,一般来说,我们可以通过 <mvc:resources /> 节点来配置不拦截静态资源,如下: <mvc:resources mappin

  • springboot操作静态资源文件的方法

    默认静态资源供 SpringBoot有几个默认的静态资源目录,当然也可配置,默认配置的/**映射到/static(或/public ,/resources,/META-INF/resources),自定义配置方式如下: spring.mvc.static-path-pattern=/** # Path pattern used for static resources. 前端如果需要访问默认的静态资源,下面有点要注意,考虑下面的目录结构: └─resources │ application.ym

随机推荐