在vue项目中使用node.js编写接口

出处：node连接mysql生成接口，vue通过接口实现数据的增删改查

安装依赖

npm install axios --save
　在mian.js中挂载原型：

image.png

安装服务依赖

npm install mysql express body-parser --save

搭建本地服务

搭建完成vue项目后，在根目录建立server文件夹；
　　在server下建立api文件夹，api文件夹下建立StuApi.js，用于创建接口；
　　在server下建立db.js，用于连接数据库；
　　在server下建立index.js，为运行主文件；
　　在server下建立sqlMap.js，sql语句，将和StuApi.js连接使用(该文件可以不要，sql在接口查询数据库时写到接口中即可)；

image.png

配置本地服务

db.js：连接数据库的配置

// 用于连接数据库
// 数据库连接配置
module.exports = {
  mysql: {
    host: 'localhost', // 新建数据库连接时的 主机名或ID地址 内容
    user: 'root',
    password: '', // root 密码
    database: 'apitest', // 数据库名
    port: '3306'
  }
};

sqlMap.js:连接到数据库后,对数据进行sql语句操作
(该文件可以不要，sql在接口查询数据库时写到接口中即可)

// sql语句，将和StuApi.js连接使用
const sqlMap = {
  Stu: {
    add: 'insert into axios_demo(stu_Id,stu_name,stu_sex,stu_college,stu_class) values (0,?,?,?,?)',
    show: 'select * from ?',
    del: 'delete from axios_demo where stu_Id = ?',
    update: 'update axios_demo set stu_name = ?,stu_sex = ?,stu_college = ?,stu_class = ? where stu_Id = ?'
  }
};

module.exports = sqlMap;

StuApi.js:接口
将前端与后端连接起来：

const models = require('../db');
const express = require('express');
const router = express.Router();
const mysql = require('mysql');
// 连接数据库
const conn = mysql.createConnection(models.mysql);
conn.connect();
/* const jsonWrite = function(res, ret) {
  if (typeof ret === 'undefined') {
    res.json({
      code: '1', msg: '操作失败'
    });
  } else {
    res.json(
      ret
    );
  }
}; */

// 接口：查询表
router.get('/showStu', (req, res) => {
  res.send('连接成功');
});

module.exports = router;

配置主文件:index.js
启动文件，也是设置跨域、端口的文件。
一般来说项目运行端口号为8080，服务端口为3000，所以会造成跨域的问题。这里我们设置跨域的域名为*，即表示允许任意域名跨域（代码里已注释），跨域允许的请求方式为put、get、post等。
　　端口默认为3000，如果被占用的话，改为其他不被占用的端口就行。

// 运行主文件
/*
这是启动文件，也是设置跨域、端口的文件。一般来说项目运行端口号为8080，服务端口为3000，所以会造成跨域的问题。这里我们设置跨域的域名为*，即表示允许任意域名跨域（代码里已注释），跨域允许的请求方式为put、get、post等。端口默认为3000，如果被占用的话，改为其他不被占用的端口就行。
*/
// node 后端服务器
const StuApi = require('./api/StuApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
// 采用设置所有均可访问的方法解决跨域问题
app.all('*', function(req, res, next) {
  // 设置允许跨域的域名，*代表允许任意域名跨域
  res.header('Access-Control-Allow-Origin', '*');
  // 允许的header类型
  res.header('Access-Control-Allow-Headers', 'content-type');
  // 跨域允许的请求方式
  res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS');
  if (req.method.toLowerCase() === 'options') {
    res.send(200); // 让options尝试请求快速结束
  } else {
    next();
  }
});
app.use(bodyParser.json()); // 以json格式返回出去
app.use(bodyParser.urlencoded({ extended: false }));
// 后端api路由

app.use('/api', StuApi);
// 监听端口
app.listen(3000);
console.log('success listen at port:8080......');

以上便是node编写后端接口的文档，前端发送对齐请求连接接口即可，
可参考axios请求封装