Day17 vue.js 连接资料库显示文章

延续昨日
今天的目标是把首页的文章内容改成get资料库的文章内容
首先先去db.json 设定
我新增了一个 articles的schema
然後设一些资料(有一些栏位是之後会用到的反正先设定)

再来去home.vue 设定global db_api
接着在mounted里面调整一下

async mounted(){
  let user=sessionStorage.getItem('user-info')
  this.userid=JSON.parse(user).id
  this.username=JSON.parse(user).username

  let articles =await axios.get(`${this.db_api}`+"articles")
  this.projects=articles.data

}

我新增了2行程序码
//这个是get资料库中this.db_api+articles(http://localhost:3000/articles
)的值
let articles =await axios.get(${this.db_api}+"articles")

//这行是把原本的阵列 projects给替换成articles.data
this.projects=articles.data

甚麽意思呢先看看retrun data

data(){
   return{
      useraccount:"",
      username:"",
      db_api:global.db_api,
    //  专案资料

     projects:[
       {title:"铁人赛day6", person:"邦乔飞",content:"it铁人赛day6 \n今天连假还要打code \n我好累QQ",time:"2021/09/18",status:"进行中"},
       {title:"铁人赛day5", person:"邦乔飞",content:"it铁人赛day7 ",time:"2020/09/17",status:"已完成"},
       {title:"铁人赛day7", person:"邦乔飞",content:"it铁人赛day5 ",time:"2020/09/19",status:"未开始"},


     ]
   }
 },

原本的projects 阵列我有在里面的title person content 打东西现在替换成 articles.data的资料了
所以现在的projects会变成这样

[ {
      "title": "铁人赛day17",
      "person": "邦乔飞",
      "status": "未开始![https://ithelp.ithome.com.tw/upload/images/20210929/20141007JgtdjETNsE.png](https://ithelp.ithome.com.tw/upload/images/20210929/20141007JgtdjETNsE.png)",
      "content": "我好累我好累我好累我好累我好累喔",
      "time": "2020/02/08",
      "useraccount": "sa",
      "url": "",
      "swagger": "",
      "api": "",
      "api_val": "",
      "id": 1
    }]

至於网页则是这样(目前只有一笔文章)