#mark 后端踩坑之旅(一)

作为一个前端工程师,总想着有一天能够搭建自己的个人主页,所以前期要做好准备工作,从熟悉一套后端的搭建环境着手。

笔记:

依赖: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项目的具体内容了。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值