1092人阅读
前端开发中，经常遇到有些场景需要用到服务器环境，例如AngularJS中的路由，或者是模拟ajax获取数据等需求时，这个时候并不需要考虑到服务端逻辑，只是搭建简单的静态资源服务，因此解决方法有很多，下面介绍几种简单快捷的常用方式：
一：使用http-server
http-server基于Node，所以得先确保有Node环境。
一：使用http-server
http-server基于Node，所以得先确保有Node环境。
1. 安装http-server
http-server
http-server
上面的命令表示在本机的9999端口上启动一个静态服务器，应用根目录为执行上面命令的所在目录
优点：简单，快速
缺点：命令行一关，服务就中止了。每次开机都要再启一次，麻烦
二：使用ApmServer/XAMPP
两者都是PHP的集成环境，这里以ApmServer为例（只有用过ApmServer）。
首先在网上下载ApmServer的压缩包（免安装），解压到一个盘的根目录（建议是根目录，因为路径有空格可能造成一些不必要的麻烦），下面是其解压后的目录结构：
双击APMServ.exe启动应用，可以看到下面的界面：
因为我们只需要一个静态服务器，所以把MySQL和SSL等选项都去掉，然后点击“启动APMServ”就完成我们的静态服务器了。这时要部署应用，只需要把文件放到apmServer/www/htdocs目录下面就可以访问到了。这里想说的是其虚拟目录配置，即映射硬盘上任一目录作为服务器的一个子目录。有了虚拟目录，我们就可以定制出多个不同的服务器了。
打开虚拟目录的配置界面，填写虚拟目录名称（英文），中文备注，选择网页根目录，然后保存虚拟目录，重启ApmServer后,就可以访问我们的虚拟目录了。
优点：简单，快速，集成PHP开发环境（PHP，MySQL等）,支持虚拟目录等许多实用功能
缺点：用着用着就启动不了
三：使用Tomcat
Tomcat是Java应用服务器，当然也可以用来作静态服务器。但Tomcat默认的一些配置不太友好，所以我们要定制一些配置。首先就是让Tomcat支持显示目录文件。打开Tomcat/conf/web.xml，修改listings为true。
Tomcat中虚拟目录配置是位于Tomcat/conf/server.xml。在在host标签中增加如下格式的配置：
path=&虚拟目录名&
docBase=&文件所在根目录&
crossContext=&true&
如：&Context path=”/test” docBase=”G:/Test” crossContext=”true” /&
完成上面配置后，双击Tomcat/bin/startup.bat即可以启动Tomcate服务器，在浏览器中就可以正常访问到刚我们配好的目录了。
优点：功能强大
缺点：配置复杂
四：使用static-server
static-server很类似http-server，也是基于node，安装和使用方法很相似：
npm install -g static-server
使用时只需要在项目目录下指定该项目的入口文件即可：
static-server -i index.html
下面是一些常用的选项：
-p, --port
五：使用Python
如果你安装了Python，那这个方法可能最简便了，只需要在该目录下执行命令:
python -m SimpleHTTPServer
这样就启动了一个静态web服务器，此时项目的根目录为执行命令时所在目录，默认端口是8000，如果需要指定端口，则加上端口号启动：
python -m SimpleHTTPServer 8080
如果你安装Ruby，Ruby也提供了一个很简便的方式：
ruby -run -e httpd . -p 8888
几乎所有的web应用在最终部署到Linux上时都会用到Nginx做反向代理服务器，所以很有必要会用Nginx。
，解压，运行nginx.exe，在浏览器输入localhost或127.0.0.1，如果出现
Welcome to nginx!
则说明Nginx已经成功安装。
下面是Nginx常用到的命令：
nginx -s reload
// 重新加载nginx配置
nginx -s stop
如果你的需求只是实现静态资源服务，那么只需要如下简单配置即可：root代表项目的根目录，index代表默认的入口文件。
server_name
location / {
index.html index.
error_page
500 502 503 504
location = /50x.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
# 或者指定端口启动启动
json-server
可以看到json-server默认创建了三个请求资源，分别对应了data.json中的key值，很方便，这个时候浏览器访问localhostL3000/db
就会看到当前data.json的数据了。
访问http://localhost:3000/comments/1 ，则可以获取到comments下id为1的json数据：
很神奇是吧，有了数据之后，可以让json-server也作为静态资源的服务器，这样就没有跨域问题了。
json-server默认的静态资源（HTML,CSS,JS等）是在与json数据文件同级目录下的public文件夹中，你只需要创建一个名为public的文件夹，把静态资源放到public目录下，然后直接运行以下命令启动即可：
json-server data.json
假如我们需要指定静态资源文件夹的位置，则可以通过指定目录来启动json-server即可，如指定静态资源为json数据同级目录的source文件夹下，则：
json-server data.json
这样，访问http://localhost:3000/index.html 就可以成功加载到json数据了。
json-server还有很多更强大的功能，如支持模拟REST
API操作等，更多的功能可以到查看。
使用一些IDE
例如：HBuilder、WebStorm
如果没有特别要求，使用http-server基本就能满足我们前端对服务器的要求了
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：113800次
积分：1985
积分：1985
排名：千里之外
原创：78篇
转载：76篇
(1)(2)(1)(12)(5)(1)(4)(4)(3)(3)(2)(12)(3)(1)(7)(2)(1)(4)(2)(5)(7)(3)(7)(9)(2)(1)(2)(2)(5)(6)(4)(4)(7)(7)(11)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'servlet和javabean
web服务器只负责使用classes，而不编译classes文件。然后在服务器启动时候就加载，，
servlet是先编译后部署，修改完以后，MyEclipse或eclipse工具进行编译，然后部署.class文件到servlet容器中。当web服务器启动之后，servlet容器就会加载.class文件，在启动之间，无论外界如何修改java文件，服务器加载的,class文件都不会发生改变，如果修改之后，想要重新加载新的.class文件则需要重新启动服务器，才能重新加载.class文件。否则服务器就会使用之前加载好的.class文件。
jsp是在web服务器开启的状态时候，tomcat有设置为监视jsp文件的改动之后，点击保存，web服务器会重新对jsp文件进行编译，执行，并重新加载。所以jsp是web服务器进行的编译，执行，重新加载的过程，所以当我们要修改jsp文件的时候，我们不需要重新启动服务器。
所以运行时侯都是.class文件，但是他们部署到服务器的方式不同。
本文已收录于以下专栏：
相关文章推荐
这两天需要用到MyBatis的代码自动生成的功能，由于MyBatis属于一种半自动的ORM框架，所以主要的工作就是配置Mapping映射文件，但是由于手写映射文件很容易出错，所以可利用MyBatis生...
上一章节将的是如何使用选择判断语法，今天讲的大家都熟悉的循环语句。我想大家对while,do..while,for,foreach都不陌生吧，但在于性能方面上似乎又觉得陌生? 到底哪个性能更高，效率更...
人生苦短，都说必须python，那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..
在我们编写代码中，很经常用到string,StringBuilder 来做字符串拼接操作。两个同样能做字符串拼接，他们各有什么不同，那我们先看看他们存储原理。
String对象是不可改变的。每次...
Ext之Combobox的远程加载数据实例（附前后台代码）
BaseProtocolpublic abstract class BaseProtocol {
public Data load(int index){
转载自：http://blog.csdn.net/siakang/article/details/8128756
有时候，在项目开发时我们会有这样的需求：
在有个工程里开发代码...
本文主要介绍三级缓存的原理解析与实现方式。以前一直觉得三级缓存图片加载是一个很难理解的东西，但是自己看了一下午再试着写了一遍之后感觉还是只要沉下心思考还时很容易熟悉掌握的。
所谓三级缓存：首先是内存...
他的最新文章
讲师：汪剑
讲师：陈守元
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)本文以windows系统为例进行说明。
一、下载tomcat
下载完成后，点击“apache-tomcat-7.0.70.exe”按默认选项安装即可。注：tomcat需要jdk环境，可自行百度下载jdk并安装，这里不做说明。
二、配置idea
1、设置deployment
Files =& Settings =&Build，Execution，Deploymen =& Deployment
点击“1”处的“+”，填写名称study（可根据自己需要任意定义），type选择local or mounted folder，如上图所示。点击“ok”关闭“add server”对话框。
2、配置tomcat服务器：选择connection选项卡，其中的upload/download project files选择要部署到tomcat服务器目录（安装的tomcat文件目录），webserver root url则是用来运行该站点的地址。
3、配置Mappings。Local Path：是要部署的项目文件夹地址。Deployment Path是一个相对路径，是与2中upload/download project files的地址的相对路径。
4、将文件上传到tomcat目录下。tools =& –&Deployment–&upload to tomcat。也可以在单个文件编辑或是工程目录结构中，点击右键，选择“upload to study”。
三、知识扩展：tomcat虚拟目录
Web应用开发好后，若想供外界访问，需要把web应用所在目录交给web服务器管理，这个过程称之为虚似目录的映射。
1、在server.xml文件的host元素中配置
在&host&&/host&标签中加入&Context path="/JavaWebApp" docBase="F:\code\angulars" /&，即将在F盘下的code\angulars这个应用映射到JavaWebApp这个虚拟目录上，JavaWebApp是由tomcat管理的，并不存在于硬盘中，因此被称为“虚拟目录”。
name="localhost"
appBase="webapps"
unpackWARs="true" autoDeploy="true"&
path="/JavaWebApp" docBase="F:\code\angulars" /&
className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log." suffix=".txt"
pattern="%h %l %u %t &%r& %s %b" /&
Context表示上下文，代表的是一个javaWeb应用。属性path用来配置虚似目录，必须以”/”开头，属性docBase表示配置此虚似目录对应着硬盘上的Web应用所在目录。
使用浏览器访问资源：JavaWebApp/helloWord.html
注：修改service.xml文件需要重新启动tomcat。
2、让tomcat服务器自动映射
tomcat服务器会自动管理webapps目录下的所有web应用，并把它映射成虚似目录。换句话说，tomcat服务器webapps目录中的web应用，外界可以直接访问。
此时Tomcat服务器就会自动为docs这个JavaWeb应用映射一个同名的虚拟目录”/docs”，然后就可以使用浏览器访问这个JavaWeb应用的资源了。使用浏览器访问资源：docs/building.html。
3、添加xml扩展文件
在tomcat服务器的\conf\Catalina\localhost目录下添加一个以xml作为扩展名的文件，xml文件的名字可以任意取，context元素的path属性源自于是这个xml文件的名字。
在aa.xml文件中添加Context元素映射JavaWeb应用，代码如下：
docBase="F:\code\angulars" /&
使用浏览器访问资源：aa/helloWord.html。
注：新增xml文件需重启tomcat，但是修改了配置文件后不用重启Tomcat服务器。
本文已收录于以下专栏：
相关文章推荐
1. 安装jdk1.7
2. 安装tomcat1.8
一、创建并设置javaweb工程
1.创建javaweb工程
File --& New --& Projec...
Intellij IDEA 创建Web项目并在Tomcat中部署运行
一.创建Web项目
1、File -& New Module，进入创建项目窗口
  
人生苦短，都说必须python，那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..
一.创建Web项目
1.File -& New Module，进入创建项目窗口
2.选择Java类型，在 Module name 处输入项目名，点击Next
3.勾选 Web...
马克一下=====》前几天就在想弄一下intellij idea 的 非虚拟tomcat 部署；今天刚好碰到项目要远程访问，所以就走起~~~
安装tomcat，intellij idea过程（占位，过...
新手级别。
前台一般用dreamweaver软件作为编译环境，eclipse  myeclipse  netbeans这三种则是前台后台都可以写。
好的，现在开始具体说搭建步骤。
1.软件下...
ZZ本是一个前端，大学时期是软件工程专业，但是上课没有好好听课，后来就变成了一个前端。。。现在想学起javaweb，对于java的东西真的是一点都不会了，于是求助书本与学长，成功让我写好的前端页面在自...
IntelliJ IDEA License Server本地搭建教程
作者: ilanyu时间: March 18, 2016分类: 作品
日更新支持自定义端口及用户名，详见
（前端工程师利器）做前端的都知道，公司的项目在自己的电脑上搭建环境是挺麻烦的一件事情
首先：一般个人电脑没公司的配置性能好，
其次：搭建公司项目在自己电脑涉及很多缓存环境，资源环境包，数据库等的限制，...
该文章所介绍的问题均是在64位win8下出现的。网络原因导致gulp-sass安装失败如果你正在构建一个基于 gulp 的前端自动化开发环境，那么极有可能会用到 gulp-sass ,由于网络原因你可...
他的最新文章
讲师：汪剑
讲师：陈守元
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2415人阅读
JavaWeb（19）
&web项目无法部署到eclipse配置的本地tomcat
一、发现问题
在eclipse中新建Dynamic Web Project，配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并没有出现所建立的工程名字。
很明显项目并没有自动部署到Tomcat的Webapps中而是部署在了别的容器中。在内置浏览器中输入http://localhost:8080/webDemo/login.jsp可正常打开。但在外部浏览器上打开http://localhost:8080时确没有出现所期望的小猫画面。
eclipse不像MyEclipse默认将项目部署到tomcat安装目录下的webapps中，而默认部署到工作目录下
的.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps中，tmp1文件夹里面存放着该项目的信息。
为了使项目默认部署到tomcat安装目录下的webapps中，show view—&servers—&找到需要修改的tomcat—&右击 ①停止eclipse内的Tomcat服务器(stop) ②删除该容器中部署的项目(add and remove) ③清除该容器相关数据(clean) ④打开tomcat的修改界面(open)
⑤找到servers location，选择第二个(User tomcat Installation) ⑥修改deploy path为webapps ⑦保存关闭
需要说明的是①②③必须操作，否则下面的步骤会被置灰无法操作。
其中⑤如果为灰色无法更改的话，则按照如下步骤：
双击tomcat进入配置界面Service Locations（Specify the server path (i.e. catalina.base) and deploy path. Server must be published with no modules present to make changes.）选项变灰色无法更改配置。
若要更改，则把tomcat下的所有項目移除。并右击，clean...之后方可设置。。。启动后将又变为黑色。
默认选项为：
Use workspace metadata(dose not modify Tomcat installation)
修改选项为：
Use Tomcat installation(takes control of Tomcat installation)
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：102598次
积分：1317
积分：1317
排名：千里之外
原创：36篇
转载：13篇
评论：27条
(1)(1)(3)(1)(2)(7)(3)(4)(5)(1)(1)(6)(11)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'Web前端开发（44）
将网站放在服务器上的步骤：
1、将网站项目文件就是文件，，等文件放在的目录下
&如：是将这个网站放在目录下的。
注意：网站名不能是中文，可能不支持中文路径
2、找到的文件，一般位于目录下。用记事本打开，在末尾添上。
注意：可以随便填，但必须以开头；填的是网站在第一步中的路径；
Reloadable是设置网站内容改变后是否要重新启动服务器，一般设为
3、测试。先启动服务器，再打开浏览器，在地址栏输入：&就可访问了。注意这里的是在第二步设置的的值。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：190945次
积分：2342
积分：2342
排名：第16630名
原创：36篇
转载：103篇
评论：37条
本博客从2015年5月开始，虽然写的东西都比较基础，但还是希望能帮助一些人，另一方面也算是对自己学习的一种监督吧！
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'