项目背景
可行性方面
需求分析:
详细设计:
数据库设计
博客管理API的设计
标签相关API
服务器端的实现
对数据库操作进行封装
对服务器操作进行封装
客户端实现
具体操作
使用markdown
具体实现
测试
项目效果展示
维护
完整代码
项目背景
现在的时代信息越来越多,我们每时每刻都在学习和接受各种信息,我们要怎样保存这些信息,并且 向他人展示,写博客就是一个很好的方法。
现在有很多的博客网站就是实现这样的功能,这个项目就是实现一个自己的博客网站,可以把我们平时的学习和生活记录下来。
可行性方面
- 经济可行性——低成本
- 操作可行性——简单
- 技术可行性——借助其他工具
需求分析:
支持单个用户
我们的客户端是在浏览器上实现的,要在浏览器上进行对博客的操作,编辑,修改,删除,增加等。
服务器器端在Linux上实现,针对每一个客户端的按钮都要有对应的事件处理。
存储用MySQL数据库,调用c/c++API进行对博客的管理
博客服务器端要实现的功能
- 对博客的管理能力
- 对标签的管理能力
博客客户端要实现的功能
- 博客标题列表页面
- 博客内容展示页面
- 博客管理页面
- 博客内容编辑页面
数据存储要实现的功能
- 服务器存储 markdown 格式的数据
- 前端通过 editor.md 这个工具将markdown的文档内容提交给服务器, 或者解析服务器返回的 markdown 作为 前端页面内容.
详细设计:
数据库设计
对于博客管理而言,一个博客除了自己的编号外,一但博客量比较大,我们还需要标签来对其进行管理。所以我们的数据库需要两张表
对于博客表,那么它肯定有博客编号,标题,正文,创建时间,还有所对应的标签信息
drop table if exists blog_table
create table blog_table(blog_id int(6) not null primary key auto_increment,title varchar(50),content text,tag_id int,create_time varchar(50));
对于标签表而言,我们只需要有标签的编号,和标签所对应的名字即可
drop table if exists tag_table
create table tag_table(tag_id int not null primary key auto_increment ,tag_name varchar(50)
);
有了这两张表后接下来我们就要实现服务器端的程序了
博客管理API的设计
新增博客
POST/blog
{title:xxxx,content:xxxx,create_time:xxxx,tag_id:xxxxx,
}
成功返回一个:
HTTP/1.1 200 OK
{ok:truereason: " " //失败的原因
}
展示博客列表
GET/blog //获取所有
GET/blog?tag_id = 1; //按照标签来筛选HTTP/1.1 200 OK
[{blog_id:1,title:"我的第一篇博客",create_time:"2019/--/--"tag_id:1 },
]
展示博客详细内容
GET/blog/:blog_id //冒号后面代表一个真正的博客id,是一个数字。类似于/blog/10HTTP/1.1 200 OK
{"blog_id":1,"title":"我的第一篇博客",create_time:"2019/--/--",tag_id:1
}
删除博客
DELETE/blog/:blog_idHTTP/1.1 200 OK
{ok:true;
}
修改博客
PUT/blog/:blog_id
{title:"修改后的标题",content:"修改之后的正文",tag_id:"修改之后的tag_id",
}HTTP/1.1 200 OK
{ok:true
}
标签相关API
新增标签
POST/tag
{"tag_name": "新增的标签名"
}HTTP/1.1 200 OK
{ok:true
}
删除标签
DELETE/tag/:tag_idHTTP/1.1 200 OK
{ok:true
}
查看所有标签
GET/tagHTTP/1.1 200 OK
[{tag_id:1,tag_name:c++}
]
服务器端的实现
由于数据库封装和服务器端封装代码比较多,所以另写两篇博客
对数据库操作进行封装
封装数据库
对服务器操作进行封装
服务器封装的链接
客户端实现
HTML-----网页的骨架
CSS-----网页的样式(大小/颜色/位置/边框/...)
JavaScript-----网页和用户之间的交互动作
我并没有专门学过前端,但是考虑到开发项目客户端,我还是专门学了一些简单前端知识
JS教程 css教程 HTML教程
最后综合各种的前端开发语言,我还是决定选择用JQuery+Vue.js来实现
使用 Vue.js
为什么使用Vue.js。?
因为它的开源社区是中文的,而且作者是中国人(尤雨溪),既然是中国人肯定按照中国人的思维开发出的vue.js。所以因该用起来不是很难
网页中需要动态交互的部分, 使用 JS 来实现. 但是原生的基于 Dom API 的交互方式比较麻烦, 因此 Vue.js 提供了更简
单更方便的做法.
使用ajax来获取数据
ajax具体操作学习----->学习网站
具体操作
使用markdown
提交,存储博客的时候,都可以用markdown格式的数据来表示,展示的时候,就自动把markdown数据转成html格式的数据
我们需要第三方库来实现这样的操作,Editor.md第三方的JS库,完成markdown和html相互转换,以及markdown在线编辑器的功能
具体的操作需要看官网介绍
http://editor.md.ipandao.com/
1. 博客列表页
2.博客详情页
以上实现由于html静态网页实在是代码量比较大,不方便在此展示,只能放到GitHub上,如果有需要请自行下载
上面两个页面都是给大家看的
而下面的页面则是只能自己看
3.博客管理页面
删除博客
编辑博客:点击博客进入编辑页面,编辑页面中应该有一个
插入博客:markdown编辑器,编辑器里的内容已经是博客当前内容了,编辑完成后,点击提交按钮,就把服务器发送到服务器上
具体实现
由于前端代码量过大,不易展示,访问下面网站查看详情
https://github.com/514467952/Private-blog_workstation.git
测试
在完成三个面的实现后,我们需要对整个项目进行测
测试方式:在数据库和服务器相应功能实现上,采用单元测试,且测试方法采用白盒测试
具体的测试代码均在上面的网址。
文件加载测试:按钮中实现跳转页面,确认是否能够跳转
总体测试:完整操作,验证是否能和功能对应
项目效果展示
首页展示
查看博客页面
后台管理博客页面
后台插入博客页面
维护
- 这是一个轻量级的项目,目前只针对单人使用。以后等我技能提升后,会支持多用户登陆并进行操作。
- 底层用的httplib的库,这个底层实现了多线程,可以支持多用户访问。
- 目前实现的功能,尚且只有博客的增删改查,虽然关于标签的增改,后台功能已实现,但由于本人前端编程语言并不是很熟所以还无法实现
- 博客的内容不易过长,因为本人端编程语言不是很熟,没有实现翻页的功能,
完整代码
https://github.com/514467952/Private-blog_workstation.git