个人博客搭建的总结（后台+数据库+前端）

第n次修改后的总结

• 其实起初我自己写的并不是一个带有后台的静态博客，学着网上的大神做了一个搭载在Github上的博客，不过没有服务器，模板也是直接用Github中的next模板，很好看，也自己加了很多功能，包括鼠标点击的效果以及右下角的小萝莉。

emmm…就是介个样子，不过现在已经废弃了，什么时候把域名备案了就可以重启了，还是这个模板好看点（没错，那个很多小球那里是鼠标点过的，给大家观赏观赏）

• 后来自己买了服务器，买了域名，又开始学习怎么把服务器加上，顺便把ip和域名绑定在一起。申请了幕布，因为懒得拍照，所以一直就搁置下来了。
• 因为也是快毕业了，所以把linux这方面学了很多，准备找个好工作，就试着把这静态博客升华一下，变成彻彻底底自己的博客。后台和前端都自己设计。
• 从开始到现在差不多有半年多了，也学到了很多东西，接触了了node.js，vue.js，editor.md,html,css,ajax等很多插件，都是很有用的。

当前实现的功能有：

• 博客的创建

  这里算是偷懒了吧，创建的时候是发送post请求，用先创建空的表单（时间只能在这时候确定：系统时间），然后得到该博客的id，用id打开编辑页面，将博客内容修改后发布出去。
  缺陷：时间是获取的系统时间，因为获取网络时间比较麻烦，就调用系统时间吧，有机会再统一。

• 博客的修改

  点击修改的时候获取当前博客的id，通过使用id发送put请求获得原来博客的内容，然后修改博客后点击提交按钮调用更新操作。
  缺陷：
  1.博客标题和提交按钮永远分开在两行（调整了多次style属性都改不过来，可能是css里面设置的有问题吧，以后有机会学习到更多的css时候再试着改改吧）
  2.博客修改页面的打开可能会出现界面混乱的情况，原因可能是正文过长，对于数据库来说读取出现问题，或者设置的正文长度不太够

• 博客的查看

  和上面的一样，通过id获得博客的数据，将数据展示出来
  缺陷：博客展示的页面不美观，排版问题很大

• 博客的删除

  这点没什么说的，通过id发送delete请求，将该博客和属性删除，返回一个删除成功的弹框

• 博客列表的展示

  通过向服务器发送get请求，将所有的博客信息全部展示在主页。

• 标签的展示

  标签也是发送的get请求，不过url使用的是标签，能够将数据库中存放的标签展示在侧边栏上

• 博客主页

  这里分为左边和右边区域，左边是文本的展示区，包含博客的标题，创建时间，标签，作者，删除，编辑，查看功能。右边的话是侧边栏，包含标签的展示，友链，和一些关于自己的展示。
  
  ps:博客标题下面那个标签其实是可以修改的，懒得动了，就没有变

总结：
没什么好总结的，大家加油，我也加油，后面的功能再慢慢加上，持续更新吧。

分割线-------------------------------------------2019/8/29-------------------------------------------------
数据库的设计：
因为我们需要做的是一个博客的管理页面。所以这里我创建了两个表，一个用来保存博客信息，一个用来保存标签信息，后续可能会加入分类的信息，毕竟标签代表不了分类。
并且使用MySQL的API来完成数据库的连接和命令的发送，包括mysql_real_escape_string、mysql_query、mysql_error以及mysql_store_result等API
这里用标签的插入来举例

bool Insert(const Json::Value& tag){ 因为我们要传入的参数的json格式的，所以这里用json
	char sql[1024*4];
	sprintf(sql,"insert into tag_table values(null,'%s')",tag["tag_name"].asCString());
	//这里是将MySQL命令写入sql，下面用mysql_query来发送
	int ret = mysql_query(mysql_,sql);
	if(ret!=0){
		printf("插入标签失败！%s\n",mysql_error(mysql_));
		return false;
	}
	printf("插入标签成功");
	return true;
}

