【从零到一，C++项目实战】CineShare++（基于C++的视频点播系统）

在这里插入图片描述

🌈个人主页：南桥几晴秋
🌈C++专栏：南桥谈C++
🌈C语言专栏： C语言学习系列
🌈Linux学习专栏：南桥谈Linux
🌈数据结构学习专栏：数据结构杂谈
🌈数据库学习专栏：南桥谈MySQL
🌈Qt学习专栏：南桥谈Qt
🌈菜鸡代码练习：练习随想记录
🌈git学习：南桥谈Git

🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈 本科在读菜鸡一枚，指出问题及时改正

文章目录

前言
开发环境
第三方库
- jsoncpp
- Mysql 数据库 API 认识
- httplib
项目实现
- 服务端工具类实现
- - 文件实用工具类
  - - 完整代码
    - 功能测试
  - Json实用工具类实现
  - 功能测试
- 服务端数据管理功能
- - 视频数据表的设计
  - 数据管理类设计
  - - 功能测试
- 服务端业务处理模块
- - 网络通信接口设计
  - 业务处理类模块设计
  - - 功能测试
- 前端界面实现

前言

项目源代码：代码仓库

开发环境

项目名称：CineShare++（基于C++的视频点播系统）

项目功能：搭建一个共享点播系统，服务器能够支持用户通过前端浏览器进行访问，提供清晰的展示、观看和操作界面。该系统不仅可以实现视频的上传功能，还能满足用户观看视频的需求。同时，系统还具备基本的管理功能，包括视频的增、删、改、查等操作，以便管理员对视频内容进行有效管理和维护。通过此系统，用户可以便捷地上传和浏览视频，管理员则能确保内容的有序管理与更新。

开发环境包括：Ubuntu 22.04 操作系统，VSCode 编辑器，g++ 编译器，gdb 调试工具，以及 Makefile 构建工具。

技术特点包括：HTTP 服务器搭建、RESTful 风格接口设计、JSON 序列化处理、线程池管理，以及 HTML、CSS 和 JavaScript 基础开发。这些技术共同支持系统的高效性、可扩展性和用户体验。

项目模块：

数据管理模块：基于Mysql进行数据管理
业务处理模块：基于httplib搭建http，使用RESTful 风格接口设计处理客户端需求
前端界面模块：基于基础的HTML+CSS+JS完成基于简单模板前端界⾯的修改与功能完成

第三方库

jsoncpp

json 是⼀种数据交换格式，采⽤完全独⽴于编程语⾔的⽂本格式来存储和表⽰数据。

这个第三方库在文章【Linux网络编程】应用层：自定义协议 | 序列化和反序列化 | 系统角度理解read、write、recv、 send 和 tcp 为什么支持全双工 | 实现网络版计算器 | jsoncpp库中介绍过以及了解如何安装jsoncpp库。

json 数据类型：对象，数组，字符串，数字
对象：使⽤花括号 {} 括起来的表⽰⼀个对象。
数组：使⽤中括号 [] 括起来的表⽰⼀个数组。
字符串：使⽤常规双引号 "" 括起来的表⽰⼀个字符串

在本项目直接使用jsoncpp的接口，不需要我们自己去写字符串序列化与反序列化，这样减少了项目的开发周期。

jsoncpp实现的功能：

实现json格式的序列化与反序列化
完成将多个数据对象组织称为json格式字符串
完成将json格式字符串解析得到多个数据对象

这三个功能主要借助三个类以及对应的成员函数来实现的：

Json::Value：主要实现中间数据的存储

class Json::Value{Value &operator=(const Value &other); //Value重载了[]和=，因此所有的赋值和获取数据都可以通过Value& operator[](const std::string& key);//简单的⽅式完成 val["姓名"] = "⼩明";Value& operator[](const char* key);Value removeMember(const char* key);//移除元素const Value& operator[](ArrayIndex index) const; //val["成绩"][0]Value& append(const Value& value);//添加数组元素val["成绩"].append(88);ArrayIndex size() const;//获取数组元素个数 val["成绩"].size();std::string asString() const;//转string string name =val["name"].asString();const char* asCString() const;//转char* char *name =val["name"].asCString();Int asInt() const;//转int int age = val["age"].asInt();float asFloat() const;//转floatbool asBool() const;//转 bool
};

JSON_API StreamWriter类：用于对Json::Value中数据进行序列化

class JSON_API StreamWriter {virtual int write(Value const& root, std::ostream* sout) = 0;
}

JSON_API CharReader：实现反序列化，解析得到的对象存储到Json::Value中

class JSON_API CharReader {virtual bool parse(char const* beginDoc, char const* endDoc,Value* root, std::string* errs) = 0;
}

将Value中存储的数据转换成Json字符串，实现序列化：

#include<iostream>
#include<sstream>
#include<string>
#include<memory>
#include<jsoncpp/json/json.h>int main()
{const char *name = "Gavin";int age = 21;float score[] = {150, 149, 148};Json::Value val;val["Name"] = name;val["Age"] = age;val["Score"].append(score[0]);val["Score"].append(score[1]);val["Score"].append(score[2]);Json::StreamWriterBuilder swb;// 设置 JSON 输出不转义 Unicode 字符//swb.settings_["indentation"] = "";  // 去掉缩进swb.settings_["ensureAscii"] = false;  // 使中文字符不被转义std::unique_ptr<Json::StreamWriter> sw(swb.newStreamWriter());std::stringstream ss;int ret = sw->write(val,&ss);if(ret != 0){std::cout<<"write failed!\n";return -1;}std::cout << ss.str() <<std::endl;return 0;
}

