去年考试题

最新推荐文章于 2024-08-29 14:26:44 发布

百分百Q

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量69

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56765805/article/details/130327863

版权

这是一个基于Vue.js的应用示例，包含输入验证功能，用户在input.vue组件中输入产品名称，需符合特定规则。点击按钮后，通过axios进行数据提交，当验证成功则跳转到product.vue页面展示产品列表。product.vue页面中，用户可以搜索产品并显示详细信息，列表数据通过HTTP请求获取。

摘要由CSDN通过智能技术生成

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>