期末模拟题

数据验证约束

<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;

  text-align: right;

  margin-right: 10px;

}

#submit input{

  margin-top: 15px;

  width: 268px;

}

#error{

  color: #ff0000;

}

</style>

前后端数据交互：点击页面中“搜索”按钮向后端发起请求

<template>

    <div>

        <div><input type="text" id="product" placeholder="请输入产品名称">

            <input type="button" id="search" value="搜索">

        </div>

        <div id="product">

            <table>

                <tr>

                    <th>图片</th>

                    <th>品牌</th>

                    <th>型号</th>

                    <th>价格</th>

                </tr>

                <tr v-for = "item in list" :key="item" >

                    <th><img :src =" 'http://114.67.241.121:8080/img/' +item.image"></th>

                    <th>{{item.brand}}</th>

                    <th><a href="'http://114.67.241.121:8080/img/'+item.image">{{ item.model }}</a>

                    </th>

                    <th>{{ item.price }}</th>

                </tr>

            </table>

        </div>

    </div>

</template>

<script>

export default {

    data() {

        return {

            list: []

        }

    },

    created() {

        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{

    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>

router配置

         

import Vue from 'vue'

import Router from 'vue-router'

import input from '@/components/input'

import product from '@/components/product'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'input',

      component: input

    },

    {

      path: '/product',

      name: 'product',

      component: product

    }

  ]

})

axios

import axios from 'axios'

Vue.prototype.axios=axios