import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.axios = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
main.js(上面的)
App.vue
<template>
<div >
<router-view/>
</div>
</template>
input.vue
<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{
neme: '',
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: red;
}
</style>
product.vue
<template>
<div>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索" @click="getData"></div>
<div id="product"></div>
<div id = "prodect">
<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>
</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 td:nth-child(4){
background-color: #ffffd0;
}
</style>