在这里插入图片描述

将Json字符串转换到原始格式，实现反序列化：

void unserialize(const std::string &str)
{Json::Value val;Json::CharReaderBuilder crb;std::unique_ptr<Json::CharReader> cr(crb.newCharReader());std::string err;bool ret = cr->parse(str.c_str(),str.c_str()+str.size(),&val,&err);if(ret==false){std::cout << "parse failed\n";return ;}std::cout << val["Name"] <<std::endl;std::cout << val["Age"] <<std::endl;int sz = val["Score"].size();for(int i=0;i<sz;i++)std::cout << val["Score"][i] <<std::endl;
}int main()
{//serialize();std::string str = R"({"Name":"Gavin", "Age":"22", "Score":[66, 77, 88]})";unserialize(str);return 0;
}

在这里插入图片描述

Mysql 数据库 API 认识

MySQL操作句柄初始化

MYSQL *mysql_init(MYSQL *mysql)；

连接MySQL服务器

MYSQL *mysql_real_connect(MYSQL *mysql, const char *host, const char *user,const char *passwd,const char *db, unsigned int port,
const char *unix_socket, unsigned long client_flag);//mysql--初始化完成的句柄
//host---连接的mysql服务器的地址
//user---连接的服务器的⽤⼾名
//passwd-连接的服务器的密码
//db ----默认选择的数据库名称
//port---连接的服务器的端⼝： 默认0是3306端⼝
//unix_socket---通信管道⽂件或者socket⽂件，通常置NULL
//client_flag---客⼾端标志位，通常置0
//返回值：成功返回句柄，失败返回NULL
//设置当前客⼾端的字符集

设置当前客户端的字符集

int mysql_set_character_set(MYSQL *mysql, const char *csname)//mysql--初始化完成的句柄
//csname--字符集名称，通常："utf8"
//返回值：成功返回0， 失败返回⾮0；
//选择操作的数据库

选择操作的数据库

int mysql_select_db(MYSQL *mysql, const char *db)

执行sql语句：

int mysql_query(MYSQL *mysql, const char *stmt_str)
//mysql--初始化完成的句柄
//stmt_str--要执⾏的sql语句

保存查询结果到本地

MYSQL_RES *mysql_store_result(MYSQL *mysql)

获取结果集中的⾏数与列数

uint64_t mysql_num_rows(MYSQL_RES *result)；
//result--保存到本地的结果集地址
//返回值：结果集中数据的条数unsigned int mysql_num_fields(MYSQL_RES *result)
//result--保存到本地的结果集地址
//返回值：结果集中每⼀条数据的列数

遍历结果

MYSQL_ROW mysql_fetch_row(MYSQL_RES *result)
//result--保存到本地的结果集地址
//返回值：实际上是⼀个char **的指针，将每⼀条数据做成了字符串指针数组 row[0]-第0列row[1]-第1列
//并且这个接⼝会保存当前读取结果位置，每次获取的都是下⼀条数据

释放结果集

oid mysql_free_result(MYSQL_RES *result)
//result--保存到本地的结果集地址
//返回值：void

关闭数据库客⼾端连接，销毁句柄

void mysql_close(MYSQL *mysql)

获取mysql接口执⾏错误原因

const char *mysql_error(MYSQL *mysql)

测试样例：

#include <stdio.h>
#include <unistd.h>
#include <stdlib.h>
#include <string.h>
#include <mysql/mysql.h>void add(MYSQL *mysql)
{char *sql = "insert into test_tb values(NULL, 22, '小高', 88);";int ret = mysql_query(mysql, sql);if (ret != 0){printf("mysql query failed, err: %d, error: %s\n", mysql_errno(mysql), mysql_error(mysql));return;}
}void mod(MYSQL *mysql)
{char *sql = "update test_tb set age=25 where name='小高';";int ret = mysql_query(mysql,sql);if (ret != 0){printf("mysql query failed, err: %d, error: %s\n", mysql_errno(mysql), mysql_error(mysql));return;}
}void del(MYSQL *mysql)
{char *sql = "delete from test_tb where name='小高';";int ret = mysql_query(mysql,sql);if (ret != 0){printf("mysql query failed, err: %d, error: %s\n", mysql_errno(mysql), mysql_error(mysql));return;}
}void get(MYSQL *mysql)
{char *sql = "select * from test_tb;";int ret = mysql_query(mysql, sql);if (ret != 0){printf("mysql query failed, err: %d, error: %s\n", mysql_errno(mysql), mysql_error(mysql));return;}MYSQL_RES *res = mysql_store_result(mysql);if (res == NULL){printf("mysql store result error:%s\n", mysql_error(mysql));return;}int row = mysql_num_rows(res);int col = mysql_num_fields(res);printf("%10s%10s%10s%10s\n", "ID", "年龄", "姓名", "成绩");for (int i = 0; i < row; i++){MYSQL_ROW row_data = mysql_fetch_row(res);for (int i = 0; i < col; i++){printf("%10s", row_data[i]);}printf("\n");}mysql_free_result(res);return;
}int main()
{MYSQL *mysql = mysql_init(NULL);if ((mysql_real_connect(mysql, "127.0.0.1", "root", "123456", "test_db", 0, NULL, 0)) == NULL){printf("mysql connect failed: %d, error: %s\n", mysql_errno(mysql), mysql_error(mysql));return -1;}mysql_set_character_set(mysql, "utf8");//add(mysql);//add(mysql);//mod(mysql);//del(mysql);get(mysql);mysql_close(mysql);  // 关闭连接return 0;
}

