基于springboot+mybatisplus构建系统管理平台（二）-低调大师

基于springboot+mybatisplus构建系统管理平台（二）

2019-05-13 915

上一篇主要说到了spring security和mybatis-plus的使用，当然都是使用过程中的一些描述，可能在理解上与实际有一些出入，毕竟是学习的过程，循序渐渐才更有价值。

其实后台的服务基本在之前的基础上已经有了，现在的关键就是前段的界面与后台的集成，当然现在很多应用前后端都已经分离，当我们作为两个服务去部署时，其实又会有很多新问题需要处理，同时会有更多的知识需要去了解，当然毕竟在目前阶段这不属于核心的东西，所有此次依旧将前端代码与后台带打包在一起使用。

一直说到使用vue，其实很早就接触过，但确实也没怎么去使用，一是因为目前工作环境影响；其次前端框架太多，在选择上没有做过过多的评估与对比，所以一直不知道选用什么样的框架与当前工作内容更贴切。当然由于现在不是vue的教学，我们需要的是一个成型的界面，可供操作，所以vue只是其中的一个技术点，在项目中会结合thymeleaf与ivew来使用。

项目结构大致如下：

其中pages存放的是页面相关内容，static则是一些js、css等，由于我们引入了安全框架，同时由于权限配置关系，导致所有的脚步样式图片等资源都会被拦截，因此我们有必要忽略这些镜头资源，在WebSecurityConfigurerAdapter的子类中配置即可：

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("/static/**").antMatchers("/favicon.ico")
            .mvcMatchers("/webjars/**")
            .mvcMatchers("/js/**")
            .mvcMatchers("/css/**");
}

为什么把pages分了这么多，主要是将一个完整的html页面进行了分割，比如头部分，会引入css以及一些其他相关配置，页面也会有相应的布局，比如分为上下左中几个部分，其实只是做了一下分离，这个完全是因人而异。

可以看下common：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <body>
        <th:block th:fragment="common-css">
            <link rel="stylesheet" th:href="@{/webjars/iview/dist/styles/iview.css}">
            <link rel="stylesheet" th:href="@{/static/css/main.css}">
        </th:block>

        <th:block th:fragment="common-js">
            <!-- import vue-->
            <script type="text/javascript" th:src="@{/webjars/vue/dist/vue.min.js}"></script>
            <!-- import axios -->
            <script type="text/javascript" th:src="@{/webjars/axios/dist/axios.min.js}"></script>
            <!-- import iView -->
            <script type="text/javascript" th:src="@{/webjars/iview/dist/iview.min.js}"></script>
            <!-- i18n -->
            <script type="text/javascript" th:src="@{/webjars/iview/dist/locale/zh-CN.js}"></script>
        </th:block>
    </body>
</html>

因为是通过webjars引入的前端依赖库，所有都是通过maven来管理的：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.32-1</version>
</dependency>
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue</artifactId>
    <version>2.6.10</version>
</dependency>
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>iview</artifactId>
    <version>3.4.0</version>
</dependency>
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>axios</artifactId>
    <version>0.17.1</version>
</dependency>
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>jquery</artifactId>
    <version>3.4.1</version>
</dependency>

这里没有使用vue的一些脚手架，主要也是用最基本的功能区完成一些效果，主要是为了使用与理解。这里要提到webjars-locator这样一个jar，帮助我们处理了所有版本问题，所以在引入的时候不会有相关的版本信息在路径中。

其次核心的框子都在layout.html中，主要帮我们完成了布局，菜单数据加载，以及以下菜单路由相关的工作：

<head>
    <title th:text="管理系统"></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="Shortcut Icon" href="favicon.ico">
    <!-- import css -->
    <div th:replace="common/commons::common-css"></div>
    <!-- import js -->
    <div th:replace="common/commons::common-js"></div>
    <script type="text/javascript" th:inline="javascript">
        iview.lang('zh-CN');
        /*<![CDATA[*/
            window['contextPath'] = /*[[@{/}]]*/
        /*]]>*/
    </script>
</head>

