一、产品搜索页面
打开“考试文件夹”中的input.html，完成以下步骤：
注意：本题仅能在input.html的
（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://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）在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品录入</title>
<link href="css/input.css" rel="stylesheet" type="text/css" />
<style>
/* 选择id为search的元素下的第一个div元素，并对其应用相应的样式。 */
/* 若想拿其他序号则使用 nth-child(n) n为1，2，3... */
#search div:first-child {
float: left;
width: 100px;
text-align: right;
margin-right: 10px;
}
#submit input{
width: 268px;
}
#error{
color: #ff0000;
}
</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>
<script src="./js/jquery-3.1.1.min.js"></script>
<script>
$("#submit input").click(function(){
$("#error").empty();
let str = $("#search input").val();
console.log("输入框中的数据为: "+str);
if(str==""){
$("#error").append("<ul>产品名称必须输入</ul>");
return;
}else if(/\d/.test(str)){
$("#error").append("<ul>产品名称中不能有数字</ul>");
}else{
// 在新窗口中打开 product.html 页面
// window.open("product.html");
location.href = "product.html";
}
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品</title>
<style>
table{
border: solid black 1px;
border-collapse: collapse;
width: 550px;
text-align: center;
}
th{
border: solid;
height: 100px;
}
td{
border: solid;
height: 30px;
}
th:first-child{
width: 100px;
height: 30px;
}
th:nth-child(2){
width: 150px;
height: 30px;
}
th:nth-child(4){
width: 150px;
height: 30px;
background-color: #ffffd0;
}
td:first-child{
width: 100px;
}
td:nth-child(4){
background-color: #ffffd0;
}
/* 图片选择器是img而不是image(不要搞错了) */
img {
/* 图片高和宽风均设置为100px */
height: 100px;
width: 100px;
}
a {
color: #00ff00;
}
a:hover{
color: #ff0000;
}
</style>
</head>
<body>
<div>
<input type="text" id="product" placeholder="请输入产品名称">
<input type="button" id="search" value="搜索">
</div>
<div id="product1">
</div>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script>
$("#search").click(function(){
let str = $("#product").val();
if(str == "电脑"){
$.ajax({
url:"http://114.67.241.121:8080/product/list",
type:"get",
// 带给后端的数据，有就写，没有就不写
data:{
},
// 要求后端返回的数据的格式
dataType:"json",
success:function(res){
var t1 = res.data;
console.log(t1);
var t2 = "";
t2 += "<table><tr><th></th><th>品牌</th><th>型号</th><th>价格</th></tr>";
for(var i=0 ; i<t1.length; i++){
console.log("t1的长度为"+t1.length);
t2 += "<tr><td><img src='http://114.67.241.121:8080/img/"+ t1[i].image + " '>"+"</td>";
t2 += "<td>"+t1[i].brand+"</td>";
// 注意此处得内容应该写到a标签之中
t2 += "<td><a href='http://114.67.241.121:8080/img/"+t1[i].image+"'>"+t1[i].model+"</a></td>";
t2 += "<td>"+t1[i].price+"</td></tr>";
}
t2 += "</table>";
// 注意，之前数据没加进去，因为出现了两个id均为product
$("#product1").append(t2);
},
error(){
alert("请求失败!");
},
});
}else{
alert("输入的内容不是'电脑'，请重新输入搜索!")
}
})
</script>
</html>