ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
**访问网页和我们去商场买东西的原理基本是相同的。** 我们去商场买东西:首先将需求提交给售货员,然后售货员分析我们的需求,并递交给我们想要的商品。 访问网页:我们将请求提交给服务器,服务器分析我们的请求,并返回我们想要的结果。 这里的服务器是个比较宽泛的词。我们说服务器其实也是一台计算机,只是由于它的功能是提供一些服务,那么我们给它起的名字叫服务器。就像商场也是一个房子,只是因为这个房子起到了卖东西的作用,所以我们把它叫做商场。 商场提供卖东西的服务,需要有售货员。计算机提供WEB访问的服务,需要服务程序。能提供这个服务的软件有很多,apache+php便是其中著名的一个。 在这里,我们将使用一个叫做**http-server**的工具,用来提供http服务。下面,就让我们来共同见证http-server的伟大吧。 上一节我们说了,npm就是一个360管家。可这个管家毕竟是运行在node.js上的,有些东西,只能依赖命令行。比如我们想找一些关于http的工具,那么需要输入 `npm search http` 。 有没有更加人性化的东西呢?答案是肯定的,因为伟大的软件从不缺乏追随者。npm的名气之大,以致于有很多站点为它提供了免费的列表服务。 比如:[https://www.npmjs.com/](https://www.npmjs.com/),就是其中的一个。 比如:我还可以通过关键字找到http-server,如下图所示: ![](https://box.kancloud.cn/2016-07-18_578ce50e8a3ae.png) 点击进入后,还可以查看具体的信息。 ![](https://box.kancloud.cn/2016-07-18_578ce50ea4f22.png) 正如它的介绍一样: > Http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning. http-server是一款简单、零配置、使用命令行、提供http服务的软件。它虽然简单,但却高效,特别是应用于开发、测试与学习中。 在http-server介绍页面中,还给出了安装与使用的方法,如下图所示: ![](https://box.kancloud.cn/2016-07-30_579b7dc324a23.png) 没错,只是简单的几行英文而已,既然没有几行,就翻译一下吧。 ## 安装 打开git bash,输入`npm install http-server -g` (注意:mac中需要使用 `sudo npm install http-server -g`), 然后我们需要的是耐心的等待,当然了,有时候可能会由于我们的网络问题,导致安装不成功。如果出现了安装错误,请查看是否是由于未请求到资源而导致的。 资源未能成功请求到,基于上可以确定是网络问题了,这时候你可以下载一个最新的HOSTS,或是找一款免费的、可以使用的VPN来帮助你。当然了,如果你还不能成功突破网络限制,那么你首先需要百度来解决这个问题。 安装过程如下图所示: ![](https://box.kancloud.cn/2016-07-18_578ce50edc394.png) ## 启动 使用`http-server`来启动http服务,如下图所示: ![](https://box.kancloud.cn/2016-07-18_578ce50ef0417.png) 成功启动后,将会显示访问的地址,比如,上图显示的地址为: http://127.0.0.1:8080 或 http://192.168.1.105:8080 ![](https://box.kancloud.cn/2016-07-18_578ce50f41041.png) 由于我当前的目录中并没有index.html这个文件,所以将会显示目录列表。 按照提示,我们可以使用`ctrl+c`来终止服务。 下面,我们尝试切换一下文件夹,首先使用`ctrl+c`终止当前的http服务。然后依次输入以下命令: ~~~ cd /d mkdir yunzhi cd yunzhi echo 'hello yunzhi' >> index.html http-server ~~~ 上面这些都是基本的bash命令,现在我们的主要目的是学习angularjs,其实只要明白大致的意思,然后按照上面的命令执行就可以了。 此时,再按照相应的提示进行访问,将会输入我们刚刚建立的index.html文件的内容,显示如下: ![](https://box.kancloud.cn/2016-07-18_578ce50f568bb.png) 所使用命令的示例如下所示: ![](https://box.kancloud.cn/2016-07-18_578ce50f67adc.png) 有了http-server,我们就可以随意的建立文件夹、随意的建立文件,然后就可以在浏览器中访问这个文件来查看效果了。 比如,我们新建一个文件: `d:/yunzhi/angularjs/index.html`。