SpringBoot + vue + amaze ui demo 实现篇

SpringBoot + vue + amaze ui demo 实现篇

dao层使用逆向工程生成的mapper代码实现常规curd操作，不予赘述

service封装基础的业务操作，注入Mapper依赖，添加事务处理注解

controller层使用restcontroller提供restapi接口，

为调用，处理方便统一，建立统一的返回结果类，封装返回状态，返回码和数据

    private Integer retCode;

    private String retMsg;

    private T data;

    public FinalResult(Integer retCode, String retMsg, T data) {
        this.retCode = retCode;
        this.retMsg = retMsg;
        this.data = data;
    }

统一处理抛出的异常，@ControllerAdvice，针对不同异常封装不同的返回数据

@ControllerAdvice
public class ExceptionHandle {

    private static final Logger LOGGER = LoggerFactory.getLogger(ExceptionHandle.class);

    @ExceptionHandler(Exception.class)
    @ResponseBody
    public FinalResult handle(Exception e) {
        LOGGER.error(e.getMessage());
        if (e instanceof BusiException) {
            BusiException exception = (BusiException) e;
            return ResultUtil.failed(exception.getRetCode(), e.getMessage());
        } else {
            return ResultUtil.failed(-1,"系统异常：" + e.getMessage());
        }
    }
}

评论信息分页查询，处理导航条数据

    /**
     * 根据文章id查询每页评论
     * @param id
     * @return pageInfo
     * @throws BusiException
     */
    public PageInfo<Comment> getCommentsByAid(Integer id, Integer currentPage) throws BusiException {
        Integer pagesize = ConstEnum.PAGESIZE.getValue();
        //设置分页参数
        PageHelper.startPage(currentPage, pagesize);

        //查询数据
        CommentExample commentExample = new CommentExample();
        commentExample.createCriteria().andAidEqualTo(id);
        List<Comment> commentList = commentMapper.selectByExampleWithBLOBs(commentExample);
        
        //组织分页数据结果
        PageInfo<Comment> pageInfo = new PageInfo(commentList);
        pageInfo.setList(commentList);

        //构建分页导航栏
        PageUtil.buildPageNavigate(currentPage, pageInfo);
        return pageInfo;
    }

pageHelper插件使用十分简便，查询数据前使用

PageHelper.startPage(currentPage, pagesize)

设置分页参数，包括当前页，每页数据，然后查询返回数据，封装进PageInfo对象中，返回数据

导航条要设计为动态滚动的，使用

PageUtil.buildPageNavigate(currentPage, pageInfo)

构建导航条，简单的实现如下

/**
     * 页数变化步长
     */
    private static final int STEP = 1;

    /**
     * 根据当前页，构建分页导航栏
     * @param currentPage
     * @param pageInfo
     */
    public static void buildPageNavigate(Integer currentPage, PageInfo<?> pageInfo) {
        int firstPage = currentPage - ConstEnum.PAGEBACKWARD.getValue();
        int lastPage = currentPage + ConstEnum.PAGEFORWARD.getValue();
        int prePage = currentPage - STEP;
        int nextPage = currentPage + STEP;
        int totalPage = pageInfo.getPages();
        
        //总页数不够要显示的页数时，使用总页数
        if (totalPage <= ConstEnum.PAGES.getValue()) {
            pageInfo.setNavigateFirstPage(ConstEnum.PAGESTART.getValue());
            pageInfo.setNavigateLastPage(totalPage);
        } else {
            //总页数超过要显示的页数时，分别处理靠近起始页，和最后页数的情况
            if (currentPage - ConstEnum.PAGEBACKWARD.getValue() <= ConstEnum.PAGESTART.getValue()) {
                pageInfo.setNavigateFirstPage(ConstEnum.PAGESTART.getValue());
                pageInfo.setNavigateLastPage(ConstEnum.PAGES.getValue());
            } else if (currentPage + ConstEnum.PAGEFORWARD.getValue() >= totalPage) {
                //总页数超过要显示的页数时，分别处理当前页靠近起始页，和最后页数的情况
                pageInfo.setNavigateFirstPage(totalPage - ConstEnum.PAGES.getValue() + STEP);
                pageInfo.setNavigateLastPage(totalPage);
            } else {
                //总页数超过要显示的页数时，页数分布在中间的情况
                pageInfo.setNavigateFirstPage(firstPage);
                pageInfo.setNavigateLastPage(lastPage);
            }
        }
        
        //上一页，下一页处理
        pageInfo.setNextPage(nextPage >= totalPage ? totalPage : nextPage);
        pageInfo.setPrePage(prePage <= ConstEnum.PAGESTART.getValue() ? ConstEnum.PAGESTART.getValue() : prePage);
    }