httplib

httplib 库，⼀个 C++11 单⽂件头的跨平台HTTP/HTTPS库。

httplib 库实际上是⽤于搭建⼀个简单的 http 服务器或者客户端的库，这种第三⽅⽹络库，可以让我们免去搭建服务器或客⼾端的时间，把更多的精⼒投⼊到具体的业务处理中，提⾼开发效率。

在这里插入图片描述

测试用例

#include"./httplib.h"
using namespace httplib;void HelloGavin(const Request &req, Response &rsp)
{rsp.body = "Hello Gavin!";rsp.status = 200;
}
void Numbers(const Request &req, Response &rsp)
{std::string num = req.matches[1]; // matches存放正则表达式匹配的规则数据，也就是()里面单独捕捉的数据rsp.set_content(num, "Text/plain");rsp.status = 200; // 向rsp.body里面添加数据
}
void Multipart(const Request &req, Response &rsp)
{if(req.has_file("file1") == false){rsp.status = 100;return;}const auto& file = req.get_file_value("file1");    std::cout << file.filename << std::endl;std::cout << file.content << std::endl;rsp.status = 200;
}
int main()
{Server server;// 设置一个静态资源目录server.set_mount_point("/","./www");// 添加请求：处理函数映射信息server.Get("/hi",HelloGavin);// 正则表达式：\d表示数字，+表示匹配匹配前面的字符一次或者多次，（）表示单独捕捉数据server.Get("/numbers/(\\d+)",Numbers);server.Post("/multipart",Multipart);server.listen("0.0.0.0", 8888);return 0;
}

在这里插入图片描述

项目实现

服务端工具类实现

文件实用工具类

在视频点播系统中因为涉及到⽂件上传，需要对上传的⽂件进⾏备份存储，因此⾸先设计封装⽂件操作类，这个类封装完毕之后，则在任意模块中对⽂件进⾏操作时都将变的简单化。

功能：

获取文件大小（属性）
判断文件是否存在
向文件写入数据
从文件读取数据
针对目录文件多创建一个目录

工具类的框架

namespace aod
{class FileUtil {public:FileUtil(const std::string name):_name(name){}bool Exists(); // 判断文件是否存在size_t Size(); // 获取文件大小bool ReadContent(std::string *body); // 读取文件数据到body中bool WriteContent(const std::string &body); //向文件写入数据bool CreateDirectory(); // 针对目录创建目录private:std::string _name;};
}

判断文件是否存在

调用Linux中access（）函数：

#include <unistd.h>
int access(const char *pathname, int mode);

成功返回0，否则出错返回-1

FileUtil(const std::string name):_name(name){}
// 判断文件是否存在
bool Exists()
{int ret = access(_name.c_str(), F_OK); // F_OK专门用于检测文件是否存在：存在返回0，不存在返回-1if(ret != 0) return false;return true;
}

获取文件大小

Linux中获取文件属性可以调用stat()函数

 #include <sys/types.h>#include <sys/stat.h>#include <unistd.h>int stat(const char *pathname, struct stat *statbuf);

功能实现：

// 获取文件大小
size_t Size()
{if(this->Exists() == false) return 0;struct stat st;int ret = stat(_name.c_str(), &st);if(ret != 0) return 0;return st.st_size;
}

读取文件数据到body中

实例化一个文件输入流
以二进制形式打开文件
获取文件大小
重置缓冲区大小
将文件依次输入到缓冲区中
成功后关闭文件

        // 读取文件数据到body中bool ReadContent(std::string *body){std::ifstream ifs;ifs.open(_name, std::ios::binary); // 以二进制方式打开if(ifs.is_open() == false){std::cout << "open failed!\n";return false;}size_t flen = this->Size();body->resize(flen);ifs.read(&(*body)[0], flen);//body[0] 是 std::string 对象的第一个字符，而不是字符串的底层缓冲区地址// (*body) 获取指针 body 指向的 std::string 对象，//然后 (*body)[0] 获取该字符串的第一个字符，&(*body)[0] 获取该字符的地址，也就是底层数据的起始位置if(ifs.good() == false){std::cout << "read file content failed!\n";ifs.close();return false;}ifs.close();return true;}

向文件写入数据

实例化一个文件输出流
以二进制形式打开
写入数据
写入成功后关闭文件

 //向文件写入数据bool WriteContent(const std::string &body){std::ofstream ofs;ofs.open(_name, std::ios::binary); // 以二进制方式打开if(ofs.is_open() == false){std::cout << "open failed!\n";return false;}ofs.write(body.c_str(), body.size());if(ofs.good() == false){std::cout << "write file content failed!\n";ofs.close();return false;}ofs.close();return true;}

针对目录创建目录

在Linux中调用mkdir()函数：

#include <sys/stat.h>
#include <sys/types.h>
int mkdir(const char *pathname, mode_t mode);

功能实现：

