记个人博客项目从设计到落地（一）链接：github/meteor开发时间：3.17-3.31|实际开发（9天）一、分析1.1问题原来是用vuepress搭建静态博客项目后，个性化主题改造所花费的时间远远多于写博客文章，实际上是本末倒置。而且，静态博客更新后，总是需要在本地运行一条命令来获取新的静态页面，比较繁琐和不方便。而且博客建设或者主题开发本身也有一定的技术门槛。一般来说，静态博客不太符合我的需求。1.2分析首先，个人博客主要是供个人使用，作为个人展示和资料存档。我真正的需求更多的是个人应用：写文章分享到四福等平台，个人博客归档整理，满足个人需求。因为我的工作是前端的，所以对申请会比较怪异，容易挑剔。同时由于开发经验的问题，在实际实现中总会出现各种问题，影响博客的坚持。1.3期待免费卖淫，最好的数据存储，更安全可信的文章，更快的写作和发布，高度个性化，同时明确优先级1.4目的愚蠢的设计专注于docfreeblog1.5程序计划1（纯前端）:在git上开一个仓库存放博客文章，然后创建一个静态页面站点动态使用github-api从github拉取博客文章并展示。静态页面站点前端开发计划由博客数驱动，每20个增量启动一批开发计划，循序渐进，前端开发由博客数驱动。优缺点数据库和服务器缺点数据存储相对不安全，博客地址和路由文件的同步不是很智能方案二（全栈）：博客文章写在本地，保存在本地，建立相应的数据库存储博客站点各类数据，后端提供各种服务调用，前端分别实现个人博客站点和博客管理平台，最后内网穿透暴露给外网访问。开发进度仍然由同一解决方案中的博客数量驱动。优势数据存储安全可靠，文章发布更便捷智能。开发周期大大增加。需要考虑后端安全和高并发（不考虑），最后确认第二个方案。2.细化2.1思路设计确定目标本地数据库博客前端确认需求博客可视化管理博客展示带分类标签提供书签收藏功能提供事件记录功能并同步更新数据库博客前端调用后端渲染开发模式优雅降级（Chrome-pc优先）博客号驱动设计，设计驱动前端，前端驱动后端技术方案前端vue+element+front-matter（vue-cli4.2）后端node+express/koa数据库MongoDB自动化python网络内网渗透2.2元素拆解物理空间文章目录程序目录数据库目录blog-用于存放blog实体category-用于存放blog类型目录实体，blogAssociatedtags-用于存放blog标签实体,与博客关联Bookmarks-用于存放书签Entityrecord-用于存放各个维度的记录Backendarticlecrudcategorycrudtagcrudbookmarkcrud记录crud日志埋点前端起始页-用于初始配置个人主页-博客描述文章页-分类显示博客临时博客页-分享时指定文章书签页-综合书签收藏记录页-个人资料记录页眉-导航和搜索footer-应用信息和版权LogBuried2.3代码和截图前端路由exportconstroutes=[{path:'/',name:'meteor',redirect:'/start'},{//起始页path:'/start',name:'Start',component:()=>import('../views/start/Start.vue')},{//分享页面path:'/sharePage',name:'SharePage',component:()=>import('../views/share/SharePage.vue')},{name:'Page',path:'/page',redirect:'/page/home',组件：()=&g吨;import('@/components/layout/Page.vue'),children:[{//主页path:'home',name:'Home',component:()=>import('../views/page/home/Home.vue')},{//博客页面path:'blog',name:'Blog',component:()=>import('../views/page/blog/Blog.vue')},{//书签页path:'bookmark',name:'BookMark',component:()=>import('@/components/layout/Blank.vue'),redirect:'/page/bookmark/daily',children:[{//常用书签path:'daily',name:'Daily',component:()=>import('../views/page/bookmark/BookMark.vue')},{//开发书签路径:'devil',name:'Devil',component:()=>import('../views/page/bookmark/BookMark.vue')}]},{//记录页面路径:'record',name:'Record',redirect:'/page/record/recLog',component:()=>import('../views/page/record/Record.vue'),children:[{//开发Logpath:'recLog',name:'RecLog',component:()=>import('../views/page/record/RecLog.vue')},{//动画路径:'animate',name:'动画',组件:()=>import('../views/page/record/RecMedia.vue')},{//书籍path:'book',name:'Book',component:()=>import('../views/page/record/RecMedia.vue')},{//影视剧path:'movie',name:'Movie',component:()=>import('../views/page/record/RecMedia.vue')},{//行path:'recMap',name:'RecMap',component:()=>import('../views/page/record/RecMap.vue')},{//票据path:'recTicket',name:'RecTicket',component:()=>import('../views/page/record/RecTicket.vue')},]}]}];截图起始页-day起始页-night首页footer博客页书签页31相关技术点回顾与深入博客设计前端未来时代部分场景排名不分先后-前端-结束页眉√-页脚√-起始页√-首页√-博客页√-书签页√-介绍元素-滚动滚动条√-返回顶部√-背景粒子动画粒子√-地理位置获取√-本地日出日落时间采集√-多终端适配（@media）-浏览器兼容（主要适配safari）-天气采集-热门搜索功能-书签页面快速搜索-博客分享页面开发-博客查看窗口开发-记录页面开发-加载页面-个人信息页-管理平台-评论功能（缬氨酸）-...-后台-全部-数据库-全部
