分析

axios ：用来发送请求（对你说的做出请求）
express：node的一个框架，开启一个web服务（监听请求的）
简单说：(axios发送请求) —> (express 响应请求)

vue+vue-Axios搭建前端环境

查看node是否安装：node -v
(如果不确定自己的版本是否过低就卸了再装)
卸载指令：npm uninstall -g vue-cli
安装指令：npm install -g @vue/cli
（以上步骤下次不用重复）
选择打开一个空文件，创建myapp ：vue create myapp（项目名称）


vue-Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
在终端myapp目录下安装:npm install --save axios

前端组件

为方便我们直接改写HelloWorld.vue

<template>
  <button type="button" @click="response">Click Me!</button>
</template>

<script>
import Axios from "axios";
export default {
  name: "login",
  methods:{
    response(){
      // alter(123);
      Axios.get('http://localhost:3000/users').then(function(response){
        console.log("你已连接！");
      })
    }
  }

}
</script>

<style>

</style>

express搭建后端环境

完成 安装与Express 应用程序生成器两步即可.即到7
(备注：如果搭建过直接看下一次搭建新项目环境可用)

nodejs 设置跨域访问

//设置跨域访问
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

app.js全部代码：

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

var indexRouter = require('./routes/index');
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.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

app.use('/', indexRouter);
app.use('/users', usersRouter);

// 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;

结果呈现

代码clone路径：

前端.+后端.

参考：
nodejs 设置跨域访问.

axios中文网.