首先梳理项目流程:
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': ''
}
}
},
这时都成功了,
最后,祝大家一切顺利