<body>
    <div id="app" class="layout layout-full">
        <layout class="menu-container">
            <header v-cloak>
                <i-menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"><span class="log-text">管理系统</span></div>
                    <div class="layout-nav">
                        <menu-item name="1">
                            <icon type="ios-notifications-outline"></icon>
                            消息
                        </menu-item>
                        <menu-item name="2">
                            <icon type="md-volume-down" />
                            提醒
                        </menu-item>
                        <menu-item name="3">
                            <icon type="ios-mail-outline"></icon>
                            邮件
                        </menu-item>
                    </div>
                    <divider type="vertical" />
                </i-menu>
                <i-menu mode="horizontal" theme="dark" class="layout-header-rignt">
                    <div class="">
                        <menu-item>
                            <span>管理员</span>
                        </menu-item>
                        <menu-item>
                            <icon type="md-exit" style="font-size: 18px"></icon>
                            <a th:href="@{/logout}"></a>
                        </menu-item>
                    </div>
                </i-menu>
            </header>
            <layout>
                <sider hide-trigger :style="{background: '#fff'}" class="layout-menu">
                    <!--@on-select="goPage"-->
                    <i-menu ref="side_menu" :open-names="openNames" :active-name="activeName"  theme="light" width="auto" accordion  class="app-left">
                        <submenu v-for="menu in menus" :name="menu.id" v-cloak>
                            <template slot="title">
                                <icon :type="menu.style"></icon>
                                {{menu.name}}
                            </template>
                            <!--@click.native="goPage"-->
                            <menu-item v-for="m in menu.children" :name="m.id" :to="m.path">{{m.name}}</menu-item>
                        </submenu>
                    </i-menu>
                </sider>
                <layout :style="{padding: '0 24px 24px'}">
                    <breadcrumb :style="{margin: '24px 0','padding-left': '200px',position: 'absolute',top: '60px'}" v-cloak>
                        <breadcrumb-item v-for="menu in menuNav">{{menu}}</breadcrumb-item>
                    </breadcrumb>
                    <content class="app-main">
                        <div th:replace="::app-content"></div>
                    </content>
                </layout>
            </layout>
        </layout>
    </div>
<script th:inline="javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                menus:[],
                openNames:[],
                activeName:'',
                menuNav:['主页']
            };
        },
        created:function () {
            var that = this;
            /*<![CDATA[*/
                var _menuNav = /*[[${menuNav}]]*/
                    _openNames = /*[[${openNames}]]*/
                    _activeName = /*[[${activeName}]]*/
                _menuNav && (this.menuNav = _menuNav);
                _openNames && (this.openNames = _openNames);
                _activeName && (this.activeName = _activeName);
            /*]]>*/
            axios.get(contextPath+'system/menu/tree')
                .then(function (res) {
                    that.menus = res.data;
                    //自动构建的菜单需要加上处理
                    that.$nextTick(() => {
                        that.$refs.side_menu.updateOpened()
                        that.$refs.side_menu.updateActiveName()
                    })
                });
        },
        methods:{
            goPage:function (name) {
                // window.location.hash = name;
                // name && (window.location.href = name);
            }
        }
    });

</script>
</body>

可以看下，最先引入了我们在common中的css与js，之后用到了iview，其实就是在布局中拷贝了一个，进行了简单的修改，然后有几点需要说明的：

1、记得一定需要使用new Vue({el:''})，对页面元素处理，这样相关的组件才能进行渲染，因为页面中使用了iview的自定义组件，但又是基于vue的，所以这个必须要加上。

2、页面中一些动态的数据，比如菜单数据、样式相关的配置属性、导航属性等，要优先定义，在之后的页面操作中，进行修改这些属性即可实现动态效果，这个看vue的教程即可。

3、web项目上下文路径会随部署而变化，在thymeleaf中，我们可以通过这样获取，前提是script标签需要th:inline="javascript"声明：

window['contextPath'] = [[@{/}]]

4、围绕vue的生命周期，有很多钩子函数可以在其创建过程中完成我们自定义的修改

5、菜单的路由主要根据iview的提供的属性进行了处理，其中:to会将该元素渲染成a标签，最后其实是全局刷新，其实每个模块就是一个新地址，

<menu-item v-for="m in menu.children" :name="m.id" :to="m.path">{{m.name}}</menu-item>

这个不同于之前的做法，将整个项目作为一个页面，将子页面全部嵌入到注页面中，这次主要是通过layout.html作为一个模板，所有的子页面内容都是加载到