服务器的设计：
服务器的设计比较简单，借助的是cpp-httplib工具完成的，自行实现的是报文的组装
这里有它的详细介绍： https://www.ctolib.com/yhirose-cpp-httplib.html
因为http报文的传输以及不需要考虑了，所以我们只需要组装响应就可以了，这里我们借助json的读格式（Reader）和写格式（Writer）对每个请求的响应报文进行组装。
这里以博客的插入为例

//插入博客
server.Post("/blog",[&blog_table](const Request& req,Response& resp){
		printf("新增博客!\n");	
		Json::Reader reader;
		Json::FastWriter writer;
		Json::Value req_json;   //用读格式来将请求解析出来
		Json::Value resp_json;  //再用写格式将响应发送给客户端
		bool ret = reader.parse(req.body,req_json);
		if(!ret){
			printf("解析请求出错！%s\n",req.body.c_str());
			resp_json["ok"] = false;
			resp_json["reason"] = "input data format error!";
			resp.set_content(writer.write(resp_json),"application/json");
			return;
		}
		if(req_json["title"].empty()
		 ||req_json["content"].empty()
		 ||req_json["tag_id"].empty()
		 ||req_json["create_time"].empty())
		 {
		 	printf("请求数据格式有错!%s\n",req.body.c_str());	
		 	resp_json["ok"] = false;
		 	resp_json["reason"] = "input data format error!";
		 	resp.status = 400;
		 	resp.set_content(writer.write(resp_json),"application/json");
			return;
		 }
		 ret = blog_table.Insert(req_json,&resp_json);
		 if(!ret){
		 	printf("博客插入失败!");
		 	resp_json["ok"] = false;
		 	resp_json["reason"] = "blog insert failed";
		 	resp.status = 500;
		 	resp.set_content(writer.write(resp_json),"application/json");
		 	return ;
		 }
		 printf("博客插入成功\n");
     resp_json["ok"] = true;
     resp.set_content(writer.write(resp_json),"application/json");
     return ;
	});

前端的设计：
前端因为平时也没有接触过太多，所以学的不是很深入，页面的布局不做详细的介绍，都是慢慢的查资料看模板改出来的样子，请求的实现这里比较麻烦，使用了jQuery的ajax来发送请求，构建请求报文，其实学起来也比较简单，网上的教程也比较多，主要是this不太能理解

这里写一个新建博客的例子，因为这个实现的比较有趣：

因为对于我前面的编辑博客来说，因为博客的id是自增主键，所以我只能是利用id才能够编辑，我想到的就是先将空信息发送到插入请求，再将编辑框直接打开，这就是一个博客新建的过程，最终通过更新博客完成创建，所以对于这个新建博客来说，我的实现方式并不高效，等以后想到了一次创建的方式再回来提高。

edit_nullblog(){
            var time,year,month,date,hours,minutes,seconds;
            time = new Date();
            year = time.getFullYear();
            month = (time.getMonth()+1)<10?("0"+(time.getMonth()+1)):(time.getMonth()+1);
            date = time.getDate()<10?("0"+time.getDate()):time.getDate();
            hours = time.getHours()<10?("0"+time.getHours()):time.getHours();
            minutes = (time.getMinutes()<10?("0"+time.getMinutes()):time.getMinutes());
            seconds = (time.getSeconds()<10?("0"+time.getSeconds()):time.getSeconds()); 
            time = year+"-"+month+"-"+date+" "+hours+":"+minutes+":"+seconds; 
            var bod ={
                title: " ",
                content: " ",
                tag_id: 1,
                create_time: time,
            }
            $.ajax({
              type: "post",
              url: "/blog",
              data: JSON.stringify(bod),
              context: this, 
              success: function(data,status) {       
                this.blog = data;
                this.edit_blog(this.blog.blog_id); 
              }  
            })
          },