软件开发第二次作业-526互联

前后端分离的页面交互

实验要求

1、实验目的

掌握软件开发基本流程

熟练常用的软件开发方式和工具

2、实验流程

设计出一个具有登录界面的计算器软件，登录成功后跳转到计算器页面，输入计算表达式后正确输出结果

3、实验所需环境及技术

Mysql

IntelliJ IDEA Community Edition 2020.1.4 x64

eclipse

4、流程图

登录界面实现

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

html {

height: 100%;

}

body {

background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));

}

.login-container {

width: 600px;

height: 315px;

margin: 0 auto;

margin-top: 10%;

border-radius: 15px;

box-shadow: 0 10px 50px 0px rbg(59, 45, 159);

background-color: rgb(95, 76, 194);

}

.left-container {

display: inline-block;

width: 330px;

border-top-left-radius: 15px;

border-bottom-left-radius: 15px;

padding: 60px;

background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));

}

.title {

color: #fff;

font-size: 18px;

font-weight: 200;

}

.title span {

border-bottom: 3px solid rgb(237, 221, 22);

}

.input-container {

padding: 20px 0;

}

input {

border: 0;

background: none;

outline: none;

color: #fff;

margin: 20px 0;

display: block;

width: 100%;

padding: 5px 0;

transition: .2s;

border-bottom: 1px solid rgb(199, 191, 219);

}

input:hover {

border-bottom-color: #fff;

}

::-webkit-input-placeholder {

color: rgb(199, 191, 219);

}

.message-container {

font-size: 14px;

transition: .2s;

color: rgb(199, 191, 219);

cursor: pointer;

}

.message-container:hover {

color: #fff;

}

.right-container {

width: 145px;

display: inline-block;

height: calc(100% - 120px);

vertical-align: top;

padding: 60px 0;

}

.regist-container {

text-align: center;

color: #fff;

font-size: 18px;

font-weight: 200;

}

.regist-container span {

border-bottom: 3px solid rgb(237, 221, 22);

}

.action-container {

font-size: 10px;

color: #fff;

text-align: center;

position: relative;

top: 200px;

}

.action-container span {

border: 1px solid rgb(237, 221, 22);

padding: 10px;

display: inline;

line-height: 20px;

border-radius: 20px;

position: absolute;

bottom: 10px;

left: calc(72px - 20px);

transition: .2s;

cursor: pointer;

}

