-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
109 lines (52 loc) · 25.6 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>express全局处理async error</title>
<link href="/posts/express-async-error/"/>
<url>/posts/express-async-error/</url>
<content type="html"><![CDATA[<p><img src="https://user-images.githubusercontent.com/3664948/63739876-7ba27b00-c8c1-11e9-8c0a-a55aff282f56.jpg" alt="maxresdefault"></p><p>express 结合 async/await 可以获得很好的开发体验。一般情况下 async/await 在错误处理方面，在最一开始使用Promise时，都习惯用Promise.catch()处理错误，之后async/await 流行后，大家习惯用 <code>try/catch</code> 来处理。</p><pre><code>router.get('/users', async (req, res, next) => { try { const users = await User.findAll(); res.send(users); } catch (err) { logger.error(err.message, err); res.send([]); }});</code></pre><p>这样做本身没什么问题，但是代码中会存在大量重复的<code>try/catch</code>，能不能将异常全局捕获统一处理呢？</p><p>假设在没有加<code>try/catch</code>的情况下</p><pre><code>router.get('/users', async (req, res, next) => { const users = await User.findAll(); res.send(users);});</code></pre><p>如果User.findAll()报错了， <strong>express全局的错误处理并不能直接捕获 Promise 错误</strong>。会报一个<code>UnhandledPromiseRejectionWarning</code>错误。</p><p>如何解决这个问题，我们先来看一下express错误处理的机制。</p><p>express中定义的错误处理中间件函数的定义方式与其他中间件函数基本相同，差别在于错误处理函数有四个自变量而不是三个：(err, req, res, next)：</p><pre><code>app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!');});</code></pre><p>所以exprees中正常处理与错误处理路径是分开的，多了一个<code>err</code>参数。</p><pre><code>app.use((err, req, res, next)=>{}) 对应走 Layer.handle_errorapp.use((req, res, next)=>{}) 对应走 Layer.handle_request</code></pre><p>要想express中能够全局捕获<code>Promise</code>对象错误，需要再封装一层用来处理Promise对象。</p><pre><code>const asyncHandler = fn => (req, res, next) => Promise.resolve() .then(() => fn(req, res, next)) .catch(next);router.get('/users', asyncHandler(async (req, res) => { const users = await User.findAll(); res.send(users);}));</code></pre><p><code>asyncHandler</code>会将Promise中错误通过catch()捕获并交给 next，这样就会去到 express 全局错误中间件中。</p><p>但如果在每个路由请求中都增加这个捕获异常的asyncHandler函数跟在每个中都加<code>try/catch</code>本质上没多大区别。而且代码看上去也复杂。</p><p>还有一种更简便的方法，使用<a href="https://github.com/davidbanham/express-async-errors" target="_blank" rel="noopener">express-async-errors</a>。原理是：</p><pre><code>This is a very minimalistic and unintrusive hack. Instead of patching all methods on an express Router, it wraps the Layer#handle property in one place, leaving all the rest of the express guts intact.</code></pre><p>翻译：这是一种非常简约而且没有入侵性的hack方式。代替了在每个express路由方法中打补丁的方式，它通过复写express中Layer#handle方法，把每个Routing Function的错误统一用 next(err) 传递。</p><p>用法也很简单，在express后引入require(‘express-async-errors’)，就可以在express错误处理中捕获错误了。</p><pre><code>// error handleapp.use((err, req, res, next) => { logger.error(err.message, err); if (req.xhr) { return res.json({ state: false, msg: err.message }); } next(err);});</code></pre>]]></content>
<categories>
<category> node </category>
</categories>
<tags>
<tag> node </tag>
</tags>
</entry>
<entry>
<title>node实现后台权限管理系统</title>
<link href="/posts/node-express-admin/"/>
<url>/posts/node-express-admin/</url>
<content type="html"><![CDATA[<p>本文面向的是node初学者，目标是搭建一个基础的后台权限系统。使用的node框架是上手最简单的express，模板是ejs，这些在node入门的书籍中都有介绍说明，所以应该是难度较低的。</p><p>对于node初学者来说，可以先尝试搭建一个blog，单用户的或者多用户的都可以。<a href="https://github.com/cnodejs/nodeclub" target="_blank" rel="noopener">cnodejs</a>论坛是我学的第一个源码，还是很经典的。但是由于开发比较早，基于nodev4版本，很多后面新加的特性都未使用，比如class，async/await语法等。随着node版本的大幅升级，目前至少是基于nodev8，稳定的是nodev10版本开发。所以本系列教程node版本至少是8版本，推荐装LTS 10版本。</p><p>ide强烈推荐速度最快，使用最流畅的Visual Studio Code。它也是基于node的electron实现的，一级棒。</p><p>数据库用过MS SQLServer、MySQL、mongodb，其中mongodb好多node教程推荐使用才开始流行，但它并非关系型数据库，所以综合考虑还是选用MySQL。数据库客户端推荐Navicat Premium。</p><p>以上各环境的安装准备工作大家可以自行教程，不在展开说明了。</p><p>说下此项目的目标是搭建一个后台权限管理系统。对于实际项目的业务开发，后台的基础权限框架必不可少。本教程将会带你如何设计用户、角色、菜单、及权限控制，并通过代码示例实现。</p><p>如何定义一个好的框架，没有一个标准。主要看每个人的水平及项目的适用性。以前从事.net开发，学设计模式、封装、Ioc注入等，好固然是好，但也提高了入门的门槛，想要让一个初学者快速上手进行业务开发却很难。因为封装后的代码可读性变差，如果没有一定水平框架也很难维护。还有就是如果一个项目比较小，那么在设计框架时分层分个5、6层就有点过头了，一般3层MVC就够用了。当然如果你在大型互联网公司，接触到的用户数量是几万甚至几十万，业务也很多，那框架就势必要考虑到很多方面的问题，那架构设计就不是那么简简单单的了，可能会涉及到分布式、微服务等。</p><p>我们可以先从基础的简单的框架入手，等经验丰富了后再不断的重构升级以应对日益增长的业务需求。</p><p>下面我们来开始设计并搭建框架。</p><p>最基础的权限是用户的登录，通过用户名和密码跟数据库匹配来判断是否登录成功。<br><img src="https://user-images.githubusercontent.com/3664948/63405937-f7f91200-c41a-11e9-8179-52d2c8dbdbc7.png" alt="用户登陆"></p><p>用户登录并存入session后，下次只需判断session中用户是否存在，可以写在express中间件中。</p><pre><code>/** 权限判断中间件*/class authMiddleware { /** 需要用户登录*/ async loginRequired(req, res, next) { if (!req.session || !req.session.user || !req.session.user.id) { return res.redirect('/login'); } await next(); }}module.exports = new authMiddleware();</code></pre><p>然后在每次请求的路由中，先判断下用户是否已登录，然后再执行相应controller。</p><pre><code>const router = require('express').Router(), auth = require('./middleware/auth'), login = require('./controller/login'), main = require('./controller/main');router.get('/login', login.showLogin);router.post('/login', login.login);router.get('/main', auth.loginRequired, main.showMain);</code></pre><p>其中登录页面及登录post提交是不需要检查session中有无用户的，因为用户这时候还没登录成功。但是像主页/main设定的是需要用户登录才能查看的。</p><p>登录后的后台管理系统布局一般都是左侧是菜单树，右侧为内容。<br><img src="https://user-images.githubusercontent.com/3664948/63408315-4c06f500-c421-11e9-8547-71fc28b8435b.png" alt="image"></p><p>很显然左侧的菜单需要权限控制，用于区分哪些菜单(页面)用户可以访问，哪些菜单(页面)用户不可以访问。一般不能访问的菜单(页面)不显示给用户，这样不同的用户登录后显示的左侧菜单是不相同的。<br><img src="https://user-images.githubusercontent.com/3664948/63409806-7f974e80-c424-11e9-9df8-52df07353ac5.png" alt="image"></p><p>可以从图上看到，在原来的登录的基础上增加了菜单表和用户菜单表，一个用户可以对应有多个菜单。那么他在登录后就获得了相应的菜单集合，在页面左侧加载即可。</p><p>对于那些在界面上没显示的菜单在后台路由中也是要检查下权限的，要不然像用户管理/userList这条路由虽然没有配给某个测试账号，但他可以直接在地址栏输入/userList进行访问。所以在Middleware中需要增加判断用户是否有此page_url的访问权限。</p><pre><code>/** 需要用户菜单权限*/ async userPermission(req, res, next) { //先判断用户session if (!req.session || !req.session.user || !req.session.user.id) { return res.redirect('/login'); } let hasPower = false; //userMenu指当前用户拥有的菜单集合，请自行db查询 userMenu.forEach(el => { if (el.page_url == req.route.path) { hasPower = true; } }); if (!hasPower) { if (req.xhr) { return res.json({ state: false, msg: "抱歉，您无此权限！请联系管理员" }); } return res.send('抱歉，您无此权限！请联系管理员'); } next(); }</code></pre><p>路由中增加中间件的执行</p><pre><code>router.get('/userList', auth.userPermission, main.showUser);</code></pre><p>这样当浏览器请求/userList路由时，先执行中间件userPermission方法，判断用户是否拥有此url权限，如果hasPower为false，即没有权限，直接返回输出。如果有权限，再执行相应controller中方法。</p><p>至此，基本的用户登录，及用户菜单权限已设计完成。但如果需要进一步权限控制到页面中的按钮、对用户进行分组设置权限等，还得再进行补充完善。</p><h4 id="按钮（控件）"><a href="#按钮（控件）" class="headerlink" title="按钮（控件）"></a>按钮（控件）</h4><p>上面权限系统控制到了页面，如果页面中不同用户操作按钮（控件）权限需要区分，比如常见的增、删、改操作，还需要进一步权限设计。</p><p>页面列表数据查看、新增、修改、删除等各种操作，都需要通过ajax将数据或参数提交给对应的接口，然后接口再将结果返回，所以我们可以通过限制接口的访问来做到对页面按键功能的控制。</p><p>可以把各种按钮也看成是菜单项，对前面的菜单表进行扩充，增加（控件地址、是否显示）两个字段即可。</p><p>其中控件地址这个字段，就是我们访问接口数据的路由地址，比如说获取单个订单数据是通过指定主键id，它的路由接口一般设计成’/api/user/:id’。这些路由地址是我们自己设计且在整个项目中都是唯一的。所以在开发时，我们可以在后台做个中间件拦截，通过用户是否有这个菜单项对应的接口路由地址，来判断用户是否有访问该接口的权限。</p><p>是否显示字段，是为了在输出菜单列表时将这些按钮菜单项隐藏，不在界面中显示出来。<br><img src="https://user-images.githubusercontent.com/3664948/63414535-a78baf80-c42e-11e9-9b14-1f6ddd3bc77a.png" alt="image"></p><h4 id="角色（职位）"><a href="#角色（职位）" class="headerlink" title="角色（职位）"></a>角色（职位）</h4><p>当系统中用户增多，对每一个用户都需要单独设置权限这种重复劳动工作量增大的时候，势必要考虑用户组了，在我们windows系统中早就有用户组的概念了。有了用户组概念，就可以先设置好某个用户组的权限，然后对于新加进来的用户只需加入之前配置好的用户组中，即新加进来的用户就拥有了用户组的权限。</p><p>考虑到现实情况，一个公司或企业的组织架构通常是有很多个部门组成，部门下面会有相应的职位，比如部门经理、部门员工等。用职位代替角色或用户组更让人能够容易理解。不同的职位有不同的工作职责，也有不同的操作权限。而部门主要是为了方便对职位进行分组管理，如果职位多时没有对应的分组，查询不方便，如果有相似的职位，也容易混淆。</p><p>对于企业来说，人员由于流动关系可能会经常变化，而职位则相对来说是比较固定的，所以权限绑定职位更合适，而不权限直接绑定用户。当一位员工更换岗位时，只需要更改他所绑定的职位，对于新入职的员工，也只需要绑定他所入职岗位，他们就可以拥有该职位的所有权限。</p><p>当然也会存在一些特殊的需要，比如说某人与同事都隶属于同一个职位，但他是老员工可以拥有更多的权限，这时可以增加一个新职位（通过制定职位级别）来区分他们的权限。</p><p>又比如说，如果权限需要限制部门访问权限，而该部门内的职位只能设置当前部门对应的权限，如果有员工需要跨部门拥有其他权限时，可以通过更改用户账号绑定多职位的方式来实现，也就是说一个员工他只可以绑定一个主部门，但他可以同时拥有多个职位，这样它的权限就是多个职位权限的集合。</p><p>这样在数据库表设计中需要调整的是新加入职位表（职位id、职位名称、部门id、菜单权限）和部门表（部门id、部门名称、部门编码、上一级部门id），并在用户表中增加职位id、部门id。</p><p>职位表是绑定在部门下的权限角色，菜单权限字段直接与菜单项进行关联，不同职位可以设置不同的权限（设置可查看与操作的菜单项）</p><p>职位表还需要存储与部门表的关联项：部门表id。如果为了不关联查询，也可以直接冗余存储部门编码、和部门名称字段（直接存储这个冗余字段，是为在需要显示职位所属部门时，不需要从部门表中关联查询，部门名称设置后更改的机会不大，但查询是每次都固定需要查询），所以冗余字段的设置减少了查询表次数，不过要在程序中确保两边表的数据更新一致。</p><p>部门表它相当于权限分组，可以根据企业的部门结构，创建对应的结构记录，这样也方便企业对系统权限关系更加容易理解。当然也可以根据需要设置虚拟部门出来管理。</p><p>为了以后扩展需要，需要添加部门编码字段，编码从01开始一直累加到99，当然如果部门超过99个的话，要么增加到3位数，要么当前框架已不能支持业务的发展需要思考新的架构了。</p><p>编码每增加一级，在01后面自动增加”0x“，编码的长度跟部门分级深度相关。</p><p>综合以上权限设计思路，最终整理出的数据表关系图为：<br><img src="https://user-images.githubusercontent.com/3664948/63416044-47e2d380-c431-11e9-867a-88539afccfbe.png" alt="image"></p><p>整个权限控制就4张表，如果现实情况不太用得到组织部门，还可以把部门这张表去掉，并把职位表改成角色表，这样最精简的权限控制数据库表就设计完成了。</p><hr><p>上一节主要讲了后台数据库表的设计，这节主要根据4张表来设计界面，主要有用户管理页面、菜单管理页面、部门管理页面、职位管理页面。</p><p>前端采用inspinia模板，有些插件略有增减，对话框采用layer，树菜单采用ztree，表格采用bootstrap-table，具体可以看源码。<br>express中采用ejs-mate模板，是ejs扩展版本，支持layout。</p><h4 id="用户管理列表"><a href="#用户管理列表" class="headerlink" title="用户管理列表"></a>用户管理列表</h4><p><img src="https://user-images.githubusercontent.com/3664948/63746313-22dddd00-c8d7-11e9-9b6e-c4c8e1aa1499.png" alt="image"></p><h4 id="编辑用户"><a href="#编辑用户" class="headerlink" title="编辑用户"></a>编辑用户</h4><p>编辑用户中主要选择用户所属部门和职位，其中职位是可以多个，采用树型结构勾选即可。<br><img src="https://user-images.githubusercontent.com/3664948/63418001-eae91c80-c434-11e9-8dd4-a6d7db1a6b2e.png" alt="image"></p><h4 id="菜单管理列表"><a href="#菜单管理列表" class="headerlink" title="菜单管理列表"></a>菜单管理列表</h4><p>菜单列表采用bootstrap-table，并使用tree-grid插件显示菜单层级关系。<br><img src="https://user-images.githubusercontent.com/3664948/63417187-5e8a2a00-c433-11e9-92b7-78ff1faac9c0.png" alt="image"></p><h4 id="编辑菜单"><a href="#编辑菜单" class="headerlink" title="编辑菜单"></a>编辑菜单</h4><p>编辑菜单主要是设置上下级菜单关系，页面地址和控件地址，如果这个菜单只有控件地址，不在左侧树菜单显示的，需要将是否显示设为隐藏。<br><img src="https://user-images.githubusercontent.com/3664948/63417265-824d7000-c433-11e9-9dff-4cb9dc973a65.png" alt="image"></p><h4 id="部门管理列表"><a href="#部门管理列表" class="headerlink" title="部门管理列表"></a>部门管理列表</h4><p><img src="https://user-images.githubusercontent.com/3664948/63417320-9c874e00-c433-11e9-98a0-9777e5a8cf17.png" alt="image"></p><h4 id="职位管理列表"><a href="#职位管理列表" class="headerlink" title="职位管理列表"></a>职位管理列表</h4><p>左侧可以通过点击部门树，来筛选该部门下的职位列表，方便显示。<br><img src="https://user-images.githubusercontent.com/3664948/63417380-b9bc1c80-c433-11e9-8701-967a2c9dfe05.png" alt="image"></p><h4 id="编辑职位"><a href="#编辑职位" class="headerlink" title="编辑职位"></a>编辑职位</h4><p>编辑职位主要设置该职位名称及该职位所拥有的菜单项，菜单项是一个树型结构，打勾即表示该职位拥护此菜单项权限。<br><img src="https://user-images.githubusercontent.com/3664948/63417422-d193a080-c433-11e9-9c8a-a1e82d290bc2.png" alt="image"></p><p>以上是最终所实现的界面效果。大部分都属于简单的列表和增删改页面，稍微复杂点是有些页面会涉及到树形菜单加载。</p><p>用户登录后，就获得了用户所属职位的菜单项集合，在用户每次请求路由中需增加权限判断，我们写在中间件中。</p><pre><code>/** 用户鉴权*/async authUserPermission(req, res, next) { if (!req.session || !req.session.user || !req.session.user.id) { return res.redirect('/login'); } if (!req.session || !req.session.menu || req.session.menu.length == 0) { return res.send('抱歉，您无此权限！请联系管理员'); } let targetUrl = req.route.path; let hasPower = false; req.session.menu.forEach(el => { if (el.page_url == targetUrl || el.control_url == targetUrl) { hasPower = true; } }); if (!hasPower) { if (req.xhr) { return res.json({ state: false, msg: "抱歉，您无此权限！请联系管理员" }); } return res.send('抱歉，您无此权限！请联系管理员'); } next();}</code></pre><p>在每次路由请求中先判断用户权限，如有权限则往下执行正常逻辑，如无权限直接返回。</p><pre><code>router.get('/system/userList', auth.authUserPermission, system.showUserList);router.get('/system/userEdit/:id', auth.authUserPermission, system.showUserEdit);</code></pre><p>test账号新增用户报无权限演示：<br><img src="https://user-images.githubusercontent.com/3664948/63736028-578c6d00-c8b4-11e9-9825-59d232eba992.png" alt="image"></p><p>项目地址：<a href="https://github.com/ciey/NodeExpressAdmin" target="_blank" rel="noopener">https://github.com/ciey/NodeExpressAdmin</a></p>]]></content>
<categories>
<category> node </category>
</categories>
<tags>
<tag> node </tag>
</tags>
</entry>
<entry>
<title>Adminer轻量级MySQL管理工具</title>
<link href="/posts/adminer-install/"/>
<url>/posts/adminer-install/</url>
<content type="html"><![CDATA[<p><img src="https://user-images.githubusercontent.com/3664948/63909091-103ce280-ca54-11e9-96e9-7a4f63fede37.png" alt="image"></p><h4 id="Adminer"><a href="#Adminer" class="headerlink" title="Adminer"></a>Adminer</h4><p>工具名称：Adminer</p><p>工具作用：图形化MySQL管理工具</p><p>工具下载： <a href="https://www.adminer.org/" target="_blank" rel="noopener">https://www.adminer.org/</a></p><p><strong>Why is Adminer better than phpMyAdmin?</strong></p><p>优势：1. 安全, 2. 用户体验更好, 3. 性能更好, 4. 支持特性更多, 5. 最小体积，单个文件.</p><p>附Adminer与phpMyAdmin的对比<a href="https://www.adminer.org/en/phpmyadmin/" target="_blank" rel="noopener">https://www.adminer.org/en/phpmyadmin/</a></p><h2 id="Apache-安装"><a href="#Apache-安装" class="headerlink" title="Apache 安装"></a>Apache 安装</h2><pre><code>$ sudo apt-get install apache2</code></pre><h2 id="php-安装"><a href="#php-安装" class="headerlink" title="php 安装"></a>php 安装</h2><pre><code>$ sudo apt-get install php7.0$ sudo apt-get install libapache2-mod-php7.0</code></pre><h2 id="mysql-另行安装，不在赘述"><a href="#mysql-另行安装，不在赘述" class="headerlink" title="mysql 另行安装，不在赘述"></a>mysql 另行安装，不在赘述</h2><pre><code>$ sudo apt-get install mysql-server mysql-client</code></pre><h2 id="php扩展安装"><a href="#php扩展安装" class="headerlink" title="php扩展安装"></a>php扩展安装</h2><pre><code>$ sudo apt-get install php7.0-mysql</code></pre><h2 id="adminer安装"><a href="#adminer安装" class="headerlink" title="adminer安装"></a>adminer安装</h2><p>下载adminer.php至/var/www/html</p><pre><code>$ cd /var/www/html$ sudo wget "http://www.adminer.org/latest.php" -O adminer.php</code></pre><p>重启Apache</p><pre><code>$ sudo /etc/init.d/apache2 restart</code></pre><p>重载Apache配置</p><pre><code>$ sudo systemctl reload apache2</code></pre><p><img src="https://user-images.githubusercontent.com/3664948/63909031-eb486f80-ca53-11e9-8e5b-19a76e5ee604.png" alt="image"></p>]]></content>
<categories>
<category> 工具 </category>
</categories>
<tags>
<tag> Adminer </tag>
<tag> MySQL </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/posts/hello-world/"/>
<url>/posts/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre class=" language-bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class=" language-bash"><code class="language-bash">$ hexo server</code></pre><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre class=" language-bash"><code class="language-bash">$ hexo generate</code></pre><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre class=" language-bash"><code class="language-bash">$ hexo deploy</code></pre><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<categories>
<category> Web前端 </category>
</categories>
<tags>
<tag> Web前端 </tag>
</tags>
</entry>
</search>