vue前端

最新推荐文章于 2024-09-30 15:42:36 发布

。。。904

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量60

点赞数

文章标签：前端 servlet html

本文链接：https://blog.csdn.net/qq_55841287/article/details/130325843

版权

<!-- 练习一 -->
<!-- <script>
  export default{
    data(){
      return {
        count:0
      }
    }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
  buttton {
    font-weight:bold;
  }
</style> -->

<!-- 练习二 -->
<template>
  <div>
    <div>
      <div><input type="text" placeholder="请输入产品名称">
          <input type="button" id="search" value="搜索" @onclick="loaddata()">
    </div>
    <div id="product"></div>
      <table>
        <tr id="tr-0">
          <th id="th0-tr0">  </th>
          <th class="th0-th">品牌</th>
          <th class="th0-th">型号</th>
          <th class="th0-th">价格</th>
      </tr>
      <tr v-for="(data, index) in datas" :key="index" :class="'tr-'+index" >
        <th><img v-bind:src="['http://114.67.241.121:8080/img/'+data.image]"></th>
        <th>{{ data.brand }}</th>
        <th><a id="model" :href="['http://114.67.241.121:8080/img/'+data.model]">{{ data.model }}</a></th>
        <th>{{ data.price }}</th>
      </tr>
      </table>
    </div>
  </div>
  
  
</template>
<script>
export default{
  data(){
    return{
      title:"you",
      datas:[]
      
    }
  },
  methods:{
    loaddata(){
        this.axios({
          methods: "get",
          url: 'http://114.67.241.121:8080/product/list',
          params:{}
        })
        .then( res=> {
          console.log(res)
          this.datas = res.data
        })
    }
  }
  // created() {
  //   this.axios.get("http://114.67.241.121:8080/product/list")
  //       .then( res=> {
  //         console.log(res)
  //         this.datas = res.data
  //       })
  // }
}
</script>
<style>
  table{
    width:550px;
    border-collapse: collapse;
  }
  th{
    border:1px solid black;
  }
  th{
    vertical-align: middle;
    text-align: center;
  }
  #tr-0{
    height: 30px;
  }
  #tr0-th0{
    width:100px;
  }
  .th0-th{
    width:150px;
  }
  #brand{
    color:red
  }
  #model{
    color:#00ff00;
  }
  .tr-3{
    background-color: #ffffd0;
  }
  img {
			height: 100px;
			width: 100px;
	}
  #model:hover{
    color:#ff0000;
  }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style>
        #search div:first-child{
            float:left;
            width:100px;
            margin-right:10px;
            text-align: right;
            
        }
        #search input{
            width:150px;
        }
        #error{
            color:#ff0000
        }
        #submit input{
            width:268px;
            margin-top: 0px;
        }

    </style>
</head>
<body>
    <div id="search">
        <div>产品名称:</div>
        <div><input type="text" placeholder="请输入产品名称"></div>

    </div>
    <div id="error"></div>
    <div id="submit"><input type="button" value="录入" onclick="checkData()"></div>
   <script>
        function checkData(){
            let data = document.getElementsByTagName("input")[0].value
            if(data==""){
                document.getElementById("error").innerHTML="产品名称必须输入"
            }else if(/\d/.test(data)){
                document.getElementById("error").innerHTML="产品名称不能有数字"
            }else{
                window.location.href="product.html"
            }
        }
   </script>
</body>
</html>