在已经创建好的vue项目中执行以下步骤
1、下载安装需要的插件
下载express
npm install express
下载cors，用于处理接口跨域问题
npm install cors
下载mysql
npm install mysql
下载axios
npm install axios
2.在项目中创建server文件夹，用于搭建本地服务器
新建/server/app.js，用于配置服务器相关信息
let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
app.use(bodyParser.json());? //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())? ? ? ? ? ? ? //配置跨域，必须在路由之前
app.listen(80, () => {
? ? console.log('服务器启动成功');
})
新建/server/db/index.js，用于配置数据库相关信息
let mysql = require('mysql')
let db = mysql.createPool({
? ? host: '127.0.0.1',? ? //数据库IP地址
? ? user: 'root',? ? ? ? ? //数据库登录账号
? ? password: 'root',? ? ? //数据库登录密码
? ? database: 'test'? ? ? //要操作的数据库
})
module.exports = db
新建/server/API/user.js，用于操作数据库
let db = require('../db/index')
exports.get = (req, res) => {
? ? var sql = 'select * from user'
? ? db.query(sql, (err, data) => {
? ? ? ? if(err) {
? ? ? ? ? ? return res.send('错误：' + err.message)
? ? ? ? }
? ? ? ? res.send(data)
? ? })
}
新建/server/router.js，用于配置对应路由
let express = require('express')
let router = express.Router()
let user = require('./API/user')
router.get('/user', user.get)
module.exports = router
在/server/app.js中导入路由配置
let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')
app.use(bodyParser.json());? //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())? ? ? ? ? ? ? //配置跨域
app.use(router)? ? ? ? ? ? ? //配置路由
app.listen(80, () => {
? ? console.log('服务器启动成功');
})
测试服务器是否搭建成功
server文件夹下执行
node app.js
提示“服务器启动成功”，浏览器打开http://127.0.0.1/user，可看见user数据表中对应的数据，表示服务器搭建成功。
这样项目就搭建成功了，（ps:数据库要调好才能访问链接）