微博项目后台管理系统中遇到的问题以及解决方法

修改用户信息时从表格中获取原始数据到修改表单中

        

userTable.addEventListener('click', (e) => {
  
    if (e.target.classList.contains('changeInfoBtn')) {
        e.preventDefault();
        changeUserBox.classList.remove('hidden')
        let selectedRow = e.target.closest('tr');
        changeUserForm.username.value = selectedRow.cells[0].innerText;
        changeUserForm.sex.value = selectedRow.cells[1].innerText;
        changeUserForm.age.value = selectedRow.cells[2].innerText;
        changeUserForm.address.value = selectedRow.cells[4].innerText;
        changeUserForm.email.value = selectedRow.cells[6].innerText;
        changeUserForm.manager.value=(selectedRow.cells[7].innerText==='用户'?0:1)
          
    }
})

         在点击了表单上对应用户的修改按钮之后，获取到对应按钮所在的tr，将其定义为选中的selectedRow,然后利用它的cells集合，获取到对应单元格内的文本，再将其传给changeUserForm的各个输入框中。其中用户权限的值为0和1，而在表格中显示的是文字用户或管理员，所以可以用三元表达式先将其转为0和1。

利用thymeleaf的状态变量进行对热搜排名的显示

1.thymeleaf的循环遍历

遍历（迭代）的语法th:each="自定义的元素变量名称 : ${集合变量名称}"：

<div>

<spn>你所在城市：</spn>

<select name="mycity">

<option th:each="city : ${cities}" th:text="${city.name}"></option>

</select>

</div>

 

属性th:each提供了一个用于跟踪迭代的状态变量，它包含以下几个属性：

属性	类型	描述
index	int	当前迭代的索引，从 0 开始
count	int	当前迭代的计数，从 1 开始
size	int	集合中元素的总个数
current	int	当前的元素对象
even	boolean	当前迭代的计数是否是偶数
odd	boolean	当前迭代的计数是否是奇数
first	boolean	当前元素是否是集合的第一个元素
last	boolean	当前元素是否是集合的最后一个元素

状态变量的使用语法：th:each="自定义的元素变量名称, 自定义的状态变量名称 : ${集合变量名称}"：

<div>

<spn>所在城市：</spn>

<select name="mycity">

<option th:each="city, status : ${cities}" th:text="${city.name}" th:item-index="${status.count}"></option>

</select>

</div>

 

不管什么时候，Thymeleaf 始终会为每个th:each创建一个状态变量，默认的状态变量名称就是自定义的元素变量名称后面加Stat字符串组成：

<div>

<spn>所在城市：</spn>

<select name="mycity">

<option th:each="city : ${cities}" th:text="${city.name}" th:item-index="${cityStat.count}"></option>

</select>

</div>

2.利用count显示出热搜的对应排名

<div id="hot">
          <div class="hot-top">
            <div class="hot-top-content"><p > 热搜</p></div>
            <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
          </div>
          <div class="hot-list" th:each="hot,list:${hotLabelList}">
            <span
              class="rank1"
              th:class="|rank${list.count}|"
              th:text="${list.count}"
              >1</span
            ><a th:text="${hot}">22222222222222222222222222222222222</a>
          </div>

          <a th:href="@{/blog/getHotBlogForUnLogin}" class="all-hot"><div >查看完整榜单</div></a>
        </div>

        利用list.count显示当前是循环的第几个元素，list.count值就是热搜对应的排名，将其显示在对应的热搜话题前面