vue模拟测试

input组件：

<template>
    <div id="myintput">
      <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>
export default {
  name: 'MyIntput',
  data(){
    return {
      name:'',
      errormsg:''
    }
  },

  methods:{
    checkdata(){
      if (this.name == '') {
        this.errormsg = '此产品为空'
      } else if(/\d/.test(this.name)){
        this.errormsg = '产品中不能含有数字'
      } else {
        this.$router.push('/MyProduct') 
      }
    }
  }
}
</script>

<style scoped>
  div {
    font-size: 14px;
  }

  #search {
    display: flex;
  }

  #search input {
    width: 150px;
  }

  #search div:first-child {
    float: left;
    width: 100px;
    margin-right: 10px;
    text-align: right;
  }

  #submit input{
      width: 268px;
  }

  #error{
    color:#ff0000;
  }
  
</style>

product组件：

<template>
    <div>
        <div>
            <input type="text" id="product" placeholder="请输入产品名称"> 
            <input type="button" id="search" value="搜索" @click="getData">
        </div>
        <div id="product">
            <table>
                <tr>
                    <th></th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>价格</th>
                </tr>
                <tr v-for="item in list" :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>
            </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>
    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>

router文件下的index.js配置路由:

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyIntput from '@/components/MyIntput'
import MyProduct from '@/components/MyProduct'


Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        //配置路由的路径
        {
            path:'/',
            component:MyIntput
        },
        {
            path:'/MyProduct',
            component:MyProduct
        }
    ]
})
export default router

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.axios=axios

new Vue({
  axios,
  router,
  template: '<App/>',
  render: h => h(App)
}).$mount('#app')

app组件:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>



export default {
  name: 'App',
}
</script>

<style>

</style>