基于JAVAFX (Fxml) + Spring + Socket 实现高仿腾讯QQ -- 计算机网络课程设计排名TOP 1

高仿的腾讯QQ设计实现

概述

其实这个设计在3个月前就已经完成了, 当时要求是基于sokect写一个TCP通信案例 作为一名痴迷UI的程序员 我可不满足 仅仅在小黑框抑或是Console里跑代码 我可是有追求的

于是乎, 有了这篇文章 , 这篇文章主要分享最终的成果 和部分特点代码(也正是基于此 我一举拿下设计课程的第一名)

实现

  1. 数据库设计
    对于通信类的SE程序 设计这一块还是比较简单 但是 良好的习惯是为以后扩展做铺垫 目前第一版我用了这么几张表在这里插入图片描述

  2. UI设计
    之所以说高仿 可不是乱吹 你瞧

  • 登录界面
    在这里插入图片描述

  • 主界面
    在这里插入图片描述

  1. 聊天界面

在这里插入图片描述

如何? 老铁有没有毛病 至少市面上我还没看到有做到我这样高仿设计 (
我是说同龄Student 大牛请这边走)


通信

在这个设计中 有个优点是 我规定了服务端和客户端交互的通信协议 拿一份出来瞧瞧:

<xml>
       <SendQQ>%1$s</SendQQ>
       <ReceiveQQ>%2$s</ReceiveQQ>
       <CreateTime>%3$s</CreateTime>
       <MsgType>%4$s</MsgType>
       <Content>%5$s</Content>
       <MsgId>%6$s</MsgId>
</xml>

如果有过小程序开发经验的童鞋 就能看出来我是基于微信小程序的通信协议标准设计的 毕竟人家的香

后台通信截图

在这里插入图片描述

  • 一对一
    在这里插入图片描述

  • 群聊
    在这里插入图片描述

聊天的UI做的不够好 后续会继续更新


JavaFX集成Spring

这个设计采用Javafx 是因为它比Swing还要轻量级 而且控件做的更好看 , 以前不知道各位怎么使用SE写UI的 哪怕你用的是Swing 如果不进行分开管理UI 到最终你的代码臃肿无比

有了Spring 这还叫事吗? 讷

  1. 首先在Spring配置文件做如下配置
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
    <property name="basenames">
        <list>                <!--引用资源文件-->
            <value>classpath:client</value>
            <value>classpath:i18n</value>
        </list>
    </property>
    <property name="fileEncodings" value="utf-8"/>
</bean>

<bean id="bundle" class="org.springframework.context.support.MessageSourceResourceBundle">

    <constructor-arg name="source" ref="messageSource"/>
    <constructor-arg name="locale">
        <bean class="java.util.Locale" factory-method="getDefault"></bean>
    </constructor-arg>
</bean>
  1. Spring 集成JavaFx 实际上就是将Javafx的控制器 交给Spring来管理
package qq.util;

import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.util.Callback;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import qq.main.AppMain;

import java.io.IOException;
import java.io.InputStream;
import java.util.ResourceBundle;

/**
 * @description: spring加载fxml实现
 * @author: 浮~沉
 * @create: 2020-06-07 17:07
 */
@Component
public class SpringFxmlLoader2 extends FXMLLoader{


    @Autowired
    private ResourceBundle bundle;