 // 针对目录创建目录bool CreateDirectory(){if(this->Exists()) return true;mkdir(_name.c_str(),0777);return true;}

完整代码

#ifndef __MY_UTIL__
#define __MY_UTIL__
#include<iostream>
#include<fstream>
#include<string>
#include<unistd.h>
#include<sys/stat.h>
#include<sys/types.h>namespace aod
{class FileUtil {public:FileUtil(const std::string name):_name(name){}// 判断文件是否存在bool Exists(){int ret = access(_name.c_str(), F_OK); // F_OK专门用于检测文件是否存在：存在返回0，不存在返回-1if(ret != 0){std::cout << "file is not exists!\n";return false;}return true;}// 获取文件大小size_t Size(){if(this->Exists() == false) return 0;struct stat st;int ret = stat(_name.c_str(), &st);if(ret != 0) {std::cout << "get file stat failed!\n";   return 0;}return st.st_size;}// 读取文件数据到body中bool ReadContent(std::string *body){std::ifstream ifs;ifs.open(_name, std::ios::binary); // 以二进制方式打开if(ifs.is_open() == false){std::cout << "open failed!\n";return false;}size_t flen = this->Size();body->resize(flen);ifs.read(&(*body)[0], flen);//body[0] 是 std::string 对象的第一个字符，而不是字符串的底层缓冲区地址// (*body) 获取指针 body 指向的 std::string 对象，//然后 (*body)[0] 获取该字符串的第一个字符，&(*body)[0] 获取该字符的地址，也就是底层数据的起始位置if(ifs.good() == false){std::cout << "read file content failed!\n";ifs.close();return false;}ifs.close();return true;}//向文件写入数据bool WriteContent(const std::string &body){std::ofstream ofs;ofs.open(_name, std::ios::binary); // 以二进制方式打开if(ofs.is_open() == false){std::cout << "open failed!\n";return false;}ofs.write(body.c_str(), body.size());if(ofs.good() == false){std::cout << "write file content failed!\n";ofs.close();return false;}ofs.close();return true;}// 针对目录创建目录bool CreateDirectory(){if(this->Exists()) return true;mkdir(_name.c_str(),0777);return true;}private:std::string _name;};
}#endif

功能测试

void FileTest1()
{aod::FileUtil("./www").CreateDirectory();aod::FileUtil("./www/index.html").WriteContent("<html></html>");std::string body;aod::FileUtil("./www/index.html").ReadContent(&body);std::cout << body << std::endl;std::cout << aod::FileUtil("./www/index.html").Size() <<std::endl;
}

在这里插入图片描述

Json实用工具类实现

主要实现功能：

实现序列化
实现反序列化

工具框架

// Json工具类
class JsonUtil
{
public:static bool Serialize(const Json::Value &value ,std::string *body);static bool Unserialize(const std::string &body, Json::Value *value);
};

序列化

Json::StreamWriterBuilder：这是 JsonCpp 提供的一个构建器，用于配置并生成一个流写入器 StreamWriter。该写入器负责将 Json::Value 转换为 JSON 格式的字符串。
std::unique_ptr<Json::StreamWriter> sw(swb.newStreamWriter())：创建一个流写入器对象 sw，它会根据 StreamWriterBuilder 中的配置来序列化 JSON 数据。
std::stringstream ss：一个字符串流，用于暂时存储序列化后的结果。
sw->write(value, &ss)：执行序列化操作，将 value 序列化到字符串流 ss 中。write 函数返回值为 0 时表示成功，非 0 则表示失败。
*body = ss.str()：将字符串流 ss 中的内容转换为字符串，并赋值给 body。

static bool Serialize(const Json::Value &value ,std::string *body)
{Json::StreamWriterBuilder swb;std::unique_ptr<Json::StreamWriter> sw(swb.newStreamWriter());std::stringstream ss;int ret = sw->write(value, &ss);if(ret != 0){std::cout << "Serialize failed!\n";return;}*body = ss.str();return true;
}static bool Unserialize(const std::string &body, Json::Value *value);
};

反序列化

定义一个智能指针对象
将智能指针指向的对象直接反序列化
反序列化成功直接将结果传给了vlaue

static bool Unserialize(const std::string &body, Json::Value *value)
{Json::CharReaderBuilder crb;std::unique_ptr<Json::CharReader> cr(crb.newCharReader());std::string err;bool ret = cr->parse(body.c_str(), body.c_str() + body.size(), value, &err);if(ret == false){std::cout << "Unserialize failed!\n";return false;}return true;
}

功能测试

void JsonTest1()
{Json::Value val;val["Name"] = "Gavin";val["Sex"] = "man";val["Age"] = 21;val["Score"].append(110.5);   val["Score"].append(110.5);   val["Score"].append(120.5);std::string body;aod::JsonUtil::Serialize(val, &body);std::cout << body <<std::endl;Json::Value stu;aod::JsonUtil::Unserialize(body, &stu);std::cout << stu["Name"].asString() <<std::endl;   std::cout << stu["Sex"].asString() <<std::endl;   std::cout << stu["Age"].asString() <<std::endl;for(auto &a : stu["Score"]){std::cout << a.asFloat() <<std::endl;}   
}

在这里插入图片描述

服务端数据管理功能

视频数据表的设计

使用 MySQL数据库管理视频信息，只管理视频及图片的信息，视频以及图片是存储的文件中。

本项目中只是完成一个简单的视频信息表：

视频ID
视频名称
视频描述信息
视频文件的url路径（只是链接）
视频封面图片的url路径（只是链接）

create database if not exists aod_system;
use aod_system;
create table if not exists tb_video(
id int primary key auto_increment comment '视频ID',
name varchar(32) comment '视频名称',
info text comment '视频描述',
video varchar(256) comment '视频⽂件url，加上静态资源根⽬录就是实际存储路径',
image varchar(256) comment '封⾯图⽚⽂件url，加上静态资源根⽬录就是实际存储路径'
);

在这里插入图片描述

数据管理类设计

本模块主要为了实现对数据库的增删查改管理，但是实际的项目中，会存在多个表，每个表要操作的数据不一样，因此对数据进行增删查改时需要为每一个表进行创建一个类。

视频操作：

新增
修改
删除
查询所有
查询单个
模糊匹配

视频信息在接口直接的传递因为字段数量可能很多，因此需要用Json::Value对象进行存储

基本框架

static MYSQL *MysqlInit();
static void MysqlDestory();
static bool MysqlQuery(MYSQL *mysql, const std::string &sql);
class TableVideo
{
public:TableVideo();~TableVideo();bool Insert(const Json::Value &video);bool Update(int video_id, const Json::Value &video);bool Delete(int video_id);bool SelectAll(Json::Value *videos);bool SelectOne(int video_id, const Json::Value *video);bool SelectLike(const std::string &key, Json::Value *videos);
private:MYSQL *mysql;std::mutex _mutex;
};

初始化

初始化一个句柄
建立连接
设置字符集
将初始化的句柄返回给外部

static MYSQL *MysqlInit()
{MYSQL *mysql = mysql_init(NULL);if(mysql == NULL){std::cout << "Init failed!\n";return NULL;}if(mysql_real_connect(mysql, HOST, USER, PASS, NAME, 0, NULL, 0) ==NULL){std::cout << "connect failed!\n";mysql_close(mysql);return NULL;}mysql_set_character_set(mysql,"utf8");return mysql;
}

销毁

句柄不为空时直接销毁即可

static void MysqlDestory(MYSQL *mysql)
{if(mysql != NULL){mysql_close(mysql);}return;
}

语句执行

static bool MysqlQuery(MYSQL *mysql, const std::string &sql)
{int ret = mysql_query(mysql, sql.c_str());if(ret != 0){std::cout << sql << std::endl;std::cout << mysql_error(mysql) << std::endl;return false; }return true;
}

构造与析构

直接调用初始化接口以及销毁接口

TableVideo()
{_mysql = MysqlInit();if(_mysql == NULL) exit(-1);
}~TableVideo()
{MysqlDestory(_mysql);
}

新增操作

定义一个sql表示查询语句
调整sql的大小
设置一个sql语句模版
格式化字符串填充语句

bool Insert(const Json::Value &video)
{std::string sql;sql.resize(4096 + video["info"].asString().size()); // 防止简介过长#define INSERT_VIDEO "INSERT tb_video values(null, '%s', '%s', '%s', '%s');"sprintf(&sql[0], INSERT_VIDEO, video["name"].asString(),video["info"].asString(),video["video"].asString(),video["image"].asString());return MysqlQuery(_mysql,sql);
}

修改操作

bool Update(int video_id, const Json::Value &video)
{std::string sql;sql.resize(4096 + video["info"].asString().size()); // 防止简介过长#define UPDATE_VIDEO "update tb_video set name='%s', info='%s' where id=%d;"sprintf(&sql[0], UPDATE_VIDEO, video["name"].asString(),video["info"].asString(),video_id);return MysqlQuery(_mysql,sql);
}

删除操作

bool Delete(int video_id)
{#define DELETE_VIDEO "delete from tb_video where id=%d;"char sql[1024] = {0};sprintf(sql, DELETE_VIDEO, video_id);return MysqlQuery(_mysql, sql);
}

查询所有数据

类实例化的对象可能在多线程环境下，因此需要保证在查询结果后将数据保存到本地操作时原子的，避免一个线程还没有保存到本地，另一个线程开始查询，此时线程就会
处理查新结果：将查询到的结果存储在MYSQL_RES结构体中
遍历查询结果：
- mysql_num_rows(res)：获取查询结果的行数，即视频记录的数量
- mysql_fetch_row(res)：遍历查询结果集，返回当前行的数据（每行是一个MYSQL_ROW 数组）
- 在遍历过程中，使用atoi 函数将 row[i] 转换为整数并赋值给 video 对象的相应字段

bool SelectAll(Json::Value *videos)
{#define SELECTALL_VIDEO "select * from tb_video;"_mutex.lock();bool ret = MysqlQuery(_mysql, SELECTALL_VIDEO);if(ret == false){_mutex.unlock();return false;}MYSQL_RES *res = mysql_store_result(_mysql);if(res == NULL){std::cout << "mysql store result failed!\n";_mutex.unlock();return false;}_mutex.unlock();int num_rows = mysql_num_rows(res);for(int i = 0; i < num_rows; i++){MYSQL_ROW row = mysql_fetch_row(res);Json::Value video;video["id"] = atoi(row[0]);video["name"] = atoi(row[1]);video["info"] = atoi(row[2]);video["video"] = atoi(row[3]);video["image"] = atoi(row[4]);videos->append(video);}mysql_free_result(res);return true;
}

查询单个数据

bool SelectOne(int video_id, Json::Value *video)
{#define SELECTONE_VIDEO "select * from tb_video where id=%d;"char sql[1024] = {0};sprintf(sql, SELECTONE_VIDEO, video_id);_mutex.lock();bool ret = MysqlQuery(_mysql, sql);if(ret == false){_mutex.unlock();return false;}MYSQL_RES *res = mysql_store_result(_mysql);if(res == NULL){std::cout << "mysql store result failed!\n";_mutex.unlock();return false;}_mutex.unlock();int num_rows = mysql_num_rows(res);if(num_rows != 1){std::cout << "hace no data!\n";mysql_free_result(res);return false;}MYSQL_ROW row = mysql_fetch_row(res);(*video)["id"] = video_id;(*video)["name"] = row[1];(*video)["info"] = row[2];(*video)["video"] = row[3];(*video)["image"] = row[4];mysql_free_result(res);return true;            
}

模糊匹配

bool SelectLike(const std::string &key, Json::Value *videos)
{#define SELECTLIKE_VIDEO "select * from tb_video where name like '%%%s%%';"char sql[2014] = {0};sprintf(sql, SELECTLIKE_VIDEO, key.c_str());_mutex.lock();bool ret = MysqlQuery(_mysql, sql);if(ret == false){_mutex.unlock();return false;}MYSQL_RES *res = mysql_store_result(_mysql);if(res == NULL){std::cout << "mysql store result failed!\n";_mutex.unlock();return false;}_mutex.unlock();int num_rows = mysql_num_rows(res);for(int i = 0; i < num_rows; i++){MYSQL_ROW row = mysql_fetch_row(res);Json::Value video;video["id"] = atoi(row[0]);video["name"] = atoi(row[1]);video["info"] = atoi(row[2]);video["video"] = atoi(row[3]);video["image"] = atoi(row[4]);videos->append(video);}mysql_free_result(res);return true;        
}

功能测试

void DataTest()
{aod::TableVideo tb_video;Json::Value video;// video["name"] = "Jhon";// video["info"] = "a man but not a student";// video["video"] = "/video/man.ma4";// video["image"] = "/image/man.jpg";//tb_video.Insert(video);// tb_video.Update(2, video);// tb_video.SelectAll(&video);// tb_video.SelectOne(1, &video);// tb_video.SelectLike("Gavin", &video);// std::string body;// aod::JsonUtil::Serialize(video, &body);// std::cout << body <<std::endl;tb_video.Delete(2);
}

服务端业务处理模块

网络通信接口设计

http协议其实是一种数据格式，是一个tcp传输，在应用层采用的一种数据特定格式

网络通信接口设计就是定义好什么样的请求是一个查询请求，什么的请求是一个删除请求。

服务端提供的功能：新增视频、删除视频、修改视频、查询所有视频信息、查询单个视频、模糊匹配视频

接口设计：使用restful接口设计
RESTful 架构可以充分的利⽤HTTP协议的各种功能，是 HTTP 协议的最佳实践，正⽂通常采⽤ JSON 格式，使用GET表示查询，POST表示新增，PUT表示修改，DELETE表示删除，并且正文资源数据采用json、html格式。

业务处理类模块设计

本项目中，业务处理主要包含两个功能：

网络通信功能的实现
业务功能处理的实现

业务处理模块负责与客⼾端进⾏⽹络通信，接收客⼾端的请求，然后根据请求信息，明确客户端端用户的意图，进⾏业务处理，并进⾏对应的结果响应。

网络通信借助httplib库即可快速搭建，因此完成此项目重点就可以在业务处理中。

业务处理功能包括：

客户端的视频数据和信息上传
客户端视频列表显示（查询所有视频信息）
客户端数据观看请求（视频数据的获取）
客户端对视频的其他管理（删除、修改）

业务处理模块框架

#include"data.hpp"
#include"httplib.h"namespace aod
{
#define WWWROOT "./www"
#define VIDEO_ROOT "./video/"   // 实际上是"./www/video/"
#define VIDEO_IMAGE "./image"TableVideo *tb_video = NULL;class Server{public:Server(int port): _port(port){}bool RunModule();private:int _port;httplib::Server _ser;private:static void Insert(const httplib::Request &req, httplib::Response &res); // 这里需要定义成一个静态成员函数// 静态成员函数的参数不包括this指针，确保这个函数只有两个参数static void Update(const httplib::Request &req, httplib::Response &res);static void Delete(const httplib::Request &req, httplib::Response &res);static void GetOne(const httplib::Request &req, httplib::Response &res);static void GetAll(const httplib::Request &req, httplib::Response &res);};
}

启动服务器

首先初始化数据管理模块，创建指定的地址
搭建http服务器，使用httplib库

bool RunModule()
{//1.初始化数据管理模块,创建指定的目录tb_video = new TableVideo();FileUtil(WWW_ROOT).CreateDirectory();std::string video_real_path = WWW_ROOT + VIDEO_ROOT;FileUtil(video_real_path).CreateDirectory();std::string image_real_path = WWW_ROOT + IMAGE_ROOT;//2.搭建http服务器//a.设置静态资源根目录_srv.set_mount_point("/", WWW_ROOT);//b.添加请求与处理函数的映射管理_srv.Post("/video", Insert);_srv.Delete("/video/(\\d+)", Delete);_srv.Put("/video/(\\d+)", Update);_srv.Get("/video/(\\d+)", GetOne);_srv.Get("/video", GetAll);//c.启动_srv.listen("0.0.0.0", _port);return true;
}

新增数据

从请求中获取文件字段
将文件内容写到指定的路径
创建一个Json对象存储数据到数据库中

static void Insert(const httplib::Request &req, httplib::Response &rsp)
{if(req.has_file("name") == false || req.has_file("info") == false ||req.has_file("video") == false ||req.has_file("image") == false){rsp.status = 400;rsp.body = R"({"result":false, "reason":"上传的数据信息错误"})";rsp.set_header("Content-type", "application/json");                    }auto name = req.get_file_value("name");auto info = req.get_file_value("info");auto video = req.get_file_value("video");auto image = req.get_file_value("image");std::string video_name = name.content;std::string video_info = info.content;std::string video_path = WWW_ROOT + VIDEO_ROOT + name.filename + video.filename;std::string image_path = WWW_ROOT + IMAGE_ROOT + name.filename + image.filename;if((FileUtil(video_path).WriteContent(video.content)) == NULL){rsp.status = 500;rsp.body = R"({"result":false, "reason":"视频文件存储失败"})";rsp.set_header("Content-type", "application/json");}if((FileUtil(image_path).WriteContent(image.content)) == NULL){rsp.status = 500;rsp.body = R"({"result":false, "reason":"图片文件存储失败"})";rsp.set_header("Content-type", "application/json");                }Json::Value video_json;video_json["name"] = video_name;video_json["info"] = video_info;video_json["video"] = VIDEO_ROOT + name.filename + video.filename;video_json["image"] = IMAGE_ROOT + name.filename + image.filename;if((tb_video->Insert(video_json)) == NULL){rsp.status = 500;rsp.body = R"({"result":false, "reason":"新增数据失败"})";rsp.set_header("Content-type", "application/json");                }return ;
}

修改操作

功能测试

void ServerTest()
{aod::Server server(8888);server.RunModule();
}

新增

在这里插入图片描述

查询

在这里插入图片描述

模糊匹配

在这里插入图片描述

修改

在这里插入图片描述

删除视频信息

在这里插入图片描述

前端界面实现

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content=""><meta name="author" content="OrcasThemes"><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><title>Home</title><!-- Bootstrap core CSS --><link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template --><link rel="stylesheet" href="css/screen.css"><link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><![endif]--><link rel="stylesheet" href="css/font-awesome.css"><!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]--><link href="css/lity.css" rel="stylesheet"><style>[v-cloak] {display: none;}</style>
</head>
<body>
<div id="myapp">
<!-- HOME 1 -->
<div id="home1" class="container-fluid standard-bg"><!-- HEADER --><div class="row header-top"><div class="col-lg-3 col-md-6 col-sm-5 col-xs-8"><a class="gwj_logo" href="#"><img src="img/gwj_logo.png" class="main-logo img-responsive" alt="Muvee Reviews" title="Muvee Reviews"></a></div><div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs"></div><div class="col-lg-3 col-md-6 col-sm-7 hidden-xs"><div class="right-box"><button type="button" class="access-btn" data-toggle="modal" data-target="#enquirypopup">新增视频</button></div></div></div><!-- MENU --><div class="row home-mega-menu "><div class="col-md-12"><nav class="navbar navbar-default"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse js-navbar-collapse megabg dropshd "><ul class="nav navbar-nav"><li><a href="index.html">视频点播</a></li></ul><div class="search-block"><form><input type="search" placeholder="Search"></form></div></div><!-- /.nav-collapse --></nav></div></div><!-- CORE --><div class="row"><!-- SIDEBAR --><div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div><!-- HOME MAIN POSTS -->	<div class="col-lg-10 col-md-8"><section id="home-main"><h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>视频列表</h2><div class="row"><!-- ARTICLES --><div class="col-lg-9 col-md-12 col-sm-12"><div class="row auto-clear"><article class="col-lg-3 col-md-6 col-sm-4" v-for="video in videos"><!-- POST L size --><div class="post post-medium"><div class="thumbr"><a class="afterglow post-thumb" v-bind:href="'/video.html?id='+video.id" target="_blank"><span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round" aria-hidden="true"></i></span><div class="cactus-note ct-time font-size-1"><span>02:02</span></div><img class="img-responsive" v-bind:src="video.image" alt="#" v-cloak></a></div><div class="infor"><h4><a class="title" href="#" v-cloak>{{video.name}}</a></h4><span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up" aria-hidden="true"></i>20.895</span><div class="ratings"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o" aria-hidden="true"></i><i class="fa fa-star-o"></i><i class="fa fa-star-half"></i></div></div></div></article></div><div class="clearfix spacer"></div></div><!-- RIGHT ASIDE --><div class="col-lg-3 hidden-md col-sm-12 text-center top-sidebar"></div></div></section></div></div>
</div>
<!-- CHANNELS -->
<div id="channels-block" class="container-fluid channels-bg">
</div>
<!-- BOTTOM BANNER -->
</div>
<!-- FOOTER -->
<div id="footer" class="container-fluid footer-background"><div class="container"><footer><!-- SECTION FOOTER --><div class="row"><!-- SOCIAL --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><div class="row auto-clear"></div></div><!-- TAGS --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div><!-- POST --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div><!-- LINKS --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div></div><div class="row copyright-bottom text-center"><div class="col-md-12 text-center"><a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template"><img src="img/gwj_logo.png" class="img-responsive text-center" alt="Video Magazine Bootstrap HTML5 template"></a>	<p v-cloak>HAUE &copy; Author by Gaowenjun</p></div></div></footer></div>
</div>
<!-- MODAL -->
<div id="enquirypopup" class="modal fade in " role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content row"><div class="modal-header custom-modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>新增视频</h2></div><div class="modal-body"><form name="info_form" class="form-inline" action="/add" method="post" enctype="multipart/form-data"><div class="form-group col-sm-12"><input type="text" class="form-control" name="name" placeholder="输入视频名称"></div><div class="form-group col-sm-12"><input type="text" class="form-control" name="info" placeholder="输入视频简介"></div><div class="form-group col-sm-12"><input type="file" class="form-control" name="video" placeholder="选择视频文件"></div><div class="form-group col-sm-12"><input type="file" class="form-control" name="image" placeholder="选择封面图片"></div><div class="form-group col-sm-12"><button class="subscribe-btn pull-right" type="submit" title="Subscribe">上传</button></div></form></div></div></div>
</div>
</div>
</body><!-- JAVA SCRIPT -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lity.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>$(".nav .dropdown").hover(function() {$(this).find(".dropdown-toggle").dropdown("toggle");});
</script>
<script>let app = new Vue({el: '#myapp',data: {author: "Gaowenjun",videos:[]},methods : {get_allvideos : function() {$.ajax({url: "/video",type: "get",context: this,success : function(result, status, xhr){this.videos = result;}})}}});app.get_allvideos();
</script>
</html>

