首页 > 其他分享 >实验报告2

实验报告2

时间：2023-12-03 21:35:33浏览次数：23  
标签：box color background org import login 实验报告

一、实验目的

　　1.掌握软件开发的基本流程

　　2.掌握常用的软件开发方式和工具。

二、实验内容

　　1.设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。

三、实验所用环境及工具

　　1.使用DW和IDEA编写

　　2.使用Visio绘制流程图

四、流程图

五、登录页面（使用DW）

1、login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="login-box">
<h2>登录</h2>
<form>
<div class="login-field">
<input type="text" name="" required="" />
<label>用户名</label>
</div>
<div class="login-field">
<input type="password" name="" required="" />
<label >密码</label>
</div>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>

2、style.css

body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("image/lzufeView.jpg");
background-size: cover;

background-position: center 0;

background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;

}
.login-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding:40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.login-box h2{
margin: 0 0 30px;
padding: 0;
text-align: center;
color: #fff;
}
.login-box .login-field{
position: relative;
}
.login-box .login-field input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .login-field label{
position: absolute;
top: 0;
left: 0;
letter-spacing: 1px;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .login-field input:focus ~ label,
.login-box .login-field input:valid ~ label{
top: -23px;
left: 0;
color: aqua;
font-size: 12px;
}
.login-box button{
background: transparent;
border: none;
outline: none;
color: #fff;
background: #03a9f4;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}

3、实验结果

 

六、计算器界面

 

<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
background-image: url("image/lzufeView.jpg");
background-size: cover;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
font-size: 30px;
}
.calculator {
background-color: #F5F5F5;
border-radius: 10px;
box-shadow: 0px 0px 10px #888888;
margin: 50px auto;
padding: 20px;
width: 300px;
}
.display {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 5px;
font-size: 24px;
height: 40px;
margin-bottom: 10px;
padding: 10px;
text-align: right;
width: 95%;
}
.button {
background-color: #CCCCCC;
border: none;
border-radius: 5px;
color: #000000;
cursor: pointer;
font-size: 24px;
height: 50px;
margin-bottom: 10px;
width: 23%;
}
.button:hover {
background-color: #DDDDDD;
}
.button:active {
box-shadow: none;
background-color: #AAAAAA;
}
.operator {
background-color: #A46D06;
color: #FFFFFF;
}
.equals {
background-color: #4CAF50;
color: #FFFFFF;
width: 48%;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display"></div>
<button class="button" onclick="addToDisplay('7')">7</button>
<button class="button" onclick="addToDisplay('8')">8</button>
<button class="button" onclick="addToDisplay('9')">9</button>
<button class="button operator" onclick="addToDisplay('+')">+</button>
<button class="button" onclick="addToDisplay('4')">4</button>
<button class="button" onclick="addToDisplay('5')">5</button>
<button class="button" onclick="addToDisplay('6')">6</button>
<button class="button operator" onclick="addToDisplay('-')">-</button>
<button class="button" onclick="addToDisplay('1')">1</button>
<button class="button" onclick="addToDisplay('2')">2</button>
<button class="button" onclick="addToDisplay('3')">3</button>
<button class="button operator" onclick="addToDisplay('*')">&times;</button>
<button class="button" onclick="addToDisplay('0')">0</button>
<button class="button" onclick="addToDisplay('.')">.</button>
<button class="button operator" onclick="addToDisplay('/')">&#247;</button>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button equals" onclick="calculate()">=</button>
</div>
<script>
function addToDisplay(value) {
document.getElementById("display").innerHTML += value;
}
function clearDisplay() {
document.getElementById("display").innerHTML = "";
}
function calculate() {
var expression = document.getElementById("display").innerHTML;
var result = eval(expression);
document.getElementById("display").innerHTML = result;
}
</script>
</body>
</html>

 

 

七、JDBC连接数据库原理

 

 八、后端代码实现

UserController：

 

package com.carculator.controller;

 

import com.carculator.services.UserService;
import com.carculator.domain.ResultData;
import com.carculator.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

 

/**
* @desc
* @date 2022年02月19日 2022/2/19
*/
@CrossOrigin
@RestController
public class UserController {
@Autowired
private UserService userService;
@Autowired
private User user;

 

@RequestMapping("login")
public ResultData userLogin(@RequestParam("userName") String userName,@RequestParam("passWord") String passWord){
System.out.println("前端输入的用户名是："+userName);
System.out.println("前端输入的密码是："+passWord);
int code = -1;
String msg = "";
User data = null;
User userByUserName = userService.findUserByUserName(userName);
if (userByUserName != null) {
System.out.println(userByUserName.toString());
if (userByUserName.getPassWord().equals(passWord)) {
code = 200;
msg = "登陆成功";
data = userByUserName;
} else {
code = 200;
msg = "密码错误";
}
} else {
code = 400;
msg = "用户名不存在";
}
ResultData response = new ResultData();
response.setCode(code);
response.setMsg(msg);
response.setData(data);
return response;
}
}

application.yml：

 

spring:
mvc:
contentnegotiation:
favor-parameter: true
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url=jdbc:mysql: //127.0.0.1:3306/java_test
username: root
password: root

 

CarculatorApplication：

package com.carculator;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.context.ConfigurableApplicationContext;
@ServletComponentScan(basePackages = "com.electronicticket.weboriginalcomponent")
@SpringBootApplication
class CarculatorApplication extends SpringBootServletInitializer {

public static void main(String[] args) {
ConfigurableApplicationContext context = SpringApplication.run(CarculatorApplication.class, args);
}
}

User：

package com.carculator.domain;

import lombok.Data;
import lombok.ToString;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import javax.persistence.*;
@Component
@ConfigurationProperties(prefix = "user")
@Entity
@Table(name = "user")
@Data
@ToString
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private Long id;
@Column(name = "username")
private String userName;
@Column(name = "password")
private String passWord;
@Column(name = "realname")
private String realName;
@Column(name = "dress")
private String dress;
@Column(name = "telephone")
private String telphone;
@Column(name = "img")
private String img;
}

 

标签：box,color,background,org,import,login,实验报告
From： https://www.cnblogs.com/shierxixi/p/17873820.html

相关文章

  • 算法实验报告1
    算法实验报告1发布地址（方便阅读）：https://cmd.dayi.ink/3VqGmm4dRamR85T2ptXCsQhttps://blog.dayi.ink/?p=91<>P183习题-T1题目描述给定一个数字n和子集1，2，3，...,n-1,请用数组输出所有不同的划分方式。4有四种划分方式：1＋1＋1＋11＋1＋2.1＋3.2＋2.5有六种划分方式：1＋1＋1＋1＋1.1＋1＋1＋2，1＋1＋3，1＋2＋2，1＋4，3＋2......
  • Java实验报告五
    实验五实验名称：文件与I/O流实验目的：掌握文件与输入输出流的使用。实验时间：（2学时）实验类型：验证型实验内容：1.创建类：FindFile.java，遍历当前目录，打印目录中文件名称，目录打印”isDirectory”,文件打印“isfile”。修改程序打印当前目录及子目录信息。提示：当前目录名用......
  • Java实验报告
    实验一实验名称：JAVA中循环结构实验目的：熟悉循环结构，熟悉JAVA类的定义以及参数的传递。实验时间：（2学时）实验类型：验证型实验内容：（1）金字塔：Pyramid.java在屏幕上显示一个由星型符号“*”组成的金字塔图案，要求用户设置金字塔的高度，程序能根据用户设置的高度打印金字塔，......
  • 算法实验报告2
    算法实验报告2本文链接：https://type.dayiyi.top/index.php/archives/231/1.求幂集问题也就是求全部的组合DFS:把全排列DFS树给记录下来就可以DFS到每个节点的时候，记录当前状态加入到结果集即可。复杂度O(N!)python代码：defdfs(nums,path,index,res):res.append(p......
  • 北京电子科技学院（BESTI）实验报告
    实验报告课程：计算机基础与程序设计班级：2314姓名：高伟光学号：20231404成绩：指导教师：娄佳鹏实验日期：2022.9.26实验密级：预习程度：部分预习实验时间：34节仪器组次：无必修/选修：必修实验序号：实验一实验名称：Li......
  • 实验报告
    一、总体思路利用Java，继承JFrame类实现图形用户页面框架及UI设计布局，继承了ActionListener接口实现按钮事件监听用户按钮输入结束后获取等号前的字符串，采用双栈法将中缀表达式转化为后缀表达式后计算后缀表达式（单独写出牛顿迭代法计算开方运算）结果并输出在文本框中二、UI设计......
  • SWUST 算法分析与设计 实验报告2
    合并排序实验报告 一、     实验内容及目的实验内容：对合并排序算法进行算法描述、效率分析、实验结果分析。实验目的：深入理解分治法的思想，学习合并排序的排序方法，对合并排序进行算法分析，通过与其他排序算法比较，体会分治思想的优点。分析的指标：在相同数据规模的情况......
  • SWUST 算法分析与设计 实验报告1
    Lockerdoors实验报告 一、     实验内容及目的实验内容：有一组数从1~n。从1开始，访问第i个数和它的倍数。以此类推。当i=n结束时，求有多少个数的访问次数为奇数。实验目的：验证不同的算法，在不同的数据规模的情况下，运行时间的变化情况，绘制成曲线图，比较算法的优劣性。体......
  • 2023夏季《移动软件开发》实验报告：lab01
    一、实验目标学习使用快速启动模板创建小程序的方法；学习不使用模板手动创建小程序的方法。二、实验步骤自动生成小程序首先到微信公众平台官网首页注册账号，进行信息填写登记，使用邮箱激活账号。然后到微信开发者工具官网，根据自己的电脑版本下载微信开发者工具，并进行安......
  • 如何实现Python线性回归模型的实验报告的具体操作步骤
    Python线性回归模型的实验报告简介线性回归是一种常用的机器学习模型，用于预测一个或多个自变量与因变量之间的线性关系。它是一种简单但强大的模型，被广泛应用于各个领域。本实验报告将介绍如何使用Python实现线性回归模型，并进行实验验证其预测能力。数据集首先，我们需要准备一......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99