    public <T extends Node> T load(String url) {
        try(InputStream inputStream = this.getClass().getResourceAsStream(url)) {
            super.setLocation(this.getClass().getResource("/"));
            super.setResources(bundle);
            super.setControllerFactory(new Callback<Class<?>, Object>() {
                @Override
                public Object call(Class<?> param) {
                    return AppMain.applicationContext.getBean(param);
                }
            });
            return  this.load(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException("fxml文件加载异常");
        }
    }




}

By The Way

这个设计可以说你如果掌握了 不仅能让明白什么是TCP/IP的Socket通信 更能让你对JavaFx的使用轻车熟路, 另外这篇设计代码量在4000行左右 绝大部分是UI的代码 TCP/IP通信加起来不到500行 所以推荐有基础的童鞋使用

如果需要源码 请看留言要求

基于JavaFX的学生选课管理系统设计与实现可以包括以下几个步骤: 1. 设计数据库模型:首先,需要设计数据库模型来存储学生、课程和选课信息等数据。可以创建三个表:学生表、课程表和选课表,它们之间可以通过外键建立关联。 2. 创建JavaFX界面:使用JavaFX来创建用户界面,包括登录界面、学生端界面和管理员端界面。可以使用FXML来定义界面布局,并使用Scene Builder来可视化设计界面。 3. 实现登录功能:在登录界面中,学生和管理员可以输入用户名和密码进行登录。根据用户类型,将其导航到相应的学生端或管理员端界面。 4. 学生端功能实现:在学生端界面中,学生可以查看可选课程列表、已选课程列表和成绩等信息。学生可以选择课程并提交选课请求,也可以退选已选课程。 5. 管理员端功能实现:在管理员端界面中,管理员可以进行课程的增加、删除、修改和查询操作。管理员可以管理学生的选课情况,并对成绩进行录入和公示。 6. 数据库操作:在Java代码中,使用JDBC或者ORM框架(如Hibernate)来连接数据库,并实现对数据库的增删改查操作。根据用户的操作,更新数据库中的数据。 7. 错误处理和验证:在系统中添加错误处理和验证机制,确保用户输入的数据合法性,并提供友好的错误提示信息。 8. 测试和调试:对系统进行全面的测试和调试,确保系统的稳定性和功能完整性。 9. 部署和发布:将系统打包成可执行文件或者部署到服务器上,供用户使用。 下面是一个基于JavaFX的学生选课管理系统的示例代码: ```java // 登录界面 public class LoginController { @FXML private TextField usernameField; @FXML private PasswordField passwordField; public void login() { String username = usernameField.getText(); String password = passwordField.getText(); // 验证用户名和密码 if (username.equals("admin") && password.equals("admin")) { // 导航到管理员端界面 // ... } else { // 导航到学生端界面 // ... } } } // 学生端界面 public class StudentController { @FXML private TableView<Course> courseTable; @FXML private TableColumn<Course, String> nameColumn; @FXML private TableColumn<Course, String> instructorColumn; public void initialize() { // 初始化课程列表 nameColumn.setCellValueFactory(new PropertyValueFactory<>("name")); instructorColumn.setCellValueFactory(new PropertyValueFactory<>("instructor")); // 查询可选课程列表并显示在表格中 List<Course> courses = CourseDAO.getAllCourses(); courseTable.setItems(FXCollections.observableArrayList(courses)); } public void selectCourse() { Course selectedCourse = courseTable.getSelectionModel().getSelectedItem(); // 提交选课请求 // ... } public void dropCourse() { Course selectedCourse = courseTable.getSelectionModel().getSelectedItem(); // 提交退选请求 // ... } } // 管理员端界面 public class AdminController { @FXML private TableView<Course> courseTable; @FXML private TableColumn<Course, String> nameColumn; @FXML private TableColumn<Course, String> instructorColumn; public void initialize() { // 初始化课程列表 nameColumn.setCellValueFactory(new PropertyValueFactory<>("name")); instructorColumn.setCellValueFactory(new PropertyValueFactory<>("instructor")); // 查询课程列表并显示在表格中 List<Course> courses = CourseDAO.getAllCourses(); courseTable.setItems(FXCollections.observableArrayList(courses)); } public void addCourse() { // 添加课程 // ... } public void deleteCourse() { Course selectedCourse = courseTable.getSelectionModel().getSelectedItem(); // 删除课程 // ... } public void updateCourse() { Course selectedCourse = courseTable.getSelectionModel().getSelectedItem(); // 更新课程信息 // ... } } // 数据库操作 public class CourseDAO { public static List<Course> getAllCourses() { // 查询数据库中的课程列表 // ... } public static void addCourse(Course course) { // 向数据库中添加课程 // ... } public static void deleteCourse(Course course) { // 从数据库中删除课程 // ... } public static void updateCourse(Course course) { // 更新数据库中的课程信息 // ... } } // 课程实体类 public class Course { private String name; private String instructor; // 构造方法、getter和setter方法 // ... } ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值