考试文件夹

好多头发

已于 2023-04-18 19:19:51 修改

阅读量89

点赞数

文章标签： html css javascript

于 2023-04-18 18:48:39 首次发布

本文链接：https://blog.csdn.net/m0_56993984/article/details/130228472

版权

产品搜索，input.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。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #search div:first-child {
            width: 100px;
            text-align: right;
            margin-right: 10px;
            float: left;
        }
        #submit input {
            margin-top: 10px;
            width: 263px;
        }
        #error {
            color: red;
        }
    </style>
</head>
<body>
<div id="search">
    <div>产品名称</div>
    <div><input type="text" placeholder="请输入产品名称"></div>
</div>
<div id="error"></div>
<div id="submit"><input type="button" value="录入"></div>
</body>
</html>

js代码

<script>
     let submit = document.getElementById("submit")
     submit.onclick = function() {
        let inputVal = document.getElementsByTagName("input")[0].value
        let num = /[0-9]/
        let err = document.getElementById("error")
       if(inputVal === '') {
        err.innerHTML = '请输入产品名称'
       }else if (num.test(inputVal)) {
        err.innerHTML = '产品名称中不能包含数字'
       }else {
        err.innerHTML = ''
        location.href = './product.html'
       }
     }
</script>

产品主界面，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；

（2）使用样式表表或表格属性，使表格第四列背景色变为#ffffd0。

（3）表格应该具备框线

html代码

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

<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <style>
        #tb {
            width: 550px;
            /* border: 1px solid; */
            border-collapse: collapse;
        }

        th {
            height: 30px;
            border: 1px solid;
        }

        td {
            width: 150px;
            height: 100px;
            text-align: center;
            border: 1px solid;
        }

        #img {
            width: 100px;
        }

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

        a {
            color: #00ff00;
        }

        a:hover {
            color: #ff0000;
        }
    </style>
</head>

<body>
    <div><input type="text" id="product" placeholder="请输入产品名称" value="电脑"> <input type="button" id="search" value="搜索">
    </div>
    <div id="product">
        <table id="tb">
            <tr>
                <th></th>
                <th>品牌</th>
                <th>型号</th>
                <th>价格</th>
            </tr>

        </table>

    </div>

</body>

</html>

js代码

<script>
        let search = document.getElementById("search")
        search.onclick = function () {
        let product = document.getElementById("product").value
        axios({
            method: 'get',
            url: 'http://114.67.241.121:8080/product/list',
            params: {
                product: '电脑'
            }
        }).then(res => {

            console.log(res.data.data)
            let prod = res.data.data
            $.each(prod, function (i, item) {
                let str = ` <tr>
                                        <td id="img"><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}" target="_blank">${item.model}</a></td>
                                        <td style="background-color: #ffffd0;">${item.price}</td>
                                    </tr>`;
                $("table").append(str);
            })
        })
        }



        // $("#search").click(function () {
        //     let product = $("#product").val()
        //     $.get('http://114.67.241.121:8080/product/list',
        //         {
        //             product: '电脑'
        //         }).then(res => {
        //             console.log(res.data)
        //             let products = res.data
        //             $.each(products, function (i, item) {
        //                 let str = ` <tr>
        //                                 <td id="img"><img src="http://114.67.241.121:8080/img/${item.image}"></td>
        //                                 <td><a href="http://114.67.241.121:8080/img/${item.image}">${item.brand}</a></td>
        //                                 <td>${item.model}</td>
        //                                 <td>${item.price}</td>
        //                             </tr>`

        //                 $("table").append(str)
        //             })
        //         })
        // })



    </script>