json-server.txt 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. Json-server
  2. 1.全局安装
  3. npm install -g json-server
  4. 安装axios npm install axios
  5. axios文档:https://www.w3cschool.cn/jquti/jquti-kb3a35x1.html
  6. 2.安装成功
  7. json-server -v
  8. 3.运行 json-server --watch db.json
  9. 4.post--增加数据 get--获取数据 patch请求--修改数据 delete请求--删除数据
  10. 5.post--增加 post 请求 响应成功的是201 其他请求响应成功是200
  11. 输入title和content 添加到db.json中news中
  12. axios.post('http://localhost:3000/news', {
  13. title: this.title,
  14. content: this.content
  15. }).then(function (response) {
  16. console.log(response)
  17. }).catch(function (error) {
  18. console.log(error)
  19. })
  20. 添加完后获取(get)到news的数据,渲染到页面中的表格
  21. const that = this
  22. axios.post('http://localhost:3000/news', {
  23. title: this.title,
  24. content: this.content
  25. }).then(function (response) {
  26. // eslint-disable-next-line eqeqeq, no-empty
  27. if (response.status == 201) {
  28. // post 请求 响应成功的是201 其他请求响应成功是200
  29. axios.get('http://localhost:3000/news').then(function (res) {
  30. console.log(res) // 响应返回的数据进行一次输出,去判断你的请求是否成功
  31. that.dataList = res.data
  32. })
  33. }
  34. console.log(response)
  35. }).catch(function (error) {
  36. console.log(error)
  37. })
  38. 6.delete--删除
  39. 传入要删除的id 删除对应的数据
  40. const that = this
  41. axios.delete(`http://localhost:3000/news/${cid}`).then(function (res) {
  42. console.log(res)
  43. // eslint-disable-next-line eqeqeq
  44. if (res.status == 200 && res.statusText == 'OK') {
  45. that.getNews()
  46. }
  47. })
  48. 7.patch--修改
  49. 点击修改 将获取到item数据 赋值到上面input里面
  50. const that = this
  51. axios.patch(`http://localhost:3000/news/${this.id}`, {
  52. title: this.title,
  53. content: this.content
  54. }).then(function (res) {
  55. if (res.status === 200) {
  56. that.getNews()
  57. }
  58. console.log(res)
  59. })