天猫项目（10）用户管理

最新推荐文章于 2022-04-28 08:49:54 发布

周周写不完的代码

最新推荐文章于 2022-04-28 08:49:54 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/qq_39007838/article/details/104793917

版权

这个功能相对比较独立，是一个单独的管理模块，按照教程上说的，在后端部分只需要完成list功能，也就比较简单了

下面先给出效果图，然后给出实现代码

1.pojo

@Entity
@Table(name = "user")
@JsonIgnoreProperties({
        "handler","hibernateLazyInitializer"
})
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private int id;

    private String password;
    private String name;
    private String salt;

    @Transient
    private String anonymousName;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSalt() {
        return salt;
    }

    public void setSalt(String salt) {
        this.salt = salt;
    }

    //就是密码加上一些**遮盖，然后对密码长度比较短的进行特殊处理
    public String getAnonymousName(){
        if(null!=anonymousName)
            return anonymousName;
        if(null==name)
            anonymousName= null;
        else if(name.length()<=1)
            anonymousName = "*";
        else if(name.length()==2)
            anonymousName = name.substring(0,1) +"*";
        else {
            char[] cs =name.toCharArray();
            for (int i = 1; i < cs.length-1; i++) {
                cs[i]='*';
            }
            anonymousName = new String(cs);
        }
        return anonymousName;
    }

    public void setAnonymousName(String anonymousName) {
        this.anonymousName = anonymousName;
    }
}

2.dao CRUD一套省略

3.servcie，也省略，只用给出list实现分页就可以了

4.controller，只有list，省略

5.listUser.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head th:include="include/admin/adminHeader::html('用户管理')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="include/admin/adminNavigator::html"></div>
<script>
    $(function () {
        var data4Vue = {
            uri: 'users',
            beans: [],
            pagination: {}
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function () {
                //mounted 表示这个Vue被加载成功了
                this.list(0);
            },
            methods: {
                list: function (start) {
                    var url = this.uri + "?start=" + start;
                    axios.get(url).then(function (response) {
                        vue.beans = response.data.content;
                        vue.pagination = response.data;
                    });
                },

                jump: function (page) {
                    jump(page,vue);
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start,vue);
                }
            }
        });
    });
</script>
<div id="workingArea" >
    <h1 class="label label-info" >用户管理</h1>
    <br>
    <br>
    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="success">
                <th>ID</th>
                <th>用户名称</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td>{{bean.id}}</td>
                <td>
                    {{bean.name}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="include/admin/adminPage::html" ></div>
</div>
<div th:replace="include/admin/adminFooter::html"></div>
</body>
</html

也比较简单，只用v-for遍历出来就好了

谢谢观看