使用VMware+gtk+MobaXterm+subline自己做的一个QQ登录界面的demo

前言

最近在学习linux的开发，主要是设计界面GUI以及代码函数的编写，自己设计一个demo，学校请外面的老师到学校来教linux的开发，然后自己就就根据所学的东西：c语言+数据库sqlite3+gtk自己做了一个QQ的登录界面和注册界面以及进入登录界面的操作界面（操作界面的东西太多太复杂了，就没写了，有感兴趣的可以自己去完善一下）。可以在虚拟机上运行，其中gtk来设计图形界面来进行人机交互，sqlite3为数据库的管理系统实现在注册界面的时候将数据输入其中，登录时输入能在数据库中查询到，其中登录和注册功能实现了和sqlite3的交互。

编译环境

1. 电脑：win11 +64位
2. 代码编译器：sublime
3. 运行环境：本地虚拟机VMware+ubuntu+MobaXterm_Personal_22.1
4. 运行说明：在虚拟机VMware上配置相应的环境之后，使用本地文件通过ip地址共享虚拟文件夹。在sublime中打开文件，进行代码的编写，以及保存（必须要保存才能在虚拟机里面编译），然后再sublime中导入sqlite3.c\sqlite3.h的文件和背景图片的再共享文件夹中的同一个路径中，最后在虚拟机上运行或者MobaXterm里面运行都可以。

登录界面显示

1. 登陆界面

登录的总界面
这其中记住密码和自动登录就是两个按钮带标签的样子，没什么大的作用（纯为了好看）；
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/90aba3d09b71460981c0b0dfc9815206.png#pic_center

2. 登录错误是的界面

这是登录错误时，会有一个小界面来提示
在虚拟机里面也可以看到，会有信息弹出来的

3. 注册的界面

这是注册界面的样子，当输入账号和密码时，点击确定，可以将账号密码存入数据库中，在登录界面的时候输入正确地密码和账户可以进入操作界面。
在虚拟机里面可以看到注册的账户和密码。

4. 操作界面

下图是操作界面的样子
有点抽象，后面要写的东西太多了，点击按钮弹出一个新的窗口，再对那个新窗口进行布局，什么水平布局，垂直布局。。。。。。太多了，很麻烦，索性就摆烂了，其实做到这还是花了不少时间的
这里虚拟机也可以看到账户密码的登录成功与失败，都会有提示的。

代码部分

这是建立登录总界面的函数

void window_main_init(void)
{
    window_main = gtk_window_new(GTK_WINDOW_TOPLEVEL);//设置窗口

	gtk_window_set_title(GTK_WINDOW(window_main),"QQ");//GtkWindow < GtkWidget
	gtk_widget_set_size_request(window_main,500,500);//设置窗口大小
	gtk_window_set_resizable(GTK_WINDOW(window_main),FALSE); //是否可以改变窗口大小
	gtk_window_set_position(GTK_WINDOW(window_main),GTK_WIN_POS_CENTER_ALWAYS);//设置窗口的位子
    
     //创建背景
    change_background(window_main,500,500,"./images/QQ.jpg");
     //创建布局方式
    GtkWidget *table_main = gtk_table_new(10,10,TRUE);
      //将表格布局容器放入窗口主界面
    gtk_container_add(GTK_CONTAINER(window_main),table_main);
     //创建文本标签
     GtkWidget *lable_account = gtk_label_new("账号");
     gtk_table_attach_defaults(GTK_TABLE(table_main),lable_account,2,3,5,6);

     GtkWidget *lable_password = gtk_label_new("密码");
     gtk_table_attach_defaults(GTK_TABLE(table_main),lable_password,2,3,6,7);

     gtk_label_set_markup(GTK_LABEL(lable_account),"<span font_desc='12'foreground=\"#3388ff\">账号</span>");
     gtk_label_set_markup(GTK_LABEL(lable_password),"<span font_desc='12'foreground=\"#3388ff\">密码</span>");


  	GtkWidget *btn_enroll = gtk_button_new_with_label("注册");
  	GtkWidget *btn_register = gtk_button_new_with_label("登录");

    //创建记住密码按键
    GtkWidget *btn_remmenberpassword = gtk_check_button_new_with_label("记住密码");
    gtk_table_attach_defaults(GTK_TABLE(table_main),btn_remmenberpassword,3,5,7,8);
    gtk_button_set_relief(GTK_BUTTON(btn_remmenberpassword),GTK_RELIEF_NONE);//设置按键透明
  //创建记住密码按键
    GtkWidget *btn_auto_register = gtk_check_button_new_with_label("自动登录");
    gtk_table_attach_defaults(GTK_TABLE(table_main),btn_auto_register,5,7,7,8);
    gtk_button_set_relief(GTK_BUTTON(btn_auto_register),GTK_RELIEF_NONE);//设置按键透明

    //gtk_button_set_relief(GTK_BUTTON(btn_main_gly),GTK_RELIEF_NONE);

    gtk_table_attach_defaults(GTK_TABLE(table_main),btn_enroll,6,8,8,9);
    gtk_table_attach_defaults(GTK_TABLE(table_main),btn_register,1,3,8,9);

   //监听按钮的信号//按下注册信号
   g_signal_connect(btn_enroll,"pressed",G_CALLBACK(main_to_enroll),NULL);
      //按下登录信号
   g_signal_connect(btn_register,"pressed",G_CALLBACK(main_to_register),NULL);

   
   //创建账号和密码的文本编辑器
    entry_account = gtk_entry_new();
    entry_password = gtk_entry_new();
   gtk_entry_set_visibility(GTK_ENTRY(entry_password),FALSE);
    gtk_table_attach_defaults(GTK_TABLE(table_main),entry_account,3,7,5,6);
    gtk_table_attach_defaults(GTK_TABLE(table_main),entry_password,3,7,6,7);

   	g_signal_connect(window_main,"destroy",G_CALLBACK(gtk_main_quit),NULL);

}

