Vue+Element UI+json-server （axios请求）前后端分离的管理系统开发

项目临近末尾，记录一下开发过程中一些细节

一 json-server

1. 安装：随便在哪个目录下的命令行，输入npm install -g json-server。
2. 启动：注意应该在 用来当作服务器的json文件所在文件夹下启动。启动命令为 json-server --watch Project.json
3. 在项目中使用：由于在前端代码中直接请求会有跨域问题，
   比如：项目npm run dev后的端口号为8010，而json-server是3000，可以在文件config/index.js的dev下添加以下语句：

proxyTable: {
    '/api': {
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        target: 'http://localhost:3000',// 接口的域名
        pathRewrite: {
            '^/api': ''//后面可以使重写的新路径，一般不做更改
        }
    }
}

如图：

这样就可以直接使用url：http:localhost:8010/api/project访问了，可以在请求时可简写成’…/api/project’。

二 axios的使用

• axios的get请求可获取数据

查找所有数据：http://localhost:3000/data
查找指定ID数据：http://localhost:3000/data/2（id）
查找指定字段数据：http://localhost:3000/data？title=某某
模糊查询：http://localhost:3000/data？q=需要查询的内容

• axios的post请求可添加数据
• axios的put请求可修改数据
• axios的delete请求可删除数据

另外，在使用post和delete时常常会出现各种错误，比如我在使用delete时会出现不知道原因的404错误，但请求地址确定是没问题的，戳这里有解决方法，但也不知道为啥那样就行……

还有个疑惑：怎么同时用两个json文件做为服务器来请求呢？看了好多篇文章都是用的一个json文件。待解答……