用javafx制作学生成绩管理系统

一、 效果

1.动画演示

2.图片演示

二、实现方向

1.设计界面

       首先考虑了自己的界面要设计成什么样子的才看得舒服，参考了很多页面，看了其他各种软件的界面设计，最终决定模仿一下photoshop初始界面。

2.配置后台

       要实现具体功能可以运行，而不是只有前端好看的界面那就需要配置后台。

三、全部代码

链接：https://pan.baidu.com/s/1UXLT558STDewsEGWoMZmhg
提取码：zzy6

四、代码片段依次讲解

1.首先修改包的名字

如果要在你的电脑可以正常运行的话，这里的包名为practice需要改成你自己的包名，还有不要忘记更改类名哦，更改成你自己的就好啦，此外需要正确好配置javafx环境才能正常运行所有代码。

package practice;//包名

配置好javafx环境的同学直接跳过这部分：

怎么配置javafx呢？

又是付费吗？no！拒绝
这里直接教大家怎么一步步搞定
首先下载这个文件

Javafx配置文件
链接：https://pan.baidu.com/s/1I-Ct88rMlwqLeD-MsLOPsg
提取码：zzy8
下载到哪里都可以，确保自己找得到，桌面也可以
接下来按图片步骤完成：
1、创建一个工程

2、创建的工程处右键依次打开这些东西
3、找到刚刚下载的文件，依次打开

选中这些最后点打开
4.开始创建该工程下的类
注意创建工程后如果没有完成以上操作不要直接创建类，否则后面就算完成了这些操作，导入了javafx包，这个类也相当于没有导入包的。需要重新创建类，所以不妨先完成以上操作，然后再进行类的创建。
5.最后一步就是配置运行
很多同学以为添加了javafx包就不需要再进行配置了，但是发现一运行还是不行，什么问题都没有，为什么运行不了呢，下面给出解决方法，按照这个做就好了。

在此处输入
–module-path C:\sw\javafx-sdk-11.0.2\lib --add-modules javafx.controls,javafx.fxml
注意：加粗部分是需要替换的
替换成什么呢？
首先找到刚刚下的文件

打开之后，点击lib打开
到了这个页面把光标移到这个位置再按右键

点击复制地址后把
–module-path C:\sw\javafx-sdk-11.0.2\lib --add-modules javafx.controls,javafx.fxml
里面的粗体替换掉就可以了，把替换后的代码填入下面位置

然后点击run就可以了，到此处javafx配备完成！

---

题外话之如何配备深色外观

还有其他主题外观可供选择

2.片段讲解

（1）包的导入

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.PrintWriter;
import java.util.Scanner;
import javax.swing.JTextArea;
import javax.xml.stream.events.StartDocument;
import javafx.animation.FadeTransition;
import javafx.animation.Timeline;
import javafx.application.*;
import javafx.scene.Scene;
import javafx.scene.layout.BackgroundImage;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;
import javafx.util.Duration;
import javafx.geometry.*;
import javafx.scene.control.*;

3.start函数外的东西

public class caculate extends Application{
   
	
	private TextField addname=new TextField();
	private TextField addstdid=new TextField();
	private TextField addclass=new TextField();
	private TextField namedelete=new TextField();
	private TextField iddelete=new TextField();
	private TextField ywlrck=new TextField();
	private TextField sxlrck=new TextField();
	private TextField yylrck=new TextField();
	private TextField wllrck=new TextField();
	private TextField hxlrck=new TextField();
	private TextField swlrck=new TextField();
	private TextField xhss=new TextField();
	private TextField namess=new TextField();
	
	TextField xianshiqi=new TextField();
	 Button xinde=new Button("修改");
	
	Button deletebt=new Button("删除");
    public static boolean on=true;
    TextArea biao2=new TextArea();

放到start外是将其作为全局变量便于后面对它们的调用，下面具体解释一下具体是什么，主要有以下几类
（1）TextField

private TextField addname=new TextField();

这个是创建一个文本框，也就是这种东西：
（不过这里用了css改变了一下长宽等 包括后面讲解的各种组件基本都有css渲染了 后面就不啰嗦了 具体怎么渲染后面会说）

（2）Button

 Button xinde=new Button("修改");

创建了一个按钮也就是这种东西：

（3) TextArea

