作为一个前端工程师,总想着有一天能够搭建自己的个人主页,所以前期要做好准备工作,从熟悉一套后端的搭建环境着手。
笔记:
依赖:node.js/pm2/express等,视需求而定。
首先有一台具有公网IP的服务器,目前尝试用阿里云服务器,之后可能更换。
服务器目录:
--dist(npm run build生成的vue项目)
--app.js
--xx.json
app.js
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser') // post 数据时需要
const express = require('express');
const app = express();
// 模拟数据,api服务
var appData = require('./data.json');
var userinfo = require('./userinfo.json');//该文件保存username+hash之后的password+group 为数组
var apiRoutes = express.Router();
app.use(bodyParser.json())
/*
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
// api接口
apiRoutes.get('/seller', function(req, res) {
res.json({
erron: 0,
data: seller
})
});
*/
apiRoutes.post('/auth', function(req, res) {
//验证
let username=req.body.username;
let password=req.body.password;
console.log(password);
for(var i=0;i<userinfo.length;i++)
{
if(userinfo[i].username==username)
{
if(userinfo[i].password==password)
{
res.json({
state: "ok",
group: userinfo[i].group,
id: userinfo[i].id,
username: userinfo[i].username
})
}
else
{
res.json({
state: "false",
group: null,
})
}
}
}
res.json({
state: "false",
group: null,
})
});
app.use('/api', apiRoutes);
app.use(express.static(path.resolve(__dirname, './dist')))
app.get('*', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
res.send(html)
})
app.listen(8082);
console.log("正在监听8082端口......")
然后在服务器对应目录上执行pm2 start app.js即可
本地调试:为了在本地方便调试,我在vue项目下的config/index.js中配置了proxytable
proxyTable: {
'/api/': {
target: 'http://localhost:8082',
changeOrigin: true, //可否跨域
pathRewrite: {
'^/api/': '/api/'
}
}
},
本地npm run dev启动项目在8090端口,项目中访问后端api通过fetch('/api/xxx',{})即可访问。(也可以用postman调试)
最后就是完善app.js的后端api和Vue项目的具体内容了。