angular 代理接口,node连接本地mysql,自定义接口

一: 连接数据库

1、启动node(配置如下)

var express = require('express')
var bodyParser = require("body-parser")
var app = express()
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()
})
// 这两行是post获取参数(repress已分离body-parser组建)
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
//app.use('/upload', express.static('upload'))
app.use('/', require('./test.js'))
app.listen(3000, ()=> {
  console.info('启动成功')
})

2、连接mysql,连接数据表(创建test.js,上面要应用)

var express = require('express')
var router = express.Router()
var mysql = require('mysql')
var multiparty = require('multiparty')
var fs = require("fs")
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '123',
database: 'jay',
port: '3306'
})
connection.connect()
/*通过id搜索用户*/
router.get('/query', function(req, res, next) {
  connection.query(`select * from one where id=${req.query.userId}`, function(error, results, fields) {
    if (error) {
      console.info('error')
      res.send(error)
    } else {
      res.send(results)
    }
  })
})

二、定义接口(接口名字是text.js自己定义)

import http from 'axios'
export default {
  // 获取用户
  getUser(param = {}) {
    return http.get('api/user', {params: param})
  },
  // 查询用户
  serachUser(param = {}) {
    return http.get('api/query', {params: param})
  },
  // 登录
  userLogin(param = {}) {
    return http.get('api/createUser', {params: param})
  },
  // 注册用户
  addNewUser(params = {}) {
    return http.post('api/addNewUser', params)
  },
  // 删除用户
  deleteUser(id) {
    return http.delete(`api/delete?userId=${id}`)
  },
  // 添加用户
  addUser(params = {}) {
    return http.post('api/add', params)
  },
  // 修改用户
  updateUser(params = {}) {
    return http.post('api/update', params)
  }
}

三、angualr代理接口(在项目自定义文件),target(node监听地址),pathRewrite(api代表这个地址,就是接口文档的api)

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": "false",
    "changeOrigin": "true",
    "pathRewrite": { "^/api": "" }
  }
}

四、在页面使用

 import http from '../../api/user';

 getData() {
    let param = {
      pageIndex: this.page,
      pageSize: 10,
      type: this.filter.type ? this.filter.type : null,
      value: this.filter.value ? this.filter.value : null
    }
    http.getUser(param).then(r => {
      this.userData = r.data.list
      this.totalPages = r.data.total
    }).catch(r => {})
  }

五、亲测有效,不好之处,请指教

原文地址:https://www.cnblogs.com/LWJ-booke/p/9512067.html