Express服务安装设置

1、安装Express

(1)安装node

新建一个文件夹，cd进入目录

(2) 安装espress

安装Express框架---推荐用全局模式：

本地模式：npm install express 

执行该命令后会在当前文件夹下生成一个node_modules目录

全局模式：npm install -g express

 执行该命令后会在nodejs 安装目录下 生成node_modules\express

执行完以上的命令后，通过express --version查看版本号来检查是否安装成功（旧的版本是使用的express -v）

此时窗口打印了：'express' 不是内部或外部命令，也不是可运行的程序或批处理文件。

因express默认安装是最新的版本，已经是4.x.x的版本。

而最新express4.0+版本中将命令工具分出来了，所以必须要安装express-generator，

执行：npm install -g express-generator 全局模式

此时再次执行express --version

成功输出express框架当前安装的版本号，证明已经安装成功。

 新建工程

（express默认使用的是jade模板，对于初学者来说，ejs会更容易点）：

（1）cd 进入你要创建工程项目的目录下，

（2）执行：express --view=ejs express_project（旧版本为：express -t ejs test_express）

 说明： --view=后面填的是当前框架使用的模板，express_project代表当前文件夹的名称

 

此时你会发现在当前的位置已经创建好express_project目录及相关express文件，

下面我们来启动服务器

（1）cd express_project目录

（2）npm install 安装项目依赖，将自动安装package.json文件中 dependencies 依赖列表所有模块

（3）npm start 启动服务

旧版本的命令为：node app.js（主要是因为旧版本中的app.js是用来启动服务器的），

新版本的命令则为：npm start（或者是node bin\www）。

此时访问http://127.0.0.1:3000/，启动服务

 

服务启动成功后，浏览器显示如下：

 

分析：浏览器显示的是哪里的message呢？

首先打开app.js，然后可以找到这句话

  

然后我们再看indexRouter是什么，就可以往上找，找到

 

顺着这个，我们打开routes/index文件，看看里面究竟写的什么

 

原来框架是找到了views文件夹下的index.ejs文件渲染到了前台

 

试着来修改index.js文件的内容，将title改为Hello My Express.

 

在命令行中，按ctrl+c关闭服务，重新执行npm start ,看界面中的结果

 

接下来考虑一下，我们怎么访问静态的html呢？

首先，我们看app.js中有没有这句话

app.use(express.static(path.join(__dirname, 'public')));

有的话则直接看下一步，没有的话就在app.js中添加这句话，记得添加后重新启动服务器

接着，我们在项目的public文件夹下，新建一个html文件夹（便于后期管理所有的静态页面），然后新建index.html，内容如下：

 

这样在浏览器中输入下面的地址就可访问了:http://localhost:3000/html/index.html

 

 

 

 

那我们如何模拟ajax请求，读取json文件中的内容，提前绑定页面呢？（不依赖后端接口写好）

为了方便项目维护，我们新建json文件夹和js文件夹及其对应的data.json文件和index.js文件

 

 

在index.html中引入对应的文件

 

最后再打开访问http://localhost:3000/html/index.html

打开控制台，我们可以看到打印出了我们想要的内容

  

最后附上项目结构: