个人博客项目从设计到实现的记录（二）链接：github/meteor开发时间：04/01-04/09简介上一篇主要描述了开始项目的原因和分析过程，以及前端功能的一些初步设计和实现。二期内容二期的主要开发内容是博客管理后台和数据库的环境搭建和逻辑服务，以及前后端的一些联调工作。需求确认博客可视化管理博客分类展示，标签展示提供书签收藏功能提供记录（追剧/书本进度，票务记录...）功能数据库设计二期开发中做了一些修改和调整，使得选品技术更清晰。前端vue+element+front-matter(vue-cli4.2)后端node+express/koa数据库MongoDB自动化python网络内网穿透技术方案-前端脚手架vue-cli4.2-前端vue(vuex/router)+element-ui-前端请求axios-前端第三方api跨域vue-jsonp-前端风格预处理语言less-前端markdown编辑器mavon-editor-后端node+express-后端swaggerswagger-ui-express+swagger-jsdoc-后端日志express-winston-后端跨域cors-后端数据库事务mongoose-数据库MongoDB-图床PicGo+github-网络内网穿透项目结构后端目录后端目录-service-config//配置-lib//工具-日志//日志-logs.log//开发日志-error.log//错误日志-success.log//successlog-middlewares//middleware-checkUser//检查用户会话（未使用）-models//数据模型-public//静态资源（未使用）-routes//路由layercontroller-swagger//swagge插件配置-views//查看页面（未使用）-app.js//服务入口前端目录前端目录-src-api//请求封装-assets//资源-components//组件-config//配置-插件//插件-路由器//路由-store//vuex-util//工具-视图//页面-App.vue//主视图-main.js//服务入口-registerServiceWorker.js//pwa（尚未开发）入口文件后端入口??//导入依赖varexpress=require('express');varpath=require('path');varcreateError=require('http-errors');varcookieParser=require('cookie-parser');varlogger=require('morgan');varejs=require('ejs');varcors=require('cors');varhttp=require('http');varmongoose=require('mongoose');varwinston=require('winston');varexpressWinston=require('express-winston');//导入路由接口varrouters=require('./routes');//导入配置文件constconfig_default=require('./config/default.js');//连接到数据库vardb=mongoose.connection;//监控异常db.on('error',functioncallback(){console.log("****Connectionerror")});//成功连接到db.on("connected",function(){console.log(`****数据库表[${config_default.dbName}]连接成功`)});//连接数据库//mongoose.connect('mongodb://数据库登录用户名:数据库登录密码@数据库连接地址')mongoose.connect(config_default.mongodb,{"useNewUrlParser":true,//地址处理"useUnifiedTopology":true//解除警告});//定义express应用程序varapp=express();//sethost&portapp.set('host',config_default.host);app.set('port',config_default.port);//配置模板引擎app.set('views',path.join(__dirname,'views'));app.engine('.html',ejs.__express);//引用ejs引擎app.set('viewengine','html');app.use(logger('dev'));//调用中间件app.use(express.json());app.use(express.urlencoded({extended:true}));app.use(cookieParser());//设置公共资源地址//app.use(express.static(path.join(__dirname,'public')));app.use(express.static(path.resolve(__dirname,'./../dist')));//支持跨域app.use(cors());//正常请求的logapp.use(expressWinston.logger({transports:[new(winston.transports.Console)({json:true,colorize:true}),newwinston.transports.File({filename:path.join(__dirname,'./logs/success.log')})]}));//加载路由routers(app);//介绍ceswaggervarsetSwagger=require('./swagger');setSwagger(app);//错误请求的日志app.use(expressWinston.errorLogger({transports:[newwinston.transports.Console({json:true,colorize:true}),newwinston.transports.File({filename:path.join(__dirname,'./logs/error.log')})]}));//捕获404并转发到错误处理程序app.use(function(req,res,next){next(createError(404));});//errorhandlerapp.use(function(err,req,res,next){//设置局部变量，只在开发中提供错误res.locals.message=err.message;console.log(err.message);res.locals.error=req.app.get('env')==='development'?err:{};//渲染错误页面res.status(err.status||500);res.render('error');});//创建HTTP服务器varserver=http.createServer(app);//在所有网络接口上监听提供的端口server.on('error',onError);server.on('listening',onListening);/***HTTP服务器“错误”事件的事件侦听器。*/functiononError(error){if(error.syscall!=='listen'){抛出错误；}varbind=typeofport==='string'?'管道'+端口：'端口'+端口；//使用友好的消息处理特定的侦听错误switch(error.code){case'EACCES':console.error(bind+'requireselevatedprivileges');进程.exit(1);休息;case'EADDRINUSE':console.error(bind+'isalreadyinuse');进程.exit(1);休息;默认值：抛出错误；}}/***HTTP服务器“侦听”事件的事件侦听器。*/functiononListening(){consthello=require('./config/hello');varaddr=server.address();varbind=typeofaddr==='string'?'pipe'+addr:'port'+addr.port;console.log([`${hello.ctx}`,`${hello.line}`,`${config_default.name}|监听${bind}`,`${hello.line}`,.join('\n'));}前端importVuefrom'vue'importAppfrom'./App.vue'import'./registerServiceWorker'importrouterfrom'./router'importstorefrom'./store'//globalimportelement-uiimportElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)//markdown编辑器，样式需要单独导入importmavonEditorfrom'mavon-editor'Vue.use(mavonEditor)//markdownmd-str转html工具类Vue.prototype.$markDown=mavonEditor.markdownIt//初始化浏览器样式import"./assets/style/reset.less"//全局基础样式import"./assets/style/common.less"//布局组件相关样式import"./assets/style/layout.less"import"mavon-editor/dist/css/index.css";//跨域请求importVueJsonpfrom'vue-jsonp'Vue.use(VueJsonp)//util工具importutilfrom'./util'Vue.prototype.$util=util//api接口importapifrom'./api'Vue.prototype.$api=api//配置信息nimportconffrom'./config'Vue.prototype.$conf=confVue.config.productionTip=falsenewVue({router,store,render:h=>h(App)}).$mount('#meteor')总体进度-前端-起始页√-404页面-空组件-博客站点-标题√-标题搜索功能-页脚√-协议版权√-应用信息√-开发者信息√-主页√-悬浮翻页对联√-动漫漂白背景√-像素打印动画√-博客页面√-博客分类树√-博客视图窗口开发√-博客分享页开发-数浏览量√-无限滚动列表√-点赞文章-分享链接-截图截图-评论功能-书签页√-三种书签数据导入√-快速初始搜索-记录页-日志-开发日志√-多媒体（书籍，动画、影视剧）进度记录开发-票（票）使用记录开发-个人信息页-加载状态-管理平台√-页眉√-每日诗√-页脚√-音乐播放器-博客管理-标签词cloud-博客备份文件默认命名（date_filename)√-用户管理√-密码强度检测-随机生成头像-标签管理√-书签管理√-分类管理√-拖顶点-排序-导入-导出-其他-多屏适配（@media）-浏览器兼容（主要适配safari）-引入element-scroll滚动条√-侧边进度条-返回顶部√-背景粒子动画粒子√-地理获取位置√-获取本地日出日落时间√-获取天气-...-backend-user-CRUD√-cats-CRUD√-tag-CRUD√-blog-CRUD√-更新文章和本地备份md文件√-生成wordcloud基于blog/tagstags-bookmark-CRUD√-record/media-CRUD-record/ticket-CRUD-record/log√-成功/异常日志输出√-增删改接口session请求校验-数据库-conf_user√-conf_tag√-conf_cats√-conf_blog√-conf_bookmark√-conf_ticket-conf_media-conf_session截图swagger登录开发日志管理平台博客管理博客编辑下图界面session认证内网穿透...参考链接vue使用动画vue-particlesnodejs+express+mongodb搭建博客表达ss集成swagger日志中间件：winston和express-winstonmongoose常用查询mavonEditor今日诗开放接口
