VUE+node.js+mongodb 编写前后端项目

1.创建VUE项目，创建node.js项目

1.创建vue项目 

vue create  项目名称

启动命令   npm run serve

2.创建node.js 

express -e 项目名称

启动命令  npm start .\index.js

2.编写前端vue页面 引入 axios 对后端接口进行请求

2.1.引入axios

npm i axios

2.2.在main.js 全局注册

import axios from 'axios'
Vue.prototype.$axios = axios;//把axios挂载到vue上

2.3.在所需要的数据页面上对接口进行请求 page.vue

 mounted () {
  let api = '接口地址'
this.$axios.get(api).then((response) => {
    this.tableData = response.data //将请求活得的数据赋值给data中
})
  }

3.进行node.js的后端开发

3.1.引入数据库 

npm install mongodb --save

创建文件db.js

module.exports = function(s,c){
    const mongoose =require('mongoose')
    mongoose.connect('mongodb://127.0.0.1:27017/数据库名称')
    mongoose.connection.once('open',()=>{
        console.log('打开提示')
        s()
    })//打开提示
    mongoose.connection.once('error',()=>{
        console.log('错误提示')
        c()
    })//错误提示
    mongoose.connection.once('close',()=>{
        console.log('关闭提示')
    })//关闭提示
    }

修改www文件

#!/usr/bin/env node
const db =require('../db/db')
/**
 * Module dependencies.
 */
 db(()=>{  //修改点
var app = require('../app');
var debug = require('debug')('automotiveend:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}
},()=>{})   //修改点

创建表结构  page.js

const mongoose =require('mongoose');


let inve =new mongoose.Schema({
    
    unit : String,
    state :String
})

let inven = mongoose.model('表格名称',inve)

module.exports = inven

3.2编写查询数据接口

/*引入表格 */
const inven = require('../mouth/inventory');

router.get('/inventory', function(req, res, next) {
  inven.find().then((data)=>{  //查询方法
    console.log(data)
    res.json(data)  //返回查询数据库活得的数据
  });
});

4.解决跨域问题

（Access to XMLHttpRequest at 'http://xxxxxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.）

在vue.config.js添加下面的代码 

devServer: {
    //配置http-proxy代理方式跨域
    proxy: {
      // 自定义请求的开头,使用代理方式处理/demo开头的请求,/xxx可以自定义
      "/demo": {
        // 往哪个服务器发请求
        target: "http://127.0.0.1:3000",
        pathRewrite: {
          // ^代表字符串开头,实际发送请求时,会把请求开头的/demo删除
          // 因为/demo并不是请求的一部分,只是个代理的标识
          "^/demo": "",
        },
      },

修改页面请求的路径  如 page.vue

mounted () { 
  let api = '/demo/home'  //修改点添加/demo 配置代理
this.$axios.get(api).then((response) => {
    this.tableData = response.data
})
  }
};