shiyan7

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>

input

<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>