导航栏用户模块设计（个人博客）

导航栏用户模块设计（个人博客）

一、修改前端页面

利用sec:authorize="isAuthenticated()"实现

    <div class="right m-item m-mobile-hide menu" sec:authorize="isAuthenticated()">
        <div class="ui dropdown item">
            <div class="text"><img class="ui avatar image" src="https://picsum.photos/50/50?image=1005">
                <span sec:authentication="principal.username"></span>
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <a th:href="@{/logout}" class="item">注销</a>
                <a th:href="@{/toUpdUser}" class="item">修改密码</a>
            </div>
        </div>
    </div>

  <h5 style="margin-top: 18px;color: skyblue" sec:authorize="!isAuthenticated()"><a th:href="@{/toLogin}">登录</a></h5>

二、用户信息修改功能实现

1、编写dao层

2、绑定mapper配置文件

3、编写service层

4、编写controller层

@RequestMapping("/toUpdUser")
public String toUpdateUser(Principal principal, Model model){
    User user = userService.getByName(principal.getName());
    model.addAttribute("user",user);
    return "admin/users-update";
}

@RequestMapping("/admin/updUser")
public String updUser(User user){
    userService.updateUser(user);
    return "redirect:/logout";
}

5、绑定前端页面

<form th:action="@{/admin/updUser}" method="post" class="ui segment form">
    <input type="hidden" name="id" th:value="${user.id}">
    <input type="hidden" name="username" th:value="${user.username}">
    <div class="field">
        <label>用户名</label>
        <input type="text" name="nickname" th:placeholder="${user.nickname}" th:value="${user.nickname}">
    </div>
    <div class="field">
        <label>密码</label>
        <input type="text" name="password" th:placeholder="${user.password}" th:value="${user.password}">
    </div>
    <div class="field">
        <label>头像链接</label>
        <input type="text" name="avatar" th:placeholder="${user.avatar}" th:value="${user.avatar}">
    </div>
    <div class="field">
        <button class="ui teal basic mini button"><i class="search icon"></i>确认</button>
    </div>
</form>