TextArea biao2=new TextArea();

创建了一个文本区域，也就是这种可以放文字的区域：
（4）其他

public static boolean on=true;

这一行是为了配置后面算法写的一个boolean型变量

4.start函数内

*片段一

	public void start(Stage ke) throws Exception{
   
		xinde.setPadding(new Insets(10,40,10,40));
		xianshiqi.setPrefSize(200, 25);
		xianshiqi.setEditable(false);
        addname.setPrefSize(350, 40);
        addstdid.setPrefSize(350, 40);
        addclass.setPrefSize(350, 40);
        
        ywlrck.setPrefSize(350, 40);
        sxlrck.setPrefSize(350, 40);
        yylrck.setPrefSize(350, 40);
        wllrck.setPrefSize(350, 40);
        hxlrck.setPrefSize(350, 40);
        swlrck.setPrefSize(350, 40);
        
        xhss.setPrefSize(350, 40);
        namess.setPrefSize(350, 40);
        
        namedelete.setPrefSize(350, 40);
        iddelete.setPrefSize(350, 40);

（1） setPrefSize
使用setPrefSize来设置文本框或者按钮的宽和高
（2）setPadding
使用setPadding来设置节点位置
（也就是节点离面板上面右面下面左面的距离）
xinde.setPadding(new Insets(10,40,10,40));
四个值依次表示（上，右，下，左）

*片段二

BorderPane mianban=new BorderPane();
//		P0

//	        顶部区域
		StackPane top=new StackPane();
		top.setPrefHeight(87);
		top.setStyle("-fx-background-color:rgb(65,65,65);-fx-border-width: 0 0 0 8;-fx-border-style: solid;-fx-border-color: rgb(83,83,83);");
		mianban.setTop(top);
//     左侧区域
	   StackPane left=new StackPane();
	   left.setPrefWidth(370);
	   left.setStyle("-fx-background-color:rgb(35,35,35);-fx-border-width: 0 0 0 8;-fx-border-style: solid;-fx-border-color: rgb(83,83,83);");
	   mianban.setLeft(left);
//	        主场区域
	   StackPane center=new StackPane();
	   center.setPrefWidth(1000);
	   center.setStyle("-fx-background-color:rgb(26,26,26);-fx-border-width: 0 0 0 0;-fx-border-style: solid;-fx-border-color: rgb(83,83,83);");
	   mianban.setCenter(center);
//	   相关按钮
//	   上面按钮
	   Button sousuo=new Button("搜索");

（1）面板布局说明
         设置一个BorderPane放在Scene里面 那么场景就被分成了五个区域 上右下左以及中央，那么如果其中任何一个区域如果不放东西的话，系统就会把这个区域抛弃由其他区域覆盖，因此在这里我只取了左 、上、中央 这三个区域存放东西 ，此外不需要设置BorderPane的宽高，因为整体的宽高会自动填满scene，那么怎么具体设置这三个区域占据宽高的比例呢，区域占据的宽高是由里面的东西撑开的，所以如果不存放东西就不存在，你放的东西有多大被撑开就有多大，那么想要一个初步的大小可以怎么设置呢？只需要在其中放入一个StackPane就可以了，之后想往区域放东西直接放在StackPane里面就可以

StackPane top=new StackPane();

创建栈面板

 center.setPrefWidth(1000);
 top.setPrefHeight(87);

设置栈面板宽高撑开区域

mianban.setCenter(center);
mianban.setLeft(left);
mianban.setTop(top);

三个栈面板分别分配到中间、左、上三个区域里面去

（2） 主面板各区域的css渲染

这里举一个栗子：

 left.setStyle("-fx-background-color:rgb(35,35,35);-fx-border-width: 0 0 0 8;-fx-border-style: solid;-fx-border-color: rgb(83,83,83);");

A、基本格式：
** .setStyle(" ");这种基本格式使用css渲染* 外观
里面加一些属性就可以改变 **外观了

B、属性解释：

-fx-background-color:rgb(35,35,35); 设置背景颜色，具体颜色可以把自己想要做的图用qq截个图放在PS里面直接吸取颜色就可以了，查看rgb值就可以了，也可下载截图吸取颜色的工具
-fx-border-width: 0 0 0 8; 设置边框宽度
-fx-border-style: solid; 把边框设置为可见的实体
-fx-border-color: rgb(83,83,83);"); 给边框加一个颜色

*片段3

	   final ToggleGroup group = new ToggleGroup();
	   ToggleButton cjgl=new ToggleButton("成绩管理");
	   ToggleButton cjlr=new ToggleButton("成绩录入");
	   ToggleButton cjfx=new ToggleButton("成绩分析");
	   ToggleButton xsxx=new ToggleButton("成绩预览");
	   ToggleButton tjxs=new ToggleButton("添加学生");
	   ToggleButton scxs=new ToggleButton("删除学生");
	   cjgl.setToggleGroup(group);
	   cjlr.setToggleGroup(group);
	   cjfx.setToggleGroup(group);
	   xsxx.setToggleGroup(group);
	   tjxs.setToggleGroup(group);
	   scxs.setToggleGroup(group);
	    left.getChildren().addAll(cjgl,cjlr,cjfx,xsxx,tjxs,scxs); 
	  
	 
//       大小
	  cjgl.setPrefSize(210, 70);
	  cjlr.setPrefSize(210, 70);
	  cjfx.setPrefSize(210, 70);
	  xsxx.setPrefSize(210, 70);
	  tjxs.setPrefSize(210, 70);
	  scxs.setPrefSize(210, 70);
	  

	  
	  
	  //	             布局
      left.setMargin(cjgl, new Insets(-650,50,0,50));   	  
      left.setMargin(cjlr, new Insets(-400,50,0,50));  
      left.setMargin(cjfx, new Insets(-150,50,0,50));  
      left.setMargin(xsxx, new Insets(100,50,0,50));  
      left.setMargin(tjxs, new Insets(350,50,0,50));  
      left.setMargin(scxs, new Insets(600,50,0,50));  

（1）代码解释
本段代码是对左侧区域的按钮进行创建和布局
下面具体解释：

 final ToggleGroup group = new ToggleGroup();

用于创建一个按钮组，用于当按其中一个按钮时其他按钮效果会取消

 ToggleButton cjgl=new ToggleButton("成绩管理");

这个是创建一个组内的按钮，并且命名：成绩管理 在界面中渲染后效果如下

  left.setMargin(cjgl, new Insets(-650,50,0,50));   	

上面是设置外边距的意思
用来设置按钮的位置（按钮在左边区域离各边界的距离来确定位置）
初始状态下按钮是垂直居中的，设置外边距后如果为负值那就向着相反的方向移动，值的意思是上右下左的外边距，此处left是左边的面板cjgl是按钮，也就是设置cjgl在left内的位置
*片段4

//动画效果
//      1
//     1 移入
      cjgl.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
   
    	  cjgl.setStyle( "-fx-background-radius: 32;-fx-font-weight: bold;-fx-font-size:20;-fx-text-fill:black;-fx-background-color:white;");
    	  cjgl.setPrefSize(210, 70); 
    	});

