实验目的
1.掌握软件开发的基本流程。
2.掌握常用的软件开发方式和工具。
实验内容
设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。
实验步骤及结果
一、计算器登录界面设计
1.流程图
图1.注册流程图
图2.登录流程图
2.设计逻辑：
注册{ 注册
用户名
方框（请输入用户名）
密码
方框（请输入密码）
已注册请登录
}
登录{ 登录
账号
方框（请输入用户名）
密码（请输入密码）
没有账号，去注册
忘记密码
}
3.代码
前端：
login.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div class="control">
<div class="item">
<div class="active">注册</div>
</div>
<div class="content">
<div style="display: block;">
<form action="/user/register" method="post">
<p>用户名</p>
<input type="text" placeholder="请输入用户名" name="username" />
<p>密码</p>
<input type="password" placeholder="请输入密码" name ="password"/>
<br/>
<input type="submit" value="注册"/>
</form>
<p>已注册，<a href="/user/login" target="top">去登录</a></p>
</div>
</div>
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>login</title>
<linkhref="/css/style.css"type="text/css" rel="stylesheet">
<script src="/static/js/change.js"></script>
</head>
<body>
<div class="control">
<div class="item">
<div class="active">登录</div>
</div>
<div class="content">
<div style="display: block;">
<form action="/user/login" method="post">
<p>账号</p>
<input type="text" placeholder="请输入用户名" name="username"/>
<p>密码</p>
<input type="password" placeholder="请输入密码" name="password"/>
<br/>
<input type="submit" value="登录"/>
</form>
<p>没有账号，<a href="/user/register" target="top">去注册</a></p>
</div>
</div>
</div>
</body>
</html>
success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
登录成功
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
body{
background: #f3f3f3;
}
.control{
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 5px;
}
.item{
width: 340px;
height: 60px;
background: #eeeeee;
}
.item div{
width: 340px;
height: 60px;
display: inline-block;
color: black;
font-size: 18px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.content{
width: 100%;
}
.content div{
margin: 20px 30px;
display: none;
text-align: left;
}
p{
color: #4a4a4a;
margin-top: 30px;
margin-bottom: 6px;
font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
width: 100%;
height: 40px;
border-radius: 3px;
border: 1px solid #adadad;
padding: 0 10px;
box-sizing: border-box;
}
.content input[type="submit"]{
margin-top: 40px;
width: 100%;
height: 40px;
border-radius: 5px;
color: white;
border: 1px solid #adadad;
background: cyan;
cursor: pointer;
letter-spacing: 4px;
margin-bottom: 40px;
}
.active{
background: white;
}
.item div:hover{
background: #f6f6f6;
}
后端：
com.example.entity.User：
@Data
@Accessors(chain = true)
@EqualsAndHashCode(callSuper = false)
@Table( "user")
public class User {
private String username;
private String password;
}
数据库建表
com.example.mapper.UserMapper：
@Mapper
public interface UserMapper extends BaseMapper<User> {
@Select(value = "select u.username,u.password from user u where u.username=#{username}")
User findUserByName(@Param("username") String username);
}
com.example.controller.UserController
@Controller
@RequestMapping("user")
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping("/register")
public String register(User user, Model m) {
if (user.getUsername()!=null&&userMapper.findUserByName(user.getUsername()) == null) {
//判断用户是否已经存在
if (!user.getUsername().isEmpty()) {
//注册的时候，用户名不能为空
if (!user.getPassword().isEmpty()) {
//注册 的时候,密码不能为空*/
userMapper.insert(user);
return "html/login";
} else {
m.addAttribute("msg", "用户名已经存在！");
return "html/register";
}
} else {
m.addAttribute("msg", "用户名不能为空！");
return "html/register";
}
} else {
m.addAttribute("msg", "密码不能为空！");
return "html/register";
}
}
@RequestMapping("/login" )
public String login( User user, Model m){
User exitUser=userMapper.findUserByName(user.getUsername());
if(user.getUsername()==null||user.getUsername().isEmpty()){
m.addAttribute("msg","用户名不能为空");
return "html/login";
}
if(user.getPassword()==null||user.getPassword().isEmpty()){
m.addAttribute("msg","密码不能为空");
return "html/login";
}
if(exitUser==null){
m.addAttribute("msg","该用户未注册");
return "html/login";
}
if(!user.getPassword().equals(exitUser.getPassword())){
m.addAttribute("msg","用户输入的密码有误");
return "html/login";
}else{
m.addAttribute("msg","登录成功");
return "html/success";
}
}
}
注册逻辑：
1.判断要创建的用户在数据库是否存在，如果不存在就注册
2.注册的时候用户名不能为空
3.注册的时候密码不能为空
登录逻辑：
1.判断要登录的用户在数据库是否存在，如果存在就登录
2.登录的时候，输入的密码要与数据库里对应的用户的密码保持一致
3.登录的时候，输入用户名与密码不能为空
application.properities
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=1234
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>register-login</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>register-login</name>
<description>register-login</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<version>8.0.33</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.mybatis-flex</groupId>
<artifactId>mybatis-flex-spring-boot-starter</artifactId>
<version>1.6.4</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.mybatis-flex</groupId>
<artifactId>mybatis-flex-spring-boot-starter</artifactId>
<version>1.6.4</version>
</dependency>
<dependency>
<groupId>com.mybatis-flex</groupId>
<artifactId>mybatis-flex-spring-boot-starter</artifactId>
<version>1.6.4</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
注册：如果注册的用户在数据库中不存在，且注册的时候，用户名与密码都不为空，则跳转到登录界面，反之，任意一个条件都不满足的话就不会跳转到登录界面
登录：如果登录的用户在数据库中存在，且登录的时候，用户名不为空，密码不为，则跳转到成功界面（success.html),反之，任意一个条件都不满足的话就不会跳转到成功界面。
二、计算器功能的实现
效果图
分析：计算器大概是由三个大部分组成的：菜单栏，显示框，按钮。所以定义一个类cal继承JFrame。定义完后开始初始化。接着就开始进入到这个项目的最重要的部分设置按钮监听事件，通过获取按钮的信息来进行判断运算。在进行加减乘除计算的时候会出现一个特殊情况，除数为0，所以要预防出现异常影响程序的运行，就要进行异常的捕获处理，这里我是自定义了一个异常类munber_Exception，然后我们利用try｛｝catch｛｝语句来进行异常捕获和处理。
完整代码如下
class munber_Exception extends Exception{ //异常处理
String e;
public munber_Exception(){
}
public munber_Exception(String message){
this.e=message;
}
public String shows(){
return e;
}
}
class cal extends JFrame implements ActionListener {
private JPanel p1, p2;
private JTextArea show;
private String box ;
JMenuBar menubar;
JMenu menu1, menu2, menu3;
StringBuffer strA;
StringBuffer strB;
char oper ='~';
double A;
double B;
private String[] text2 = {"C", "CE","%", "/",
"7", "8", "9", "*",
"4", "5", "6", "-",
"1", "2", "3", "+",
"DEL","0", ".", "="};//计算器按钮面板
private JButton[] munButton = new JButton[text2.length];
public cal() {
p1 = new JPanel();
p2 = new JPanel();
show = new JTextArea();
p1.setSize(600, 100);
menubar = new JMenuBar();
menu1 = new JMenu("查看(V)");
menu2 = new JMenu("编辑(E)");
menu3 = new JMenu("帮助(H)");
strB=new StringBuffer();
strA=new StringBuffer();
}
public vo id init() {//初始化
this.setTitle("计算器");
this.setBounds(200, 200, 320, 300);
this.setLayout(new BorderLayout());
this.add(p1, BorderLayout.CENTER);
this.add(p2, BorderLayout.SOUTH);
menubar.add(menu1);
menubar.add(menu2);
menubar.add(menu3);
this.setJMenuBar(menubar);
this.setLocationRelativeTo(null);
this.setResizable(false);
show.setPreferredSize(new Dimension(300, 100));
p1.add(show);
p2.setLayout(new GridLayout(5, 4, 2, 3));
//添加数字按键
for (int i = 0; i < text2.length; i++) {
munButton[i] = new JButton(text2[i] + " ");
p2.add(munButton[i]);
}
for (int i = 0; i < munButton.length; i++)
munButton[i].addActionListener(this);
this.setVisible(true);
this.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
public double division(double x,double y)throws munber_Exception{
if(y==0){
throw new munber_Exception("除数不能为0！");
}
else{
return x/y;
}
}
@Override
public void actionPerformed(ActionEvent e) {
try { String act=e.getActionCommand();
char a=act.charAt(0);
if (a=='0' ||a=='1' || a=='2' ||a=='3'||a=='4'||a=='5'||a=='6'||a=='7'||a=='8'||a=='9'||a=='.') {
if(oper=='~'){
strA.append(a);
show.setText(String.valueOf(strA));
}else {
strB.append(a);
show.setText(String.valueOf(strA)+oper+String.valueOf(strB));
}
}
else if(a=='+'||a=='-'||a=='/'||a=='*'||a=='%'){
oper=a;
show.setText(String.valueOf(strA)+oper);
}
else if(a=='='){
A = Double.parseDouble(String.valueOf(strA));
B = Double.parseDouble(String.valueOf(strB));
double j;
int len1=strA.length();
int len2=strB.length();
if (oper == '+') {
j = A + B;
show.setText(Double.toString(j));
strA.delete(0,len1);
strB.delete(0,len2);
strA.append(j);
} else if (oper == '-') {
j = A - B;
show.setText(Double.toString(j));
strA.delete(0,len1);
strB.delete(0,len2);
strA.append(j);
} else if (oper == '*') {
j = A * B;
show.setText(Double.toString(j));
strA.delete(0,len1);
strB.delete(0,len2);
strA.append(j);
} else if (oper == '/') {
try{j= division(A, B);}catch(munber_Exception u){
show.setText(u.shows());
}
}
else if (oper == '%') {
j = A % B;
show.setText(Double.toString(j));
strA.delete(0,len1);
strB.delete(0,len2);
strA.append(j);
}
} else if (a=='C') {
show.setText(" ");
oper='~';
int len1=strA.length();
int len2=strB.length();
strA.delete(0,len1);
strB.delete(0,len2);
} else if (a=='D'){
if(oper!='~'){
if(strB.length()>0){
strB.delete(strB.length()-1,strB.length());
show.setText(String.valueOf(strA)+oper+String.valueOf(strB));
}
else
show.setText("0");
}if(oper=='~'){
if(strA.length()>0){
strA.delete(strA.length()-1,strA.length());
show.setText(String.valueOf(strA));
}
}
} }catch(ArithmeticException m){
System.out.println("除数不能为0");
}
}
}
public class Calculator {
//调用
public static void main(String[] args) {
cal Calculator1 = new cal();
Calculator1.init();
}
}