[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-6Sv7afpa":3,"public-project-articles-6Sv7afpa":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},43,"6Sv7afpa",39,"10. Vue封装前后端数据交互工具","\n安装 axios\n\n```json\nnpm i axios -S\n```\n\n配置 vue 的启动快捷方式\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1692428631397-9a5b279a-29e0-46be-9954-00e0beb242d2.png#averageHue=%233d4143&clientId=ude8b6f36-761f-4&from=paste&height=708&id=u275564bc&originHeight=885&originWidth=1321&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=59704&status=done&style=none&taskId=u911ec70b-4b9b-488a-b6dd-deaffed0f34&title=&width=1056.8)\n\n怎么请求数据？\n\n```json\nimport axios from \"axios\";\n\ndata() {\n  return {\n   users: []\n\t}\n}\n\nmounted() {   \u002F\u002F 页面加载完成之后触发\n   axios.get('http:\u002F\u002Flocalhost:9090\u002Fuser\u002FselectAll').then(res => {\n      console.log(res.data)   \u002F\u002F 后台返回的数据\n      \u002F\u002F res.data = {   \u002F\u002F 数据格式\n      \u002F\u002F   code: '200',\n      \u002F\u002F   msg: '请求成功',\n      \u002F\u002F   data: {\n      \u002F\u002F\n      \u002F\u002F   }\n      \u002F\u002F }\n    })\n},\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1692429308377-fa6b9fba-cd53-4d96-9a71-46a74709bb84.png#averageHue=%2302080d&clientId=ude8b6f36-761f-4&from=paste&height=326&id=u51b73bdf&originHeight=408&originWidth=1898&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=69580&status=done&style=none&taskId=uef160e32-7a30-4d3c-b8cf-d2cdea0870b&title=&width=1518.4)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1692429354160-9457b2cf-f794-4f36-96f5-c3920b321b49.png#averageHue=%23feecea&clientId=ude8b6f36-761f-4&from=paste&height=87&id=uaeb63a89&originHeight=109&originWidth=1761&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=26914&status=done&style=none&taskId=u65e45a57-f34a-48f8-88bf-d6666c20c48&title=&width=1408.8)\n\n在你的 UserController 的上面加个小注解\n\n```json\n@CrossOrigin\n```\n\nrequest.js\n\n```json\nimport axios from 'axios'\n\n\u002F\u002F 创建可一个新的axios对象\nconst request = axios.create({\n    baseURL: 'http:\u002F\u002Flocalhost:9090',   \u002F\u002F 后端的接口地址  ip:port\n    timeout: 30000\n})\n\n\u002F\u002F request 拦截器\n\u002F\u002F 可以自请求发送前对请求做一些处理\n\u002F\u002F 比如统一加token，对请求参数统一加密\nrequest.interceptors.request.use(config => {\n    config.headers['Content-Type'] = 'application\u002Fjson;charset=utf-8';\n    \u002F\u002F let user = localStorage.getItem(\"user\") ? JSON.parse(localStorage.getItem(\"user\")) : null\n    \u002F\u002F config.headers['token'] = 'token'  \u002F\u002F 设置请求头\n\n    return config\n}, error => {\n    console.error('request error: ' + error) \u002F\u002F for debug\n    return Promise.reject(error)\n});\n\n\u002F\u002F response 拦截器\n\u002F\u002F 可以在接口响应后统一处理结果\nrequest.interceptors.response.use(\n    response => {\n        let res = response.data;\n\n        \u002F\u002F 兼容服务端返回的字符串数据\n        if (typeof res === 'string') {\n            res = res ? JSON.parse(res) : res\n        }\n        return res;\n    },\n    error => {\n        console.error('response error: ' + error) \u002F\u002F for debug\n        return Promise.reject(error)\n    }\n)\n\n\nexport default request\n```\n","coding",1,3716,65,"2024-04-16 02:33:13","2026-05-03 22:49:02","【青哥带小白做毕设2024】完整教程资料汇总","qingge-graduation-project-2024",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42,49,56,63,69,76,83,90,91,98,105,112,119,126,133,140,147,154,161,168],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},33,"R1oMCsCX","00. 从0开始带小白做SpringBoot+Vue+uniapp微信小程序实战项目",12130,55,"2025-04-08 11:28:17","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},34,"s3u3u8W7","01. 网页布局技巧",3326,56,"2025-04-08 11:28:13",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},35,"21zUHQYS","02. JavaScript入门",2017,57,"2025-04-08 11:27:55",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},36,"4XVgY9Ti","03. Vue脚手架搭建",3719,58,"2025-04-08 11:27:46",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},37,"S8vLLLvk","04. Git速成，推送代码到云端",1585,59,"2025-04-08 11:27:41",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},38,"9EbwnGDp","05. 网页布局神器ElementUI速成",2670,60,"2025-04-08 11:27:37",{"id":6,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":67,"created_at":68,"updated_at":14,"project_title":15,"project_slug":16},"tmzahWer","06. Vue管理系统速成",3744,61,"2025-04-08 11:27:32",{"id":70,"uuid":71,"project_id":6,"title":72,"type":9,"status":10,"public_enabled":10,"views":73,"sort":74,"created_at":75,"updated_at":14,"project_title":15,"project_slug":16},40,"2agqAUQK","07. SpringBoot速成",3654,62,"2025-04-08 11:27:27",{"id":77,"uuid":78,"project_id":6,"title":79,"type":9,"status":10,"public_enabled":10,"views":80,"sort":81,"created_at":82,"updated_at":14,"project_title":15,"project_slug":16},41,"SXPAzgy7","08. Http扫盲，让小白也能听懂",2337,63,"2025-04-08 11:27:20",{"id":84,"uuid":85,"project_id":6,"title":86,"type":9,"status":10,"public_enabled":10,"views":87,"sort":88,"created_at":89,"updated_at":14,"project_title":15,"project_slug":16},42,"ostBIxAV","09. SpringBoot集成Mybatis实现增删改查",4190,64,"2025-04-08 11:27:13",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},44,"d53BPIQs","11. Vue登录（含验证码）、注册页面开发",4867,66,"2024-04-16 02:33:08",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},45,"m033ng06","12. SpringBoot集成JWT token实现权限验证",3243,67,"2024-04-16 02:33:00",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},46,"7xzyVD06","13. SpringBoot+Vue实现单文件、多文件上传和下载",2784,68,"2024-04-16 02:32:52",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},47,"BdOLUenp","14. 多角色登录（Vue-Router路由守卫）",2318,69,"2024-04-16 02:32:39",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},48,"2Wkx3igg","15. Vue个人信息修改、修改密码、重置密码",2092,70,"2024-04-16 02:32:33",{"id":127,"uuid":128,"project_id":6,"title":129,"type":9,"status":10,"public_enabled":10,"views":130,"sort":131,"created_at":132,"updated_at":14,"project_title":15,"project_slug":16},49,"BDvVa4By","16. SpringBoot+Vue管理系统实现增删改查",2598,71,"2024-04-16 02:32:29",{"id":134,"uuid":135,"project_id":6,"title":136,"type":9,"status":10,"public_enabled":10,"views":137,"sort":138,"created_at":139,"updated_at":14,"project_title":15,"project_slug":16},50,"FJVl0rCu","17. SpringBoot+Vue实现数据的批量导入和导出",1684,72,"2024-04-16 02:32:26",{"id":141,"uuid":142,"project_id":6,"title":143,"type":9,"status":10,"public_enabled":10,"views":144,"sort":145,"created_at":146,"updated_at":14,"project_title":15,"project_slug":16},51,"FvW9oHgj","18. SpringBoot+Vue项目部署上线",2845,73,"2024-04-16 02:32:22",{"id":148,"uuid":149,"project_id":6,"title":150,"type":9,"status":10,"public_enabled":10,"views":151,"sort":152,"created_at":153,"updated_at":14,"project_title":15,"project_slug":16},52,"xyqrxxiR","19. SpringBoot+Vue集成富文本编辑器",1499,74,"2024-04-16 02:32:18",{"id":155,"uuid":156,"project_id":6,"title":157,"type":9,"status":10,"public_enabled":10,"views":158,"sort":159,"created_at":160,"updated_at":14,"project_title":15,"project_slug":16},53,"XAaCXz8W","20. SpringBoot+Vue集成系统公告",1043,75,"2024-04-16 02:32:14",{"id":162,"uuid":163,"project_id":6,"title":164,"type":9,"status":10,"public_enabled":10,"views":165,"sort":166,"created_at":167,"updated_at":14,"project_title":15,"project_slug":16},54,"2havlmaC","21. SpringBoot+Vue集成AOP系统日志",1159,76,"2024-04-16 02:32:11",{"id":25,"uuid":169,"project_id":6,"title":170,"type":9,"status":10,"public_enabled":10,"views":171,"sort":172,"created_at":173,"updated_at":14,"project_title":15,"project_slug":16},"ObvLqJdX","22. SpringBoot+Vue实现Echarts数据报表（柱状图、饼图、折线图）",1688,99,"2024-04-16 02:30:25"]