1. 製品検索ページ
「検査フォルダー」内の input.html を開き、次の手順を実行します。
注: この質問は input.html 内でのみ見つかります。
(1) 製品名がテキスト ボックスの左側に残るように、製品名が配置されている div にスタイル属性を追加します。(2) 製品名が配置されている div の幅と間隔を調整します
。商品名の文字の右端からブラウザの左枠までの距離が100px、商品名の文字から右のテキストボックスまでの距離が10pxになるようにします (3) 入力ボタンの幅を調整します
。右側はテキスト ボックスの右側とちょうど同じ高さになります。
2. データ検証の制約: (10 点) (
1) データ検証を実行するには、「入力」ボタンをクリックします。
(2) 製品名を入力する必要があります。
(3) 製品名に数字を含めることはできません。
(3)検証が失敗した場合、ID が error である div にエラー メッセージを入力し、エラー メッセージを赤色 (#ff0000) で表示します; (4) すべての
検証に合格した場合、製品のメイン ページ product.html にジャンプします。
2. 製品のメイン インターフェイス
「検査フォルダー」内の product.html を開き、次の手順を実行します。
1. フロントエンドとバックエンドのデータ対話: ページ上の [検索] ボタンをクリックして、バックエンドへのリクエストを開始します。
(1) インターフェースアドレス: http:// 114.67.241.121:8080/product/list ( 2
) インターフェース呼び出しメソッド: get
(3) サブミットパラメータ:
(4) 製品名「computer」を入力し、「検索」をクリックすると、サーバーがJSON データを返します。
サーバーはデータ形式を返します: (以下に貼り付けてください)
{"code":200,"data":[{"brand":"Lenovo","image":"thinkpad.png","model": "thinkpad","price":5000},{ "brand": "Dell", "image": "lingyue.png ", "model": "Lingyue", "price":6000}, {"brand": "HP", "画像": "anyinjinglin.png ", "モデル": "シャドウエルフ", "価格": 6000}, {"ブランド": "神州", "画像": "youya.png ", "モデル": "エレガンス", "価格": 4000}, {"ブランド": "Lenovo", "画像": "yangtian.png ", "モデル": "Yangtian", "価格":4000}], " msg": "成功", "成功" :true}
3. インターフェイスの設計とデータの入力 (以下の図を参照)
(1) JSON 内のすべての製品を走査し、テーブル HTML コードを構築し、それを ID が product である div に入力します。
(2) データを 4 列のテーブルに配置し、セルの最初の行がヘッダーで、高さが 30px に設定され、後続の行のデータが高さが 100px に設定されます; (3) すべてのセルが設定されます(4) 最初の列には画像が表示され、高さと幅は 100 ピクセル、画像ファイル名は JSON の画像属性値、完全な画像リンクは次のとおりです: (4 ポイント) http
: / /114.67.241.121:8080/img/ 画像ファイル名(5) 2 列目はブランドを表示し、値は JSON のブランド属性値です(6) 3 列目はモデル リンクを表示し、リンク テキスト値はモデルですJSON の属性値、およびリンク内の画像ファイル名 JSON の画像属性の値であり、完全なリンク コードは次のとおりです: モデル リンクでは、クリック後に新しいページを開く必要があります。 (7) 4番目の列価格を表示します。これは、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>