input
<template>
<div>
<div id="search">
<div class="goods">产品名称</div>
<div><input type="text" placeholder="请输入产品名称" v-model="name" ></div><br>
</div>
<div id="error">{{errmsg}}</div>
<div id="submit"><input type="button" value="录入" @click="info"></div>
</div>
</template>
<script>
export default {
data () {
return {
name:'',
errmsg:''
}
},
methods:{
info(){
if(this.name==""){
this.errmsg='请输入'
}
else if(/\d/.test(this.name)){
this.errmsg='输入不能为数字'
}
else{
this.$router.push('/product')
}
}
}
}
</script>
<style scoped>
* {
padding: 0;
margin: 0;
}
.goods{
}
div {
font-size: 14px;
}
#search input {
width: 150px;
text-align: left;
margin-left: 10px;
}
#search div {
width: 100px;
text-align: right;
display: inline-block;
padding-right:10px;
/* 产品名称文字到右边文本框的间距为10px;*/
}
/*first-*/
#search div :first-child{
float :left;
}
#submit,
#submit input {
display: inline-block;
width: 330px;
}
#error {
color: red;
}
</style>
product
<template>
<div>
<div><input type="text" id="product" placeholder="请输入产品名称" v-model="productName"> <input type="button" id="search" value="搜索" ></div>
<div id="product"></div>
<tr>
<th>图像</th>
<th>品牌</th>
<th>链接</th>
<th>价格</th>
</tr>
<tr v-for="item in products" :key="item">
<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>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Product',
data() {
return {
products:[]
};
},
mounted() {
axios.get('http://114.67.241.121:8080/product/list', {
params: {
}
}).then(response => {
if (response.data.code === 200) {
console.log(response.data)
this.products = response.data.data;
this.errorMsg = '';
} else {
this.products = [];
this.errorMsg = response.data.msg;
}
}).catch(error => {
this.products = [];
this.errorMsg = '服务器错误,请稍后再试。';
console.log(error);
});
}
};
</script>
</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{
height: 100px;
width: 100px;
}
a{
color: #00ff00;
}
a:hover{
color: #ff0000;
}
tr th:nth-child(4){
background-color: #ffffd0;
}
tr td:nth-child(4){
background-color: #ffffd0;
}
tr th:nth-child(1){
width: 100px;
}
tr th:nth-child(2){
width: 150px;
}
tr th:nth-child(4){
width: 150px;
}
</style>
input.css