不用mock，前端来建立后端服务以便自己实现接口
前言
分享一个前端小技能，前端在写代码时经常遇到的一个问题就是，后端接口没写好，自己却需要调用这个接口，一般这时前端都会使用mock来模拟假数据。然而我就想作为一个前端能不能自己写一个接口来试试手，结果一写发现还挺简单的。下面分享一下我的实现步骤。以下全是我一点一点手敲出来并且也是我自己项目中使用的。
主要用到的技术与功能插件
前端：vue2.x, vue-cli-3.x, vuex, vue-router, axios
后端：nodejs, express, nodemon
实现过程
1.首先安装nodejs，这个就不赘述了
2.全局安装express npm install -g express-generator
3.express -v 查看是否安装成功
4.打开cmd或者其他控制台并进入项目目录，在我的电脑中的项目路径下，选中路径后输入cmd，可以快速用cmd打开此路径
QQ图片20190830172707.png
4.建立后端服务器文件夹server
express server -e.5.cd server 进入后 安装
cnpm i6.在serve/app.js文件中 添加
// 监听端口
app.listen(888, () => {
console.log('服务器已经启动');
})
7.全局安装nodemon npm install -g nodemon
8.在cmd中启动服务器 nodemon app
启动成功图如下：
clipboard.png
9.在server/routes/index文件中 添加后端接口
router.post('/checkLogin', (req, res) => {
// 前端接口/api/checkLogin， 后端这里用/checkLogin
// req 请求对象， res 响应对象
res.send('1'); // 响应'1'回去
})
然后再前端页面调用接口
this.$refs[formName].validate(valid => {
if (valid) {
// 这里要收集账号和密码
// 发给后端去数据库查看是否存在
const userName = this.loginForm.userName;
const passWord = this.loginForm.passWord;
this.$axios.post('/api/checkLogin', {
userName: userName,
passWord: passWord,
})
.then(res => {
if (res.data.length) {
console.log('接收后端响应登陆请求的数据：', res.data);
this.$message({
message: '恭喜你，登陆成功！',
type: 'success'
});
// 登陆成功跳到后台首页
this.$store.commit('SAVE_USER_INFO', res.data[0]);
this.$router.push('/');
}
else {
this.$message.error('登陆失败,请检查账号或密码！');
}
})
} else {
console.log("error submit!!");
return false;
}
});
这一步就是写接口啦
然而运行后会发现跨域啦，如下图：
111.png
- 可以配置代理解决跨域问题
因为我是vue-cli 3.x 所以在前端根目录下新建vue.config.js,添加
module.exports = {
devServer: {
host:"localhost",//要设置当前访问的ip 否则失效
open: true, //浏览器自动打开页面
proxy: {
'/api': {
target: 'http://localhost:888/', // 想要跨域的后端地址
ws: true,
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果是接口跨域，设置这个参数
pathRewrite:{
'^/api':'', // 以/api开头就省略掉
}
}
}
}
}
如果是vue-cli 2.x 就在config/index.js文件中 的 proxy处修改
proxy: {
'/api': {
target: 'http://localhost:888/', // 想要跨域的后端地址
ws: true,
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果是接口跨域，设置这个参数
pathRewrite:{
'^/api':'', // 以/api开头就省略掉
}
}
}
11.你以为这样就解决跨域了吗，你会发现还是报错
clipboard111.png
这是因为修改完接口后发现还是报这个错且端口是8080而不是888，原因是修改了代理后，需要重启服务 ，代理未生效。
12.重启前端服务后，接口请求成功
22222.png
13.后端接收前端发送的请求的参数(账号和密码)，进行处理
// 接收登陆请求
router.post('/checkLogin', (req, res) => {
// 前端接口http://localhost:888/checkLogin， 后端这里用/checkLogin
// 解决跨域后顺便前端接口改为 /checkLogin
// req 请求对象， res 响应对象
// 接收账号和密码
const { userName, passWord } = req.body;
console.log(userName, passWord); // admin, 12345
res.send('1'); // 响应'1'回去
})
14.可以看到后端拿到了数据
clipboard241254124.png
希望能对跟我一样的前端小白有一些小帮助把！有什么不对或不严谨的的地方也欢迎大家指出哦~