//      2退出
      cjgl.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
   
        	if(cjgl.isSelected()){
   
    	    cjgl.setPrefSize(230, 80);
    	    cjgl.setStyle( "-fx-background-radius: 32;-fx-font-weight: bold;-fx-font-size:22;-fx-text-fill:black;-fx-background-color:white;");        	
        	}
    	    else{
   
    	    	cjgl.setPrefSize(210, 70);
    	    	cjgl.setStyle( "-fx-background-radius: 32;-fx-font-weight: bold;-fx-font-size:20;-fx-background-color:rgb(35,35,35);-fx-text-fill:white;");
    	    }

      
      });
//按压
      cjgl.setOnMousePressed(e->{
   
    	 
    	  cjlr.setStyle( "-fx-font-weight: bold;-fx-font-size:20;-fx-background-color:rgb(35,35,35);-fx-text-fill:white;");
	      cjfx.setStyle( "-fx-font-weight: bold;-fx-font-size:20;-fx-background-color:rgb(35,35,35);-fx-text-fill:white;");
	      xsxx.setStyle( "-fx-font-weight: bold;-fx-font-size:20;-fx-background-color:rgb(35,35,35);-fx-text-fill:white;");
	      tjxs.setStyle( "-fx-font-weight: bold;-fx-font-size:20;-fx-background-color:rgb(35,35,35);-fx-text-fill:white;");
	      scxs.setStyle( "-fx-font-weight: bold;-fx-font-size:20;-fx-background-color:rgb(35,35,35);-fx-text-fill:white;");
    	cjgl.setPrefSize(230, 80);
    	cjgl.setStyle( "-fx-background-radius: 32;-fx-font-weight: bold;-fx-font-size:22;-fx-text-fill:black;-fx-background-color:white;");        
      });
	  
      cjgl.addEventHandler(MouseEvent.MOUSE_CLICKED, (MouseEvent e) -> {
   
        cjgl.setSelected(true);
  	    cjgl.setPrefSize(230, 80);
  	    cjgl.setStyle( "-fx-background-radius: 32;-fx-font-weight: bold;-fx-font-size:22;-fx-text-fill:black;-fx-background-color:white;");        	

     });

