第二次作业

前言：

一.实验目的

设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录。

二.项目功能

简易计算机的建立
登录界面
登录功能的实现
三.使用环境

使用WPS Offic作绘图工具
使用Java语言与IntelliJ IDEA Community Edition作开发工具
使用MySQL数据库储存数据
使用Navicat 15管理操作数据库

项目整体：

代码实现：

src:

controller-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("/xszy")
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.userxszy(uname, upwd);
        //判断消息模型的状态码
        if (messageModel.getCode() == 1) {
            //将消息模型中的用户信息设置到session作用域中，定向跳转到index.jsp
            request.getSession().setAttribute("user", messageModel.getObject());
            response.sendRedirect("index.jsp");
        } else {//失败
            //将消息模型对象设置到request作用域中，请求转发跳转到xszy.jsp
            request.setAttribute("messageModel", messageModel);
            request.getRequestDispatcher("xszy.jsp").forward(request, response);
        }
    }
}

entity-vo-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;

}

entity-User:

package com.xxxx.entity;

public class User {

    private  Integer userId;//用户编号
    private  String userName;//用户姓名
    private  String userPwd;//用户密码

    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;
    }
}

mapper-UserMapper:

package com.xxxx.mapper;

import com.xxxx.entity.User;

public interface UserMapper {
    public User queryUserByName(String userName);
}

mapper-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>

service-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 userxszy(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;
        }
        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;
    }
}

test-test:

package com.xxxx.test;

import com.xxxx.entity.User;
import com.xxxx.mapper.UserMapper;
import com.xxxx.util.GetSqlSession;
import org.apache.ibatis.session.SqlSession;

public class test {
 public static void main(String[] args) {
        SqlSession session = GetSqlSession.createSqlSession();
        UserMapper userMapper = session.getMapper(UserMapper.class);
        User user = userMapper.queryUserByName("admin");
        System.out.println(user);
}
}

util-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());
    }
}

util-StringUtil:

package com.xxxx.util;

public class StringUtil {
    public static boolean isEmpty(String str){
        if (str == null || "".equals(str.trim())){
            return true;
        }
        return false;
    }
}

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>

mysql.properties:

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3305/java_test?serverTimezone=UTC&useSSL=false&characterEncoding=UTF-8 
username=root
password=0987654321

web:

js:

WEB-INF:

index.jsp:

<%@ 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>有个计算器</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: gray;
            /* border-radius: 10px; */
            /* border-top-left-radius: 10px; */
        }
        #top .point {
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
        #top .red {
            background-color: red;
        }
        #top .blue {
            background-color: blue;
        }
        #top .green {
            background-color: green;
        }
        #calc-title {
            font-size: 22px;
            color: white;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }

        /* 设置结果显示栏样式 */
        #result {
            width: 446px;
            height: 50px;
            margin: auto;
            text-align: right;/*文本内容右对齐*/
            background-color: white;
            border: solid 2px red;
            font-size: 30px;
        }

        /* 设置按钮区域的样式 */
        #button {
            width: 450px;
            height: 422px;
            background-color: gray;
            margin: auto;
        }

        #button div {
            width: 108px;
            height: 80px;
            float: left;
            background-color: #7fffd4;
            margin: 2px;
            line-height: 80px;
            text-align: center;
            font-size: 26px;
        }
        #button div:hover {
            background-color: orangered;
        }

    </style>
    <script type="text/javascript">
        //获取一个元素
        function aler(){
            var cal = document.getElementById("calc-title").innerHTML;
            window.alert(cal);
        }
        document.getElementsByClassName("point");
        //输入数字
        function num(number){
            var result = document.getElementById("result")
            result.innerHTML = result.innerHTML + number
        }//输入运算符
        function oper(operator){
            var result = document.getElementById("result")
            result.innerHTML = result.innerHTML + operator
        }
        //计算结果
        function yunsuan(){
            var result= document.getElementById("result")
            var expression = result.innerHTML
            result.innerHTML =eval(expression)
        }
        function doback(){
            var result =document.getElementById("result")//定位到result
            var len=result.innerHTML.length//取出result的值并取他的总长度
            result.innerHTML =result.innerHTML.substr(0,len-1)//把result里面的值处理后重新放到result里面

        }
        function qingkong(){
            var result = document.getElementById("result")
            result.innerHTML = ""

        }
    </script>
</head>
<body >
<div id="top">
    <div class="point red"></div>
    <div class="point blue"></div>
    <div class="point green"></div>
    <div id="calc-title">及其有品的计算器</div>
</div>

<div id="result" name="result" ></div>

<div id="button">
    <!--当被单击时触发事件-->
    <!--在<script>里面写函数，下面调用函数，传参-->
    <div onclick="qingkong()">AC</div>
    <div>+/-</div>
    <div onclick="oper('%')">%</div>
    <div onclick="oper('/')">÷</div>
    <div onclick="num(7)">7</div>
    <div onclick="num(8)">8</div>
    <div onclick="num(9)">9</div>
    <div onclick="oper('*')">*</div>
    <div onclick="num(4)">4</div>
    <div onclick="num(5)">5</div>
    <div onclick="num(6)">6</div>
    <div onclick="oper('-')">-</div>
    <div onclick="num(1)">1</div>
    <div onclick="num(2)">2</div>
    <div onclick="num(3)">3</div>
    <div onclick="oper('+')">+</div>
    <div onclick="num(0)">0</div>
    <div onclick="doback()">删除</div>
    <div onclick="oper('.')">.</div>
    <div onclick="yunsuan()">=</div>
</div>

</body>
</html>

xszy.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
</head>
<body>
<div style="text-align: center">
    <form action="xszy" method="post" id="xszyForm">
        姓名：<input type="text" name="uname" id="uname" value="${messageModel.object.userName}"><br>
        密码：<input type="password" name="upwd" id="upwd" value="${messageModel.object.userPwd}"><br>
        <span id="msg" style="font-size: 15px;color: #fd0329">${messageModel.msg}</span><br>
        <button type="button" id="xszyBtn">登录</button>
        <button type="button">注册</button>
    </form>
</div>
<%--引入Jquery的js文件--%>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $("#xszyBtn").click(function (){
        //获取用户姓名和密码的值
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        //判断姓名是否为空
        if(isEmpty(uname)){
            $("#msg").html("用户姓名不可为空！");
            return;
        }
        //判断密码是否为空
        if(isEmpty(upwd)){
            $("#msg").html("用户密码不可为空！");
            return;
        }
        //如果都不为空，则提交表单
        $("#xszyForm").submit();

    });

    function isEmpty(str){
        if(str == null || str.trim() == ""){
            return true;
        }
        return false
    }
</script>

</body>
</html>