首先梳理项目流程：

1.前后端分离，前端使用vue编写静态界面，后端使用node提供接口，

2. 前端开发时通过Vue-Cli中提供的proxyTable进行代理，由此可跨域调用Node编写的API

那就开始吧！

一.项目搭建

1.安装vue-cli    npm i -g vue-cli

2.使用手脚架创建项目文档   vue init webpack XXX(项目名字)

3.cd XXX   安装依赖 npm install   运行  npm run dev

此时你就可以看见运行后的图标和内容了  哈哈。。。

二.搭建node

1.新建server文件夹，里面3个文件 ，（1）index.js入口文件（2）db.js 数据库文件（3）api.js 接口文件

好，准备工作完成了，我们要搞大事情了，

2.安装express  npm install express --save

填写代码：

index.js

// 引入编写好的api

const api = require('./api')

// 引入文件模块

const fs = require('fs')

// 引入处理路径的模块

const path = require('path')

// 引入处理post数据的模块

const bodyParser = require('body-parser')

// 引入Express

const express = require('express')

const app = express()

 

app.use(bodyParser.json())

app.use(bodyParser.urlencoded({

extended: false

}))

app.use(api)

// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件

app.use(express.static(path.resolve(__dirname, '../index.html')))

// 因为是单页应用 所有请求都走/dist/index.html

app.get('*', function (req, res) {

const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf-8')

res.send(html)

})

// 监听8080端口

app.listen(8080)

console.log('success listen…………')

db.js

// Schema、Model、Entity或者Documents的关系请牢记，Schema生成Model，Model创造Entity，Model和Entity都可对数据库操作造成影响，但Model比Entity更具操作性。

const mongoose = require('mongoose')

// 连接数据库 如果不自己创建 默认test数据库会自动生成

mongoose.connect('mongodb://localhost/test')

 

// 为这次连接绑定事件

const db = mongoose.connection

db.once('error', () => console.log('Mongo connection error'))

db.once('open', () => console.log('Mongo connection successed'))

// 定义模式loginSchema

const loginSchema = mongoose.Schema({

a: String,

b: String,

c: String,

d: String

 

})

 

// 定义模型Model

const Models = {

Login: mongoose.model('Login', loginSchema)

}

module.exports = Models

 

api.js

'use scrit'

const models = require('./db')

const express = require('express')

const router = express.Router()

 

// 创建(create) 读取(get) 更新(update) 删除(delete)

 

// 创建账号接口

router.post('/api/login/createAccount', (req, res) => {

// 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')

console.log(req)

let newAccount = new models.Login({

 

a: req.body.a,

b: req.body.b,

c: req.body.c,

d: req.body.d

})

// 保存数据newAccount数据进mongoDB

newAccount.save((err, data) => {

if (err) {

res.send(err)

} else {

res.send('createAccount successed')

}

})

})

// 获取已有账号接口

router.get('/api/login/getAccount', (req, res) => {

// 通过模型去查找数据库

models.Login.find((err, data) => {

if (err) {

res.send(err)

} else {

res.send(data)

}

})

})

module.exports = router

 

然后在config文件夹中的index.js添加

proxyTable: {

'/api': {

target: 'http://localhost:8080/api/',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

},

这时都成功了，

最后，祝大家一切顺利