基于vue的个人博客

第一章 引言

1.1系统开发背景

信息时代的今天，网络已经成为人们工作、学习的一部分，不断充实和改变着人们的生活。在网络中，构建一个个性化的个人博客，可以充分地表达自己的思想，通过发表文章展示个人才能，抒发个人情感。网友则可以根据主题发表个人意见，表达自己的想法，与博主进行思想交流，乐在其中。
博客之所以以用户的欢迎，首先在于它具有无与伦比的越分享越多”的魅力精髓。对于博文本人，对于阅读博客的人；对于自己，对于他人，对于社会；对于工作，对于生活，越分享越多”的博客精髓注定了博客的发展势不可挡。博客可以美化一个人的生活！而所谓的新媒体革命，所谓的人际交往和知识传播的革命，都是第二层次的。通过分享，美化每一个博客，美化每一个人的生活，自然美化整个社会。分享可以是沟通，可以是人际关系，可以是文章，可以是音乐和声音，可以是图片和视频，可以是阅读和推荐……博客网，让你随心所欲”，这个随心所欲主要就是在超越时空的虚拟世界中，可以随心所欲地分享你愿意分享的一切。

1.2 开发目的和意义

目的：许多博客专注在特定的课题上提供评论或新闻，其他则被作为比较个人的日记。一个典型的博客结合了文字、图像、其他博客或网站的链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，仍有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题。
博客的功能主要有以下四点：（1）个人自由表达和出版，用户可以自由发表文章，但是是有前提的，例如谣言、色情等不合法的内容是不允许发表的；（2）知识过滤和积累，用户可以将自己生活、工作中的一些心得记录下来与他人分享；（3）深度交流沟通，博客可以促进交流可以与他人交流自己记录下的一些心得或者国内外新闻等，但是用户应该以辩证的方式去评论；（4）博客营销。作用还有很多，总之博客在现如今这个飞速发展的网络时代已经成为人们不可或缺的一部分。所以我选择了这个课题作为我的毕业设计。
意义：在网络技术逐渐渗入社会生活各个层面的今天，传统的交流方式也面临着变革，而网络博客则是一个很重要的方向。博客是以网络为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人分享，再集丰富多彩的个性化展示于一体的统合性平台。基于Web技术的博客系统可以借助于遍布全球的Internet进行，因此交流既可以是本地进行，也可以是异地进行，大大拓展了沟通与交流的灵活性。记录个人生活点滴：如同日记一般，可将自己每日生活中发生的事情记录下来，并且跟朋友或网友们分享。

第二章 系统分析

2.1 系统概述

系统目标是使同学之间有一个交流和沟通的平台，通过博客系统互相 了解彼此的生活状况，发布日志相册等问题的解决。锻炼我们所学的 编程能力。
在计算机网络，数据库和先进的开发平台上，利用现有的软件，配置一定的硬件，开发一个具有开放体系结构的、易扩充的、易维护的、具有良好人机交互界面的博客网站，以达到个人推荐、展现自我的一个平台，为交流提供综合的网络环境，同时也为个人的宣传，发展，提供了一个平台。

2.2 需求分析

博客是给用户分享一些文章的，同时给其他用户观看与评论，根据目前对博客的认识，该系统主要完成以下几方面的功能：
用户管理：用户的注册和登录，博主可发表博文和查看用户信息。
系统首页：用户可以在网站首页中查看首页广告轮播栏、博文列表和博文内容，还可以通过首页博文列表访问相应文章的详情内容。
写博客：博主可发表和设置博文。
博客导航：分享一些优秀的个人博客网站。
模板分享：分享一些好的博客模板列表
分类管理：添加和删除分类，给文章设置分类。

2.3 运行环境

操作系统：Windows 10
数据库系统：MySQL 5.7
编程语言：Vue、SSM
开发工具：Eclipse 4.3
服务器：Tomcat 9.0
Web浏览器（谷歌）

2.4 技术分析

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue的数据驱动主要实现建立在三个对象上Dep、Watcher、Compiler,
Dep 主要负责依赖的收集
Watcher 主要负责Dep和Compiler之间的联系
Compiler 可以理解为 virtual dom + patch 也就是负责视图层的渲染

这种开发模式,就是所谓的MV结构,我们现在了解的MVC,MVP,ＭＶＶＭ都是MV的衍生物，对比这几种框架模式，我们会总结出来一个本质的特点，那就是这些开发模式都是让视图和数据间不会发生直接联系．对比用原生JS获得dom的操作，你会发现原生dom流其实是将dom作为数据，从dom中获得Ｍｏｄｅｌ，随后又更改dom来实现更新视图，视图和模型其实混在一起，所以代码自然混乱，不易维护．
在具有响应式系统的Vue实例中，DOM状态只是数据状态的一个映射 即 UI=VM(State) ，当等式右边State改变了，页面展示部分UI就会发生相应改变。很多人初次上手Vue时，觉得很好用，原因就是这个．不过，Vue的核心定位并不是一个框架，设计上也没有完全遵循MVVM模式，可以看到在图中只有State和View两部分， Vue的核心功能强调的是状态到界面的映射，对于代码的结构组织并不重视， 所以单纯只使用其核心功能时，它并不是一个框架，而更像一个视图模板引擎，这也是为什么Vue开发者把其命名成读音类似于view的原因。
上文提到，Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念．
Vue axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：· 从浏览器中创建 XMLHttpRequest
· 从 node.js 发出 http 请求
· 支持 Promise API
· 拦截请求和响应
· 转换请求和响应数据
· 取消请求
· 自动转换JSON数据
· 客户端支持防止 CSRF/XSRF

