【无标题】

product

<template>
    <div>
        <div><input type="text" id="product" placeholder="请输入产品名称"> 
            <input type="button" id="search" value="搜索" @click="select">
        </div>
        <div id="product">
            <tb>
                
                <tr>
                    <th></th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>价格</th>
                </tr>
                <tr v-for="product in cp">
            
                    <td>
                        <img :src='"http://114.67.241.121:8080/img/"+ product.image' alt="">
                    
                    </td>
                    <td>
                        {{ product.brand}}
                    </td>
                    <td>
                        <a :href='"http://114.67.241.121:8080/img/"+ product.image' >{{ product.model}}</a>
                        
                    </td>
                    <td>
                        {{ product.price}}
                    </td>
                </tr>
            </tb>
        </div>
        
    </div>
</template>
<script>
import axios from 'axios';

export default{
    data(){
        return{
            name:"",
            msg:"",
            cp:{
                brand:"",
                image:"",
                model:"",
                price:""
            }
        }
    },
    methods:{
        select(){
            axios({
                method:"get",
                url:"http://114.67.241.121:8080/product/list/"
            }).then(res=>{
                this.cp=res.data.data
            })
        }
    }

}

</script>
<style >
th{
    height: 30px;
    width: 150px;
    border: 1px solid black;

}
th :first-child{
    width: 100px;
    background-color: black;
}
img{
    height: 100px;
    width: 100px;
}
td{
    height: 100px;
    border: 1px solid black;
    display: table-cell;
    vertical-align: middle


}
tb{
    width: 550px;
    text-align: center;
}
a:link{
    color: #00ff00;
}
a:hover{
    color: #ff0000;
}
tb th:nth-child(4){
    background-color: #ffffd0;
}
tb td:nth-child(4){
    background-color: #ffffd0 ;
}

</style>
<!-- {"code":200,
    "data":[
{"brand":"联想","image":"thinkpad.png","model":"thinkpad","price":5000},
{"brand":"戴尔","image":"lingyue.png ","model":"灵越","price":6000},
{"brand":"惠普","image":"anyinjinglin.png ","model":"暗影精灵","price":6000},
{"brand":"神舟","image":"youya.png ","model":"优雅","price":4000},
{"brand":"联想","image":"yangtian.png ","model":"扬天","price":4000}],
"msg":"成功",
"success":true} -->

#input

```html
<template>
  <div>
    <div id="search">
    <div >产品名称</div>
    <div><input type="text" placeholder="请输入产品名称" v-model="name"></div>
</div>
<div id="error">{{emsg}}</div>
<div id="submit"><input type="button" value="录入" @click="checkdata"></div>
  </div>
</template>

<script>

// export default{
//   data(){
//     return{
//       name:"",
//       errormasge:""
//     }
//   },
//   methods:{
//     checkdata(){
//       if(this.name==""){
//         this.errormasge="为空"
//       }
//       else if(/\d/.test(this.name)){
//         this.errormasge="不能包含数字"
//       }
//       else{
//         this.$router.push("/product")
//       }
//     }
//   }
// }
export default{
  data(){
    return{
      name:"",
      emsg:""
    }
  },
  methods:{
    checkdata(){
      if(this.name==""){
        this.emsg="输入不能为空"
      }
      else if(/\d/.test(this.name)){
        this.emsg="输入不能为数字"
      }
      else{
          this.$router.push("/product")
      }
    }
  }
}

</script >
<style>
#search {
  display: flex;
}
#search div:first-child{
  text-align: right;
  width: 100px;
  margin-right: 10px;
  

}
#submit input{
  width: 277.2px;

}
#error{
  color: #ff0000;
}


</style>