<template>
<div>
<div id="search">
<div>产品名称</div>
<div><input type="text" placeholder="请输入产品名称" v-model="name"></div>
</div>
<div id="error">{{ errormsg }}</div>
<div id="submit"><input type="button" value="录入" @click="checkdata"></div>
</div>
</template>
<script>
import '../assets/input.css'
export default {
data() {
return {
name:"",
errormsg:""
}
},
methods:{
checkdata(){
if(this.name==""){
this.errormsg="产品名称必须输入"
}
else if(/\d/.test(this.name)){
this.errormsg="产品名称中不能有数字"
}
else{
this.$router.push("/product")
}
}
}
}
</script>
<style scoped>
#search div:first-child{
float: left;
width: 100px;
margin-right: 10px;
text-align: right;
}
#submit input{
width: 268px;
}
#error{
color: #ff0000;
}
</style>
========================================================================
<template>
<div>
<div><input type="text" id="product" placeholder="请输入产品名称">
<input type="button" id="search" value="搜索" @click="getData">
</div>
<!-- 增加vue -->
<div id="product">
<table>
<tr>
<th></th>
<th>品牌</th>
<th>型号</th>
<th>价格</th>
</tr>
<tr v-for="item in list">
<td><img :src='"http://114.67.241.121:8080/img/" + item.image'></td>
<td>{{ item.brand }}</td>
<td><a :href='"http://114.67.241.121:8080/img/" + item.image'>{{ item.model }}</a></td>
<td>{{ item.price }}</td>
</tr>
</table>
<!-- end vue -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: []
}
},
methods: {
getData() {
this.axios({
method: "get",
url: "http://114.67.241.121:8080/product/list"
}).then(res => {
console.log(res)
this.list = res.data.data
})
}
}
}
</script>
<style scoped>
table{
border: 1px solid #000;
border-collapse: collapse;
width: 550px;
}
th {
height: 30px;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
}
td {
height: 100px;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
}
img {
width: 100px;
height: 100px;
}
a{
color:#00ff00;
}
a:hover{
color:#ff0000;
}
tr th:nth-child(1){
width: 100px;
}
tr th:nth-child(2){
width: 150px;
}
tr th:nth-child(4){
width: 150px;
background-color: #ffffd0;
}
tr td:nth-child(4){
background-color: #ffffd0;
}
</style>