这是注册函数的代码

//注册界面初始化
void window_enroll_init(void)
{
    window_enroll = gtk_window_new(GTK_WINDOW_TOPLEVEL);
	gtk_window_set_title(GTK_WINDOW(window_enroll),"QQ注册界面");//GtkWindow < GtkWidget
	gtk_widget_set_size_request(window_enroll,500,500);//设置窗口大小
	gtk_window_set_resizable(GTK_WINDOW(window_enroll),FALSE); //是否可以改变窗口大小
	gtk_window_set_position(GTK_WINDOW(window_enroll),GTK_WIN_POS_CENTER_ALWAYS);
    
    GtkWidget *table_enroll = gtk_table_new(10,10,TRUE);
    gtk_container_add(GTK_CONTAINER(window_enroll),table_enroll);

    change_background(window_enroll,500,500,"./images/QQ.jpg");

     //创建文本标签
     GtkWidget *lable_enroll_account = gtk_label_new("账号");
     gtk_table_attach_defaults(GTK_TABLE(table_enroll),lable_enroll_account,3,4,5,6);

     GtkWidget *lable_enroll_password = gtk_label_new("密码");
     gtk_table_attach_defaults(GTK_TABLE(table_enroll),lable_enroll_password,3,4,6,7);

     gtk_label_set_markup(GTK_LABEL(lable_enroll_account),"<span font_desc='12'foreground=\"#3388ff\">账号</span>");
     gtk_label_set_markup(GTK_LABEL(lable_enroll_password),"<span font_desc='12'foreground=\"#3388ff\">密码</span>");


	GtkWidget *btn_enroll_sure = gtk_button_new_with_label("确定");
	GtkWidget *btn_enroll_back = gtk_button_new_with_label("取消");
     
    //gtk_button_set_relief(GTK_BUTTON(btn_main_gly),GTK_RELIEF_NONE);
    //登录和返回
    gtk_table_attach_defaults(GTK_TABLE(table_enroll),btn_enroll_sure,2,4,8,9);
    gtk_table_attach_defaults(GTK_TABLE(table_enroll),btn_enroll_back,6,8,8,9);

   //创建账号和密码的文本编辑器
    entry_enroll_account = gtk_entry_new();
    entry_enroll_password = gtk_entry_new();
   gtk_entry_set_visibility(GTK_ENTRY(entry_enroll_password),FALSE);
    gtk_table_attach_defaults(GTK_TABLE(table_enroll),entry_enroll_account,4,7,5,6);
    gtk_table_attach_defaults(GTK_TABLE(table_enroll),entry_enroll_password,4,7,6,7);

    //点击取消界面
   	g_signal_connect(btn_enroll_back,"pressed",G_CALLBACK(back_to_main),NULL);
    //点击确定界面
    g_signal_connect(btn_enroll_sure,"pressed",G_CALLBACK(sure_to_main),NULL);


   	g_signal_connect(window_enroll,"destroy",G_CALLBACK(gtk_main_quit),NULL);


}

后面还有很多函数，大家可以下载去学习。

个人感受

对于每个界面的大小、背景、是否可以移动，出现的位置、名称等等设置，以及水平布局或者垂直布局，把表的控件来练习一起都值得考虑，对于每个按钮的按下对应什么函数的执行，需要考虑的很多。我觉得最重要的是将c语言和数据库练习了起来，再加上gtk的开发可以通过c语言去调用数据库，增删查改。其中我觉得有点难度的是如何将注册界面的账户密码写进数据库中，最后再在登录界面登录时去寻找是否账户创建成功，然后进入操作界面。这个项目还有很多漏洞需要修改，并不是一个完美的项目。