<content class="app-main">
    <div th:replace="::app-content"></div>
</content>

中，同时页面会重新定位，而我们真正的页面则是这样的：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/layout">

    <div th:fragment="app-content">
        index
    </div>

</html>

其实前端的构建大致也就是这样，当然会有很多细节，在真正去构建的时候都会遇到各种问题，当然，遇到问题解决问题，这样的方式能够更快的了解并使用新的技术。

目前只是完成了一个用户查询的界面：

<div th:fragment="app-content">
    <div id="user">
        <i-table border
                 :columns="columns"
                 :data="users">
        </i-table>
    </div>
    <script th:src="@{/webjars/jquery/dist/jquery.min.js}"></script>
    <script>
        new Vue({
            el: '#user',
            data() {
                return {
                    users: [],
                    columns: [
                        {
                            title: '登录名',
                            key: 'username'
                        },
                        {
                            title: '用户名',
                            key: 'userCaption'
                        },
                        {
                            title: '年龄',
                            key: 'age'
                        },
                        {
                            title: '电话',
                            key: 'telephone'
                        },
                        {
                            title: '邮箱',
                            key: 'email'
                        }
                    ]
                }
            },
            created(){
                this.getUsers();
            },
            methods: {
                getUsers:function () {
                    var that = this;
                    //异步加载无数据！！
                    // axios.get(contextPath+'system/user')
                    //     .then(function (res) {
                    //         that.users = res.data;
                    //     })
                    $.ajax({
                        url:contextPath+'system/user',
                        async:false,
                        success:function(res){
                            that.users = res;
                        }
                    })
                }
            }
        });
    </script>
</div>

界面大致这样：

当然这样有个问题一直不知道什么原因，因为请求时使用的是axios，其中users数据一直无法和页面实现双向绑定。

代码：https://github.com/suspring/springboot-mybatisplus-security-ms.git

下一次看下消息队列把...

微信关注我们

原文链接：https://my.oschina.net/suspring/blog/3048966

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

HTTP的结构

HTTP结构图 HTTP结构之请求篇 (1)组成 http请求报文由三部分组成，分别是：请求行(请求头)、消息报头、请求正文。请求头（请求行）以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本，格式如下：Method Request-URI HTTP-Version CRLF 其中 Method表示请求方法；Request-URI是一个统一资源标识符；HTTP-Version表示请求的HTTP协议版本；CRLF表示回车和换行（除了作为结尾的CRLF外，不允许出现单独的CR或LF字符）。请求方法如下：请求正文(实体主体)：一般不用 (2)请求报文的例子 GET /chn/yxsz/index.htm HTTP/1.1 /*请求行使用相对URL*/ Host:www.tsinghua.edu.cn /*此行为首部行的开始，给出主机的域名*/ Connection:close /*告诉服务器发送完请求的文档可释放连接*/ user-Agent:Mozilla/5.0 /*表明用户代理是使用Netscape浏览器*/ Accept-Language:cn /*表示用户希望优先...

2019-05-13

779

一、前言相信我们每个人在SpringMVC开发中，都遇到这样的问题：当我们的代码正常运行时，返回的数据是我们预期格式，比如json或xml形式，但是一旦出现了异常（比如：NPE或者数组越界等等），返回的内容确实服务端的异常堆栈信息，从而导致返回的数据不能使客户端正常解析；很显然，这些并不是我们希望的结果。我们知道，一个较为常见的系统，会涉及控制层，服务(业务)层、缓存层、存储层以及接口调用等，其中每一个环节都不可避免的会遇到各种不可预知的异常需要处理。如果每个步骤都单独try..catch会使系统显的很杂乱，可读性差，维护成本高；常见的方式就是，实现统一的异常处理，从而将各类异常从各个模块中解耦出来；二、常见全局异常处理在Spring中常见的全局异常处理，主要有三种：（1）注解ExceptionHandler （2）继承HandlerExceptionResolver接口（3）注解ControllerAdvice 在后面的讲解中，主要以HTTP错误码：400（请求无效）和500（内部服务器错误）为例，先看一下测试代码以及没有任何处理的返回结果，如下： (图1：测试代码) ...

2019-05-13

608

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。