video.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content=""><meta name="author" content="OrcasThemes"><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><title>Home</title><!-- Bootstrap core CSS --><link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template --><link rel="stylesheet" href="css/screen.css"><link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><![endif]--><link rel="stylesheet" href="css/font-awesome.css"><!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]--><link href="css/lity.css" rel="stylesheet"><style>[v-cloak] {display: none;}</style>
</head>
<body>
<div id="myapp">
<!-- HOME 1 -->
<div id="home1" class="container-fluid standard-bg"><!-- HEADER --><div class="row header-top"><div class="col-lg-3 col-md-6 col-sm-5 col-xs-8"><a class="gwj_logo" href="#"><img src="img/gwj_logo.png" class="main-logo img-responsive" alt="Muvee Reviews" title="Muvee Reviews"></a></div><div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs"></div><div class="col-lg-3 col-md-6 col-sm-7 hidden-xs"><div class="right-box"><button type="button" class="access-btn" data-toggle="modal" data-target="#enquirypopup">新增视频</button></div></div></div><!-- MENU --><div class="row home-mega-menu "><div class="col-md-12"><nav class="navbar navbar-default"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse js-navbar-collapse megabg dropshd "><ul class="nav navbar-nav"><li><a href="index.html">视频点播</a></li></ul><div class="search-block"><form><input type="search" placeholder="Search"></form></div></div><!-- /.nav-collapse --></nav></div></div><!-- CORE --><div class="row"><!-- SIDEBAR --><div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div><!-- HOME MAIN POSTS -->	<div class="col-lg-10 col-md-8"><section id="home-main"><h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>视频列表</h2><div class="row"><!-- ARTICLES --><div class="col-lg-9 col-md-12 col-sm-12"><div class="row auto-clear"><article class="col-lg-3 col-md-6 col-sm-4" v-for="video in videos"><!-- POST L size --><div class="post post-medium"><div class="thumbr"><a class="afterglow post-thumb" v-bind:href="'/video.html?id='+video.id" target="_blank"><span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round" aria-hidden="true"></i></span><div class="cactus-note ct-time font-size-1"><span>02:02</span></div><img class="img-responsive" v-bind:src="video.image" alt="#" v-cloak></a></div><div class="infor"><h4><a class="title" href="#" v-cloak>{{video.name}}</a></h4><span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up" aria-hidden="true"></i>20.895</span><div class="ratings"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o" aria-hidden="true"></i><i class="fa fa-star-o"></i><i class="fa fa-star-half"></i></div></div></div></article></div><div class="clearfix spacer"></div></div><!-- RIGHT ASIDE --><div class="col-lg-3 hidden-md col-sm-12 text-center top-sidebar"></div></div></section></div></div>
</div>
<!-- CHANNELS -->
<div id="channels-block" class="container-fluid channels-bg">
</div>
<!-- BOTTOM BANNER -->
</div>
<!-- FOOTER -->
<div id="footer" class="container-fluid footer-background"><div class="container"><footer><!-- SECTION FOOTER --><div class="row"><!-- SOCIAL --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><div class="row auto-clear"></div></div><!-- TAGS --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div><!-- POST --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div><!-- LINKS --><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div></div><div class="row copyright-bottom text-center"><div class="col-md-12 text-center"><a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template"><img src="img/gwj_logo.png" class="img-responsive text-center" alt="Video Magazine Bootstrap HTML5 template"></a>	<p v-cloak>HAUE &copy; Author by Gaowenjun</p></div></div></footer></div>
</div>
<!-- MODAL -->
<div id="enquirypopup" class="modal fade in " role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content row"><div class="modal-header custom-modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>新增视频</h2></div><div class="modal-body"><form name="info_form" class="form-inline" action="/add" method="post" enctype="multipart/form-data"><div class="form-group col-sm-12"><input type="text" class="form-control" name="name" placeholder="输入视频名称"></div><div class="form-group col-sm-12"><input type="text" class="form-control" name="info" placeholder="输入视频简介"></div><div class="form-group col-sm-12"><input type="file" class="form-control" name="video" placeholder="选择视频文件"></div><div class="form-group col-sm-12"><input type="file" class="form-control" name="image" placeholder="选择封面图片"></div><div class="form-group col-sm-12"><button class="subscribe-btn pull-right" type="submit" title="Subscribe">上传</button></div></form></div></div></div>
</div>
</div>
</body><!-- JAVA SCRIPT -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lity.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>$(".nav .dropdown").hover(function() {$(this).find(".dropdown-toggle").dropdown("toggle");});
</script>
<script>let app = new Vue({el: '#myapp',data: {author: "Gaowenjun",videos:[]},methods : {get_allvideos : function() {$.ajax({url: "/video",type: "get",context: this,success : function(result, status, xhr){this.videos = result;}})}}});app.get_allvideos();
</script>
</html>