第三章 系统设计

3.1功能模块结构图

3.2 系统流程图

3.3 数据库设计

根据所有的模块，创建了note数据库，设计了相关4个数据库表：用户信息表（users）、博文（blog）、评论（comments）、公告(notices)。其表结构分别如下：
users表：

blog表：

comments表：

notices表：

3.4 系统详细设计

系统后台通过SSM框架实现为前台提供数据接口，前台通过vue axios来请求后台接口数据，其中有get和set方法。
getter: 主要是获取到对应的键值, 这里有一个步骤是先将原来的getter和setter提取出来，这一步主要是为了防止预定义的getter和setter，保证预定义getter、setter一样能够生效, 注意到有一步是判断Dep.target, 有的话就收集依赖了。
setter: 在setter函数中，主要是对相同的值的拦截，然后对于嵌套对象的重新observe，这里之所以会重新observe 是因为vue在每次响应了数据变化后，会清除掉所有的依赖，因此要重新建立, 至于为什么会重新建立 我们会在下面大概说下, 当值发生变化时，最后会触发dep.notify(), 来触发依赖的升级.

Vue通过v-model来绑定数据，随时监控数据的变化并获取，使得获取前台数据更加的方便。列表渲染也使得展示数据更加的简单。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute。建议尽可能在使用v-for时提供key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

第四章 系统实现

4.1 项目结构

4.2 系统调试（页面预览）

博客首页：


博客列表：

关于我：

模板分享：


友情链接：

写博客：

发表博客：

博客详情页面：

4.3 Vue核心代码

轮播图实现：


博文列表渲染：

博文详情页渲染：


写博客

第五章 课程设计心得

在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的. 这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好。
Vue (类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
回顾起此课程设计，至今我仍感慨颇多，从理论到实践，在这段日子里，可以说得是苦多于甜，但是可以学到很多很多的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。通过这次课程设计使我懂得了理论与实际相结合是很重要的。主要收获由以下几点：
(1)回顾了这个学期以来所学的知识，发现了自身的不足和存在的问题。
(2)这是第一次完整的完成整个数据库的创建，懂得我们不仅要掌握理论知识，还更加应该锻炼自己的操作能力，才能更好的学以致用。
(3)在这次难得的课程设计过程中我锻炼了自己的思考能力和动手能力。通过题目选择和设计电路的过程中，加强了我思考问题的完整性和实际生活联系的可行性。
(4)同时，培养了在实践过程中遇到问题后，应该寻找解决的办法的习惯，如借助网络或与同学交流等。
(5)通过这次实训，让我更能体会到数据库的强大与奇妙，以及功能的多样性。
在这次实训中，不仅收获了很多，同时也发现了自身存在的不足，需要改进的地方：
(1)对知识掌握的还不够牢固，上机操作能力还有待于提高。
(2)对数据库的认识仅局限于书本，而没有通过实际生活中去理解。
(3)对于一些查询语句不够熟悉，导致花费的时间较长
(4)对数据库得存储过程理解还不够深入
(5)今后应该多查询资料，把所存在得问题寻找原因并改正，学会学以致用。
平时对遇到的问题没及时解决，导致问题一直存

第六章 参考文献

[1]朱二华.基于Vue.js的web前端应用研究[J].科技与创新.2017(20)
[2]任进军，林海霞.Mysq|数据库管理与开发[M].人民邮电出版社，2017.
[3]Vue.js权威指南[M]. 电子工业出版社 , 张耀春, 2016
[4]基于Vue.js的Web前端应用研究[J].朱二华.科技与创新.2017(20)
[5]基于Vue的数据可视化系统的设计与实现[D].刘翔宇.北京邮电大学,2018
[6]https://www.cnblogs.com/wskb/p/12049413.html
[7]https://www.jianshu.com/p/cebc90cb2728
[8]JavaScript权威指南. 机械工业出版社,(美)弗兰纳根著;淘宝前端译, 2012.3

致谢

通过这次课程设计我学到了很多，首先感谢学校为我们安排了这次操作课设，其次感谢老师耐心的指导，帮助我们分析思路，开拓视角，还有我们互相学习、互相鼓励、互相奋进的同学，因为有了你们，让我从中得到了最好的锻炼和最快的成长。老师踏实坚韧的工作精神，将使我受益终生，同学间的永不放弃、对难题从不畏惧的精神，使我更加认识到自身的不足。是你们让我更进一步的看清自己，学会不断地操作实践。让我在其中学到了许多,尤其是学会了合作,懂得了合作造就的效益和成果。很荣幸能得到老师的细心指导、很开心能与同学一起努力、一起学习，再次感谢老师和同学对我的悉心教导以及关环和鼓励！