ajax 3賛機能の追加

21701 ワード
スプリングフレーム よい機能 推奨機能 テキストリンク


思い出すのは簡単そうだが、設計するのは難しい.
  • like tableを作成します(「好きな」テーブルを確認します)
    /board tableにlike count列(賛数を格納)
    • を追加
  • 投稿の詳細を表示するときにログインしたメンバーのID値
    (または顧客番号)likeをスキップするかどうかを問い合わせる必要があります.
    「いいね」を注文したら、もう記入しました.
    • 画像を印刷する必要があります
  • をクリックして良い時、ID(会員番号)はdbに対して良いです.
    タイムラインがない場合は、挿入し、ある場合はキャンセルします.
    削除します.
  • 賛画像の横の投稿の賛数の合計を計算します.
    「いいね」を押すたびにリフレッシュして情報を受信します.
    • data base
    create table board_table(
b_number bigint auto_increment,
cate_number int,
m_id varchar(20),
b_title varchar(20) not null,
b_contents varchar(1000) not null,
b_date datetime not null,
b_hits int default 0,
b_filename varchar(100),
like_count int default 0,

 constraint primary key (b_number),
 constraint foreign key(m_id) references member_table(m_id)  on delete cascade,
 constraint foreign key(cate_number) references category_table(cate_number)
    );

create table like_table (
like_number bigint auto_increment,
m_id varchar(20),
b_number bigint,
like_check int default 0,

constraint primary key (like_number),
constraint foreign key(m_id) references member_table(m_id) on delete cascade,
constraint foreign key(b_number) references board_table(b_number) on delete cascade
);
    jsp
    セッション値を使用してログインしているかどうかを確認
    <body>
<c:if test="${sessionScope.loginId == null || sessionScope.loginId eq 'guest'}">
	<img src="/resources/img/좋아요전.png" id="likeimg" width="60px" height="60px"
		class="rounded-circle mt-2">
		${b.like_count} <br><br>
	추천 기능은 <a href="/member/login" type="button" id="newLogin"
	class="btn btn-outline-success">로그인</a> 후 사용 가능합니다.
	</c:if>
	<c:if test="${sessionScope.loginId != null}">
		<div>
	<input type="hidden" id="like_check" value="${like.like_check}">
	<img class="rounded-circle likeimg" id="likeimg" src="/resources/img/좋아요전.png"
	width="60px" height="60px"> ${b.like_count}
	</div>
	</c:if>
    </body>
    投稿詳細照会に入るとIDをチェック!
    $(document).ready(function ()
    :ドキュメント構造の作成時に実行されるイベント
    みなさんにどんなものを見せたらいいですか?
    <script>
$(document).ready(function () {
	let like_count = document.getElementById('like_count')
	let likeval = document.getElementById('like_check').value
	const b_number = '${b.b_number}';
	const m_id = "${sessionScope.loginId}";
	const likeimg = document.getElementById("likeimg")

	if (likeval > 0) {
		likeimg.src = "/resources/img/좋아요후.png";
	}
	else {
		likeimg.src = "/resources/img/좋아요전.png";
	}
    // 좋아요 버튼을 클릭 시 실행되는 코드
$(".likeimg").on("click", function () {
	$.ajax({
      url: '/board/like',
      type: 'POST',
      data: { 'b_number': b_number, 'm_id': m_id },
      success: function (data) {
          if (data == 1) {
              $("#likeimg").attr("src", "/resources/img/좋아요후.png");
              location.reload();
          } else {
              $("#likeimg").attr("src", "/resources/img/좋아요전.png");
              location.reload();
          }
      }, error: function () {
          $("#likeimg").attr("src", "/resources/img/좋아요후.png");
          console.log('오타 찾으세요')
      }

  });

  });
  });
     </script>
    毎日混同しています!
    #ID名(宣言者:#).CLASS名(宣言者:.)
    『学んだこと』
    jクエリからid class name値を取得する
    idのインポート
    let valueById = $('#inputId').val();
    classのインポート
    let valueByClass = $('.inputClass').val();
    インポートname
    let valueByName = $('input[name=inputName]').val();
    どの属性値を取得および制御するか
  • id testのvalue属性値を取得
    $('#test').attr('value')
  • idがtestのプロパティのsrcは'/resources/img/imgです.「png」に置き換える
    $('#test').attr('src','/resources/img/img.png')
  • idでテストされた無効なプロパティを削除
    $('#test').attr('disabled','')
    • location.reload(); - 更新
    まだ間違いがある!
    success:function()のajax値
    結果を書くのにずっと間違いがあった.
    データで記録するのがいいです.どうして泣いているの?
    検索しても見つからないから探しましょう!
    5日目
    Alglibライブラリ、補間演算のテスト