不用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 i
6.在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

10. 可以配置代理解决跨域问题
    因为我是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

---

希望能对跟我一样的前端小白有一些小帮助把！有什么不对或不严谨的的地方也欢迎大家指出哦~