.action-container span:hover {

background-color: rgb(237, 221, 22);

color: rgb(95, 76, 194);

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

计算器的设计实现

第一次小组作业采用c++写的计算器，为实现前后端连接本次计算器用Java代码实现。

1、calculator类

package com.mycalulator;
import java.util.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import static java.lang.Math.*;
public class calculator extends MYButton {
//表达式的运算
public calculator(){}
//方法中缀转后缀
public static ArrayList<String> TurnTo(Stack<String> stack) {
//声名Arraylist的字符串集合用来存储后缀表达式
ArrayList<String> list=new ArrayList<>();
//存储这正常表达式的栈
Stack<String> TempStack = new Stack<>();
//工具栈用于改变操作符的位置
Stack<String> StackTemp = new Stack<>();
//中转栈，用于foreach方法是从栈顶开始遍历的，如果不用中转栈存储的表达式的顺序会发生颠倒
Stack<String> stringStack=new Stack<>();
//将表达式存入到栈中
String str = "";
for (String s:stack
) {stringStack.push(s);
}
while(!stringStack.empty()) {
TempStack.push(stringStack.pop());
}
//中缀转后缀的代码块
while (!TempStack.empty()) {
int PointCount=0;
//去出存储栈的栈顶元素
String temp = TempStack.pop();
//存储数字
while ((!temp.equals("x")) &(!temp.equals("+"))& (!temp.equals("-")) &
(!temp.equals("/")) &(!temp.equals("("))& (!temp.equals(")"))) {
//循环判断是否为操作符，能够实现数字的拼接，例如出栈元素若为 1,2,3,.,4,则可将其拼接为123.4，改步骤能实现小数点的加入以及非个位数的输入
str = str + temp;
if(!TempStack.empty()) {
temp = TempStack.pop();
}
//如果最后一个元素为数字的话，会出现死循环，所以加入改代码可以及时跳出循环
else {
temp="exit";
break;
}
}
//判断是否有数字输入，如有则添加进集合中
if (!str.equals("")) {
list.add(str);
System.out.println(Change(str));
if(!Change(str))MYButton.Point=false;
str="";
if(temp.equals("exit"))break;
}
//判断是否为操作符
if(!temp.equals("(")&&!temp.equals(")")) {
//如果工具栈为空，则直接存入数字
if (StackTemp.empty()) {
StackTemp.push(temp);
}
else {
if(!StackTemp.empty()) {
//比较工具栈栈顶操作符和即将输入操作符的优先级
String str2 = StackTemp.pop();
//判断工具栈顶是否为（
if (!str2.equals("(")) {
if (bos(str2, temp)) {
//如果工具栈顶元素优先级大于输入操作符，则将改元素添加到集合中
list.add(str2);
//将输入的操作符从新添加到存储栈中用于下一次比较
TempStack.push(temp);
}
else {
StackTemp.push(str2);
StackTemp.push(temp);
}
}
//如果没有达到添加条件，则将输入元素压入工具栈中
else {
StackTemp.push(str2);
StackTemp.push(temp);
}
}
}
}
//如果输入元素为”(“则直接压入工具栈中
if(temp.equals("(")) StackTemp.push(temp);
//如果输入元素为大括号则将工具栈中栈顶的操作符持续添加到集合中，知道读取元素为"("时停止
else if(temp.equals(")"))
{
String str3=StackTemp.pop();
while(!str3.equals("(")){
list.add(str3);
str3=StackTemp.pop();
}
}
}
//当存储栈为空时，则将工具栈中的元素全部添加到集合中
while(!StackTemp.empty()) {
list.add(StackTemp.pop());
}
for (int i = 0; i < list.size(); i++) {
System.out.print(list.get(i));
}
//返回改变后地集合
return list;
}
//判断两个操作符地优先级
private static boolean bos(String str1,String str2){
if((str2.equals("/")||str2.equals("x"))&&(str1.equals("+")||str1.equals("-"))){
return false;
}
else return true;
}
//实现后缀表达式的运算
public static float calculate(ArrayList<String> list) {
//表达式地运算栈
Stack<Float> FloatStack=new Stack<>();
for (int i = 0; i < list.size(); i++) {
//入果此时集合中输出的元素为数字时则压入运算栈中
if(!list.get(i).equals("+")&&!list.get(i).equals("-")&&!list.get(i).equals("x")&&!list.get(i).equals("/")) {
//利用方法Float.parseFloat()可将字符串转化会Float类型的数字
FloatStack.push(Float.parseFloat(list.get(i)));
}
//如果为运算符时，则出栈栈顶的两个元素并运算
else{
switch (list.get(i))
{
//由于计算机无法计算如0.3，0.03等数字所以需要先将数字先翻倍再运算最后再将所得数字缩小相应倍数
case "+":{
float num1=FloatStack.pop();
float num2 = (FloatStack.pop()*10000)+(num1*10000);
FloatStack.push(num2/10000);
break;
}
case "-":{
float num1=FloatStack.pop();
float num2=(FloatStack.pop()*10000)-(num1*10000);
FloatStack.push(num2/10000);
break;
}
case "x":{
float num1=FloatStack.pop();
float num2=(num1*1000)*(FloatStack.pop()*1000);
FloatStack.push(num2/1000000);
break;
}
case "/":{
//由于java自身会将除数为零的表达实运算的结果转化为Infinity所以不用进行除数为零的判断
float num1=FloatStack.pop();
float num2=(FloatStack.pop()*10000)/(num1*10000);
FloatStack.push(num2);
break;
}
}
}
}
//返回最终的结果
return FloatStack.pop();
}
private static boolean Change(String str){
int count=0;
for (int i = 0; i < str.length(); i++) {
if(str.charAt(i)=='.')count++;
}
if(count<=1)return true;
else return false;
}
}

MYButton类

package com.mycalulator;
import java.awt.*;
import javax.swing.*;
import javax.swing.border.Border;
import java.awt.event.*;
import java.awt.image.ImageObserver;
import java.awt.image.ImageProducer;
import java.security.Key;
import java.util.*;

public class MYButton extends JFrame {
//创建stack栈用于输入内容
public static Stack<String> stack = new Stack<>();
//创建窗口对象
public static JFrame jfm = new JFrame();
//设置窗口的高度和宽度，用final关键字防止数据发生改变
private static final int FRAME_HIGH = 560;
private static final int FRAME_LENtH = 400;
//创建字符串数组，用于添加到按钮中方便用户辨别按钮作用
private static final String[] s = {"(", ")", "CE", "Del", "7", "8", "9", "/", "4", "5", "6", "x"
, "1", "2", "3", "-", ".", "0", "=", "+"};
//声名按钮数组
public static JButton[] Jbt = new JButton[20];
//创建文本输入框用于输入输出
public static JTextField Input = new JTextField();
public static JTextField Output = new JTextField();
public static boolean Point=true;
//构造空参方法
public MYButton() {
InitButton();
InitFrame();
InitField();
Input();
print();
jfm.setVisible(true);
}
//方法：初始化按钮
private static void InitButton() {
//设置字体
Font f = new Font("宋体", Font.BOLD, 20);
//将相应字符串加载到相应按钮中
for (int i = 0; i < s.length; i++) {
Jbt[i] = new JButton(s[i]);
Jbt[i].setSize(90, 55);
Jbt[i].setFont(f);
}
//改变按钮背景颜色，美化按钮
for (int i = 0; i < 20; i++) {
int x = 5 + (i % 4) * 95;
int y = 225 + (i / 4) * 60;
Jbt[i].setLocation(x, y);
if (i / 4 < 1 || i % 4 == 3) {
Jbt[i].setBackground(new Color(116, 61, 177, 146));
} else if (i == 18) {
Jbt[i].setBackground(new Color(75, 172, 65));
} else Jbt[i].setBackground(Color.WHITE);
Jbt[i].setFocusPainted(false);
//添加按钮到窗口中
MYButton.jfm.getContentPane().add(Jbt[i]);
}
}
//方法：初始化文本输入框
private void InitField() {
//设置字体
Font f = new Font("微软雅黑", Font.CENTER_BASELINE, 30);
//设置文本框的相应属性
Input.setSize(375, 100);
Input.setLocation(5, 5);
Input.setFont(f);
Input.setBackground(new Color(255, 239, 141));
Input.setEnabled(true);
Input.setHorizontalAlignment(4);
//禁止文本框自行输入
Input.setEnabled(false);
Output.setFont(f);
Output.setSize(375, 100);
Output.setLocation(5, 110);
Output.setBackground(new Color(202, 255, 215));
Output.setHorizontalAlignment(4);
Output.setEnabled(false);
//将文本框添加到窗口中
jfm.getContentPane().add(Input);
jfm.getContentPane().add(Output);
}
//初始化窗口
private void InitFrame() {
//设置窗口的相应属性
jfm.setSize(FRAME_LENtH, FRAME_HIGH);
jfm.setDefaultCloseOperation(EXIT_ON_CLOSE);
jfm.setLayout(null);
jfm.setLocationRelativeTo(null);
jfm.getContentPane().setBackground(new Color(246, 240, 249));
jfm.setTitle("MyCalculator");
jfm.setResizable(false);
}
//方法，监听按钮并将表达式呈现在文本框中
private void Input() {
for (int i = 0; i < MYButton.Jbt.length; i++) {
int finalI = i;
//使用匿名内部类
Jbt[i].addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
System.out.println("djl");
//当点击的按钮为“CE”时，清空栈
if (Jbt[finalI].getText().equals("CE")) {
MYButton.Point=true;
while (!MYButton.stack.empty()) {
MYButton.stack.pop();
}
MYButton.Output.setText("");
}//为数字或运算符号时入栈
else if (!Jbt[finalI].getText().equals("Del")&!Jbt[finalI].getText().equals("=")&&!Output.getText().equals("Error")) {
String s1 = Jbt[finalI].getText();
if(!stack.empty()) {
String sss = MYButton.stack.peek();
if (!((sss.equals("+") || sss.equals("-") || sss.equals("/") || sss.equals("x")||sss.equals("(")) &&
(s1.equals("+") || s1.equals("/") || s1.equals("x") || s1.equals("-")||s1.equals(")")))) {
if((!((sss.equals(")"))&& !(s1.equals("+") || s1.equals("/") || s1.equals("x") || s1.equals("-")||s1.equals(")"))))&&
(!((!(sss.equals("+") || sss.equals("/") || sss.equals("x") || sss.equals("-")||sss.equals(")")||sss.equals("(")))&&(s1.equals("("))))) {
MYButton.stack.push(Jbt[finalI].getText());
System.out.println(Jbt[finalI].getText());
}
} else {
System.out.println("你干嘛");
}
}
else{
if(!(s1.equals("+") || s1.equals("/") || s1.equals("x") || s1.equals("-")||s1.equals(")"))) {
MYButton.stack.push(Jbt[finalI].getText());
System.out.println(Jbt[finalI].getText());
}
else {
System.out.println("你好");
}
}
}
//为等号时，运算表达式并将答案呈现在输出框中
if(Jbt[finalI].getText().equals("=")&&!Output.getText().equals("Error")) {
if(!stack.empty()) {

ArrayList<String> List = new ArrayList<>();
AddList(List);
System.out.println(MYButton.Point);
if (if_$(List)) {
calculator.TurnTo(stack);
if(MYButton.Point){
System.out.println("111 "+MYButton.Point);
float f = calculator.calculate(calculator.TurnTo(MYButton.stack));
Output.setText("=" + String.valueOf(f));}
else MYButton.Output.setText("Error");
} else MYButton.Output.setText("Error");
}
}
//为删除符号时移除栈顶元素
else if (!MYButton.stack.empty()&Jbt[finalI].getText().equals("Del")&&!Output.getText().equals("Error"))
System.out.println(MYButton.stack.pop());
//展示表的时的方法要在监听事件的匿名内部类中调用，否则输入框中将无展示的信息
print();
}
});
}
}
//将栈中的字符串拼接并呈现在输入框中
private void print(){

String str = "";
if (!MYButton.stack.empty()) {
//用foreach进行遍历栈并不会销毁栈，若用pop方法则会将栈销毁
for (String c : MYButton.stack) {
str = str + c;
}
}//设置文本框的Text为拼接后的字符串
MYButton.Input.setText(str);
System.out.println(MYButton.Input.getText());
}
private void AddList(ArrayList<String> list){
for (String str:MYButton.stack
) {
if(str.equals("(")||str.equals(")"))list.add(str);
}

}
//判断表达式的括号匹配问题
private boolean if_$(ArrayList<String> list) {
Stack<String> s=new Stack<>();
for (int i = 0; i < list.size(); i++) {
System.out.println("qqq"+list.get(0));
if(list.get(i).equals("(")){
s.push(list.get(i));
}
else if(list.get(i).equals(")")){
if(!s.empty()) {
if (!$_if(s.pop(), list.get(i))) return false;
}
else return false;
}
}
if(s.empty())return true;
else return false;
}
private boolean $_if(String str1,String str2) {
if(str1.equals("(")&&str2.equals(")"))return true;
else return false;
}
}