Day18 vue.js新增文章

延续昨日
今天我们来新增专案
首先需要先新增一个Addproject.vue
新增path 以及修改navbar里面新增专案的path
首先我们需要一个简单的layout
如下图
这边就是几个纯粹的text filed 或是 text area v-model绑定没什麽好说的

比较特别的是专案日期点开来会有日期可以选

以下是我的程序码我是参考vuetify的datepicker(感谢vuetify赞叹vuetify)
https://vuetifyjs.com/en/components/date-pickers/

直接复制vuetify网站的程序码来使用
再来用v-model绑定 datepicker
还有专案状态点开来可以选择专案状态

以下是程序码

这边使用v-moel绑定statue 再来:item status 则是在data中设定

这就是整个layout 就阳春但是能用就好XD

再来就是重新填写的按钮

在html tag 里面下一个ref 再来rest这个refs就好 参考day14
 methods:{
   reset () {
        this.$refs.form.reset()
      },

一样要在moounted 接session

mounted(){
      // let user=localStorage.getItem('user-info');
       let user=sessionStorage.getItem('user-info');
    
      
      if(!user){
        this.$router.push({name:'Login'})
        alert('请先登入')
      }
     
      this.username=JSON.parse(user).username
      this.useraccount=JSON.parse(user).id
     
    }
}

最後就是送出按钮

Function submit
基本上跟注册的方法没2样只是多了一些东西而已

async submit(){
     const result = await axios.post(`${this.db_api}`+"articles",{
         title:this.title,
         person:this.username,
         status:this.statue,
         content:this.content,
         time:this.time,
         useraccount:this.useraccount,
         url:this.url,
         swagger:this.swagger,
         api:this.api,
         api_val:this.api_val
         
        
       })
       
       if(result.status==201){ 
             alert("成功")
         this.$router.push({name:'Home'})
       }
   }

再来就是新增文章试试看!!