vue-axios+express+node环境配置

近来自己在摸索用node作服务器开发。到今天为止搭建了一个可以通过axios发送基础get、post请求的环境。

1.下载node.js

这个很简单，官网下载下来，一直next下去就可以了。下载完成后输入node -v，若显示版本号，就说明安装成功了。

2.创建一个vue项目

我的话个人是用vscode进行编译的。

1.在命令行或者vscode终端输入 npm install -g vue-cli

2.创建一个名为test的项目 vue init webpack test （会有一系列问题，根据自己的情况选择  Y or N）

3.使用 npm install 指令安装所需的依赖

4.由于使用axios发送请求，安装axios输入 npm install axios --save

      配置axios，在src目录下新建一个axios文件夹，文件夹下新建一个配置文件，这里我命名为index.js。

          文件目录如下

下面是我iaxios下index.js文件里的配置，可以按照自己需求进行配置。其中 axios.defaults.baseURL = 'http://localhost:3000'  是我node服务器的接口。

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 静态资源
Vue.prototype.$static = ''

// 配置接口地址
axios.defaults.baseURL = 'http://localhost:3000'
var loadingInstance
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      lock: true,
      text: '数据加载中，请稍后...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    if (config.method === 'post') {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  err => {
    loadingInstance.close()
    Message.error('请求错误')
    return Promise.reject(err)
  }
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
  res => {
    if (res.data.code === 200) {
      loadingInstance.close()
      return res
    } else {
      loadingInstance.close()
    }
  },
  err => {
    loadingInstance.close()
    Message.error('请求失败，请稍后再试')
    return Promise.reject(err)
  }
)
// 发送请求
export function fetchPost (url, params={}) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(
        res => {
          resolve(res.data)
        },
        err => {
          reject(err)
         
        }
      )
      .catch(err => {
        reject(err)
          console.log(err);
      })
  })
}
export function fetchGet (url, params={}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

找到config下的index.js文件，修改其中的    proxyTable{} 为以下代码。另外，方便看项目，这个文件中有一个autoOpenBrowser，把它设置成true就会自动打开浏览器了

    proxyTable: {
       '/api': {
        target: 'http://localhost:3000',//设置你调用的接口域名和端口号
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

然后在main.js中导入axios，加入如下代码

import axios from './axios'
import { fetchGet, fetchPost} from './axios/index'


//定义全局变量
Vue.prototype.$get = fetchGet
Vue.prototype.$post = fetchPost

5.接下来修改HelloWorld.vue

    获取json

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name:"123",
      age:12
    }
  },
    methods:{
      click(){
        let params={
          name:this.name,
          age:this.age
        }
          this.$post('http://localhost:3000/test',params)//此处用post方法 url是我服务器中的一个接口
          .then(res => {
                    console.log(res.data);
          })
          .catch(() => {
             })

      }
    }
}

3.搭建一个express服务器     

1.安装全局express

 npm install -g express-generator

2.创建服务器项目

　　express projectname -ejs
　　            cd projectname

　　npm install

3.启动服务器项目

    npm start

看见下面两个图片就表示服务器启动成功啦

4.做好服务器与前端的接口对应

           因为跨域，我们这里对服务器进行一下配置，有以下两种方法

           1.使用cors

           使用npm下载cors包，运行命令npm install cors --save，然后在app.js放入如下代码，主要要放在app.use('/', indexRouter)这些代码之前，我是干脆放在了最上面。

var cors = require('cors');
app.use(cors({
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
    alloweHeaders:['Conten-Type', 'Authorization']
}));

2.使用app.all配置

这个方法就不需要下载包了，直接输入如下代码，位置和上面一样

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,Origin,Accept,X-Requested-With');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.header('X-Powered-By', ' 3.2.1');
    res.header('Content-Type', 'application/json;charset=utf-8');
        next();
});

由于上面访问的是一个test，在route.js下新建一个test.js 内容为

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

/* GET users listing. */
router.get('/', function (req, res, next) {
    res.json({data:{ name: 'ccc', pwd: '123' },code:200});
});
router.post('/', function (req, res, next) {
     res.json({ data:{ name: 'aaa', pwd: '123' },code:200});//返回给前端的代码
         console.log(req.body);//前端传过来的参数
});
module.exports = router;

然后在app.js中做好相应配置，输入如下两行代码。

var testRouter = require('./routes/test');
app.use('/test', testRouter);

这样就完成了前端和服务器的接口对接。

项目目录

完整的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 testRouter = require('./routes/test');

var app = express();
var cors = require('cors');
app.use(cors({
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
    alloweHeaders:['Conten-Type', 'Authorization']
}));
// app.all('*', function (req, res, next) {
//     res.header('Access-Control-Allow-Origin', '*');
//     res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,Origin,Accept,X-Requested-With');
//     res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
//     res.header('X-Powered-By', ' 3.2.1');
//     res.header('Content-Type', 'application/json;charset=utf-8');
//         next();
// });
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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.use('/users', usersRouter);
app.use('/test', testRouter);

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

最后只要用npm run dev启动vue项目，再用npm start启动node服务器就可以了。

测试一下test应该显示如下

前端请求应该输出如下

当然不新建test文件也是可以的，直接用里面的index和users更方便。但是新建一个test.js，增强一下动手能力嘛。

有时间再研究一下连接MySQL，我知道现在基本上是用mongodb，本人比较菜，只学过MySQL，先从简单的开始练手。