2022年DoraCMS开发指南.pdf

DoraCMS开发指南DoraCMS 开发指南DoraCMS 开发指南 . 1 一、DoraCMS 安装 . 1 1、1 安装 nodejs . 1 1、2 安装 Mongodb。 . 2 1、3 运行 DoraCMS . 3 1、 3、1 启动 mongodb . 3 1、 3、2 插入初始数据 . 4 1、 3、3 运行 DoraCMS . 5 1、 3、4 访问地址 . 6 二、DorCMS 开发 . 6 2、1 配置文件 . 6 2、2 关于路由 . 10 2、3 关于模板 . 10 2、4 实体类 . 12 2、5 用到的插件 . 13 2、6 关于编码 . 14 三、总结 . 15 四、 FAQ . 15 一、 DoraCMS 安装1、1 安装 nodejs DoraCMS 就是基于 Nodejs 开发的 ,所以要想正常运行DoraCMS 需要 nodejs环境。 在 Nodejs官网 () 根据电脑版本下载对应的安装文件进行安装,安装完成后 ,打开命令窗口执行node -v,如果出现版本号,证明安装成功。我的电脑就是64 位版本 ,安装了重启之后才生效。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 17 页 - - - - - - - - - - DoraCMS开发指南1、2 安装 Mongodb。DoraCMS 使用的就是Mongodb 的数据库 ,至于 Mongodb 的特点与 nosql 的优势在此就不做详细描述了。安装方法很简单,到官网() 下载对应版本,直接安装就可以了。这里有一点需要注意的就是 ,如果您安装在D 盘,安装完成后 ,在 D 盘根目录下创建文件夹data ,不然启动mongo 会提示数据库路径错误,当然您也可以通过命令启动mongodb 来指定数据库的路径,如果您不想麻烦,就照我说的处理就可以了。1、在本地盘建立一个文件夹(最好英文名称 ),通过 svn checkout 出 DoraCMS 的代码 ,项目地址:,svn 地址 :svn:/git 、oschina、net/doramart/DoraCMS ,完成后代码结构如下: 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 17 页 - - - - - - - - - - DoraCMS开发指南注:、idea 不属于项目文件夹,为 webstorm 工程文件 ,不必理会。1、3 运行 DoraCMS 1、3、1 启动 mongodb 找到 mongodb 安装目录下bin 文件夹 ,执行 mongod、exe 当出现如下界面,表示启动成功 : 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 17 页 - - - - - - - - - - DoraCMS开发指南1、3、2 插入初始数据在 DoraCMS 操作指南中有提到插入初始管理数据,因为刚安装的数据就是空的,需要插入初始数据来管理后台,这里重新介绍一次: 、找到 Mongodb 安装目录 (MongoDBServer3 、0bin) 执行 mongo 、exe、输入use doracms、插入用户组数据:db、admingroups 、insert(_id : 4yTbsWiI,name : 超级管理员 ,power : sysTemManage_0_1:true,sysTemManage_0_2:true,sysTemManage_0_3:true,sysTemManage_0_4:true,sysTemManage_0_5:true,contentManage_1_1:true,contentManage_1_2:true,contentManage_1_3:true,userManage_2_1:true,projectManage_3_1:true,projectManage_3_2:true,projectManage_3_3:true,contentManage_1_4:true,contentManage_1_5:true,sysTemManage_0_6:true,contentManage_1_6:true,date : ISODate(2015-06-30T08:04:46 、092Z),_v : 0)、插入用户数据:db、adminusers、insert(_id : E1jNjZi8,name : test,精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 17 页 - - - - - - - - - - DoraCMS开发指南username : test,password : 581fbebb8a5f5827,phoneNum : 12358563215 、0,email : doramartqq、com,group : 4yTbsWiI,comments : doramart,logo : /upload/images/defaultlogo、png,date : ISODate(2015-06-18T01:17:15 、007Z),_v : 0)、插入数据如果存在格式问题,需要在记事本里编辑一下。如果上述执行正常,那么默认的登录名与密码为test / 000000 ,这样 ,您就可以正常登录后台了。1、3、3 运行 DoraCMS 在刚刚 svn 下载的代码目录下调出 cmd 命令窗口 ,执行 npm start 如果没有报错 ,证明运行成功了。注意 :DoraCMS 指定了默认端口号为80,如果您的机器已经占用了80 端口 ,这里会报错 ,如果想修改默认端口号,可以到代码的bin 目录下www 文件修改 ,当然修改完成 ,访问路径记得带上端口号 : 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 17 页 - - - - - - - - - - DoraCMS开发指南至此 ,doraCMS 就运行起来了1、3、4 访问地址前台 :127、0、0、1 (默认 80 端口 ) 后台 :127、0、0、1/admin 二、 DorCMS 开发2、1 配置文件DoraCMS 的主要配置在settings、js 中设置 (/onlineCMS/models/db/settings 、 js): / 数据库配置COOKIE_SECRET: doramart 、com, URL: mongodb:/127 、0、0、1:27017/doracms, DB: doracms, HOST: 127、0、0、1, / 数据库地址PORT: 27017, / 数据库端口号USERNAME: doracms, / 数据库用户名PASSWORD: 000000, / 数据库密码/ 站点基础信息配置SITETITLE : 前端开发俱乐部, / 站点名称SITEDOMAIN : , / 站点域名SITEICP : 粤 ICP 备 111111号-2, / 站点备案号SYSTEMMAIL : xxxx163、com, / 站点邮箱UPDATEFOLDER : process 、cwd()+/public/upload, / 默认上传文件夹本地路径精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 6 页，共 17 页 - - - - - - - - - - DoraCMS开发指南TEMPSFOLDER : process 、cwd()+/views/web/temp, / 默认模板文件夹本地路径DATAOPERA TION : process 、cwd()+/models/db/bat, / 数据库操作脚本目录DATABACKFORDER : C:/softbak/xxxx/, / 服务端数据库操作脚本目录CMSDISCRIPTION : 前端开发俱乐部,分享前端知识 ,丰富前端技能。 汇集国内专业的前端开发文档 ,为推动业内前端开发水平共同奋斗。html,js,css,nodejs,前端开发 ,jquery,web 前端 , web 前端开发 , 前端开发工程师, SITEKEYWORDS : 前端开发俱乐部,前端俱乐部 ,DoraCMS内容管理系统, 前端开发 , web 前端, web 前端开发 , 前端开发工程师, 设计, 开发 , 前端资源 , angularjs, JavaScript,js, Ajax, jQuery, html,html5,css3, 浏览器兼容 , 前端开发工具 , nodejs , node , boostrap, SITEBASICKEYWORDS : 前端开发俱乐部,前端开发 ,前端俱乐部 ,DoraCMS, / 基础关键词STATIC : , / 静态文件空间地址UPDATE : , / 上传文件空间地址QINIUACCESS_KEY : , / 七牛秘钥QINIUSECRET_KEY : , / 七牛秘钥QINIUCMSBUCKETNAME : , / 七牛 Bucket_Name 针对上面这些静态参数都进行了详细的注释,如果您设置了数据库账号密码,则需要在这里做相应的配置,同时需要在Dbopt、js 中做相应的数据库连接设置。Settings、js 中有四个参数需要注意一下: UPDATEFOLDER : process 、cwd()+/public/upload, / 默认上传文件夹本地路径TEMPSFOLDER : process 、cwd()+/views/web/temp, / 默认模板文件夹本地路径DATAOPERATION : process 、cwd()+/models/db/bat, / 数据库操作脚本目录上面三个参数原则上不用修改,UPDA TEFOLDER 指定上传文件的目录,TEMPSFOLDER 为指定的模板文件夹,DATAOPERATION 为执行数据备份的脚本目录文件夹DATABACKFORDER : C:/softbak/xxxx/, / 服务端数据库操作脚本目录DATABACKFORDER 指定数据备份的本地路径。下面的配置都就是后台模块的静态参数: SYSTEMMANAGE : sysTemManage_0, / 后台模块 (系统管理 ) ADMINUSERLIST : sysTemManage_0_1, ADMINGROUPLIST : sysTemManage_0_2, EMAILTEMPLIST : sysTemManage_0_3, ADSLIST : sysTemManage_0_4, : sysTemManage_0_5, 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 7 页，共 17 页 - - - - - - - - - - DoraCMS开发指南DATAMANAGE : sysTemManage_0_6, / 数据管理BACKUPDATA : sysTemManage_0_6_1, / 数据备份CONTENTMANAGE : contentManage_1, / 后台模块 (内容管理 ) CONTENTLIST : contentManage_1_1, CONTENTCATEGORYS : contentManage_1_2, CONTENTTAGS : contentManage_1_3, / 标签管理CONTENTTEMPS : contentManage_1_4, / 模板管理CONTENTTYPES : contentManage_1_5, / 内容属性管理CONTENTFILMTYPES : contentManage_1_5_1, / 内容属性管理CONTENTCOUNTRYTYPES : contentManage_1_5_2, / 内容属性管理CONTENTYEARSTYPES : contentManage_1_5_3, / 内容属性管理MESSAGEMANAGE : contentManage_1_6, / 留言管理USERMANAGE : userManage_2, / 后台模块 (会员管理 ) REGUSERSLIST: userManage_2_1 改参数对应后台模板文件adminTemp、ejs 中的模块列表的: 也就就是说 ,如果新增模块 ,需要在配置文件(settings、 js) 与 adminTemp、 ejs 中配置相应的cid。这个属性就是权限控制需要的,除此之外 ,加入新模块后,需要在权限管理模块加入新模块,并配置对应的cid 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 8 页，共 17 页 - - - - - - - - - - DoraCMS开发指南精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 9 页，共 17 页 - - - - - - - - - - DoraCMS开发指南2、2 关于路由DoraCMS 中所有的请求都就是通过nodejs 的路由来处理的,原理类似于java 中的struts 。路由文件在routes 文件夹下 : Admin 、js , 后台所有模块管理路由Content、js 前台文档相关Index、js 首页相关 (也包含文档列表与文档相亲) System、js 系统操作的相关路由(比如文件上传、邮件发送等) Users、js 用户中心的相关请求走这里Validat、js 后台权限控制 (没有授予管理权限(session)会直接过滤掉请求) 2、3 关于模板DoraCMS 就是基于ejs 模板引擎来表现前台页面的,选择 ejs 就是因为比jade 更好理解一些。属性 js 的童鞋也好接受ejs 的语法来展示数据。DoraCMS 的模板文件都在views 文件夹下 : 解析 : 1、views 下的index、ejs 为首页主体内容,sitemap、ejs 就是站点地图的主体内容,sitemap、ejs 就是展示给用户瞧的,不需要手动更新。2、Web 为前台的所有模板文件,web 根目录下的do404、ejs, do505、ejs , dosuccess、ejs 就是处理操作过程结果反馈的模板,这些就是普遍需要用到的。3、Users 就是用户相关页面模板。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 10 页，共 17 页 - - - - - - - - - - DoraCMS开发指南4、Temp 中包含了公共header与 footer,以及文档模板 ,aboutMe、blog、lab 都属于文档模板,可以根据自己的需要自行添加。5、public 文件夹中的模板暂时没用到。6、Manage 里就是后台的所有页面模板,adminTemp、ejs 就是模板外壳,里面包含了各个模块列表与一些公共的引用。7、public 文件夹下就是公共目录,主要放置静态文件,包括前台与后台的静态js,css,以及DoraCMS 用到的 jquery 插件等。 Public 下的文件都就是公开的,在 app、 js 中设置。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 11 页，共 17 页 - - - - - - - - - - DoraCMS开发指南2、4 实体类这里称为 “实体类” 可能有些不妥 ,在 java 中,这部分确实就叫实体类,代表每个对象所具有的属性 ,文件存放于models 文件夹中。每个对象都有详细注释,开发者自己去查瞧就可以了。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 12 页，共 17 页 - - - - - - - - - - DoraCMS开发指南2、5 用到的插件开发过程中 ,很多功能并不就是自己写的,用到了npm 上比较优秀的一些插件,在此选出一些做介绍 ,所有插件在node_modules 下精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 13 页，共 17 页 - - - - - - - - - - DoraCMS开发指南1、Express nodejs 框架 ,就是 DoraCMS 的基础框架2、Gm 图片缩略图 ,为上传图片生成指定大小的缩略图3、Moment 时间格式化工具,功能非常强大4、Nodemailer nodejs 邮件发送组件5、Formidable 文件上传组件6、Qiniu 七牛云存储组件,用于将文件上传到七牛上7、Qr-image 用户将自定义链接生成二维码图片的组件,轻量级很方便8、Archiver 文件夹压缩工具,将指定文件夹压缩为zip 9、Shortid 用在了实体类中,用于生成短id 替代mongodb 的长 id 10、Validator 用户服务端数据校验,提供很多方法对数据进行校验11、Ueditor-nodejs 将 nodejs 与百度的 ueditor 整合 ,这个组件感觉很有用12、Mongoose 用于 nodejs 连接mongodb,并提供了丰富的数据处理的接口2、6 关于编码1、DoraCMS 的编码 ,前台主要用到了ejs 模板与 ejs 语法展示数据 ;后台主要用到了ejs 与angularjs 来展示数据。不熟悉angularjs 的童鞋与简单了解一下,对于后台展示数据非常方便,但就是不适合前台,因为 angularjs 不适合做 seo 。2、DoraCMS 基于 nodejs + express 编写,所以前端基本就是div+css+js , 服务端主要就是js,对 js 比较了解的前端开发者很容易就能上手。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 14 页，共 17 页 - - - - - - - - - - DoraCMS开发指南3、DoraCMS 80% 的代码都有注释,详细介绍了接口的用途与细节处理,方便查瞧。三、总结DoraCMS 开发时间比较短,功能并不就是很丰富,但就是麻雀虽小、五脏俱全,基本功能都就是具备的。由于DoraCMS 就是本人独立开发,由于技术有限难免会有些处理不好的地方,或者一些很明显的bug(虽然我也在不断的改善),如果您发现了问题,请您不佞赐教,如果确实存在问题 ,我会不断的更新上去,这也就是开源的目的之所在。如果您有更好的解决方案或者对DoraCMS 有更好的想法 ,也可以通过我的博客联系我,让我们一起探讨,共同进步。四、 FAQ 1、一直没瞧到说设置数据库密码,这样安全么？当然不安全 ,本地调试可以不用设置密码,程序部署上去肯定就是要设置数据库账号密码的,怎样设置呢 ,给个链接大家可以参考下: 2、网络上很多cms 都很强大 ,为什么要选择DoraCMS ？当然 ,目前很多成熟的cms(织梦、phpcms 等),DoraCMS 刚起步自然比不了,首先 DoraCMS 创建的目的就是为了更深入的了解nodejs 并付诸实践 ,开源的目的也就是为了通过案例来不断精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 15 页，共 17 页 - - - - - - - - - - DoraCMS开发指南改进我们的nodejs 水平 ,共同提高 ;其次 DoraCMS 结构清晰、模块简单,上手很容易。目前市面的 cms 结构复杂 ,想要自己修改定制学习成本比较高。初识nodejs 的开发者可以了解一个cms 实现的基础过程,熟悉 nodejs 的也可以用DoraCMS 来进行二次开发,不用再从头开始。DoraCMS 遵循 MIT 协议完全开源 ,您可以自由定制属于您自己的网站而不必花很多时间去处理最基础的一些东西,为了让更多的人去了解与认识nodejs,于就是 DoraCMS 诞生了。3、演示地址在哪里? 基于 DoraCMS 定制的博客系统基于DoraCMS 定制的视频分享站点4、为什么上传图片失败？DoraCMS 默认在 3 个地方用到了上传:用户上传头像、添加文档主图、内容详情中文件、图片或附件上传。其中用户上传头像、添加文档主图默认使用七牛,所以如果您没有配置七牛云存储开发者相关信息 ,就会上传失败 ,需要在/models/db/setting 、js 下进行配置 : (七牛免费 10G 空间 ,注册账号就可以获取到相关信息了)。当然 ,有的童鞋不想用七牛,想直接传到网站相关目录,也就是可以的。 DoraCMS 预留的有通过 uploadify 上传图片或文件,而且上传接口自带了图片缩略图截取功能。您可以通过查瞧 /public/javascripts/webapp、js 下的 initUploadLogoBtn 方法 : /初始化用户上传头像按钮function initUploadLogoBtn($scope) $(#uploadify) 、uploadify( /指定 swf 文件swf: /plugins/uploadify/uploadify、swf, /后台处理的页面uploader: /system/upload?type=images&key=userlogo, /按钮显示的文字buttonText: 选择图片 , /显示的高度与宽度,默认height 30;width 120 height: 40, width: 138, /上传文件的类型默认为所有文件All Files ; * 、* /在浏览窗口底部的文件类型下拉菜单中显示的文本: Image Files, 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 16 页，共 17 页 - - - - - - - - - - DoraCMS开发指南/允许上传的文件后缀: * 、gif; * 、jpg; * 、png, /发送给后台的其她参数通过formData 指定/ formData: type: images, key: ctTopImg , /上传文件页面中,您想要用来作为文件队列的元素的id, 默认为 false 自动生成 , 不带 # /queueID: , /选择文件后自动上传auto: true, /设置为 true 将允许多文件上传multi: true, /上传成功onUploadSuccess : function(file, data, response) alert(上传成功 ); / $(#logoPath)、val(data); $scope、 logoFormData、logo = data; $(#myImg) 、 attr(src,data); $(#submitLogo) 、removeClass(disabled); , onComplete: function(event, queueID, , response, data) / 当单个文件上传完成后触发/event:事件对象 (the event object) /ID: 该文件在文件队列中的唯一表示/:选中文件的对象,她包含的属性列表/response:服务器端返回的Response文本 ,我这里返回的就是处理过的文件名称/data:文件队列详细信息与文件上传的一般数据alert( 文件 : + + 上传成功！ ); , /上传错误onUploadError : function(file, errorCode, errorMsg, errorString) alert(The file + + could not be uploaded: + errorString); , onError: function(event, queueID, ) /当单个文件上传出错时触发alert( 文件 : + + 上传失败！ ); ); 通过上面的初始化按钮方法,您可以找到后台上传接口与处理方式。这两种上传方式您可以自己选择。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 17 页，共 17 页 - - - - - - - - - -