前端网站原型设计
上个礼拜将公司网站存在的问题梳理了一下，了解其前后端技术是什么。了解了下软件开发流程是如何的。
work_flow.jpg
由于Layui开发前端页面比较迅速，花了半天时间看了下文档，然后制作了新的网站原型，在此记录下遇到的一些问题。
- Layui 的文件内容不能发生变化，比如文件夹内各文件的相对位置。在部署到服务器上时，发现如果修改了文件夹名字或增加了新内容，将无法读出。
- Layui的引用最好加上Media="all"
<link rel="stylesheet" media="all" href="../../assets/layui/css/layui.css" />，如果遇到浏览器提示css在严格模式下无法解析。 - Script 代码一般写在Layui.use里面，模块的定义通过Layui.define进行定义。
- Layui的模板引擎并没有提供API接口，通过阅读Layui的模板引擎源码，尝试通过express进行res.render指定laytpl中的方法，结果出错。采用MVC架构，通过controller控制传入数据，控制不同页面的的数据显示并不方便，感觉Layui并不适合MVC开发。
边做边学了ejs模板语言，ejs关键是不同占位符代表的含义，其可以在模板中定义for, if等，结合res.render传入的数据进行条件化渲染。
在使用session的过程中，了解了req.app.locals, req.locals, app.locals的区别，第一个是保存数据到请求连接的作用域中，与第二者的区别是其数据可以供其他中间件调用，第三个是保存到express 实例的全局作用域。
此外，了解了redis的用法，redis是通过内存在保存数据，其相对于直接使用session store，有以下两个优点。
- redis store因为保存在服务器的内存中，其访问数据很快
- 安全性得到了增强，采用普通的session机制，因为设置的是全局变量，会导致多用户返回相同的session内容。而采用redis，每个用户连接都会在内存中单独创建一对key value。
后端权限设置
一开始对主流的权限控制方案进行了调研，如java spring security , shiro, 以及node-acl，这些框架比较重，虽然其安全性和可靠性比较高，功能完善，但考虑目前情况，采用了express + mongodb + layui 通过设置不同的中间件来实现权限控制。其实mongodb不太适合关系型数据库，其不同数据表之间的权限关联不如使用MySql之类。
主要流程如下：
- 首先设计好数据库，即Model模块，一般权限通常是和岗位绑定的，所以可以设置不同部门岗位的权限，若是需要跨部门，可以给一个人设置多个职位。
这里简单采取管理员和普通用户，数据表设置用户名和密码，页面访问权限，系统设置权限； - 封装设计好的数据库，添加增删改查方法。
- 设置三个中间件，第一个监测用户是否登录，若是没有登录，则跳转到登录页面；第二个中间件监测登录的用户是否有访问该页面的权限；第三个中间件监测用户是否有访问权限设置的权限。
期间遇到的一些问题，比如针对权限树嵌套如何往内部某个子树添加权限，Mongodb可以采用addToSet来往现有对象的内部对象添加元素。删除多层嵌套的元素，可以采用Pull方法。权限树采用Layui的带编辑功能的，其注意点是为了在后续获取特定的元素，需要在add新元素的时候，设置id。
上线测试
上次遇到一些问题，比较奇怪的错误，通过排除发现是Node版本的问题，在写服务端时使用的是class, module.exports = new Object() 类似面向对象的写法，之前在阿里云上安装的7.0版本的Node，结果无法解析，通过NVM切换成12.0的可以成功运行。
其他注意事项：
- 针对静态资源，不要忘记设置静态的绝对目录，可以通过app.use实现。
- 针对request的解析，之前看express官方文档，发现4.0自带bodyParser, 但使用了发现遇到比较多bug, 调试了较久，还是采用了主流的bodyParser, urlencoded与json方法的区别是前者主要是解析post提交的form 表单，需要注意的是extended需要设置为true才能解析嵌套的对象，否则只能解析简单的。开启嵌套解析会消耗一定的性能
// parser
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true
})
);
网友评论