第二次作业
[实验目的]
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
[实验内容]
1.设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。
2.本次实验使用数据库为MySQL数据库，并用Navicat使用MySQL数据库。
3.用IntelliJ IDEA 2023.2.5工具编写登录注册代码。
一、程序流程图
1.登录流程图
2.注册流程图
二、项目架构和运行页面展示
1.项目架构
2.运行页面
3.登录成功
三、计算器代码展示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器-qbr</title>
<style>
#an1,#an11{
height: 60px;
background-color: rgba(71, 71, 176, 0);
color:#000000;
border:0;
font-size: 16px;
box-sizing: content-box;
border-radius: 5px;
margin: 0px;
}
#num{
width: 421px;
height: 80px;
background-color: #ffffff;
text-align: end;
font-size: 20px;
border: 0;
border-radius: 10px;
}
#num1{
width: 425px;
height: 60px;
background-color: #ffffff;
text-align: end;
font-size: 20px;
border: 0;
border-radius: 10px;
}
#an{
width: 102.5px;
height: 60px;
background-color: #ffffff;
color:#000000;
border:0;
font-size: 16px;
box-sizing: content-box;
border-radius: 5px;
margin-top: 5px;
}
#kuo1,#kuo2,#anq,#ans{
width: 90px;
height: 60px;
background-color: #ffffff;
color:#000000;
border:0;
font-size: 16px;
box-sizing: content-box;
border-radius: 5px;
margin-top: 5px;
}
#an2,#anf111{
width: 102.5px;
height: 102.5px;
border: 0;
background-color: #ffffff;
border-radius: 10px;
font-size: 20px;
}
#an3{
width: 102.5px;
height: 102.5px;
border: 0;
background-color: #ffffff;
border-radius: 10px;
font-size: 20px;
}
#anf{
width: 102.5px;
height: 102.5px;
border: 0;
background-color: #ffffff;
border-radius: 10px;
font-size: 20px;
}
#anf11{
width: 102.5px;
height: 102.5px;
border: 0;
background-color: #ffffff;
border-radius: 10px;
font-size: 20px;
}
#and1{
width: 210px;
height: 60px;
border: 0;
background-color: #ffffff;
border-radius: 10px;
font-size: 20px;
}
#anf1{
width: 210px;
height: 60px;
border: 0;
background-color: #ffffff;
border-radius: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div style="background-color: #2a2a2a;padding: 10px;width: min-content;border-radius: 15px;">
<div>
<script>
function my(id){
return document.getElementById(id);
}
my("an11").onclick=function(){
my("biao").style.display="none";
my("you").style.display="block";
}
my("an1").onclick=function(){
my("you").style.display="none";
my("biao").style.display="block";
}
</script>
</div>
<!-----标准计算器------>
<div id="biao">
<input type="text" value="" placeholder="无内容" id="num"/>
<div>
<input type="button" value="(" onclick="shuz(this)" id="kuo1"/>
<input type="button" value=")" onclick="shuz(this)" id="kuo2"/>
<input type="button" value="清除" id="anq"/>
<input type="button" value="删" id="ans"/>
</div>
<div style="margin-top: 5px;">
<input type="button" value="1/x" id="anf11" onclick="tes('1')"/>
<input type="button" value="x²" id="anf11" onclick="tes('2')"/>
<input type="button" value="²√x" id="anf11" onclick="tes('3')"/>
<input type="button" value="÷" onclick="shuz(this)" id="anf"/>
</div>
<div style="margin-top: 5px;">
<input type="button" value="7" onclick="shuz(this)" id="an2"/>
<input type="button" value="8" onclick="shuz(this)" id="an2"/>
<input type="button" value="9" onclick="shuz(this)" id="an2"/>
<input type="button" value="×" onclick="shuz(this)" id="anf"/>
</div>
<div style="margin-top: 5px;">
<input type="button" value="4" onclick="shuz(this)" id="an2"/>
<input type="button" value="5" onclick="shuz(this)" id="an2"/>
<input type="button" value="6" onclick="shuz(this)" id="an2"/>
<input type="button" value="-" onclick="shuz(this)" id="anf"/>
</div>
<div style="margin-top: 5px;">
<input type="button" value="1" onclick="shuz(this)" id="an2"/>
<input type="button" value="2" onclick="shuz(this)" id="an2"/>
<input type="button" value="3" onclick="shuz(this)" id="an2"/>
<input type="button" value="+" onclick="shuz(this)" id="anf"/>
</div>
<div style="margin-top: 5px;">
<input type="button" value=" " id="anf111"/>
<input type="button" value="0" onclick="shuz(this)" id="an2"/>
<input type="button" value="." onclick="shuz(this)" id="an2"/>
<input type="button" value="=" id="an3" onclick="deng()"/>
</div>
</div>
<script>
//特殊符号处理
function tes(q){
if(q==1){
//计算倒数
my("num").value=1/deng();
}
if(q==2){
//计算平方
my("num").value=Math.pow(deng(),2);
}
if(q==3){
//计算开方
my("num").value=Math.sqrt(deng());
}
}
//删除
my("ans").onclick=function(){
var shu=my("num").value;
my("num").value=shu.slice(0,-1)
}
//清除
my("anq").onclick=function(){
my("num").value=null;
}
//数字按键及基本运算符
function shuz(eee){
my("num").value+=eee.value;
}
//等于
function deng(){
var shu=my("num").value;
var shu = shu.replace(/×/g, '*')
var shu = shu.replace(/÷/g, '/')
my("num").value=eval(shu);
return eval(shu);
}
</script>
</div>
</body>
</html>
四、登录注册代码
1.lianxi.jsp:
<%--
Created by IntelliJ IDEA.
User: 86152
Date: 2023/11/20
Time: 18:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 引入外部 jQuery 文件 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 400px;
margin: 50px auto;
}
#msg {
display: block;
margin-top: 10px;
}
#lianxiBtn {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<form action="lianxi" method="post" id="lianxiForm">
<div class="form-group">
<label for="uname">姓名：</label>
<input type="text" class="form-control" name="uname" id="uname" value="${messageModel.object.userName}">
</div>
<div class="form-group">
<label for="upwd">密码：</label>
<input type="password" class="form-control" name="upwd" id="upwd" value="${messageModel.object.userpwd}">
</div>
<span id="msg" class="text-danger">${messageModel.msg}</span>
<button type="button" class="btn btn-primary" id="lianxiBtn">登录</button>
<a href="http://localhost:8080/lp/Register.jsp">注册</a>
</form>
</div>
<script type="text/javascript" src="js/your-custom-script.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("#lianxiBtn").click(function (){
//获取用户姓名和密码的值
var uname = $("#uname").val();
var upwd = $("#upwd").val();
//判断姓名是否为空
if(isEmpty(uname)){
$("#msg").html("用户姓名不可为空！");
return;
}
//判断密码是否为空
if(isEmpty(upwd)){
$("#msg").html("用户密码不可为空！");
return;
}
//如果都不为空，则提交表单
$("#lianxiForm").submit();
});
function isEmpty(str){
if(str == null || str.trim() == ""){
return true;
}
return false
}
</script>
</body>
</html>
2.Register.jsp:
<%--
Created by IntelliJ IDEA.
User: 86152
Date: 2023/12/4
Time: 18:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 引入外部 jQuery 文件 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 400px;
margin: 50px auto;
}
#msg {
display: block;
margin-top: 10px;
}
#RegisterBtn {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div style="text-align: center">
<form action="Register" method="post" id="RegisterForm">
姓名：<input type="text" name="userName" id="userName" value="${messageModel.object.userName}" ><br>
密码：<input type="password" name="uawePwd" id="userPwd" value="${messageModel.object.userpwd}"><br>
确认密码：<input type="password" name="uawePwd2" id="userPwd2" value="${messageModel.object.userpwd2}"><br>
<span id="msg" style="font-size: 15px;color: #fd0329">${messageModel.msg}</span><br>
<button type="button" id="RegisterBtn">注册</button>
<a href="http://localhost:8080/lp/lianxi.jsp">登录</a>
</form>
</div>
<%--引入Jquery的js文件--%>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("#RegisterBtn").click(function (){
//获取用户姓名和密码的值
var userName = $("#userName").val();
var userPwd = $("#userPwd").val();
var userPwd2 = $("#userPwd2").val();
//判断姓名是否为空
if(isEmpty(userName)){
$("#msg").html("用户姓名不可为空！");
return;
}
//判断密码是否为空
if(isEmpty(userPwd || isEmpty(userPwd2))){
$("#msg").html("用户密码不可为空！");
return;
}
//如果都不为空，则提交表单
$("#lianxiForm").submit();
});
function isEmpty(str){
if(str == null || str.trim() == ""){
return true;
}
return false
}
</script>
</body>
</html>
3.UserServlet:
package com.xxxx.controller;
import com.xxxx.entity.vo.MessageModel;
import com.xxxx.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/lianxi")
public class UserServlet extends HttpServlet {
//实例化UserService对象
private UserService userService = new UserService();
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收客户端的请求（接收参数，姓名，密码）
String uname = request.getParameter("uname");
String upwd = request.getParameter("upwd");
//调用service层的方法，返回消息模型对象
MessageModel messageModel = userService.userlianxi(uname, upwd);
//判断消息模型的状态码
if (messageModel.getCode() == 1) {//成功
//将消息模型中的用户信息设置到session作用域中，定向跳转到index.jsp
request.getSession().setAttribute("user", messageModel.getObject());
response.sendRedirect("index.jsp");
} else {//失败
//将消息模型对象设置到request作用域中，请求转发跳转到lianxi.jsp
request.setAttribute("messageModel", messageModel);
request.getRequestDispatcher("lianxi.jsp").forward(request, response);
}
}
}
4.RegisterServlet:
package com.xxxx.controller;
import db.Database;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
@WebServlet(name = "RegisterServlet",urlPatterns = "/Register")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");//设置编码
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
String userPwd2 = request.getParameter("userPwd2");
PrintWriter out = response.getWriter();
if (userPwd.equals(userPwd2)) {
try {
Database database = new Database();
database.insert(userName,userPwd);
out.println("注册成功");
out.println("请返回登录页面" + "<a href=\"http://localhost:8080/lp/lianxi.jsp\">返回登录</a>");
} catch (ClassNotFoundException e) {
throw new RuntimeException(e);
} catch (SQLException e) {
throw new RuntimeException(e);
}
} else {
out.println("两次输入的密码不一致，注册失败");
out.println("请返回重新注册" + "<a href=\"http://localhost:8080/lp/Register.jsp\">返回注册</a>");
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
5.MessageModel:
package com.xxxx.entity.vo;
public class MessageModel {
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getObject() {
return object;
}
public void setObject(Object object) {
this.object = object;
}
private Integer code = 1;
private String msg = "成功！";
private Object object;
}
6.User:
package com.xxxx.entity;
public class User {
private Integer userId;//用户编号
private String userName;//用户姓名
private String userpwd;//用户密码
private String userpwd2;//用户密码
public String getUserpwd2() {
return userpwd2;
}
public void setUserpwd2(String userpwd2) {
this.userpwd2 = userpwd2;
}
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getUserpwd() {
return userpwd;
}
public void setUserpwd(String userpwd) {
this.userpwd = userpwd;
}
}
7.UserMapper:
package com.xxxx.mapper;
import com.xxxx.entity.User;
public interface UserMapper {
public User queryUserByName(String userName);
}
8.UserMapper.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 首先来解析namespace:命名空间,此属性通常用来映射Dao层接口.-->
<mapper namespace="com.xxxx.mapper.UserMapper">
<!-- id:对应Dao层接口方法名parameterType:指定输入参数类型 -->
<!-- useGeneratedKeys="true"把新增加的主键赋值到自己定义的keyProperty (id)中 -->
<select id = "queryUserByName" parameterType = "String" resultType = "com.xxxx.entity.User">
select * from tb_user where userName = #{userName}
</select>
</mapper>
9.UserService:
package com.xxxx.service;
import com.xxxx.entity.User;
import com.xxxx.entity.vo.MessageModel;
import com.xxxx.mapper.UserMapper;
import com.xxxx.util.GetSqlSession;
import com.xxxx.util.StringUtil;
import org.apache.ibatis.session.SqlSession;
public class UserService {
public MessageModel userlianxi(String uname, String upwd) {
MessageModel messageModel = new MessageModel();
//回显数据
User u = new User();
u.setUserName(uname);
u.setUserpwd(upwd);
messageModel.setObject(u);
//参数的非空判断
if (StringUtil.isEmpty(uname) ||StringUtil.isEmpty(upwd)){
//将状态码，提示信息，回信数据设置到消息模型对象中，返回消息模型对象
messageModel.setCode(0);
messageModel.setMsg("用户姓名和密码不能为空！");
return messageModel;
}
//调用dao层的查询方法，通过用户名查询用户对象
SqlSession session = GetSqlSession.createSqlSession();
UserMapper userMapper = session.getMapper(UserMapper.class);
User user = userMapper.queryUserByName(uname);
// 判断用户对象是否为空
if(user == null){
//将状态码，提示信息，回信数据设置到消息模型对象中，返回消息模型对象
messageModel.setCode(0);
messageModel.setMsg("用户不存在!");
return messageModel;
}
//判断数据库中查询到的用户密码与前台传递过来的密码进行比较
if (!upwd.equals(user.getUserpwd())){
//如果不相等，将状态码，提示信息，回显数据设置到消息模型对象中，返回消息模型对象
messageModel.setCode(0);
messageModel.setMsg("用户密码不正确!");
return messageModel;
}
//登录成功，将用户信息设置到消息模型对象中
messageModel.setObject(user);
return messageModel;
}
}
10.GetSqlSession:
package com.xxxx.util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class GetSqlSession {
public static SqlSession createSqlSession(){
SqlSessionFactory sqlSessionFactory = null;
InputStream input = null;
SqlSession session = null;
try{
String resource = "mybatis-config.xml";
input = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(input);
session = sqlSessionFactory.openSession();
return session;
}catch (IOException e){
e.printStackTrace();
return null;
}
}
public static void main(String[] args) {
System.out.println(createSqlSession());
}
}
11.StringUtil:
package com.xxxx.util;
/**
* 字符串工具类
*/
public class StringUtil {
/**
* 判断字符串是否为空
* 如果为空，返回true
* 如果不为空，返回false
* @param str
* @return
*/
public static boolean isEmpty(String str){
if (str == null || "".equals(str.trim())){
return true;
}
return false;
}
}
12.Database:
package db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
public class Database {
static Connection conn = null;
public Database() throws ClassNotFoundException, SQLException {
Class.forName("com.mysql.cj.jdbc.Driver");
this.conn= DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/denglu.test?serverTimezone=UTC&useSSL=false&characterEncoding=UTF-8 ","root","123456");
}
public static void showConnect(){
if(conn == null){
System.out.println("数据库链接失败！");
}else {
System.out.println("数据库链接成功！");
}
}
public void close() throws SQLException {
conn.close();
}
public void insert(String userName,String userPwd) throws SQLException {
PreparedStatement prep = conn.prepareStatement("insert into tb_user values(null,?,?)");
prep.setString(1,userName);
prep.setString(2,userPwd);
prep.execute();
}
}
13.mybatis-config.xml:
<?xm1 version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<properties resource="mysql.properties"/>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<dataSource type="POOLED">
<property name="driver" value="${driver}" />
<property name="url" value="${url}"/>
<property name="username" value="${username}"/>
<property name="password" value="${password}"/>
</dataSource>
</environment>
</environments>
<mappers>
<package name="com.xxxx.mapper"/>
</mappers>
</configuration>
14.mysql.properties:
driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/denglu.test?serverTimezone=UTC&useSSL=false&characterEncoding=UTF-8
username=root
password=123456
四、数据库存储
浙公网安备 33010602011771号