博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何快速搭建静态资源服务器
阅读量:6309 次
发布时间:2019-06-22

本文共 2500 字,大约阅读时间需要 8 分钟。

前端开发中,经常遇到有些场景需要用到服务器环境,例如AngularJS中的路由,或者是模拟ajax获取数据等需求时,这个时候并不需要考虑到服务端逻辑,只是搭建简单的静态资源服务,因此解决方法有很多,下面介绍几种简单快捷的常用方式:

使用http-server

如果你安装了node,那么http-server就是个不错的选择,只需要一行命令就可以快速启动。

安装:

npm install -g http-server

在项目根目录执行:

http-server -a 127.0.0.1 -p 8000

http-server.png

使用static-server

static-server很类似http-server,也是基于node,安装和使用方法很相似:

npm install -g static-server

使用时只需要在项目目录下指定该项目的入口文件即可:

static-server -i index.html

static-server-1.png

下面是一些常用的选项:

-p, --port 指定端口启动

-i, --index 指定默认项目入口文件
-d, --debug 显示错误信息
-n, --not-found 指定404页面

详见:

使用Python

如果你安装了Python,那这个方法可能最简便了,只需要在该目录下执行命令:

python -m SimpleHTTPServer

这样就启动了一个静态web服务器,此时项目的根目录为执行命令时所在目录,默认端口是8000,如果需要指定端口,则加上端口号启动:

python -m SimpleHTTPServer 8080

python-http-server-1.png

使用Ruby

如果你安装Ruby,Ruby也提供了一个很简便的方式:

ruby -run -e httpd . -p 8888

ruby-http-server.png

使用Nginx

几乎所有的web应用在最终部署到Linux上时都会用到Nginx做反向代理服务器,所以很有必要会用Nginx

,解压,运行nginx.exe,在浏览器输入localhost127.0.0.1,如果出现
Welcome to nginx!
则说明Nginx已经成功安装。

下面是Nginx常用到的命令:

nginx -s reload                // 重新加载nginx配置nginx -s stop

如果你的需求只是实现静态资源服务,那么只需要如下简单配置即可:root代表项目的根目录,index代表默认的入口文件。

server {    listen       80;    server_name  localhost;    location / {        root   E:\Work\Workspace;        index  index.html index.htm;    }    error_page   500 502 503 504  /50x.html;    location = /50x.html {        root   html;    }}

这时候访问 就OK了。

使用json-server

如果你的需求只是想模拟ajax从后台获取数据,因为通常一个项目中前端开发和后台几乎是同时进行的,开发初期往往需要前端自己构造假数据来渲染页面,谷歌浏览器不在服务端环境下调试js,则会被视为跨域,从而导致无法获取本地json数据,要不就使用火狐浏览器,较好的解决方法是快速搭建一个JSON服务器,这个时候就是个不错的选择了。

安装:

npm install -g json-server

在任意文件夹下创建一个json文件:如data.json:

{  "posts": [    { "id": 1, "title": "json-server", "author": "typicode" }  ],  "comments": [    { "id": 1, "body": "some comment", "postId": 1 },    { "id": 2, "body": "some comment", "postId": 1 }  ],  "profile": { "name": "typicode" }}

在该目录下启动json-server来监听这个文件:

json-server --watch data.json# 或者指定端口启动启动json-server --watch data.json --port 3004

json-server-1.png

可以看到json-server默认创建了三个请求资源,分别对应了data.json中的key值,很方便,这个时候浏览器访问localhostL3000/db 就会看到当前data.json的数据了。

json-server-2.png

访问http://localhost:3000/comments/1 ,则可以获取到comments下id为1的json数据:

json-server-3.png

很神奇是吧,有了数据之后,可以让json-server也作为静态资源的服务器,这样就没有跨域问题了。

json-server默认的静态资源(HTML,CSS,JS等)是在与json数据文件同级目录下的public文件夹中,你只需要创建一个名为public的文件夹,把静态资源放到public目录下,然后直接运行以下命令启动即可:

json-server data.json

假如我们需要指定静态资源文件夹的位置,则可以通过指定目录来启动json-server即可,如指定静态资源为json数据同级目录的source文件夹下,则:

json-server data.json --static ./source

这样,访问http://localhost:3000/index.html 就可以成功加载到json数据了。

json-server-4.png

json-server还有很多更强大的功能,如支持模拟REST API操作等,更多的功能可以到查看。

使用一些IDE

例如:HBuilder

转载于:https://www.cnblogs.com/salix/p/5987017.html

你可能感兴趣的文章
模拟博客园系统
查看>>
标准文档流
查看>>
[转] 产品知识分享:外部链接分享到微信的逻辑
查看>>
报表并发访问量大的配置
查看>>
多项式常用操作归纳
查看>>
函数的介绍与方法
查看>>
从一张表查出数据并结合自己的数据插入到新表中
查看>>
新概念英语第三册21-40课(转)
查看>>
常见事件总结
查看>>
火狐浏览器设置跨域(转)
查看>>
Mzc和体委的争夺战
查看>>
Gradle安装
查看>>
四十个多线程问题
查看>>
三层架构
查看>>
Mysql分布式事务
查看>>
handler,message,looper学习笔记
查看>>
Windows 下 Nginx + PHP5 的安装与配置
查看>>
maven笔记
查看>>
Ants (POJ 1852)
查看>>
redis desktop manager 使用
查看>>