web test

最新推荐文章于 2024-09-14 17:14:08 发布

73560

最新推荐文章于 2024-09-14 17:14:08 发布

阅读量45

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/chengj73/article/details/130246948

版权

css

div {
    font-size: 14px;
}

#search input {
    width: 150px;
}

* {
    padding: 0;
    margin: 0;
}

#search {
    font-size: 0;
}

#search div {
    display: inline-block;
    width: 100px;
    font-size: 14px;
    text-align: right;
    margin-right: 10px;
}

#search div input {
    font-size: 14px;
    width: 146px;
}

#submit input {
    width: 260px;
}

#error {
    display: none;
    width: 100px;
    height: 30px;
    font-size: 14px;
    /* float: left; */
}

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

/* 
#search{
    display: flex;
} */

input.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="search">
        <div>产品名称</div>
        <div><input id="txt" type="text" placeholder="请输入产品名称"></div>
    </div>
    <div id="error"></div>
    <div id="submit"><input class="add" type="button" value="录入"></div>

    <script>
        const btn = document.querySelector('.add')
        const err = document.querySelector('#error')
        btn.addEventListener("click", function () {
            const content = document.getElementById('txt').value
            console.log(content);
            if (content.length === 0) {
                err.innerHTML = '产品名称未录入'
                err.style.display = "block"
                err.style.color = '#ff0000'
                // console.log(err);
            }
            else if (!!content.match(/\d/g)) {
                err.innerHTML = '产品名称有数字'
                err.style.display = "block"
                err.style.color = '#ff0000'
            }
            else {
                window.open('product.html')
            }
        })

    </script>
</body>

</html>

product.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        #id {
            width: 550px;
        }

        table {

            border-collapse: collapse;
        }

        th {
            width: 150px;
            height: 30px;
            line-height: 30px;
        }

        th:first {
            width: 100px;
        }

        td {
            height: 100px;
            line-height: 100px;
        }

        img {
            width: 100px;
            height: 100px;
        }

        th,
        td {
            border: 1px solid black;
            text-align: center;
        }

        #id {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <!-- <div id="app">
        <div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"
                @Click="getName"></div>
        <div id="product">{{name}}</div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue(
            {
                el: "#app",
                data: {
                    name: "name"
                },
                methods: {
                    getName: function () {
                        let that = this
                        axios.get('http://114.67.241.121:8080/product/list').then
                            (function (response) {
                                console.log(response);
                                that.name = response.data
                            },
                                function (err) {
                                    console.log(err);
                                })
                    }

                }
            }
        
    </script> -->

    <div id="app">
        <div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>

        <div id="id">
            <table>
                <thead>
                    <th style="width:100px"></th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>价格</th>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>图片</td>
                        <td>联想</td>
                        <td>thinkpad</td>
                        <td>5000</td>
                    </tr> -->
                </tbody>
            </table>
        </div>

    </div>
    <!-- jquery -->
    <script>
        $(function () {
            $('#search').on('click', function () {
                axios({
                    url: 'http://114.67.241.121:8080/product/list',
                    method: 'get',
                    data: $('#product').val()
                }).then((res) => {
                    console.log(res);
                    console.log(JSON.stringify(res.data.data));
                    const data = res.data.data
                    console.log(data[1].image);
                    $.each(data, function (i, ele) {
                        $('tbody').append(`<tr>
                        <td style='width:100px'><img src='http://114.67.241.121:8080/img/${data[i].image}'/></td>
                        <td style='width:150px'>${data[i].brand}</td>
                        <td style='width:150px'><a href="http://114.67.241.121:8080/img/${data[i].image}" style='color:#00ff00'>${data[i].model}</a></td>
                        <td style='background:#ffffd0';'width:150px'>${data[i].price}</td>
                    </tr>`)
                    })

                    $('tbody').on('mouseover', 'a', function () {
                        $(this).css('color', '#ff0000')
                    }).on('mouseout', 'a', function () {
                        $(this).css('color', '#00ff00')
                    })
                })

            })


        })
    </script>


</body>

</html>

1、界面美化（如下图所示）

已有一个产品录入界面input.html，采用div+css布局，请按要求新增样式表美化界面。

（1）为产品名称所在的div添加样式属性，使得产品名称保持在文本框的左边；

（2）调整产品名称所在div的宽度和间距，使得产品名称文字右边缘到浏览器左边界的距离为100px；再使产品名称文字到右边文本框的间距为10px；

（3）调整录入按钮的宽度，使其右边刚好与文本框的右边齐平。

2、数据验证约束：（10分）

（1）点击“录入”按钮后执行数据验证；

（2）产品名称必须输入；

（3）产品名称中不能有数字；

（3）如果验证未通过则将错误消息填充至id为error的div中，并将错误消息以红色(#ff0000)显示；

（4）如果全部验证通过，则跳转至产品主页面product.html。

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

（1）接口地址：http://114.67.241.121:8080/product/list

（2）接口调用方式：get

（3）提交参数:

（4）输入产品名称“电脑”并点击搜索，服务器将返回JSON数据

服务端返回数据格式：（请粘贴在下方）

{"code":200,"data":[{"brand":"联想","image":"thinkpad.png","model":"thinkpad","price":5000},{"brand":"戴尔","image":"lingyue.png ","model":"灵越","price":6000},{"brand":"惠普","image":"anyinjinglin.png ","model":"暗影精灵","price":6000},{"brand":"神舟","image":"youya.png ","model":"优雅","price":4000},{"brand":"联想","image":"yangtian.png ","model":"扬天","price":4000}],"msg":"成功","success":true}

3、界面设计和数据填充（如下图所示）

（1）遍历JSON中的所有的产品，构造表格HTML代码，并填充至id为product的div中。

（2）将数据放入一个四列表格中，第一行单元格为表头，height设为30px，后续行为数据，height设为100px；

（3）所有单元格都设置为垂直居中和水平居中；

（4）第一列显示一张图片，高宽各为100px，图片文件名为JSON中的image属性值，完整图片链接为：（4分）

http://114.67.241.121:8080/img/图片文件名

（5）第二列显示品牌，取值为JSON中的brand属性值

（6）第三列显示型号链接，链接文本取值为JSON中的model属性值，链接的中的图片文件名为JSON中的image属性值，完整链接代码为：

链接要求点击后在新页面打开；

（7）第四列显示价格，取值为JSON中的price属性值。

3、界面美化

（1）在<style>中添加内嵌样式表，为型号链接添加样式，将链接颜色设置为#00ff00，鼠标移动上去变为#ff0000；