> 웹 프론트엔드 > JS 튜토리얼 > Thinkjs3에서 정적 리소스 디렉토리를 사용하는 방법

Thinkjs3에서 정적 리소스 디렉토리를 사용하는 방법

亚连
풀어 주다: 2018-06-22 15:31:10
원래의
1899명이 탐색했습니다.

최근에 thinkjs3을 공부하다가 아직 정리가 필요한 부분을 발견했습니다. 다음 글에서는 주로 Thinkjs3에서 초보자를 위한 정적 리소스 디렉토리 사용법에 대한 관련 정보를 소개하고 있으며, 샘플을 통해 자세히 소개하고 있습니다. 코드입니다. 친구가 참조할 수 있습니다.

정적 리소스 액세스

프로젝트를 개발할 때 일반적으로 템플릿에서 정적 리소스를 참조해야 합니다.

thinkjs 명령을 사용하여 프로젝트를 생성하면 JS, CSS, 이미지와 같은 정적 리소스를 저장하는 데 특별히 사용되는 www/static 디렉터리가 자동으로 생성됩니다.

0x0 새 프로젝트에는 자동으로 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 Add files to it

$ 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에서 리소스 매개변수를 수정하여 수정할 수 있습니다.

수정 전:

....
 {
 handle: 'resource',
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, 'www'),
 publicPath: /^\/(static|favicon\.ico)/ // <-- 此处将修改
 }
 },
....
로그인 후 복사

수정 후:

....
 {
 handle: &#39;resource&#39;,
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, &#39;www&#39;),
 publicPath: /^\/(public|favicon\.ico)/ // <-- 此处修改了
 }
 },
....
로그인 후 복사

완료되지 않았습니다. 아직 수정해야 할 해당 www/static은 www/public입니다.

수정 전

|--- www
| |--- static //静态资源目录
| | |--- fuck.js
로그인 후 복사

수정 후

|--- www
| |--- public //静态资源目录
| | |--- fuck.js
로그인 후 복사

이제 127.0.0.1:8360/public/fuck.js를 방문하면 됩니다. have:

0xSegmentFuck 지각적 이해

  • Thinkjs 프로젝트의 디렉토리 구조는 웹사이트의 URL과 어느 정도 일치합니다(1장과 결합).

  • 공식 홈페이지는 믿을 수 없습니다.

  • 프로젝트에 사용되는 미들웨어를 조정하려면 src/config/middleware.js를 조정하세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JS에서 웹 버전 계산기를 구현하는 방법

Angular2에서 URL의 # 기호를 제거하는 방법(자세한 튜토리얼)

포물선 궤적 운동을 구현하는 방법 JS

를 사용한 작은 공

위 내용은 Thinkjs3에서 정적 리소스 디렉토리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