wuyouzhuguli.github.io/FEBS-Vue-Document.html at master · wuyouzhuguli/wuyouzhuguli.github.io

History

<!doctype html><html class="theme-next mist" lang="zh-Hans"><head><meta name="generator" content="Hexo 3.8.0"><meta name="google-site-verification" content="7Tau9WyVgxnsEY9oYedu9g0U6_8akOX3wiKbaYcrg9A"><meta name="baidu-site-verification" content="EVwLiaxdxX"><link href="/css/xps13.css" rel="stylesheet" type="text/css"><link href="/css/message.css" rel="stylesheet" type="text/css"><link href="//fonts.googleapis.com/css?family=Baloo+Bhaijaan|Inconsolata|Josefin+Sans|Montserrat" rel="stylesheet"><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css"><meta name="keywords" content="FEBS,"><link rel="alternate" href="/atom.xml" title="MrBird" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/bird.png?v=5.1.1"><meta name="description" content="FEBS-Vue为FEBS-Shiro的前后端分离版本，前端使用Vue全家桶，组件库采用Ant-Design-Vue。文档里介绍的示例是在Windows10操作系统下完成的，后端编辑器使用IDEA，前端编辑器使用WebStorm。"><meta name="keywords" content="FEBS"><meta property="og:type" content="article"><meta property="og:title" content="FEBS-Vue文档"><meta property="og:url" content="http://mrbird.cc/FEBS-Vue-Document.html"><meta property="og:site_name" content="MrBird"><meta property="og:description" content="FEBS-Vue为FEBS-Shiro的前后端分离版本，前端使用Vue全家桶，组件库采用Ant-Design-Vue。文档里介绍的示例是在Windows10操作系统下完成的，后端编辑器使用IDEA，前端编辑器使用WebStorm。"><meta property="og:locale" content="zh-Hans"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409165245.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409170853.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409171301.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409171954.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409172902.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409173934.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409184301.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409185417.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409184818.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409185112.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409185643.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409190322.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409191649.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409191833.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409204143.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409204745.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409204849.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409205834.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409210335.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409210901.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409211225.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409211912.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409212130.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409212334.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409213345.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409223016.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_094404.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409220000.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409225225.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409223442.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_094842.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/asdfasdfasd.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_100815.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_101222.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_095141.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_095533.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_101510.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_101826.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-10_104514.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/backend-xmind.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-08_113758.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190408141755.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-08_145115.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190408145646.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190408153154.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/redis-zset.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190408154805.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/2019-04-08_185510.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409101831.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409133947.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409134916.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409135425.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409135740.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409141220.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/asdfasdfasfdasdf.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409142251.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409142642.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409143223.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409143905.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409143943.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409144206.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409144908.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/20190409150427.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409152413.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409152550.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409153002.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409153227.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409153710.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409153800.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409161742.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409161947.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409162214.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ截图20190409162930.png"><meta property="og:image" content="http://mrbird.cc/img/febsvue/QQ图片20190409164403.jpg"><meta property="og:updated_time" content="2020-01-21T03:30:03.126Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="FEBS-Vue文档"><meta name="twitter:description" content="FEBS-Vue为FEBS-Shiro的前后端分离版本，前端使用Vue全家桶，组件库采用Ant-Design-Vue。文档里介绍的示例是在Windows10操作系统下完成的，后端编辑器使用IDEA，前端编辑器使用WebStorm。"><meta name="twitter:image" content="http://mrbird.cc/img/febsvue/20190409165245.png"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Mist",sidebar:{position:"left",display:"always",offset:12,offset_float:0,b2t:!1,scrollpercent:!0},fancybox:!1,motion:!1}</script><title>FEBS-Vue文档 | MrBird</title></head><body ondragstart="return!1" class="animsition" lang="zh-Hans" style="overflow-x:hidden;padding-left:280px"><script type="text/javascript" src="/js/mo.min.js"></script><style>body{text-rendering:geometricPrecision!important;font-family:'Josefin Sans','PingFang SC'!important;-webkit-font-smoothing:antialiased!important;-webkit-text-size-adjust:100%!important;background-color:#f4f6f7}@media (min-width:768px) and (max-width:991px){body .header-innerr{width:700px!important}}.header-innerr{margin:0 auto;padding:100px 0 70px;width:880px}@media (min-width:1600px){.container .header-innerr{width:996px}}.header-innerr{position:relative}.header-innerr{padding:0}.header-innerr:after,.header-innerr:before{content:" ";display:table}.header-innerr:after{clear:both}@media (max-width:767px){.header-innerr{width:auto;padding:10px;margin-bottom:-20px}}</style><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet"><div class="custom-logo-site-title"></div><h1 class="site-subtitle" itemprop="description"></h1></div><div class="site-nav-toggle"><button> </button></div></div><nav class="site-nav"><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"> <div class="local-search-input-wrapper"><input autocomplete="off" placeholder="Search" spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div><div class="header-innerr"></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://mrbird.cc/FEBS-Vue-Document.html"><meta itemprop="name" content="MrBird"><meta itemprop="description" content=""><meta itemprop="image" content="/images/blogImage.jpg"><meta itemprop="name" content="MrBird"><header class="post-header"><h2 class="post-title" itemprop="name headline">FEBS-Vue文档</h2><div class="post-meta"> <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-01-01T09:24:51+08:00">2019-01-01 </time> |   Visit count </div></header><div class="post-body" itemprop="articleBody">FEBS-Vue为<a href="https://github.com/wuyouzhuguli/FEBS-Shiro" target="_blank" rel="noopener">FEBS-Shiro</a>的前后端分离版本，前端使用Vue全家桶，组件库采用<a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank" rel="noopener">Ant-Design-Vue</a>。文档里介绍的示例是在Windows10操作系统下完成的，后端编辑器使用IDEA，前端编辑器使用WebStorm。<a id="more"></a><h2 id="项目导入"><a href="#项目导入" class="headerlink" title="项目导入"></a>项目导入</h2>为了方便，我直接在桌面上通过git bash克隆项目：<figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>git clone https://github.com/wuyouzhuguli/FEBS-Vue.git </pre></td></tr></table></figure>克隆后，桌面上多出一个FEBS-Vue文件夹：<img src="img/febsvue/20190409165245.png" alt="QQ截图20190409165245.png">backend为后端项目源码，frontend为前端项目源码，sql为数据库初始化脚本。<h3 id="JDK"><a href="#JDK" class="headerlink" title="JDK"></a>JDK</h3>因为项目用到了JDK 8的一些特性，所以JDK最低版本不能低于8。JDK 8官方下载地址：<a href="https://www.oracle.com/technetwork/java/javase/downloads。" target="_blank" rel="noopener">https://www.oracle.com/technetwork/java/javase/downloads。</a><h3 id="安装Node-js"><a href="#安装Node-js" class="headerlink" title="安装Node.js"></a>安装Node.js</h3>Node.js下载地址：<a href="http://nodejs.cn/download/" target="_blank" rel="noopener">http://nodejs.cn/download/</a>，直接安装即可，安装后查看其版本：<img src="img/febsvue/QQ截图20190409170853.png" alt="QQ截图20190409170853.png">Node.js集成了npm，所以安装好Node.js后npm就可以使用了：<img src="img/febsvue/QQ截图20190409171301.png" alt="QQ截图20190409171301.png"><h3 id="安装yarn"><a href="#安装yarn" class="headerlink" title="安装yarn"></a>安装yarn</h3>在CMD中执行<code>npm install -g yarn</code>：<img src="img/febsvue/QQ截图20190409171954.png" alt="QQ截图20190409171954.png">因为我之前已经安装过了，所以这里就相当于更新操作了。<h3 id="安装Redis"><a href="#安装Redis" class="headerlink" title="安装Redis"></a>安装Redis</h3>项目缓存数据库使用的是Redis，所以在导入项目前需先安装Redis。Redis Windows版本下载地址：<a href="https://github.com/MicrosoftArchive/redis/releases" target="_blank" rel="noopener">https://github.com/MicrosoftArchive/redis/releases</a>。直接下载zip版本解压到任意目录即可。下载后，使用cmd命令切换到Redis根目录，然后运行<code>redis-server.exe redis.windows.conf</code>启动即可：<img src="img/febsvue/QQ截图20190409172902.png" alt="QQ截图20190409172902.png"><h3 id="安装MySQL"><a href="#安装MySQL" class="headerlink" title="安装MySQL"></a>安装MySQL</h3>项目数据库采用MySQL社区版，版本为5.7.x。下载地址：<a href="https://dev.mysql.com/downloads/windows/installer/5.7.html" target="_blank" rel="noopener">https://dev.mysql.com/downloads/windows/installer/5.7.html</a><h3 id="导入SQL"><a href="#导入SQL" class="headerlink" title="导入SQL"></a>导入SQL</h3>使用Navicat新建一个数据库：<img src="img/febsvue/QQ截图20190409173934.png" alt="QQ截图20190409173934.png">然后导入SQL脚本即可。<h3 id="导入后端项目"><a href="#导入后端项目" class="headerlink" title="导入后端项目"></a>导入后端项目</h3>IDEA选择backend： <img src="img/febsvue/QQ截图20190409184301.png" alt="QQ截图20190409184301.png">导入项目后安装lombok插件（不懂lombok可以自行百度）：<img src="img/febsvue/QQ截图20190409185417.png" alt="QQ截图20190409185417.png">安装完重启IDEA才能生效。接着修改application.yml中的数据库和Redis配置，修改完后通过Spring Boot入口类FebsApplication启动即可：<img src="img/febsvue/QQ截图20190409184818.png" alt="QQ截图20190409184818.png"><img src="img/febsvue/QQ截图20190409185112.png" alt="QQ截图20190409185112.png">接着开始导入前端项目。<h3 id="导入前端项目"><a href="#导入前端项目" class="headerlink" title="导入前端项目"></a>导入前端项目</h3>使用WebStorm打开frontend：<img src="img/febsvue/QQ截图20190409185643.png" alt="QQ截图20190409185643.png">在终端输入<code>yarn install</code>命令安装依赖：<img src="img/febsvue/QQ截图20190409190322.png" alt="QQ截图20190409190322.png">稍等片刻，坐与放宽。依赖下载完毕后，输入yarn start启动前端项目：<img src="img/febsvue/QQ截图20190409191649.png" alt="QQ截图20190409191649.png">浏览器访问<a href="http://localhost:8081" target="_blank" rel="noopener">http://localhost:8081</a>：<img src="img/febsvue/QQ截图20190409191833.png" alt="QQ截图20190409191833.png"><h2 id="项目部署"><a href="#项目部署" class="headerlink" title="项目部署"></a>项目部署</h2>下面演示如何在Linux上部署项目（例子采用CentOS7）。<h3 id="Vagrant创建CentOS"><a href="#Vagrant创建CentOS" class="headerlink" title="Vagrant创建CentOS"></a>Vagrant创建CentOS</h3>如果没有CentOS7环境可以使用Vagrant快速构建一个CentOS虚拟机，具体可以参考：<a href="https://mrbird.cc/Create-Virtual-Machine-By-Vagrant.html">https://mrbird.cc/Create-Virtual-Machine-By-Vagrant.html</a>。我的CentOS虚拟机IP为：192.168.33.11。<div class="note danger">使用命令<code>timedatectl set-timezone Asia/Shanghai</code>设置CentOS的时区，以避免因时区带来的BUG。</div><h3 id="Java环境配置"><a href="#Java环境配置" class="headerlink" title="Java环境配置"></a>Java环境配置</h3><ol><li>下载JDK8：</li></ol><img src="img/febsvue/QQ截图20190409204143.png" alt="QQ截图20190409204143.png">下载后通过Vagrant共享到CentOS上（我的Vagrantfile共享配置为<code>config.vm.synced_folder "./sync", "/vagrant", create:true, owner: "root", group: "root"</code>）：<img src="img/febsvue/QQ截图20190409204745.png" alt="QQ截图20190409204745.png"><ol start="2"><li>安装JDK8：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>rpm -ivh jdk-8u201-linux-x64.rpm </pre></td></tr></table></figure><img src="img/febsvue/QQ截图20190409204849.png" alt="QQ截图20190409204849.png"><ol start="3"><li>配置环境变量</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>vim /etc/profile </pre></td></tr></table></figure>输入以下内容：<figure class="highlight bash"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>JAVA_HOME=/usr/java/jdk1.8.0_201 JRE_HOME=/usr/java/jdk1.8.0_201/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME JRE_HOME PATH CLASSPATH </pre></td></tr></table></figure>然后执行以下命令生效：<figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>source /etc/profile </pre></td></tr></table></figure><h3 id="安装Docker"><a href="#安装Docker" class="headerlink" title="安装Docker"></a>安装Docker</h3>官方安装教程：<a href="https://docs.docker.com/install/linux/docker-ce/centos/" target="_blank" rel="noopener">https://docs.docker.com/install/linux/docker-ce/centos/</a>安装好后：<img src="img/febsvue/QQ截图20190409205834.png" alt="QQ截图20190409205834.png"><h3 id="Docker安装MySQL"><a href="#Docker安装MySQL" class="headerlink" title="Docker安装MySQL"></a>Docker安装MySQL</h3><ol><li>拉取MySQL镜像：</li></ol><img src="img/febsvue/QQ截图20190409210335.png" alt="QQ截图20190409210335.png"><ol start="2"><li>创建目录/home/febs/mysql，用于挂载MySQL volume:</li></ol><img src="img/febsvue/QQ截图20190409210901.png" alt="QQ截图20190409210901.png"><ol start="3"><li>创建MySQL容器：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre>1 2 </pre></td><td class="code"><pre>docker run -d --name mysql -p 3306:3306 \ -v $(pwd):/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7.25 </pre></td></tr></table></figure><img src="img/febsvue/QQ截图20190409211225.png" alt="QQ截图20190409211225.png"><ol start="4"><li>使用Navicat连接MySQL，创建数据库并导入数据：</li></ol>连接：<img src="img/febsvue/QQ截图20190409211912.png" alt="QQ截图20190409211912.png">新增数据库：<img src="img/febsvue/QQ截图20190409212130.png" alt="QQ截图20190409212130.png">导入SQL：<img src="img/febsvue/QQ截图20190409212334.png" alt="QQ截图20190409212334.png"><h3 id="Docker安装Redis"><a href="#Docker安装Redis" class="headerlink" title="Docker安装Redis"></a>Docker安装Redis</h3><ol><li>拉取Redis镜像:</li></ol><img src="img/febsvue/QQ截图20190409213345.png" alt="QQ截图20190409213345.png"><ol start="2"><li>创建文件/home/febs/redis/conf/redis.conf，用于挂载Redis配置文件：</li></ol><img src="img/febsvue/QQ截图20190409223016.png" alt="QQ截图20190409213604.png"><ol start="3"><li>创建Redis容器：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>docker run -d -p 6379:6379 \ -v /home/febs/redis/conf/redis.conf:/usr/local/etc/redis/redis.conf \ --name redis redis:4.0.14 </pre></td></tr></table></figure>测试连接：<img src="img/febsvue/2019-04-10_094404.png" alt="QQ截图20190410094147.png"><h3 id="Docker安装Nginx"><a href="#Docker安装Nginx" class="headerlink" title="Docker安装Nginx"></a>Docker安装Nginx</h3><ol><li>拉取Nginx镜像:</li></ol><img src="img/febsvue/QQ截图20190409220000.png" alt="QQ截图20190409220000.png"><ol start="2"><li>创建目录/home/febs/nginx/html、/home/febs/nginx/logs和文件/home/febs/nginx/conf/nginx.conf，分别用于挂载Nginx html,logs和配置文件：</li></ol><img src="img/febsvue/20190409225225.png" alt="QQ截图20190409225225.png"> <img src="img/febsvue/20190409223442.png" alt="QQ截图20190409220212.png"><ol start="3"><li>修改Nginx配置：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>vim /home/febs/nginx/conf/nginx.conf </pre></td></tr></table></figure><figure class="highlight nginx"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 </pre></td><td class="code"><pre>worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; sendfile on; tcp_nopush on; keepalive_timeout 60; tcp_nodelay on; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300; fastcgi_buffer_size 64k; fastcgi_buffers 4 64k; fastcgi_busy_buffers_size 128k; fastcgi_temp_file_write_size 256k; fastcgi_intercept_errors on; gzip on; gzip_min_length 1k; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_comp_level 6; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $server_name zone=perserver:10m; server_tokens off; access_log off; server { listen 80; server_name localhost; charset utf-8; location / { root html; index index.html index.htm; } location = /50x.html { root html; } } } </pre></td></tr></table></figure><ol start="4"><li>创建Nginx容器：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>docker run --name nginx -d -p 80:80 \ -v /home/febs/nginx/conf/nginx.conf:/etc/ng inx/nginx.conf \ -v /home/febs/nginx/html:/etc/nginx/html \ -v /home/febs/nginx/logs:/var/log/nginx nginx:1.14.2 </pre></td></tr></table></figure><h3 id="后端部署"><a href="#后端部署" class="headerlink" title="后端部署"></a>后端部署</h3>修改application.yml中数据库和redis的连接配置，然后将项目打包成jar文件：<img src="img/febsvue/2019-04-10_094842.png" alt="2019-04-10_094842.png">将其上传到CentOS虚拟机的/home/febs/backend目录下：<img src="img/febsvue/asdfasdfasd.png" alt="2019-04-10_100008.png">编写一个启动项目的shell脚本：<figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>vim start.sh </pre></td></tr></table></figure>内容：<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>nohup java -jar febs_shiro_jwt-1.0.0-release.jar & </pre></td></tr></table></figure>编写一个关停项目的shell脚本：<figure class="highlight bash"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>vim stop.sh </pre></td></tr></table></figure>内容：<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 </pre></td><td class="code"><pre>PID=`ps -ef | grep febs_shiro_jwt-1.0.0-release.jar | grep -v grep | awk '{print $2}'` if [ -z "$PID" ] then echo Application is already stopped else echo kill $PID kill -9 $PID fi </pre></td></tr></table></figure>授权，让其可执行：<img src="img/febsvue/2019-04-10_100815.png" alt="2019-04-10_100815.png">启动项目：<figure class="highlight bash"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>./start.sh tail -f nohup.out </pre></td></tr></table></figure>看到如下输出的时候说明后端项目启动成功：<img src="img/febsvue/2019-04-10_101222.png" alt="2019-04-10_101222.png"><h3 id="前端部署"><a href="#前端部署" class="headerlink" title="前端部署"></a>前端部署</h3>点击build：<img src="img/febsvue/2019-04-10_095141.png" alt="2019-04-10_095141.png">build成功后，项目目录下会多出个dist文件夹：<img src="img/febsvue/2019-04-10_095533.png" alt="2019-04-10_095533.png">将这个目录下的文件上传到CentOS虚拟机的/home/febs/nginx/html目录下：<img src="img/febsvue/2019-04-10_101510.png" alt="2019-04-10_101510.png">浏览器访问<a href="http://192.168.33.11/#/login" target="_blank" rel="noopener">http://192.168.33.11/#/login</a>：<img src="img/febsvue/2019-04-10_101826.png" alt="2019-04-10_101826.png"><img src="img/febsvue/2019-04-10_104514.png" alt="2019-04-10_104514.png">部署成功。<h2 id="后端项目介绍"><a href="#后端项目介绍" class="headerlink" title="后端项目介绍"></a>后端项目介绍</h2><h3 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h3>后端项目目录含义如下图所示：<img src="img/febsvue/backend-xmind.png" alt="backend-xmind.png">Common模块文件含义如下图所示：<img src="img/febsvue/2019-04-08_113758.png" alt="2019-04-08_113758.png">其他模块文件较为简单，略。<h3 id="项目配置"><a href="#项目配置" class="headerlink" title="项目配置"></a>项目配置</h3>application.yml中除了各个插件的配置外，下面这段配置为系统配置：<figure class="highlight yml"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 </pre></td><td class="code"><pre>febs: openAopLog: true max: batch: insert: num: 1000 shiro: anonUrl: /login,/logout/**,/regist,/user/check/** jwtTimeOut: 3600 </pre></td></tr></table></figure><ul><li><code>febs.opAopLog</code>：Boolean类型，取值true或者false，为true时表示开启Aop记录用户的操作日志，需和<code>@Log</code>注解搭配使用。</li><li><code>febs.max.batch.insert.num</code>：大于0的Integer类型，表示Excel导入数据当次最大入库数据量。比如配置为1000时表示入库数据为0 - 1000 时只会执行一次数据库commit操作。</li><li><code>febs.shiro.anonUrl</code>：逗号分隔的字符串，表示无需认证的资源路径。</li><li><code>febs.shiro.jwtTimeOut</code>：定义token的有效时间，单位为秒，比如配置为3600表示token一个小时内有效，超过一个小时后需要重新认证。</li></ul><h3 id="RESTful风格"><a href="#RESTful风格" class="headerlink" title="RESTful风格"></a>RESTful风格</h3>系统Controller暴露的接口风格为RESTful，通过HTTP请求method对应增删改查类型，响应以HTTP Code为判断依据。以UserController为例子：<table><tr><th>描述</th><th>请求URI</th><th>HTTP Method</th><th>对应注解</th></tr><tr><td>查询所有用户</td><td>/user</td><td>GET</td><td>@GetMapping</td></tr><tr><td>通过用户名查找用户</td><td>/user/{username}</td><td>GET</td><td>@GetMapping</td></tr><tr><td>新增用户</td><td>/user</td><td>POST</td><td>@PostMapping</td></tr><tr><td>修改用户</td><td>/user</td><td>PUT</td><td>@PutMapping</td></tr><tr><td>删除用户</td><td>/user/{userIds}</td><td>DELETE</td><td>@DeleteMapping</td></tr></table>Controller方法默认返回200状态码，当Controller抛出异常时，将被<code>GlobalExceptionHandler</code>捕获，根据异常类型，返回不同的HTTP状态码：<table><tr><th>异常类型</th><th>异常描述</th><th>状态码</th><th>对应常量</th></tr><tr><td>UnauthorizedException</td><td>未授权异常，权限不足异常</td><td>403</td><td>HttpStatus.FORBIDDEN</td></tr><tr><td>LimitAccessException</td><td>限制访问异常，访问接口频率超限</td><td>429</td><td>HttpStatus.TOO_MANY_REQUESTS</td></tr><tr><td>ConstraintViolationException</td><td>参数校验异常（普通传参）</td><td>400</td><td>HttpStatus.BAD_REQUEST</td></tr><tr><td>BindException</td><td>参数校验异常（实体对象传参）</td><td>400</td><td>HttpStatus.BAD_REQUEST</td></tr><tr><td>FebsException</td><td>Febs系统异常</td><td>500</td><td>HttpStatus.INTERNAL_SERVER_ERROR</td></tr><tr><td>Exception</td><td>剩下的别的异常</td><td>500</td><td>HttpStatus.INTERNAL_SERVER_ERROR</td></tr></table><h3 id="数据层介绍"><a href="#数据层介绍" class="headerlink" title="数据层介绍"></a>数据层介绍</h3>首先看看表结构，数据表分为两大类：定时任务表和系统表。<img src="img/febsvue/20190408141755.png" alt="QQ截图20190408141755.png">以qrtz_开头的为定时任务表，定时任务有基于内存和基于数据库的，本项目使用的是基于数据库持久化的方案。要详细了解这些表可以参考文章：<a href="http://www.ibloger.net/article/2650.html" target="_blank" rel="noopener">http://www.ibloger.net/article/2650.html</a>。以t_开头的为系统表，他们的关系如下所示:<img src="img/febsvue/2019-04-08_145115.png" alt="2019-04-08_145115.png">其中用户，角色和权限之间的关系使用的是经典的RBAC（Role-Based Access Control，基于角色的访问控制）模型。简单地说，一个用户拥有若干角色，每一个角色拥有若干权限。这样，就构造成“用户-角色-权限”的授权模型。在这种模型中，用户与角色之间，角色与权限之间，一般者是多对多的关系。如下图所示：<img src="img/febsvue/QQ截图20190408145646.png" alt="QQ截图20190408145646.png">比如获取用户名为mrbrid的用户权限过程为：<ol><li>通过mrbrid的user_id从t_user_role表获取对应的role_id；</li><li>通过第1步获取的role_id从t_role_menu表获取对应的menu_id；</li><li>通过第2步获取的menu_id从t_menu获取menu相关信息（t_menu表的permission为权限信息）。</li></ol>数据层框架采用的是<a href="https://mp.baomidou.com/guide/" target="_blank" rel="noopener">MybatisPlus</a>，具体可以参考其官方文档。<h3 id="登录逻辑"><a href="#登录逻辑" class="headerlink" title="登录逻辑"></a>登录逻辑</h3>登录逻辑如下图所示：<img src="img/febsvue/QQ截图20190408153154.png" alt="QQ截图20190408153154.png">这里详细说明下登录成功后的第2步、第3步和第4步过程：<ul><li>登录成功后，构建一个ActiveUser对象，对应<code>LoginController</code>的<code>saveTokenToRedis</code>方法：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 </pre></td><td class="code"><pre>// 构建在线用户 ActiveUser activeUser = new ActiveUser(); activeUser.setUsername(user.getUsername()); activeUser.setIp(ip); activeUser.setToken(token.getToken()); activeUser.setLoginAddress(AddressUtil.getCityInfo(DbSearcher.BTREE_ALGORITHM, ip)); // zset 存储登录用户，score 为过期时间戳 this.redisService.zadd(FebsConstant.ACTIVE_USERS_ZSET_PREFIX, Double.valueOf(token.getExipreAt()), mapper.writeValueAsString(activeUser)); </pre></td></tr></table></figure>然后将<code>activeUser</code>通过<code>ObjectMapper</code>序列化，存储到Redis的Zset结构中，key为<code>FebsConstant.ACTIVE_USERS_ZSET_PREFIX</code>（即febs.user.active），score为该用户的登录过期时间点（即Tokean失效时间），value为<code>activeUser</code>序列化值。<div class="note info">Zset它在set的基础上增加了一个顺序属性(score)，这一属性在添加修改元素时候可以指定，每次指定后，zset会自动重新按新的值调整顺序。可以理解为有两列字段的数据表，一列存value,一列存顺序编号。</div>Zset相关Redis命令：<img src="img/febsvue/redis-zset.png" alt="redis-zset.png">比如当用户mrbird和scott登录成功后，查看Redis中key为febs.user.active的值:<img src="img/febsvue/QQ截图20190408154805.png" alt="QQ截图20190408154805.png"></li><li>将Token存储到Redis中：key为febs.cache.token.token值.IP地址，value为token值，有效期为token的有效时长，对应的源码为：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>this.redisService.set(FebsConstant.TOKEN_CACHE_PREFIX + token.getToken() + StringPool.DOT + ip, token.getToken(), properties.getShiro().getJwtTimeOut() * 1000); </pre></td></tr></table></figure></li><li>返回前端数据包括:1.token：token；2.exipreTime：token过期时间；3.roles：用户角色；4.permissions：用户权限；5.config：用户前端系统的个性化配置；6.user：用户信息（不包括密码）。比如，当scott登录成功后，接口返回数据如下所示：<figure class="highlight json"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 </pre></td><td class="code"><pre>{ "data": { "permissions": [ "user:view", "dept:add", "job:export", "role:add", "weather:view", "dict:add", "role:export", "menu:export", "dict:view", "dept:export", "menu:view", "role:view", "user:export", "job:add", "dept:view", "article:view", "log:view", "jobLog:view", "job:view", "menu:add", "redis:view", "log:export", "movie:coming", "movie:hot", "dict:export", "jobLog:export", "user:online" ], "roles": [ "注册用户" ], "exipreTime": "20190408164521", "config": { "userId": 2, "theme": "light", "layout": "side", "multiPage": "0", "fixSiderbar": "1", "fixHeader": "1", "color": "rgb(24, 144, 255)" }, "user": { "userId": 2, "username": "scott", "password": "it's a secret", "deptId": 6, "deptName": null, "email": "scott@qq.com", "mobile": "15134627380", "status": "1", "createTime": "2017-12-30 00:16:39", "modifyTime": "2019-01-18 08:59:09", "lastLoginTime": "2019-01-23 15:34:28", "ssex": "0", "description": "我是scott，嗯嗯", "avatar": "gaOngJwsRYRaVAuXXcmB.png", "roleId": null, "roleName": null, "sortField": null, "sortOrder": null, "createTimeFrom": null, "createTimeTo": null, "id": "YBeNsMJ0ZJm9GLJP1rlO", "authCacheKey": 2 }, "token": "b25e39b47e774b4a05b3cb1555fc377f209457c3fd339d373d3fca7b1ea8be56fdc6ed05b7ffb0700e7300d242fb83b57b35f45ee1b155b380 50a0671bc7ec54c2f2c5bb1aee0651db69ce657e8ab4cb79c7806209103eda8a3bc96aa043a0144ae3c06a5c549ac168183c37384cf4347e450bf11644d0 62c31ffc3059e63722f849a5de4540b0d1" }, "message": "认证成功" } </pre></td></tr></table></figure></li></ul><h3 id="Redis缓存使用"><a href="#Redis缓存使用" class="headerlink" title="Redis缓存使用"></a>Redis缓存使用</h3>在系统启动过程中，会执行缓存初始化操作，对应<code>CacheInitRunner</code>：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </pre></td><td class="code"><pre>@Slf4j @Component public class CacheInitRunner implements ApplicationRunner { @Autowired private UserService userService; @Autowired private UserManager userManager; @Override public void run(ApplicationArguments args) { try { ... List<User> list = this.userService.list(); for (User user : list) { userManager.loadUserRedisCache(user); } } catch (Exception e) { ... } } } </pre></td></tr></table></figure><code>loadUserRedisCache</code>方法源码：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre>/** * 将用户相关信息添加到 Redis缓存中 * * @param user user */ public void loadUserRedisCache(User user) throws Exception { // 缓存用户 cacheService.saveUser(user.getUsername()); // 缓存用户角色 cacheService.saveRoles(user.getUsername()); // 缓存用户权限 cacheService.savePermissions(user.getUsername()); // 缓存用户个性化配置 cacheService.saveUserConfigs(String.valueOf(user.getUserId())); } </pre></td></tr></table></figure>可以看到，这一过程缓存了用户信息，用户角色信息，用户权限信息，用户的个性化配置信息，缓存的具体key，value可以查看上述方法的源码。通过这些缓存，可以一定程度减轻数据库压力。为了确保缓存数据和数据库数据的一致性，我们必须在相应的增删改方法中对缓存进行相应的操作。比如在更新用户后，我们必须更新相应的缓存：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td class="code"><pre>@Override @Transactional public void updateUser(User user) throws Exception { ... // 重新将用户信息，用户角色信息，用户权限信息加载到 redis中 cacheService.saveUser(user.getUsername()); cacheService.saveRoles(user.getUsername()); cacheService.savePermissions(user.getUsername()); } </pre></td></tr></table></figure><div class="note danger">总而言之，由于我们在启动系统的时候缓存了用户信息，用户角色信息，用户权限信息，用户的个性化配置信息，之后凡是涉及到用户，用户角色，用户权限和用户个性化配置的相关增删改操作都应该及时更新相应的缓存。</div><h3 id="动态路由构建"><a href="#动态路由构建" class="headerlink" title="动态路由构建"></a>动态路由构建</h3>不同的用户拥有不同的角色，不同的角色对应不同的菜单权限，所以我们需要通过用户查询出对应的菜单列表，然后将列表构建成前端需要的路由（前端根据路由信息构建相应的菜单）。获取用户路由的方法为<code>UserManage#getUserRouters</code>：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </pre></td><td class="code"><pre>/** * 通过用户名构建 Vue路由 * * @param username 用户名 * @return 路由集合 */ public ArrayList<VueRouter<Menu>> getUserRouters(String username) { List<VueRouter<Menu>> routes = new ArrayList<>(); List<Menu> menus = this.menuService.findUserMenus(username); menus.forEach(menu -> { VueRouter<Menu> route = new VueRouter<>(); route.setId(menu.getMenuId().toString()); route.setParentId(menu.getParentId().toString()); route.setIcon(menu.getIcon()); route.setPath(menu.getPath()); route.setComponent(menu.getComponent()); route.setName(menu.getMenuName()); route.setMeta(new RouterMeta(true, null)); routes.add(route); }); return TreeUtil.buildVueRouter(routes); } </pre></td></tr></table></figure>比如用户mrbird对应的前端路由为：<figure class="highlight json"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 </pre></td><td class="code"><pre>[ { "path": "/", "name": "主页", "component": "MenuView", "icon": "none", "redirect": "/home", "children": [ { "path": "/home", "name": "系统主页", "component": "HomePageView", "icon": "home", "meta": { "closeable": false, "isShow": true } }, { "path": "/system", "name": "系统管理", "component": "PageView", "icon": "appstore-o", "meta": { "closeable": true }, "children": [ { "path": "/system/user", "name": "用户管理", "component": "system/user/User", "icon": "", "meta": { "closeable": true } }, { "path": "/system/role", "name": "角色管理", "component": "system/role/Role", "icon": "", "meta": { "closeable": true } }, { "path": "/system/menu", "name": "菜单管理", "component": "system/menu/Menu", "icon": "", "meta": { "closeable": true } }, { "path": "/system/dept", "name": "部门管理", "component": "system/dept/Dept", "icon": "", "meta": { "closeable": true } }, { "path": "/system/dict", "name": "字典管理", "component": "system/dict/Dict", "icon": "", "meta": { "closeable": true } } ] }, { "path": "/monitor", "name": "系统监控", "component": "PageView", "icon": "dashboard", "meta": { "closeable": true }, "children": [ { "path": "/monitor/online", "name": "在线用户", "component": "monitor/Online", "icon": "", "meta": { "closeable": true } }, { "path": "/monitor/systemlog", "name": "系统日志", "component": "monitor/SystemLog", "icon": "", "meta": { "closeable": true } }, { "path": "/monitor/redis/info", "name": "Redis监控", "component": "monitor/RedisInfo", "icon": "", "meta": { "closeable": true } }, { "path": "/monitor/httptrace", "name": "请求追踪", "component": "monitor/Httptrace", "meta": { "closeable": true } }, { "path": "/monitor/system", "name": "系统信息", "component": "EmptyPageView", "meta": { "closeable": true }, "children": [ { "path": "/monitor/system/jvminfo", "name": "JVM信息", "component": "monitor/JvmInfo", "meta": { "closeable": true } }, { "path": "/monitor/system/tomcatinfo", "name": "Tomcat信息", "component": "monitor/TomcatInfo", "meta": { "closeable": true } }, { "path": "/monitor/system/info", "name": "服务器信息", "component": "monitor/SystemInfo", "meta": { "closeable": true } } ] } ] }, { "path": "/job", "name": "任务调度", "component": "PageView", "icon": "clock-circle-o", "meta": { "closeable": true }, "children": [ { "path": "/job/job", "name": "定时任务", "component": "quartz/job/Job", "icon": "", "meta": { "closeable": true } }, { "path": "/job/log", "name": "调度日志", "component": "quartz/log/JobLog", "icon": "", "meta": { "closeable": true } } ] }, { "path": "/web", "name": "网络资源", "component": "PageView", "icon": "compass", "meta": { "closeable": true }, "children": [ { "path": "/web/weather", "name": "天气查询", "component": "web/Weather", "icon": "", "meta": { "closeable": true } }, { "path": "/web/dailyArticle", "name": "每日一文", "component": "web/DailyArticle", "icon": "", "meta": { "closeable": true } }, { "path": "/web/movie", "name": "影视资讯", "component": "EmptyPageView", "meta": { "closeable": true }, "children": [ { "path": "/web/movie/hot", "name": "正在热映", "component": "web/MovieHot", "icon": "", "meta": { "closeable": true } }, { "path": "/web/movie/coming", "name": "即将上映", "component": "web/MovieComing", "icon": "", "meta": { "closeable": true } } ] } ] }, { "path": "/others", "name": "其他模块", "component": "PageView", "icon": "coffee", "meta": { "closeable": true }, "children": [ { "path": "/others/excel", "name": "导入导出", "component": "others/Excel", "meta": { "closeable": true } } ] }, { "path": "/profile", "name": "个人中心", "component": "personal/Profile", "icon": "none", "meta": { "closeable": true, "isShow": false } } ] }, { "path": "*", "name": "404", "component": "error/404" } ] </pre></td></tr></table></figure>关于Vue Router可以参考：<a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener">https://router.vuejs.org/zh/</a>。<h3 id="权限控制"><a href="#权限控制" class="headerlink" title="权限控制"></a>权限控制</h3>我们可以在Controller的方法上通过Shiro相关的权限注解进行权限控制，比如下面这个方法只有当用户拥有<code>user:add</code>权限才能访问：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>@PostMapping("/user") @RequiresPermissions("user:add") public void addUser(@Valid User user) { ... } </pre></td></tr></table></figure>当用户没有<code>user:add</code>权限时，系统将抛出<code>UnauthorizedException</code>异常，由<code>GlobalExceptionHandler</code>捕获，返回403状态码。更多Shiro提供的权限注解可以参考：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td class="code"><pre>// 表示当前Subject已经通过login进行了身份验证；即Subject.isAuthenticated()返回true。 @RequiresAuthentication // 表示当前Subject已经身份验证或者通过记住我登录的。 @RequiresUser // 表示当前Subject没有身份验证或通过记住我登录过，即是游客身份。 @RequiresGuest // 表示当前Subject需要角色admin和user。 @RequiresRoles(value={"admin", "user"}, logical= Logical.AND) // 表示当前Subject需要权限user:a或user:b。 @RequiresPermissions (value={"user:a", "user:b"}, logical= Logical.OR) </pre></td></tr></table></figure><h3 id="多数据源"><a href="#多数据源" class="headerlink" title="多数据源"></a>多数据源</h3>多数据源采用的是MyBatis Plus提供的方案：<a href="https://mp.baomidou.com/guide/dynamic-datasource.html" target="_blank" rel="noopener">https://mp.baomidou.com/guide/dynamic-datasource.html</a><h3 id="代码生成"><a href="#代码生成" class="headerlink" title="代码生成"></a>代码生成</h3>目前只有后端代码生成器，采用的是MyBatis Plus提供的方案，对应源码<code>cc.mrbird.febs.common.generator.CodeGenerator</code>，执行其main方法，然后输入表名，就可以生成相应的domain、dao、service、controller、mapper.xml。<h3 id="Excel导入导出"><a href="#Excel导入导出" class="headerlink" title="Excel导入导出"></a>Excel导入导出</h3>Excel导入导出使用的插件为：<a href="https://gitee.com/wuwenze/ExcelKit" target="_blank" rel="noopener">https://gitee.com/wuwenze/ExcelKit</a>，具体操作规则可以仔细阅读这个项目的Readme.md<h3 id="统一参数校验"><a href="#统一参数校验" class="headerlink" title="统一参数校验"></a>统一参数校验</h3>统一参数校验可以参考我的博客：<a href="https://mrbird.cc/Spring-Boot-Hibernate-Validator-Params-Check.html">Spring Boot配合Hibernate Validator参数校验</a>。<h3 id="SQL打印"><a href="#SQL打印" class="headerlink" title="SQL打印"></a>SQL打印</h3>SQL打印采用的插件为<a href="https://p6spy.readthedocs.io/en/latest/index.html" target="_blank" rel="noopener">p6spy</a>，要开启p6spy的SQL打印功能，只需将配置文件application.yml中的<code>spring.datasource.dynamic.p6spy</code>改为<code>true</code>即可。在p6spy.properties文件中可以配置打印规则：<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td class="code"><pre># 使用日志系统记录 sql appender=com.p6spy.engine.spy.appender.Slf4JLogger # 自定义日志打印 logMessageFormat=cc.mrbird.febs.common.config.P6spySqlFormatConfig # 是否开启慢 SQL记录 outagedetection=true # 慢 SQL记录标准 2 秒 outagedetectioninterval=2 # 开启过滤 filter=true # 包含 QRTZ的不打印 exclude=QRTZ </pre></td></tr></table></figure>SQL打印效果如下所示：<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td class="code"><pre>2019-04-08 15:29:50 | INFO | http-nio-9527-exec-1 | p6spy | 2019-04-08 15:29:50 | 耗时 73 ms | SQL 语句： UPDATE t_user SET last_login_time='2019-04-08T15:29:50.724+0800' WHERE username = 'mrbird'; 2019-04-08 15:29:50 | INFO | http-nio-9527-exec-1 | p6spy | 2019-04-08 15:29:50 | 耗时 0 ms | SQL 语句： SELECT USER_ID,username,password,dept_id,email,mobile,status,create_time,modify_time,last_login_time,ssex,description,avatar FROM t_user WHERE username = 'mrbird'; 2019-04-08 15:29:52 | INFO | http-nio-9527-exec-1 | p6spy | 2019-04-08 15:29:52 | 耗时 489 ms | SQL 语句： INSERT INTO t_login_log ( username, login_time, location, ip ) VALUES ( 'mrbird', '2019-04-08T15:29:50.874+0800', '', '127.0.0.1' ); 2019-04-08 15:45:20 | INFO | http-nio-9527-exec-7 | p6spy | 2019-04-08 15:45:20 | 耗时 1 ms | SQL 语句： UPDATE t_user SET last_login_time='2019-04-08T15:45:20.193+0800' WHERE username = 'scott'; 2019-04-08 15:45:20 | INFO | http-nio-9527-exec-7 | p6spy | 2019-04-08 15:45:20 | 耗时 0 ms | SQL 语句： SELECT USER_ID,username,password,dept_id,email,mobile,status,create_time,modify_time,last_login_time,ssex,description,avatar FROM t_user WHERE username = 'scott'; 2019-04-08 15:45:21 | INFO | http-nio-9527-exec-7 | p6spy | 2019-04-08 15:45:21 | 耗时 89 ms | SQL 语句： INSERT INTO t_login_log ( username, login_time, location, ip ) VALUES ( 'scott', '2019-04-08T15:45:20.466+0800', '', '127.0.0.1' ); </pre></td></tr></table></figure><div class="note info">开启这个功能方便我们开发调试，生产环境最好关闭这个功能，因为它在一定程度上会造成性能耗损。</div>更多p6psy的配置可以参考：<a href="https://p6spy.readthedocs.io/en/latest/configandusage.html" target="_blank" rel="noopener">https://p6spy.readthedocs.io/en/latest/configandusage.html</a><h3 id="AOP记录操作日志"><a href="#AOP记录操作日志" class="headerlink" title="AOP记录操作日志"></a>AOP记录操作日志</h3>具体可以参考我的博客：<a href="https://mrbird.cc/Spring-Boot-AOP%20log.html">Spring Boot AOP记录用户操作日志</a>。记录操作日志的过程可以改为异步的方式，这样不会造成接口性能损耗，可以参考我的博客：<a href="https://mrbird.cc/Spring-Boot-Async.html">Spring Boot 中的异步调用</a>。<h3 id="接口限流"><a href="#接口限流" class="headerlink" title="接口限流"></a>接口限流</h3>项目中<code>@Limit</code>注解可以实现接口的限流。即规定一段时间内最多可以访问该接口的次数，超过这个次数则抛出<code>LimitAccessException</code>异常。<code>@Limit</code>注解如下所示：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </pre></td><td class="code"><pre>import cc.mrbird.common.domain.LimitType; import java.lang.annotation.*; @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interface Limit { // 资源名称，用于描述接口功能 String name() default ""; // 资源 key String key() default ""; // key prefix String prefix() default ""; // 时间的，单位秒 int period(); // 限制访问次数 int count(); // 限制类型 LimitType limitType() default LimitType.CUSTOMER; } </pre></td></tr></table></figure>其中，limitType包含传统类型限流和根据IP限流，其为枚举类型：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 </pre></td><td class="code"><pre>public enum LimitType { // 传统类型 CUSTOMER, // 根据 IP 限制 IP; } </pre></td></tr></table></figure>下面举个使用示例：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </pre></td><td class="code"><pre>import cc.mrbird.common.annotation.Limit; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import java.util.concurrent.atomic.AtomicInteger; @RestController public class TestController { private static final AtomicInteger ATOMIC_INTEGER = new AtomicInteger(); @Limit(key = "test", period = 600, count = 10, name = "resource", prefix = "limit") @GetMapping("/test") public int testLimiter() { return ATOMIC_INTEGER.incrementAndGet(); } } </pre></td></tr></table></figure>上面配置表示使用传统限流的方式，testLimiter方法在600秒内最多只能访问10次。当600秒内第11次访问该接口时，接口将抛出<code>LimitAccessException</code>异常。<h3 id="Shiro教程"><a href="#Shiro教程" class="headerlink" title="Shiro教程"></a>Shiro教程</h3><ol><li><a href="https://mrbird.cc/Apache%20Shiro%E7%AE%80%E4%BB%8B.html">Apache Shiro简介</a></li><li><a href="https://mrbird.cc/Spring-Boot-shiro%20Authentication.html">Spring Boot Shiro用户认证</a></li><li><a href="https://mrbird.cc/Spring-Boot-Shiro%20Remember-Me.html">Spring Boot Shiro 添加记住我功能</a></li><li><a href="https://mrbird.cc/Spring-Boot-Shiro%20Authorization.html">Spring Boot Shiro权限控制</a></li><li><a href="https://mrbird.cc/Spring-Boot-Shiro%20cache.html">Spring Boot Shiro中使用缓存</a></li><li><a href="https://mrbird.cc/Spring-Boot-Themeleaf%20Shiro%20tag.html">Spring Boot Thymeleaf中使用Shiro标签</a></li><li><a href="https://mrbird.cc/Spring-Boot-Shiro%20session.html">Spring Boot Shiro在线会话管理</a></li></ol><h3 id="Shiro如何整合JWT"><a href="#Shiro如何整合JWT" class="headerlink" title="Shiro如何整合JWT"></a>Shiro如何整合JWT</h3>Shiro如何整合JWT可以参考：<a href="https://gitlab.com/wuyouzhuguli/shiro_jwt" target="_blank" rel="noopener">https://gitlab.com/wuyouzhuguli/shiro_jwt</a>为了简化过程，例子没有使用数据库和Redis，在内存中模拟了两个用户：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </pre></td><td class="code"><pre>/** * 模拟两个用户 * * @return List<User> */ private static List<User> users() { List<User> users = new ArrayList<>(); // 模拟两个用户： // 1. 用户名 admin，密码 123456，角色 admin（管理员），权限 "user:add"，"user:view" // 1. 用户名 scott，密码 123456，角色 regist（注册用户），权限 "user:view" users.add(new User( "admin", "bfc62b3f67a4c3e57df84dad8cc48a3b", new HashSet<>(Collections.singletonList("admin")), new HashSet<>(Arrays.asList("user:add", "user:view")))); users.add(new User( "scott", "11bd73355c7bbbac151e4e4f943e59be", new HashSet<>(Collections.singletonList("regist")), new HashSet<>(Collections.singletonList("user:view")))); return users; } </pre></td></tr></table></figure>可以使用PostMan进行接口测试。<h2 id="前端项目介绍"><a href="#前端项目介绍" class="headerlink" title="前端项目介绍"></a>前端项目介绍</h2><h3 id="项目结构-1"><a href="#项目结构-1" class="headerlink" title="项目结构"></a>项目结构</h3>项目机构如下图所示：<img src="img/febsvue/2019-04-08_185510.png" alt="2019-04-08_185510.png"><h3 id="数据存储"><a href="#数据存储" class="headerlink" title="数据存储"></a>数据存储</h3>在用户登录成功后，项目会通过Vuex和localstorage存储一些数据供项目全局使用。正如前面所说，当用户登录成功后，后端会返回如下数据：<ol><li>token：token；</li><li>exipreTime：token过期时间；</li><li>roles：用户角色；</li><li>permissions：用户权限；</li><li>config：用户前端系统的个性化配置；</li><li>user：用户信息（不包括密码）。</li></ol>在src/views/login/Login.vue文件中你会看到如下代码：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </pre></td><td class="code"><pre>...mapMutations({ setToken: 'account/setToken', setExpireTime: 'account/setExpireTime', setPermissions: 'account/setPermissions', setRoles: 'account/setRoles', setUser: 'account/setUser', setTheme: 'setting/setTheme', setLayout: 'setting/setLayout', setMultipage: 'setting/setMultipage', fixSiderbar: 'setting/fixSiderbar', fixHeader: 'setting/fixHeader', setColor: 'setting/setColor' }), saveLoginData (data) { this.setToken(data.token) this.setExpireTime(data.exipreTime) this.setUser(data.user) this.setPermissions(data.permissions) this.setRoles(data.roles) this.setTheme(data.config.theme) this.setLayout(data.config.layout) this.setMultipage(data.config.multiPage === '1') this.fixSiderbar(data.config.fixSiderbar === '1') this.fixHeader(data.config.fixHeader === '1') this.setColor(data.config.color) } </pre></td></tr></table></figure>这将把登录接口返回的数据存储到Vuex和浏览器的localstorage中。存储Token的原因是，后续需要认证的请求，都会在请求头中携带这个Token；存储ExpireTime的原因是为了优化认证过期时的用户体验；存储用户信息的原因是为了供个人中心和系统主页使用；存储角色和权限是为了判断页面按钮渲染与否；存储用户个性化配置的原因是为了通过这些配置渲染不同的系统界面。<h3 id="路由导航守卫"><a href="#路由导航守卫" class="headerlink" title="路由导航守卫"></a>路由导航守卫</h3>路由导航守卫代码位置：frontend/src/router/index.js：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 </pre></td><td class="code"><pre>... const whiteList = ['/login'] let asyncRouter // 导航守卫，渲染动态路由 router.beforeEach((to, from, next) => { if (whiteList.indexOf(to.path) !== -1) { next() } let token = db.get('USER_TOKEN') let user = db.get('USER') let userRouter = get('USER_ROUTER') if (token.length && user) { if (!asyncRouter) { if (!userRouter) { request.get(`menu/${user.username}`).then((res) => { asyncRouter = res.data save('USER_ROUTER', asyncRouter) go(to, next) }) } else { asyncRouter = userRouter go(to, next) } } else { next() } } else { next('/login') } }) function go (to, next) { asyncRouter = filterAsyncRouter(asyncRouter) router.addRoutes(asyncRouter) next({...to, replace: true}) } ... </pre></td></tr></table></figure>主要逻辑分为下面几步：<ol><li>判断要跳转的路由地址是否在路由白名单内，是的话放行，不是的话进行第2步；</li><li>从内存中获取token和用户信息，如果存在则进行第3步，不存在跳转到登录页；</li><li>判断动态路由信息是否存在，存在则放行，不存在则进行第4步；</li><li>判断用户路由是否已经加载，是的话将用户路由赋值给动态路由，并执行路由添加操作，然后跳转；如果用户路由不存在，则执行第5步；</li><li>根据用户名从后台获取用户路由信息，并将其保存到内存中，再执行路由添加操作，然后跳转。</li></ol><h3 id="权限控制-1"><a href="#权限控制-1" class="headerlink" title="权限控制"></a>权限控制</h3>在前端页面中，我们已经实现了通过不同用户获取不同的路由，以此渲染出不同的菜单列表功能，此外页面上的操作按钮也必须进行权限控制。正如前面所述，在登录成功后，系统会把用户的角色和权限信息存储到了内存中，所以我们可以通过这些信息结合<a href="https://cn.vuejs.org/v2/guide/custom-directive.html" target="_blank" rel="noopener"> 自定义Vue指令 </a>的方式来实现按钮的权限控制。目前支持的和权限相关的Vue指令有：<table><thead><tr><th>指令</th><th>含义</th><th>示例</th></tr></thead><tbody><tr><td>v-hasPermission</td><td>当用户拥有列出的权限的时候，渲染该元素</td><td><code><template v-hasPermission="'user:add','user:update'">hello</template></code></td></tr><tr><td>v-hasAnyPermission</td><td>当用户拥有列出的任意一项权限的时候，渲染该元素</td><td><code><template v-hasAnyPermission="'user:add','user:update'">hello</template></code></td></tr><tr><td>v-hasRole</td><td>当用户拥有列出的角色的时候，渲染该元素</td><td><code><template v-hasRole="'admin','register'">hello</template></code></td></tr><tr><td>v-hasAnyRole</td><td>当用户拥有列出的任意一个角色的时候，渲染该元素</td><td><code><template v-hasAnyRole="'admin','register'">hello</template></code></td></tr><tr><td>hasNoPermission</td><td>当用户没有列出的权限的时候，渲染该元素</td><td><code><template v-hasNoPermission="'user:add','register'">无操作权限</template></code></td></tr></tbody></table>以<code>v-hasPermission="user:add"</code>为例，详细介绍下自定义权限Vue指令的实现过程：<ol><li>在src/utils/permissionDirect.js中定义如下代码：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </pre></td><td class="code"><pre> export const hasPermission = { install (Vue) { Vue.directive('hasPermission', { bind (el, binding, vnode) { let permissions = vnode.context.$store.state.account.permissions let value = binding.value.split(',') let flag = true for (let v of value) { if (!permissions.includes(v)) { flag = false } } if (!flag) { if (!el.parentNode) { el.style.display = 'none' } else { el.parentNode.removeChild(el) } } } }) } } </pre></td></tr></table></figure>上面代码中，我们从Vuex中获取了用户所拥有的权限，然后判断这些权限中是否包含<code>user:add</code>，如果不包含，则将对应的元素（el）移除或者隐藏。所以当用户没有<code>user:add</code>权限时，下面的按钮将不会被渲染在页面上：<figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><template v-hasPermission="'user:add'"><button>新增用户</button></template> </pre></td></tr></table></figure></li><li>要让自定义Vue指令生效，还需要在src/utils/install.js中将其添加到Plugins列表。</li></ol><h3 id="Axios封装"><a href="#Axios封装" class="headerlink" title="Axios封装"></a>Axios封装</h3>项目使用Axios插件来发送HTTP请求，并对它进行了封装（frontend/src/utils/request.js），这里主要讲述下request.js中主要逻辑。<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 </pre></td><td class="code"><pre>// 统一配置 let FEBS_REQUEST = axios.create({ baseURL: 'http://127.0.0.1:9527/', responseType: 'json', validateStatus (status) { // 200 外的状态码都认定为失败 return status === 200 } }) </pre></td></tr></table></figure>上面这段代码对请求进行了统一配置，baseURL定义了后端地址的基础路径，responseType定义了响应数据类型为JSON，只有状态码为200时才认定请求成功。<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </pre></td><td class="code"><pre>// 拦截请求 FEBS_REQUEST.interceptors.request.use((config) => { let expireTime = store.state.account.expireTime let now = moment().format('YYYYMMDDHHmmss') // 让token早10秒种过期，提升“请重新登录”弹窗体验 if (now - expireTime >= -10) { Modal.error({ title: '登录已过期', content: '很抱歉，登录已过期，请重新登录', okText: '重新登录', mask: false, onOk: () => { return new Promise((resolve, reject) => { // 为什么不直接跳转到登录页呢？那是因为Vue没有提供清空路由的方法，只能通过刷新页面的方式 // 来清除之前动态添加的路由信息。 db.clear() location.reload() }) } }) } // 有 token就带上 if (store.state.account.token) { config.headers.Authentication = store.state.account.token } return config }, (error) => { return Promise.reject(error) }) </pre></td></tr></table></figure>在Axios的前置拦截中，我们首先判断了token是否已经过期，如果过期了则清空在登录时保存的数据，并且刷新页面。这时候通过路由导航守卫，页面会被重定向到登录页面，引导用户重新登录。如果token没有过期，则在请求头上带上token信息。<code>headers.Authentication</code>和后端代码中的TOKEN名称相对应：<img src="img/febsvue/QQ截图20190409101831.png" alt="QQ截图20190409101831.png"><figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 </pre></td><td class="code"><pre>// 拦截响应 FEBS_REQUEST.interceptors.response.use((config) => { return config }, (error) => { if (error.response) { let errorMessage = error.response.data === null ? '系统内部异常，请联系网站管理员' : error.response.data.message switch (error.response.status) { case 404: notification.error({ message: '系统提示', description: '很抱歉，资源未找到', duration: 4 }) break case 403: case 401: notification.warn({ message: '系统提示', description: '很抱歉，您无法访问该资源，可能是因为没有相应权限或者登录已失效', duration: 4 }) break default: notification.error({ message: '系统提示', description: errorMessage, duration: 4 }) break } } return Promise.reject(error) }) </pre></td></tr></table></figure>上面代码中我们实现了异常响应的统一处理，根据不同的状态码给予不同的提示信息。此外，项目还对各种HTTP请求进行了封装，下面一一列举出它们的用法：GET请求方式一：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>this.$get('user', { ...params }).then((r) => { console.log(r) }) </pre></td></tr></table></figure>因为我们在前面已经定义了后端地址的基础路径，所以上面这个请求的实际地址为：<a href="http://127.0.0.1:9527/user。" target="_blank" rel="noopener">http://127.0.0.1:9527/user。</a>在前面我们已经对异常响应进行统一处理，当然你也可以通过catch来覆盖：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 </pre></td><td class="code"><pre>this.$get('user', { ...params }).then((r) => { console.log(r) }).catch((error) => { alert('出错啦') }) </pre></td></tr></table></figure>方式二（路径传参）：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>this.$get(`menu/${user.username}`).then((r) => { console.log(r) }) </pre></td></tr></table></figure>方式三：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>this.$get(`user?username=${user.username}`).then((r) => { console.log(r) }) </pre></td></tr></table></figure>POST请求<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>this.$post('user', { ...params }).then((r) => { console.log(r) }) </pre></td></tr></table></figure>PUT请求<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>this.$put('user', { ...params }).then((r) => { console.log(r) }) </pre></td></tr></table></figure>DELETE请求<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>this.$delete('user/${user.userId}').then((r) => { console.log(r) }) </pre></td></tr></table></figure>下载文件<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>this.$download('file', { ...params }, 'xxx.xx') </pre></td></tr></table></figure>xxx.xx为下载的文件名，比如下载xlsx文件的话为 Excel文件.xlsx，后端接口返回数据流即可。上传文件<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>let formData = new FormData($("#form")[0]); this.$upload('upload', formData).then((r) => { console.log(r) }) </pre></td></tr></table></figure>后端以<code>MultipartFile</code>接收文件即可。<h3 id="路径配置"><a href="#路径配置" class="headerlink" title="路径配置"></a>路径配置</h3>在build/webpack.base.conf.js中，我们定义了一些路径变量：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 </pre></td><td class="code"><pre>module.exports = { ... resolve: { ... alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '~': resolve('src/components'), 'utils': resolve('src/utils') } }, ... } </pre></td></tr></table></figure>比如<code>~</code>代表<code>src/components</code>路径，在项目中，如果要引入<code>src/components/test.vue</code>只需要这样做即可：<figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>import ~/test.vue </pre></td></tr></table></figure>当然，你也可以使用相对路径和绝对路径，而不使用这些变量。<h3 id="第三方组件介绍"><a href="#第三方组件介绍" class="headerlink" title="第三方组件介绍"></a>第三方组件介绍</h3><a href="https://vue.ant.design/docs/vue/introduce-cn/" target="_blank" rel="noopener">Ant Design Vue</a>已经提供了非常丰富的组件，除此之外，项目里使用的图表插件为：<a href="https://apexcharts.com/vue-chart-demos/line-charts/basic/" target="_blank" rel="noopener">apexcharts.js</a>，其官方文档提供了很多示例，这里就不赘述了。<h3 id="开发建议"><a href="#开发建议" class="headerlink" title="开发建议"></a>开发建议</h3>相信正在阅读文档的你十有八九是一名后端开发者，可能对前端特别是对Vue不太熟悉，这里给出几点改造frontend的建议：<ol><li>要有一定的ES6语法基础，可以参考<a href="https://mrbird.cc/ES2015-Learn-Note.html"> ES6学习笔记 </a>，如果要系统学习ES6，推荐阮一峰的：<a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener"> ECMAScript 6 入门 </a>。</li><li>Vue的官方文档还是挺详细的，建议仔细阅读，我在学习Vue的时候也做了一些笔记，可以参考：<a href="https://mrbird.cc/Vue-Learn-Note.html">https://mrbird.cc/Vue-Learn-Note.html</a>。Vue的学习路线：Vue基础语法 -> Vuex -> Vue Router。</li><li>前端组件用的是<a href="https://vue.ant.design/docs/vue/introduce-cn/" target="_blank" rel="noopener">Ant Design Vue</a>，所以在使用它提供的组件的时候，多阅读它的使用文档。</li></ol><h2 id="开发示例"><a href="#开发示例" class="headerlink" title="开发示例"></a>开发示例</h2><h3 id="新建一个页面"><a href="#新建一个页面" class="headerlink" title="新建一个页面"></a>新建一个页面</h3>在frontend工程的src/views下新建一个test目录，在该目录下新建一个test.vue文件： <img src="img/febsvue/QQ截图20190409133947.png" alt="QQ截图20190409133947.png">内容如下所示：<figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </pre></td><td class="code"><pre><template> <div class="test">{{hello}}</div> </template> <script> export default { name: 'test', data () { return { hello: 'hello world' } } } </script> <style lang="less" scoped> .test { color: #42b984; font-size: 1.1rem; font-weight: 600; } </style> </pre></td></tr></table></figure>启动项目，使用管理员账号登录，然后在菜单管理中新建一个菜单：<img src="img/febsvue/20190409134916.png" alt="QQ截图20190409134916.png"><ol><li>菜单URL：这里填写/test的话，在访问这个页面的时候，浏览器地址栏为<a href="http://localhost:8081/#/test" target="_blank" rel="noopener">http://localhost:8081/#/test</a>，只要确保这个值不重复即可；</li><li>组件地址：对应要渲染的Vue组件地址，在路由导航守卫中有如下一段代码：<img src="img/febsvue/20190409135425.png" alt="QQ截图20190409135425.png">所以这里填test/test，对应<code>@/views/test/test.vue</code>组件。</li><li>相关权限：访问这个页面需要<code>test:view</code>权限。</li></ol>点击确定后，这个菜单就被建好了：<img src="img/febsvue/20190409135740.png" alt="QQ截图20190409135740.png">接着修改管理员角色，将刚刚新建的菜单授权给管理员：<img src="img/febsvue/QQ截图20190409141220.png" alt="QQ截图20190409141220.png">点击确定修改后，重新登录系统：<img src="img/febsvue/asdfasdfasfdasdf.png" alt="QQ截图20190409141410.png"><h3 id="如何新建一个多级菜单"><a href="#如何新建一个多级菜单" class="headerlink" title="如何新建一个多级菜单"></a>如何新建一个多级菜单</h3>在新增多级菜单前，先了解下系统中的一个约定：在一个多级菜单中，顶级菜单对应的组件为PageView，末级菜单对应的组件为需要渲染的页面组件，剩下的（非顶级，非末级的中间菜单对应的组件为EmptyPageView）。我们来建一个四级菜单，首先新增一个顶级菜单：<img src="img/febsvue/QQ截图20190409142251.png" alt="QQ截图20190409142251.png">因为是顶级菜单，所以对应组件填PageView。接着新增第二级菜单：<img src="img/febsvue/QQ截图20190409142642.png" alt="QQ截图20190409142642.png">因为它数据中间菜单（非顶级非末级）所以对应组件填EmptyPageView，上级菜单勾选刚刚新建的一级菜单。继续新增三级菜单：<img src="img/febsvue/QQ截图20190409143223.png" alt="QQ截图20190409143223.png">因为它也是一个中间菜单，所以对应组件填EmptyPageView，上级菜单勾选刚刚新建的二级菜单。最后将我们前面建好的测试页面作为末级，点击测试页面后面的小齿轮按钮，进行修改：<img src="img/febsvue/QQ截图20190409143905.png" alt="QQ截图20190409143905.png">点击确定后一个四级菜单就建好了：<img src="img/febsvue/QQ截图20190409143943.png" alt="QQ截图20190409143943.png">最后一步授权！修改管理员角色：<img src="img/febsvue/QQ截图20190409144206.png" alt="QQ截图20190409144206.png">修改后，重新登录系统：<img src="img/febsvue/QQ截图20190409144908.png" alt="QQ截图20190409144908.png">因为我没有设置排序，所以默认排在最前面了。<h3 id="如何隐藏路由"><a href="#如何隐藏路由" class="headerlink" title="如何隐藏路由"></a>如何隐藏路由</h3>有的时候，一些路由并不需要渲染成菜单，比如个人中心这类页面。而这些页面一般都是所有用户共有的，所以在后台系统里构建路由的时候写死即可。要隐藏路由只需要将路由meta的isShow属性设置为false即可：参考后台代码cc.mrbird.febs.common.utils.TreeUtil：<img src="img/febsvue/20190409150427.png" alt="QQ截图20190409150427.png"><h3 id="如何分配权限"><a href="#如何分配权限" class="headerlink" title="如何分配权限"></a>如何分配权限</h3>权限是和角色绑定的，所以要分配权限实际就是对角色的增删改。假如现在要配置一个角色 ——— 系统监控管理员，负责系统监控模块的查看：<img src="img/febsvue/QQ截图20190409152413.png" alt="QQ截图20190409152413.png">然后新增一个用户 ——— yuuki，角色为系统监控管理员：<img src="img/febsvue/QQ截图20190409152550.png" alt="QQ截图20190409152550.png">新建好后，使用yuuki的账号登录：<img src="img/febsvue/QQ截图20190409153002.png" alt="QQ截图20190409153002.png">可以看到，yuuki只有系统监控模块的权限。<h3 id="前端如何添加依赖"><a href="#前端如何添加依赖" class="headerlink" title="前端如何添加依赖"></a>前端如何添加依赖</h3>在<a href="https://www.npmjs.com/" target="_blank" rel="noopener">https://www.npmjs.com/</a>搜索需要安装的依赖，比如jQuery：<img src="img/febsvue/QQ截图20190409153227.png" alt="QQ截图20190409153227.png">比如我需要安装jQuery 3.3.1版本，只需要在终端输入如下命令即可：<img src="img/febsvue/QQ截图20190409153710.png" alt="QQ截图20190409153710.png">安装好后，在package.json的依赖列表里会多出一个jquery 3.3.1：<img src="img/febsvue/QQ截图20190409153800.png" alt="QQ截图20190409153800.png"><h3 id="如何处理排序"><a href="#如何处理排序" class="headerlink" title="如何处理排序"></a>如何处理排序</h3>对于前端来说，需要上送两个参数：<ol><li>sortField：需要排序的字段；</li><li>sortOrder：排序规则，ascend或者descend。</li></ol>对于后端来说，排序主要分为四种情况：<ol><li>结果需要分页的，并且是通过xml定义的SQL查询出来的结果：</li></ol><figure class="highlight java"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>SortUtil.handlePageSort(request, page, "userId", FebsConstant.ORDER_ASC, false); </pre></td></tr></table></figure><code>userId</code>和<code>FebsConstant.ORDER_ASC</code>指定了默认的排序规则，即默认按照<code>userId</code>字段升序排序。最后一个参数表示是否需要开启驼峰转下划线，这种情况下不需要，false即可。具体可以参考cc.mrbird.febs.system.service.impl.UserServiceImpl#findUserDetail。如果不需要指定默认排序规则，使用handlePageSort的重载方法即可：<figure class="highlight java"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>SortUtil.handlePageSort(request, page, false); </pre></td></tr></table></figure><ol start="2"><li>结果需要分页的，并且是通过Mybatis Plus插件查询出来的结果：</li></ol><figure class="highlight java"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>SortUtil.handlePageSort(request, page, true); </pre></td></tr></table></figure>这种情况下，最后一个参数值必须为true。具体可以参考cc.mrbird.febs.system.service.impl.DictServiceImpl#findDicts。<div class="note info">1和2主要区别就是是否需要开启驼峰转下划线。</div><ol start="3"><li>结果不需要分页，并且是通过xml定义的SQL查询出来的结果：</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>SortUtil.handleWrapperSort(request, queryWrapper, "orderNum", FebsConstant.ORDER_ASC, false); </pre></td></tr></table></figure>具体可以参考：cc.mrbird.febs.system.service.impl.DeptServiceImpl#findDepts<ol start="4"><li>结果不需要分页，并且是通过Mybatis Plus插件查询出来的结果：</li></ol><figure class="highlight java"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>SortUtil.handleWrapperSort(request, queryWrapper, "orderNum", FebsConstant.ORDER_ASC, true); </pre></td></tr></table></figure>总之，对于处理排序的方法，第一个参数一定是cc.mrbird.febs.common.domain.QueryRequest。第二个参数如果需要分页，则传递com.baomidou.mybatisplus.extension.plugins.pagination.Page，不需要分页则传递com.baomidou.mybatisplus.core.conditions.query.QueryWrapper。最后一个参数如果查询结果是Mybatis Plus查询出来的结果，则需设置为true，否则为false。<h3 id="后端接口测试"><a href="#后端接口测试" class="headerlink" title="后端接口测试"></a>后端接口测试</h3>由于后端接口为RESTful接口，所以不能使用浏览器来测试，可以使用PostMan或者Chrome插件RestLet来测试后端接口。文档以PostMan为例。因为后台接口大部分都需要用户认证后才能访问，所以在测试之前需要通过登录接口获取一个可用的token。<img src="img/febsvue/QQ截图20190409161742.png" alt="QQ截图20190409161742.png">成功获取到了token。测试获取mrbird的前端路由信息：<img src="img/febsvue/QQ截图20190409161947.png" alt="QQ截图20190409161947.png">在Headers设置一个键值对，key为Authentication，value为刚刚获取到的token，发送请求便可以获取到mrbird的路由信息。其他接口测试以此类推。如果token填错或者不填：<img src="img/febsvue/QQ截图20190409162214.png" alt="QQ截图20190409162214.png">后端将返回401。<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><h3 id="导入项目编译出错，代码是否不全？"><a href="#导入项目编译出错，代码是否不全？" class="headerlink" title="导入项目编译出错，代码是否不全？"></a>导入项目编译出错，代码是否不全？</h3>编辑器安装lombok插件即可。<h3 id="导入SQL为何出错？"><a href="#导入SQL为何出错？" class="headerlink" title="导入SQL为何出错？"></a>导入SQL为何出错？</h3>MySQL数据库请使用5.7.x版本，不同版本SQL语法有差异。如果你SQL技术过硬可以通过错误信息去修改出错的SQL，更推荐的做法是安装推荐版本的MySQL数据库。<h3 id="ip2region是啥玩意，打开怎么乱码？"><a href="#ip2region是啥玩意，打开怎么乱码？" class="headerlink" title="ip2region是啥玩意，打开怎么乱码？"></a>ip2region是啥玩意，打开怎么乱码？</h3>通过ip获取地址的开源软件数据库文件，不要直接打开。ip2region地址：<a href="https://github.com/lionsoul2014/ip2region" target="_blank" rel="noopener">https://github.com/lionsoul2014/ip2region</a>。<h2 id="项目缺陷"><a href="#项目缺陷" class="headerlink" title="项目缺陷"></a>项目缺陷</h2><ol><li>前端页面不支持移动端（不能自适应）；</li><li>前端打包后vendor.js较大，通过nginx压缩后在591kb左右，在我的渣渣服务器（1核1G1M）下，访问时间大约为7 - 8秒左右：</li></ol><img src="img/febsvue/QQ截图20190409162930.png" alt="QQ截图20190409162930.png">如果你的服务器带宽够大，或者是部署在公司局域网内的话，这个问题可以忽略。如果要在根源上解决这个问题个人觉得可以从这几个地方入手：<ul><li>Ant Design采用SVG格式的图标后，导致项目打包体积过大，可以参考官方issue的讨论：<a href="https://github.com/vueComponent/ant-design-vue/issues/325" target="_blank" rel="noopener">https://github.com/vueComponent/ant-design-vue/issues/325</a>和<a href="https://github.com/ant-design/ant-design/issues/12011" target="_blank" rel="noopener">https://github.com/ant-design/ant-design/issues/12011</a>；</li><li>可以将依赖通过CDN来加载，参考连接：<a href="https://blog.csdn.net/qq_35844177/article/details/78599064" target="_blank" rel="noopener">https://blog.csdn.net/qq_35844177/article/details/78599064</a>；</li><li>webpack打包配置可能存在可优化的地方。</li></ul>由于我才疏学浅，前端技能薄弱，所以没能够很好地解决这个问题。欢迎来自五湖四海的能人志士pull request来改善这个问题，感激不尽。<img src="img/febsvue/QQ图片20190409164403.jpg" alt="QQ图片20190409164403.jpg"><script>$(".post-body a").not(".thispage").addClass("ignore-href").attr("target","_blank")</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center;color:#878787" id="reward-div"><div>请作者喝瓶肥宅水🥤</div><button id="rewardButton" style="margin-top:10px" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'>￥</button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/img/wechat_pay.png" alt="MrBird WeChat Pay"></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/img/ali_pay.png" alt="MrBird Alipay"></div></div></div><style>#QR img{width:auto;margin:.8em 1em 0 1em}</style></div><div><ul class="post-copyright"><li class="post-copyright-author">本文作者： MrBird</li><li class="post-copyright-link">本文链接： <a href="http://mrbird.cc/FEBS-Vue-Document.html" title="FEBS-Vue文档">http://mrbird.cc/FEBS-Vue-Document.html</a></li><li class="post-copyright-license">版权声明： 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags" style="margin-bottom:1.3rem"><a href="/tags/FEBS/" rel="tag"># FEBS</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/Spring-Boot-WebFlux-CRUD.html" rel="next" title="Spring Boot WebFlux增删改查样例"> Spring Boot WebFlux增删改查样例</a></div><div class="post-nav-prev post-nav-item"><a href="/Guava-Collection.html" rel="prev" title="Guava 集合操作">Guava 集合操作 </a></div></div></footer></article><hr><div id="container"></div><div class="post-spread"><div id="comment-div"></div><style>.valine .vlist{margin-bottom:3rem}.valine .vwrap .vcontrol .col.col-60{text-align:left}.valine .vlist .vcard .vhead,.valine .vlist .vcard section .vfooter{text-align:left}.valine .vlist .vcard section{padding-bottom:.5rem!important}.vname{color:#6db33f!important}div#comment-div{margin-bottom:-8rem}.valine .vlist .vcard .vcontent .code,.valine .vlist .vcard .vcontent code,.valine .vlist .vcard .vcontent pre{background:#fbfbfb}.valine .vlist .vcard .vcontent a{color:#6db33f}.valine .vlist .vcard .vimg{border-radius:3px}.valine .vinfo{text-align:left}.valine .vbtn{border-radius:2px;padding:.3rem 1.25rem}.valine .vbtn:active,.valine .vbtn:hover{color:#6db33f;border-color:#6db33f;background-color:#fff}.valine .vwrap .vheader .vinput:focus{border-bottom-color:#6db33f}.valine .vlist .vcard .vcontent.expand:before{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.2)));background:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2))}.valine .vlist .vcard .vcontent.expand:after{content:"点击展开";font-size:.4rem;text-align:right;left:-1rem;background:hsla(0,0%,100%,.2)}.valine .vlist .vcard section .vfooter .vat{color:#b3b3b3}.valine .vlist .vcard section .vfooter .vat:hover{color:#6db33f}.vcontent img{margin:0}.valine .info{display:none}</style><script type="text/javascript" src="/js/av.min.js"></script><script type="text/javascript" src="/js/Valine.min.js"></script><script type="text/javascript" src="/js/activate-power-mode.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE),new Valine({el:"#comment-div",notify:!1,verify:!0,appId:"SMcDFP1bN1jgb9Lo8JmtICHm-gzGzoHsz",appKey:"dH4nrUrt3V5XiJiI6Qyejnbi",placeholder:"",path:window.location.pathname,avatar:"monsterid",guest_info:["nick","mail","link"]});var chicken='<a href="#"><img src="https://image.uisdc.com/wp-content/uploads/2018/06/uisdc-chat-chicken.gif" class="checken"></a>';$("#comment-div").prepend(chicken)</script></div></div><script>var $bqinline=$("img[alt='bq-inline']");$bqinline.css({width:"2.3rem",height:"2.3rem",display:"inline","vertical-align":"text-bottom"})</script></div><div class="comments" id="comments"></div></div><aside id="sidebar" class="sidebar" onselectstart="return!1"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Contents</li><li class="sidebar-nav-overview" data-target="site-overview">Site Preview</li></ul><section class="site-overview sidebar-panel"><div class="sidebar-sticky sticky"><div itemscope itemtype="https://mrbird.cc"><div class="author__header"><div class="author__avatar"><img src="/images/blogImage.jpg" class="author__avatar" alt="MrBird" itemprop="image"></div><div class="author__content"><div class="author__name" itemprop="name">MrBird</div>A simple blog, code repository, just keep blogging</div><div class="author__count"><a href="/archives" class="ignore-href">14 Archives </a><a href="/tags" class="ignore-href">2 Labels</a></div></div><div class="author__urls-wrapper"><ul class="author__urls social-icons"><li><a href="/" itemprop="url" class="ignore-href">🏠 Home</a></li><li><a href="/archives" itemprop="url" class="ignore-href">📦 Archives</a></li><li><a href="/tags" itemprop="url" class="ignore-href">🔖 Labels</a></li><li><a href="/friends" itemprop="url" class="ignore-href">👬 Friends</a></li><li><a href="javascript:;" class="popup-trigger animsition-link">🔍 Search</a></li></ul></div></div></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#项目导入">1. 项目导入</a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JDK">1.1. JDK</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装Node-js">1.2. 安装Node.js</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装yarn">1.3. 安装yarn</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装Redis">1.4. 安装Redis</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装MySQL">1.5. 安装MySQL</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#导入SQL">1.6. 导入SQL</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#导入后端项目">1.7. 导入后端项目</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#导入前端项目">1.8. 导入前端项目</a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#项目部署">2. 项目部署</a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Vagrant创建CentOS">2.1. Vagrant创建CentOS</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Java环境配置">2.2. Java环境配置</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装Docker">2.3. 安装Docker</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Docker安装MySQL">2.4. Docker安装MySQL</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Docker安装Redis">2.5. Docker安装Redis</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Docker安装Nginx">2.6. Docker安装Nginx</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#后端部署">2.7. 后端部署</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端部署">2.8. 前端部署</a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#后端项目介绍">3. 后端项目介绍</a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#项目结构">3.1. 项目结构</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#项目配置">3.2. 项目配置</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#RESTful风格">3.3. RESTful风格</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据层介绍">3.4. 数据层介绍</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#登录逻辑">3.5. 登录逻辑</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redis缓存使用">3.6. Redis缓存使用</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动态路由构建">3.7. 动态路由构建</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#权限控制">3.8. 权限控制</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多数据源">3.9. 多数据源</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#代码生成">3.10. 代码生成</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Excel导入导出">3.11. Excel导入导出</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#统一参数校验">3.12. 统一参数校验</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#SQL打印">3.13. SQL打印</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#AOP记录操作日志">3.14. AOP记录操作日志</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#接口限流">3.15. 接口限流</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Shiro教程">3.16. Shiro教程</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Shiro如何整合JWT">3.17. Shiro如何整合JWT</a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#前端项目介绍">4. 前端项目介绍</a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#项目结构-1">4.1. 项目结构</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据存储">4.2. 数据存储</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#路由导航守卫">4.3. 路由导航守卫</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#权限控制-1">4.4. 权限控制</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Axios封装">4.5. Axios封装</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#路径配置">4.6. 路径配置</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第三方组件介绍">4.7. 第三方组件介绍</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#开发建议">4.8. 开发建议</a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#开发示例">5. 开发示例</a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#新建一个页面">5.1. 新建一个页面</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何新建一个多级菜单">5.2. 如何新建一个多级菜单</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何隐藏路由">5.3. 如何隐藏路由</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何分配权限">5.4. 如何分配权限</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端如何添加依赖">5.5. 前端如何添加依赖</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何处理排序">5.6. 如何处理排序</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#后端接口测试">5.7. 后端接口测试</a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常见问题">6. 常见问题</a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#导入项目编译出错，代码是否不全？">6.1. 导入项目编译出错，代码是否不全？</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#导入SQL为何出错？">6.2. 导入SQL为何出错？</a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ip2region是啥玩意，打开怎么乱码？">6.3. ip2region是啥玩意，打开怎么乱码？</a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#项目缺陷">7. 项目缺陷</a></li></ol></div></div></section></div><div id="asider-footer"><div id="links"><li><a href="https://love.mrbird.cc" target="_blank" itemprop="url" class="ignore-href"></a></li><li><a href="https://cloud.mrbird.cn" target="_blank" itemprop="url" class="ignore-href"></a></li><li><a href="https://gitee.com/mrbirdd" target="_blank" itemprop="sameAs" class="ignore-href"></a></li><li><a href="https://github.com/wuyouzhuguli" target="_blank" itemprop="sameAs" class="ignore-href"></a></li></div><div id="author"></div><script type="text/javascript">var $smsheoschzd100dn="@ 2016 - "+(new Date).getFullYear()+" MrBird";document.getElementById("author").innerHTML=$smsheoschzd100dn</script><div><script type="text/javascript" src="/js/busuanzi.js"></script>  UV    PV </div></div><script>function c__(){var o=sidebar_nav_toc.attr("class");o.indexOf("active")!=-1?footer.hide(300):footer.show(300)}var sidebar_nav_toc=$(".sidebar-nav-toc"),footer=$("#asider-footer");c__(),$(".sidebar-nav").on("click",function(){c__()})</script></aside></div></main><div class="back-to-top">0</div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":search_path.endsWith("json")&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+=''+t.substring(e.position,r)+"",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var C=[];0!=g.length;){var $=g[g.length-1],m=$.position,x=$.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),C.push(r(p,w,y,g))}C.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&(C=C.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",C.forEach(function(t){b+="<a href='"+f+'\'>'+s(p,t)+"...</a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"></div>';else if(0===o.length)s.innerHTML='<div id="no-result"></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script></body><script>$(function(){$("a").not(".nav-link,.cloud-tie-join-count,.ignore-href,.jstree-anchor").addClass("animsition-link")});var burst1=new mojs.Burst({left:0,top:0,radius:{5:40},children:{shape:"circle",fill:["red","cyan","orange"],fillOpacity:.8,radiusX:3.5,radiusY:3.5}});document.addEventListener("click",function(a){null==a.target.href&&"footer"!=a.target.className&&"copyright"!=a.target.className&&"author__urls social-icons"!=a.target.className&&"author__avatar"!=a.target.className&&"sidebar sidebar-active"!=a.target.className&&burst1.tune({x:a.pageX,y:a.pageY}).generate().replay()})</script><script type="text/javascript" src="/js/message.js"></script></html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FEBS-Vue-Document.html

FEBS-Vue-Document.html

Files

FEBS-Vue-Document.html

Latest commit

History

FEBS-Vue-Document.html

File metadata and controls