使用Express搭建一个服务端简易实例，使用axios完成请求。

会飞的猪

银行业职员

1.什么是Express？

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。

2.本教程实现什么？

使用Express框架搭建一个简单的服务端实例
在vue项目中利用axios请求搭建的服务端

注：该教程必须在node.js环境下

3.开始搭建

1.安装Express：

首先全局安装express框架：

npm install express -g  
npm install express-generator -g

2.初始化一个项目：

（1）在任意一个地方建立一个文件夹，这里我随意起了一个名称：

（2）然后执行命令，初始化express应用：

express 项目名称

（3）然后生成如下目录：

（4）命令行进入该文件夹：

cd myexpressdemo

（5）安装依赖：

npm install

（6）项目目录简单介绍：

/bin:用来启动应用（服务器）

/public: 存放静态资源目录

/routes：路由用于确定应用程序如何响应对特定端点的客户机请求，包含一个 URI（或路径）和一个特定的 HTTP 请求方法（GET、POST 等）。每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行。

/views: 模板文件所在目录文件格式为.jade

目录app.js程序main文件这个是服务器启动的入口

3.启动服务

npm start

然后在浏览器输入：http://localhost:3000/，若出现以下界面则启动成功：

4.编写基本代码

1.app.js里面主要代码介绍：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

//路由信息 （接口地址）开始 存放在./routes目录下
var indexRouter = require('./routes/index');//home page接口
var usersRouter = require('./routes/users');//用户接口

var app = express();


// view engine setup（模板）
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);//在app中注册routes该接口 
app.use('/users', usersRouter);//在app中注册users接口

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

当我们在浏览器中访问 http://localhost:3000/ 调用的就是index中的接口

我们打开index.js就可以看到该接口的定义：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
module.exports = router;

定义一个路由的基本格式为：

app.METHOD(PATH, HANDLER)

其中：

app 是 express 的实例。

METHOD是 HTTP 请求方法。

PATH 是服务器上的路径。

HANDLER 是在路由匹配时执行的函数。

以上的定义代表

在根路由 (/) 上（应用程序的主页）对 GET 请求进行响应：

2.实现一个获取用户信息接口

在routes文件夹下面新建一个user.js文件,并在里面定义一个User模型：

function User(){
    this.name;
    this.city;
    this.age;
  }
  module.exports = User;

然后回到users.js文件，在头部添加：

var URL = require('url');

然后继续添加其他内容：

var express = require('express');
var router = express.Router();
var URL = require('url');
var User = require('./user')

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
router.get('/getUserInfo', function(req,res,next){
  var user = new User();
  var params = URL.parse(req.url,true).query;//获取URL参数，使用需要引入require('url');
  if(params.id == '1'){
    user.name = "ligh";
    user.age = "1";
    user.city = "北京市";
  }else{
      user.name = "SPTING";
      user.age = "1";
     user.city = "杭州市";
  }

  var response = {status:1,data:user};
  res.send(JSON.stringify(response));
})
module.exports = router;

调用方式：

http://localhost:3000/users/getUserInfo?id=1

或者

http://localhost:3000/users/getUserInfo?id=2

到这里我们就把获取用户信息接口完成了，下面我们在vue项目里面验证一下：

5.新建一个vue-cli项目

我的项目结构利用脚手架搭建完成之后是这个样子：

由于我们只是验证一下，项目里面的代码我们就不给予修改了。然后安装axios，利用axios来发起请求：

npm install axios --save

修改main.js：

然后在app.vue里面新增一个请求方法：

然后启动项目：（注意：不要关闭express启动起来的服务）

npm run dev

这里报错了，原因是跨域问题，至于跨域问题可以自行百度。我们需要在express项目里面的app.js里面新增如下代码，解决跨域问题：

//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});