创建一个本地数据接口

用vue创建项目实现登录页面发现需要返回数据，选择本地创建数据接口，供自己练习学习使用

npm i express express-generator

//api是你创建express名字，可自行修改，
npx express api

cd api

npm i

//每次修改数据等操作要记得重新执行下面一句代码
npm start

执行完上述操作可以看到对应目录

默认数据存放端口为http://localhost:3000，修改端口可以在.bin文件夹下的www文件里面修改

接口数据存放在router文件夹下面，可以看到下面为默认发送的数据

修改数据可以在user.js中修改，也可以自定义数据文件进行发送，可以看到默认为get请求，也可以自行修改为post请求

 创建完接口如何通过axios返回数据呢？

import axios from 'axios'
export default defineComponent({

mounted() {
 axios.get('http://localhost/3000/users').then((res) => console.log(res))
 }
})

执行代码发现报错，是因为跨域访问问题，我们在vue.config.js中添加下面代码，记得修改完配置一定要记得重新启动整个项目

devServer: {
    proxy: {
      '/abc': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '^/abc': ''
        }
      }
    }
  },

发现还有问题，是因为我们修改之后忘记修改获取数据代码，修改之后 重新跑一遍代码即可

axios.get('/abc/users').then((res) => console.log(res.data))