这里只取一个按钮的动画效果进行讲解

（1）移入效果

 cjgl.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
   }

这个是设置光标移入时候会发生怎么样的事件，{}内的内容为具体事件

 cjgl.setStyle( "-fx-background-radius: 32;-fx-font-weight: bold;-fx-font-size:20;-fx-text-fill:black;-fx-background-color:white;");
    	  cjgl.setPrefSize(210, 70); 

内容如上，解释如下：
-fx-background-radius: 32; 设置按钮的边角半径，决定是方圆的程度
-fx-background-color:white; 设置按钮颜色
cjgl.setPrefSize(210, 70); 设置按钮宽高
-fx-text-fill:black; 设置按钮文字颜色
-fx-font-size:20; 设置按钮里面文字大小
-fx-font-weight: bold; 设置按钮里面文字为加粗效果
设置以上东西，当光标移入的时候就会把按钮从初始的样子变成事件内容的样子，看起来就有了一个动画效果了

同理设置

（2）按压效果

 cjgl.setOnMousePressed(e->{
   }

也就是点击鼠标点下去不松手时候显示为什么样子

（3）点击后效果

 cjgl.addEventHandler(MouseEvent.MOUSE_CLICKED, (MouseEvent e) -> {
   }

也就是点击鼠标松手后但没有把光标移出按钮范围的效果

（4）移出效果

 cjgl.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
   }

也就是光标从按钮里面移出来后变成什么样子

（5）注意点
设置移出效果为什么要用if else语句呢？
因为有两种情况
其一： 将光标移入时没有点击最后移出，但我需要这期间改变外观，出来之后还原初始的外观。
其二： 将光标移入后并点击最后移出，我需要移出之后仍然保存外观

如果只是单纯的设置移出效果，就不能让点击之后仍然保存选中的效果，因为最后都有一个把光标移出来的动作，所以在此处使用一个if else语句 先检测有没有点击选中用：isSelected() 检测，如果有那就继续执行选中后的效果，如果没有那就执行没有选中的效果。

*片段五
此处开始为每一个按钮配备不同的StackPane
然后将其放进BorderPane中的Center区
每个按钮点击时将其他按钮的StackPane清除即可实现中央界面切换效果

//添加学生面板
        HBox add_top=new HBox();
        Label add_toptxt=new Label("添加学生");
        add_toptxt.setStyle("-fx-font-weight: bold;-fx-font-size:22;-fx-text-fill:white;");
        add_top.setStyle("-fx-border-style: solid inside;-fx-border-width: 0 0 2 0;-fx-border-insets:-50;-fx-border-radius: 5;-fx-border-color: blue;");
        add_top.getChildren().add(add_toptxt);
        center.setMargin(add_top, new Insets(280,0,0,745));
        
        Button addbt=new Button("添加");
        addbt.setStyle("-fx-font-weight:bold;");
        GridPane gridPane4=new GridPane();
        gridPane4.setMargin(addbt, new Insets(15,0,0,0));
        addbt.setPadding(new Insets(10,40,10,40));
    	gridPane4.setHgap(15);
    	
    	Label addnametxt=new Label("姓名:");
     	Label addclasstxt=new Label("班级:");
    	Label addstdidtxt=new Label("学号:");
        addnametxt.setStyle("-fx-text-fill:white");
        addclasstxt.setStyle("-fx-text-fill:white");