枚举定义常量值

public enum ConstEnum {
    /**
     * 分页时，每页数据大小
     */
    PAGESIZE(1),
    /**
     * 当前向前翻页页数，确定导航栏终止页
     */
    PAGEFORWARD(2),
    /**
     * 当前向后翻页页数，确定导航栏起始页
     */
    PAGEBACKWARD(2),
    /**
     * 导航栏显示总页数
     */
    PAGES(5),
    /**
     * 导航栏默认起始页 1
     */
    PAGESTART(1);

    private int value;

    ConstEnum(int value) {
        this.value = value;
    }

    public int getValue() {
        return value;
    }
}

这里设置了每页显示数据条数为1，导航条显示总页数为5页，页数足够时，当前页处于导航条中部，导航条默认起始页为1。

页数套用了amaze ui的实例模板，加上vue.js的简单实践，进行前后分离的实现

实现效果：

部分代码，主要使用了vue的数据绑定

<ul class="am-pagination am-fr admin-content-pagination">
                <li><a v-on:click="getComments(artId,pages.prePage)">&laquo;</a></li>
                  <li v-for="(item,index) in pages.navigateLastPage" v-show="item >= pages.navigateFirstPage && item < pages.pageNum">
                    <a v-on:click="getComments(artId,item)">{{ item }}</a>
                  </li>
                  <li v-for="(item,index) in pages.navigateLastPage" v-show="item >= pages.navigateFirstPage && item === pages.pageNum" class="am-active">
                      <a v-on:click="getComments(artId,item)">{{ item }}</a>
                  </li>
                  <li v-for="(item,index) in pages.navigateLastPage" v-show="item >= pages.navigateFirstPage && item > pages.pageNum">
                      <a v-on:click="getComments(artId,item)">{{ item }}</a>
                  </li>
                
                <li><a v-on:click="getComments(artId,pages.nextPage)">&raquo;</a></li>
              </ul>

var app = new Vue({ 
    el: '#app',
    data: {
        todos: ''
    },
    created: function () {
        this.getData();
    },
    methods: {
        getData: function () {
            var url = 'http://127.0.0.1:8080/artical/get';
            var self = this;
            self.$http.get(url).then(function(res){
                var json = res.body;
                if (json.retCode != 0 || json.retMsg != 'success') {
                    alert(json.retMsg);
                    return;
                }
                self.todos = json.data;
                // handle(res);
            },function(res){
                console.info(res);
                alert('query failed');
            })
        },
        shownew: function (id) {
            //var url = 'http://127.0.0.1:8080/artical/' + id;
            artical.getData(id);
            comment.getComments(id,1);
        }
    }
});

var artical = new Vue({ 
    el: '#artical',
    data: {
        art: '',
        message: ''
    },
    // created: function () {
    //     this.getData();
    // },
    methods: {
        getData: function (id) {
            var url = 'http://127.0.0.1:8080/artical/' + id;
            var self = this;
            self.$http.get(url).then(function(res){
                var json = res.body;
                if (json.retCode != 0 || json.retMsg != 'success') {
                    alert(json.retMsg);
                    return;
                }
                self.art = json.data;
            },function(res){
                console.error(res);
                alert('query failed');
            })
        },
        addComment: function (id) {
            var url = 'http://127.0.0.1:8080/comment/' + id;
            var self = this;
            var data = {
                'message': self.message
            }
            //alert(self.message);
            self.$http.post(url,data,{emulateJSON: true}).then(function (res) {
                var json = res.body;
                if (json.retCode != 0 || json.retMsg != 'success') {
                    alert(json.retMsg);
                    return;
                }
                alert('评论成功');
                //self.comments = json.data;
                getComments(id);
            },function (res) {
                console.error(res);
                alert('comment failed');
            })
        }
    }
});

var comment = new Vue({
    el: "#comment",
    data: {
        comments: '',
        pages: '',
        artId: ''
    },
    methods: {
        getComments: function (id,curPage) {
            var url = 'http://127.0.0.1:8080/comment/' + id;
            var data = {
                "currentPage": curPage
            }
            var self = this;
            self.$http.get(url,{params:data},{emulateJSON:true}).then(function (res) {
                var json = res.body;
                if (json.retCode != 0 || json.retMsg != 'success') {
                    alert(json.retMsg);
                    return;
                }
                self.comments = json.data.list;
                self.pages = json.data;
                this.artId = id;
            },function (res) {
                console.error(res);
                alert('load failed');
            })
        }
    }
});

通过小实例的编写学习新东西，是一种很好的方式，毕竟编程在于实践！