spring実戦：ユーザーの名前の更新する
今回の実装を予定している概要を記載します：
(1). ログイン後の画面左にあるメニューに「ログイン名更新」のリンクを追加する
LoginServiceImplクラスの中で、メソッドpublic List<MenuItems>(Integer userRoleSum)の戻り値はList<MenuItemDto>で、DBからデータだ。各MenuItemはRoleGroupから取得されしてから，RoleGroupクラスのコードについて、データはrole_groupというのTableから読み取る。
そして、MenuItemにアイテムを追加するには、データベースにこのようなSQLを実行し：
INSERT INTO role_group VALUES
('RG00006',
'ログイン名更新',
'/user/rename',
100,
6,
'2021-10-4 0:00:00',
'2030-11-01 00:00:00',
1);この後、ページを更新して、ログイン後の画面左にあるメニューに「ログイン名更新」のリンクを追加した。
(2).「ログイン名更新」画面を新規に作成して、テキスト入力フィールドと［更新］ボタンを表示する
初期表示では、DBからログインしているユーザーの名前をテキスト入力フィールドに設定する
/src/main/resources/templates/userで、テンプレートとして”rename.html“ファイルを作成する。まず、3つのフィールドがあるformのは：提示文字「ログイン名」，id=txtUserNameというのinput，id=btnUserRenameというのボタン。そして、scriptで、このページの見出しと、フェードアウト(fade out)効果のプロンプトバーを実現した。
<div class="menuzonediv container">
<form id="frmUserCondition">
<div id="renameAlertSuccess" class="alert alert-success" role="alert" style="display:none;">
「<span id="getNewName"></span>」に更新しました。
</div>
<div class="row mt-2">
<div class="col-2 text-right">ログイン名</div>
<div class="col-3 text-left">
<input class="useraddinputstyle" type="text" name="txtUserName" id="txtUserName" autocomplete="off" th:value="${userInfo.userName}">
</div>
<div class="col-1 px-0">
<input type="button" class="conditionbutton1" id="btnUserRename" value="更新" />
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#topDispTitle").html("ログイン名更新");
$("#dispTitleArea").removeClass("d-none");
});
// just for testing
$(document).on('click', '#btnUserRename', function() {
showSuccessAlert();
});
// delete this function when this function at index.js was complete.
function showSuccessAlert()
{
document.getElementById('getNewName').innerHTML =document.getElementById('txtUserName').value;
$("#renameAlertSuccess").show();
setTimeout('$("#renameAlertSuccess").fadeOut();',1200);
}
</script>
UserCnlr.javaで、新メソッドが作成し、このメソッドは/user/renameにマッピングした。既存のメソッドUserCnlr.initにならう，今のログインしているのユーザーのUserInfoを読み取る。もしUserInfoがNullならば，ユーザーはログインしないし，ログイン画面に戻る。UserInfoがNull以外の場合、テンプレート”/user/rename”に戻る。
戻り前に，今のユーザーの名前を表示したほうがいい。そして、modelで、UserInfoのaddAttributeが添加して、id=txtUserNameの<input>で、th:value="${userInfo.userName}"のタグが加える（line 11）と，このvalueはuserInfo.userNameが表示しできた。
/**
* user rename
*/
@RequestMapping(value = "/user/rename")
@Role(roles = {BaseRole.R16384, BaseRole.R32768})
public String rename(Model model) {
UserInfo userInfo = (UserInfo) httpSession.getAttribute(SysConstants.LOGIN_USER);
if (Objects.isNull(userInfo)) {
return "user/login";
}
model.addAttribute("userInfo",userInfo);
return "user/rename";
}これに、このHTMLテンプレートをテストしできる。
ここに「文字化け」がある場合は、通常、エンコードの問題だ。このとき、「rename.html」を右クリックし、propertiesを選択して、[Text file encoding]で[Other : UTF-8]を選択する。 [Apply and Close]をクリックして解決する。
(3).［更新］ボタンを押された後、DBの名前をテキスト入力フィールドの入力文字に更新して、［更新］ボタンの上に「（※入力された名前）に更新しました。」を表示する
※（※入力された名前）は、テキスト入力フィールドの入力文字を設定してください
既存のUserCtlrクラスの中、タグ「@ResponseBody」が付きメソッドにならう、メソッドupdateNameがコーディングし：
/**
* update name action
*/
@RequestMapping(value = "/user/updateName", method = RequestMethod.POST)
@ResponseBody
@Role(roles = {BaseRole.R16384, BaseRole.R32768})
public String updateName(@RequestBody String newName) {
UserInfo userInfo = (UserInfo) httpSession.getAttribute(SysConstants.LOGIN_USER);
userInfo.setUserName(newName);
return usersService.renameById(userInfo.getUserId(),newName);
};ここで、POST方法でnewNameというのStringを受けると、今のuserInfoのuserNameがnewNameになる、そのあと、userServiceでのrenameByIdメソッドを利用する。
userService インタフェース クラスで、このrenameByIdが添加し
/**
* ユーザーIDでユーザーの名前を更新する
*
* @param userId
* @param newName
* @return
*/
String renameById(String userId,String newName);このメソッドを実装するには、userServiceに対応するUserServiceImplを見る。 似てるのメソッドに従って、renameByIdメソッドを作成する。 現在のユーザー名に従って、userInfoを取得し、userInfoのuserNameを新しく設定した値に変更して、userInfoRepository.renameByIdのメソッドに渡した。
@Override
public String renameById(String userId,String newName) {
Optional<UserInfo> userOptional = userInfoRepository.findById(userId);
if (!userOptional.isPresent()) {
return null;
}
UserInfo userInfo = userOptional.get();
userInfo.setUserName(newName);
userInfoRepository.renameById(userInfo);
return "success";
}userInfoRepositoryは、UserInfoMapperタイプのオブジェクトだ。UserInfoMapperクラスを見つけて、void renameById（UserInfo userinfo）とういのメソッドを追加します。 このメソッドの実現はSQLステートメントを実行することであり、SQLステートメントはXMLファイルで記述されます。
UserInfoMapperのupdateとdeleteById、およびその他の関連メソッドから、resources / mapperの下で関連ステートメントを検索できる。ユーザー名を更新するロジックを実装するには、UPDATEステートメントを実行し、同様のメソッドとSQL実装にならう、メソッド名renameByIdとしてIDを指定し、XMLコンテンツに設定する必要のあるフィールドを記述し：
<update id="renameById" parameterType="jp.co.basenet.trial.jpa.model.UserInfo">
update user_info set
user_name=#{userName},
update_datetime=#{updateDatetime},
update_user_id=#{updateUserId}
where user_id = #{userId}
</update>サーバーの機能が完了した。
次に、ウェブページのアクションとサーバーを操作する。「ユーザ情報管理」ページの「検索」にならいて、ファンクションはresources / assets / js / pages / index.jsに実装されている。送信されるデータは、IDがtxtUserNameで、タイプが「application / text」の入力で、 POSTで「/ user / updateName」に渡す：
$(document).on('click', '#btnUserRename', function() {
var transData=$("#txtUserName").val();
$.ajax({
url: TRIAL_CONTEXT_PATH + '/user/updateName',
data: transData,
type: 'post',
contentType: "application/text"
}).done(function(data) {
//通信成功時の処理
showSuccessAlert();
}).fail(function(xhr) {
//通信失敗時の処理
showErrorModal("更新に異常が発生しました。", $('#errorMessage'), $('#modalMsgBox'));
});
});問題（２）のrename.htmlにボタンのテストアクションを記述したことを忘れないでください（正常な変更プロンプトバーをポップアップする）。ここに添加した後、rename.htmlのこの部分を削除する（もちろん、ここのファンクションは rename.htmlに統合しても大丈夫ですが、構造化のために index.jsに実装しておくほうがいい。
このようにして、ユーザー名の変更が実現された。検索ページで検索して確認できる。
