web前端应用开发模拟题

KKobe0824

于 2023-04-22 14:47:17 发布

阅读量255

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_61904338/article/details/130304772

版权

一、产品搜索页面

打开“考试文件夹”中的input.html，完成以下步骤：

注意：本题仅能在input.html的<style>和<script>标签中新增样式或JavaScript代码；不可改动HTML的标签和内容，亦不可在标签中新增id、class或style属性。

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。

二、产品主界面

打开“考试文件夹”中的product.html，完成以下步骤：

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

（1）接口地址：http://43.136.217.18:8081/getProduct

（2）接口调用方式：post

（3）提交参数：name

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

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

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

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

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

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

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

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

http://43.136.217.18:8081/img/图片文件名

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

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

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

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

3、界面美化

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

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

（3）表格应该具备框线

imput.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
<!--    <style>-->
<!--        .main_left{-->
<!--            float: left;-->
<!--            margin-top: 60px;-->
<!--            padding-left: 100px;-->
<!--            margin-right: 10px;-->
<!--            height: 70px;-->
<!--            font-size: 30px;-->
<!--        }-->
<!--        /*.main_center{*/-->

<!--        /*}*/-->
<!--        .main_center input{-->
<!--            margin-top: 55px;-->
<!--            font-size: 30px;-->
<!--            height: 50px;-->
<!--        }-->
<!--        /*.main_button{*/-->

<!--        /*}*/-->
<!--        .main_button input{-->
<!--            margin-left: -200px;-->
<!--            margin-top: 20px;-->
<!--            width: 570px;-->
<!--            font-size: 30px;-->
<!--            background-color: white;-->
<!--        }-->
<!--        .error{-->
<!--            font-size: 30px;-->
<!--            margin-left: 30px;-->
<!--            color: #ff0000;-->
<!--        }-->
<!--    </style>-->
    <!-- <style>
        #search div:nth-child(1){
            float: left;
            width: 100px;
            margin-right: 10px;
            font-size: 20px;
            text-align: right;
        }
        #search div:nth-child(2) input{
            width: 150px;
            font-size: 20px;
        }
        #submit input{
            margin-top: 20px;
            width: 280px;
            font-size: 30px;
            border-color: black;
            background-color: white;
        }
        #error{
            margin-top: 10px;
            font-size: 25px;
            color: #ff0000;
        }
    </style> -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function (){
            $("#register").click(function (){
                var reg = " ";
                var num = /\d/;
                if($("#name").val()==""){
                    reg = "输入不能为空";
                }else if(num.test($("#name"))){
                    reg = "输入中不能含有数字";
                }
                if(reg != " "){
                    $("#error").text(reg);
                }else{
                    document.location.href = "product.html";
                }
            })
        })
    </script>

</head>
<body>
<div id="search">
    <div>产品名称</div>
    <div><input id="name" type="text" placeholder="请输入产品名称"></div>
</div>
<div  id="error"></div>
<div  id="submit"><input id="register" type="button" value="录入"></div>
</body>
</html>

imput.css:

div {
    font-size: 14px;
}
#search input {
    width: 150px;
}
#search div:nth-child(1){
    float: left;
    width: 100px;
    margin-right: 10px;
    font-size: 20px;
    text-align: right;
}
#search div:nth-child(2) input{
    width: 150px;
    font-size: 20px;
}
#submit input{
    margin-top: 20px;
    width: 280px;
    font-size: 30px;
    border-color: black;
    background-color: white;
}
#error{
    margin-top: 10px;
    font-size: 25px;
    color: #ff0000;
}

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <style>
        table{
            width: 550px;
            border: 1px solid #000;
            border-collapse: collapse;
        }
        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: #0ff000;
        }
        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>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function (){
            $("#search").click(function (){
                var paras = {name: $("#product").val()}
                $.ajax({
                    url : "http://43.136.217.18:8081/getProduct",
                    type : "POST",
                    data : paras,
                    datatype: "JSON",
                    success:function (data){
                        var html = "<table>";
                        html += "<tr><th>&nbsp;</th><th>品牌</th><th>型号</th><th>价格</th></tr>";
                        for(var i in data.data){
                            var item = data.data[i];
                            html += "<tr>";
                            html += "<td><img src='http://43.136.217.18:8081/img/"+item.image+"'></td>";
                            html += "<td>"+item.brand+"</td>";
                            html += "<td><a href='http://43.136.217.18:8081/img/"+item.image+"'>"+item.model+"</a></td>";
                            html += "<td>"+item.price+"</td>";
                            html += "</tr>";
                        }
                        html += "</table>";
                        $("div:last-child").html(html);
                        

                    }
                });
            });
        });
    </script>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="prod"></div>
</body>
</html>