# 基于JavaWeb的电话簿

## 1 项目来源

感谢我的学姐@Ziy，使用了她的JavaWeb大作业。



## 2 运行代码

### 2.1 运行初始化

拿到项目压缩包后，首先导入IDEA，由于她是使用Eclipse构建的项目，所以需要改动一点配置。

### 2.2 更改错误配置

成功导入项目，开始运行，报错说找不到servlet-api的包，使用maven重新构建项目，然后分别添加Servlet，MySQL，Tomcat的依赖坐标，重新运行。

### 2.3 运行和建表

成功运行jsp页面，之后更改数据库信息，更改账号密码，建立数据库，新建表，添加数据，重新运行项目。

### 2.4 项目运行成功


![登录页](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/0ab37bec744d85a2ee96a63f878b186d.1.webp)

![登录成功](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/db2ec597dbd783a8ef3f6a286b59cf2b.2.webp)

## 3 分析代码

### 3.1 粗看代码

运行时只是粗略查看了代码内容，并未对代码深究。首先看它的项目结构，很简单的servlet+bean结构，只有一个loginservlet用来处理登录请求，和一个Tel实体。再来看web目录，有一个image文件夹用来存放图片资源，还有一串jsp文件，分别是界面和逻辑。


![Java目录](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/ad63cdcf92d8e1eedd4ffba65cd79f42.3.webp)

![web目录](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/37518201cae3c89373d840175bd303a6.4.webp)

### 3.2 细看代码

细看发现代码非常杂乱，比如后端service层、mapper层的代码出现在jsp中，比如web层的servlet耦合了太多东西。这些问题可以后续改进。

### 3.3 分析结果

此项目开发时开发者并未学习到很多东西，导致目录结构混乱，可读性差，代码耦合严重，代码复用性差，没用使用框架编程。有充足的二次改进空间。

## 4 改进思路与改进过程

### 4.1 后端框架

为项目的后端部分引入SpringBoot+SSM框架，Maven框架，并编写相关配置，并调整项目结构，使目录更加规范。

![java目录](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/b0621db940f1e928be6b69c421b32ef5.5.webp)

### 4.2 后端改进

将不同层的代码解耦并封装在不同的类中，重新编写了更符合现在规范的代码，包括命名、接口、注解开发。

### 4.3 前端改进

将前端的页面全部改为静态Html，并引入Vue框架+Axios用来处理原生的DOM操作和发送接收请求并进行异步通信，使页面更符合现在的使用和开发习惯。

![前端目录](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/0ab37bec744d85a2ee96a63f878b186d.1.webp)

### 4.4 通信改进

将不同的操作封装成不同请求与后端交互

## 5 改进完成与过程感悟

### 5.1 部分后端代码

```java
package com.shou.controller;

import com.shou.domain.Phone;
import com.shou.service.PhoneService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/phones")
public class PhoneController {
    @Autowired
    private PhoneService phoneService;
    @PostMapping
    public Boolean save(@RequestBody Phone phone) {
        return phoneService.save(phone);
    }
    @GetMapping
    public List<Phone> getAll() {
        System.out.println(phoneService.getAll());
        return phoneService.getAll();
    }
    @GetMapping("/name/{name}")
    public List<Phone> getByName(@PathVariable String name) {
        return phoneService.getByName(name);
    }
    @GetMapping("/num/{phonenum}")
    public Phone getByPhonenum(@PathVariable String phonenum) {
        System.out.println(phonenum);
        Phone numphone=phoneService.getByPhonenum(phonenum);
        System.out.println(numphone);
        return numphone;
    }
    @PutMapping
    public Boolean update(@RequestBody Phone phone) {
        return phoneService.update(phone);
    }
    @DeleteMapping("/{phonenum}")
    public Boolean delete(@PathVariable String phonenum) {
        return phoneService.delete(phonenum);
    }
}

```

### 5.2 部分前端代码

``` javascript
    new Vue({
      el: "#app",
      data() {
        return {
          form: {
            name: "",
            pass: "",
          },
        };
      },
      methods: {
        onSubmit() {
          if (this.form.name == "" || this.form.pass == "") {
            alert("请输入用户名和密码");
          } else {
            axios({
              method: "post",
              url: "http://localhost/login",
              data: {
                name: this.form.name,
                pass: this.form.pass,
              },
            }).then((response) => {
              if (response.data === "error") {
                alert("用户名或密码错误！");
              } else {
                location.replace("success.html");
              }
            });
          }
        },
      },
    });
```

### 5.3 过程感悟

通过本次二次改进项目，我对框架编程有了更深刻的认识，也更加明白了为什么以前的老东西会被淘汰，对于SpringBoot+SSM更加熟悉了，也对前端的框架熟悉了一点，对于之前老师所讲的配置要单独写在文件的概念也有了具体的认知。

另外，由于是二次改进，我发现如果没有一个相应的规范，阅读别人的代码和运行别人的代码是一件多么麻烦的事，如果没有注释和说明文档那将更加雪上加霜。所以我们在写代码时一定要规范书写并且要习惯写注释，无论是方便以后自己的查看又或者别人接手和改进，这都是扫除障碍的好办法。

—— KID(2023.3.8)

基于JavaWeb的电话簿

原理：
QueryPerformanceCounter()这个函数返回高精确度性能计数器的值,它可以以微妙为单位计时.但是QueryPerformanceCounter()确切的精确计时的最小单位是与系统有关的,所以,必须要查询系统以得到QueryPerformanceCounter()返回的嘀哒声的频率.



QueryPerformanceFrequency()提供了这个频率值,返回每秒嘀哒声的个数. 

计算确切的时间是从第一次调用QueryPerformanceCounter()开始的假设得到的LARGE_INTEGER为t1,过一段时间后再次调用该函数结束的,设得到t2.两者之差除以QueryPerformanceFrequency()的频率就是开始到结束之间的秒数.由于计时函数本身要耗费很少的时间,要减去一个很少的时间开销.但一般都把这个开销忽略。

高精度版本：
```cpp
#include<iostream>
#include<windows.h>
int main(){
	
	//输入
	
	LARGE_INTEGER t1,t2,tc;
	QueryPerformanceFrequency(&tc);
	QueryPerformanceCounter(&t1);

	//要检查的代码
	
	QueryPerformanceCounter(&t2);
	double time=(double)(t2.QuadPart-t1.QuadPart)/(double)tc.QuadPart;
	cout<<"time = "<<time*1000<<"ms"<<endl;
	return 0;
}
```

代码执行速度测试

# 权限管理

Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。Shiro 可以非常容易的开发出足够好的应用，其不仅可以用在 JavaSE 环境，也可以用在 JavaEE 环境。



## 权限控制

RBAC(Role Based Access Control) :某个用户拥有什么角色,被允许做什么事情(权限)

用户登录—>分配角色---->(权限关联映射)---->鉴权(拥有什么什么权限)

基本上涉及到用户参与的系统都要进行权限管理，权限管理属于系统安全的范畴，权限管理实现对用户访问系统的控制，按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源。

权限管理包括用户身份认证和授权两部分，简称认证授权。对于需要访问控制的资源用户首先经过身份认证，认证通过后用户具有该资源的访问权限方可访问。

## 身份认证

身份认证，就是判断一个用户是否为合法用户的处理过程。最常用的简单身份认证方式是系统通过核对用户输入的用户名和口令，看其是否与系统中存储的该用户的用户名和口令一致，来判断用户身份是否正确。对于采用指纹等系统，则出示指纹；对于硬件Key等刷卡系统，则需要刷卡。

## 授权

授权，即访问控制，控制谁能访问哪些资源。主体进行身份认证后需要分配权限方可访问系统的资源，对于某些资源没有权限是无法访问的

# Shiro

Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。Shiro 可以非常容易的开发出足够好的应用，其不仅可以用在 JavaSE 环境，也可以用在 JavaEE 环境。

## 架构

![shiro1.png](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/abcb737eb39186ddfb2e0d08101dbc8c.q1.webp)

- Subject(用户)
当前的操作用户 获取当前用户Subject currentUser = SecurityUtils.getSubject()

- SecurityManager（安全管理）
Shiro的核心,负责与其他组件进行交互,实现 subject 委托的各种功能

- Realms（数据源）
Realm会查找相关数据源,充当与安全管理间的桥梁,经过Realm找到数据源进行认证,授权等操作

- Authenticator（认证器):
用于认证，从 Realm 数据源取得数据之后进行执行认证流程处理

- Authorizer（授权器)
用户访问控制授权，决定用户是否拥有执行指定操作的权限

- SessionManager（会话管理器）
支持会话管理

- CacheManager （缓存管理器)
用于缓存认证授权信息

- Cryptography（加密组件）
提供了加密解密的工具包

## 基本功能

![q2.png](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/d58b6ed03b59de2d1e3c57cd9541b451.q2.webp)

1. Authorization（授权）
即权限验证，验证某个已认证的用户是否拥有某个权限；即判断用户是否能做事情，常见的如：验证某个用户是否拥有某个角色。或者细粒度的验证某个用户对某个资源是否具有某个权限

2. SessionManager（会话管理）
即用户登录后就是一次会话，在没有退出之前，它的所有信 息都在会话中；会话可以是普通JavaSE环境的，也可以是如Web环境的；

3. Cryptography
加密，保护数据的安全性，如密码加密存储到数据库，而不是明文存储；

4. WebSupport
Web 支持，可以非常容易的集成到Web 环境；

5. Caching
缓存，比如用户登录后，其用户信息、拥有的角色/权限不必每次去查，这样可以提高效率；

6. Concurrency
shiro 支持多线程应用的并发验证，即如在一个线程中开启另一个线程，能 把权限自动传播过去；

7. Testing
提供测试支持；

8. Run As
允许一个用户假装为另一个用户（如果他们允许）的身份进行访问；

9. Remember Me
记住我，这个是非常常见的功能，即一次登录后，下次再来的话不用登录了。

Shiro

# 结对编程

题目如下：

* 小学老师要每周给同学出300道四则运算练习题。
* 这个程序有很多种实现方式：



```
C/C++
C#/VB.net/Java
Excel
Unix Shell
Emacs/Powershell/Vbscript
Perl
Python
```

* 一个或两个运算符(a+b或a+b+c),100以内的数字，不需要写答案。
* 需要检查答案是否正确，并且保证答案在0.100之间
* 尽可能地多设置一些条件

## 小组成员

2152333_KID
2152221_xhy

## 代码

* 编写语言：Python

* 实现功能：

1.实现基础四则运算

2.保证减法有非负解，保证除法有正整数解

3.实现无括号双符号四则运算

4.保证运算一定正确且有非负整数解

5.存储答案用来检查回答的对错

6.每次输出一道题来计算

7.统计对错次数

```python
import random

#KID编写
sym = ['+', '-', '*', '/']
res = []
yn = [0, 0]
for i in range(0, 300):
    ch1 = random.choice(sym)
    ch2 = random.choice(sym)
    cnt = random.randint(1, 3)
    if (cnt == 1):
        num1 = random.randint(2, 101)
        if (ch1 == '+'):
            num2 = random.randint(0, 100-num1+1)
            print("%d+%d=" % (num1, num2))
            res.append(num1+num2)
        if (ch1 == '-'):
            num2 = random.randint(0, num1)
            print("%d-%d=" % (num1, num2))
            res.append(num1-num2)
        if (ch1 == '*'):
            num1 %= 10
            num2 = random.randint(0, 11)
            print("%d*%d=" % (num1, num2))
            res.append(num1*num2)
        if (ch1 == '/'):
            num1 %= 10
            num2 = random.randint(0, 11)
            print("%d/%d=" % (num1*num2, num2))
            res.append(num1)
    else:


#xhy编写
        num1 = random.randint(2, 11)
        num2 = random.randint(2, 9)
        if (ch1 == '+' and ch1 == '+'):
            num1 = random.randint(1, 50)
            num2 = random.randint(1, 50)
            num3 = random.randint(0, 100-num1-num2)
            print("%d+%d+%d=" % (num1, num2, num3))
            res.append(num1+num2+num3)
        if (ch1 == '+' and ch1 == '-'):
            num1 = random.randint(1, 50)
            num2 = random.randint(1, 50)
            num3 = random.randint(0, 100-(num1+num2))
            print("%d+%d-%d=" % (num1, num2, num3))
            res.append(num1+num2-num3)
        if (ch1 == '+' and ch1 == '*'):
            num2 = random.randint(1, 11)
            num3 = random.randint(1, 11)
            num1 = random.randint(0, (100-num2*num3))
            print("%d+%d*%d=" % (num1, num2, num3))
            res.append(num1+num2*num3)
        if (ch1 == '+' and ch1 == '/'):
            num2 = random.randint(1, 11)
            num3 = random.randint(1, 11)
            num1 = random.randint(0, 100-num2)
            print("%d+%d/%d=" % (num1, num2*num3, num3))
            res.append(num1+num2)
        if (ch1 == '-' and ch1 == '-'):
            num2 = random.randint(1, 50)
            num3 = random.randint(1, 50)
            num1 = random.randint(num2+num3, 101)
            print("%d-%d-%d=" % (num1, num2, num3))
            res.append(num1-num2-num3)
        if (ch1 == '-' and ch1 == '+'):
            num2 = random.randint(1, 50)
            num1 = random.randint(num2, 100)
            num3 = random.randint(0, 100-(num1-num2))
            print("%d-%d+%d=" % (num1, num2, num3))
            res.append(num1-num2+num3)
        if (ch1 == '-' and ch1 == '*'):
            num2 = random.randint(1, 10)
            num3 = random.randint(1, 10)
            num1 = random.randint(num2*num3, 100)
            print("%d-%d*%d=" % (num1, num2, num3))
            res.append(num1-num2*num3)
        if (ch1 == '-' and ch1 == '/'):
            num2 = random.randint(1, 11)
            num3 = random.randint(1, 11)
            num1 = random.randint(num2*num3, 100)
            print("%d-%d/%d=" % (num1, num2*num3, num3))
            res.append(num1-num2)
        if (ch1 == '*' and ch1 == '-'):
            num1 = random.randint(1, 11)
            num2 = random.randint(1, 11)
            num3 = random.randint(num1*num2, 100)
            print("%d*%d-%d=" % (num1, num2, num3))
            res.append(num1*num2-num3)
        if (ch1 == '*' and ch1 == '+'):
            num1 = random.randint(1, 11)
            num2 = random.randint(1, 11)
            num3 = random.randint(0, 100-num1*num2)
            print("%d*%d+%d=" % (num1, num2, num3))
            res.append(num1*num2+num3)
        if (ch1 == '*' and ch1 == '*'):
            num2 = random.randint(1, 5)
            num3 = random.randint(1, 5)
            num1 = random.randint(1, 5)
            print("%d*%d*%d=" % (num1, num2, num3))
            res.append(num1*num2*num3)
        if (ch1 == '*' and ch1 == '/'):
            num1 = random.randint(1, 11)
            num2 = random.randint(1, 11)
            num3 = random.randint(1, 11)
            while (num1*num2 % num3 != 0):
                num3 = random.randint(1, 11)
            print("%d*%d/%d=" % (num1, num2, num3))
            res.append(num1*num2/num3)


#KID编写            
        if (ch1 == '/' and ch1 == '+'):
            num1 = random.randint(1, 11)
            num2 = random.randint(1, 11)
            num3 = random.randint(1, 100-num1)
            print("%d/%d+%d=" % (num1*num2, num2, num3))
            res.append(num1+num3)
        if (ch1 == '/' and ch1 == '-'):
            num1 = random.randint(1, 11)
            num2 = random.randint(1, 11)
            num3 = random.randint(0, num1)
            print("%d/%d-%d=" % (num1*num2, num2, num3))
            res.append(num1-num3)
        if (ch1 == '/' and ch1 == '*'):
            num2 = random.randint(1, 5)
            num3 = random.randint(1, 5)
            num1 = random.randint(1, 5)
            print("%d/%d*%d=" % (num1*num2, num2, num3))
            res.append(num1*num3)
        if (ch1 == '/' and ch1 == '/'):
            num2 = random.randint(1, 5)
            num3 = random.randint(1, 5)
            num1 = random.randint(1, 5)
            print("%d/%d/%d=" % (num1*num2*num3, num2, num3))
            res.append(num1)
    ans = int(input())
    if (ans == res[i]):
        print("Success")
        yn[1] += 1
    else:
        print("Error")
        yn[0] += 1
print("做对%d道，做错%d道。" % (yn[1], yn[0]))
```

## 实验结果截图


![实验结果](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/fb0bb87cfab18f2277620c10f3f6e05a.5.webp)

## 博客体会

KID：通过编程实现四则运算程序，我感受到了合作的力量和团队协作的重要性。在这个过程中，我的搭档和我互相协作，一起分工合作，相互交流，解决了许多问题。

通过结对编程实现四则运算程序，我感受到了合作和团队协作的重要性，我相信，在未来的编程实践中，我会更加注重团队协作，发挥每个人的优势，一起创造更加出色的成果。

xhy：实现四则运算程序，我学会了更好地理解和阅读别人的代码，同时也能够更好地表达自己的想法和思路。

我深刻地体会到了团队协作的重要性和合作的力量。我们需要共同思考和解决各种问题，同时还需要互相交流和审视代码，确保程序的正确性和可靠性。

总的来说，结对编程是一种非常有益的学习和实践方式，在未来的编程实践中，我会更加注重和搭档的协作，发挥每个人的优势。

结对编程——四则运算练习题

# 常见的原型设计工具对比及初体验

## 1、市面上常见的原型设计工具

### 1.1 Adobe XD



Adobe XD 是由 Adobe 公司推出的一款原型设计工具，具有强大的交互设计功能和快速的原型制作能力。它提供了丰富的界面设计工具、交互动画和原型共享功能，适用于设计师和团队进行移动应用和网页的原型设计

### 1.2 Sketch

Sketch 是一款Mac上广受欢迎的原型设计工具，主要用于移动应用和网页设计。它提供了直观的界面和丰富的插件生态系统，支持多人协作和云端共享，可以方便地创建交互式原型和设计稿

### 1.3 Figma

Figma 是一款基于云端的协作原型设计工具，可以在浏览器上运行。它提供了强大的实时协作功能，允许多个设计师同时编辑同一个原型，并支持即时评论和反馈。Figma 还具有强大的矢量编辑工具和自动布局功能，适用于团队协作和大规模项目

### 1.4 InVision

InVision 是一个全面的产品设计和原型工具，可用于创建交互式原型和设计稿。它提供了易于使用的界面和丰富的动画效果，可以制作出高保真度的原型，并支持团队协作和客户反馈。InVision 还提供了原型共享和用户测试等功能，适合在设计过程中进行迭代和改进

## 2、墨刀和Axure的对比

### 墨刀（Mockplus）

墨刀是一款简单易用的原型设计工具，专注于快速创建交互式原型。它提供了直观的界面和丰富的预设组件，可以快速拖拽创建页面，并为元素添加交互效果和动画。墨刀还支持实时协作和在线共享，方便与团队成员和利益相关者合作和收集反馈。墨刀适合初学者和小型项目，快速创建低保真度原型的需求。

### Axure RP

Axure RP 是一款功能强大的原型设计工具，适用于复杂的应用和大规模项目。它提供了丰富的交互组件和动画效果，可以进行复杂的交互逻辑设计，并支持生成详细的设计规范和文档。Axure RP 还具有强大的协作和版本控制功能，适合团队合作和项目管理。与墨刀相比，Axure RP 提供了更高的自定义能力和灵活性，可以更精细地控制交互和设计细节。

### 对比

在使用界面和学习曲线方面，墨刀相对较简单易上手，适合初学者和追求快速原型制作的用户。而Axure RP的学习曲线较陡，功能较为复杂，适合有一定原型设计经验和对交互设计要求较高的用户。

另外，Axure RP的文档输出和规范生成功能相对更强大，适用于设计师与开发人员之间的沟通与协作。墨刀则更注重快速原型制作和团队协作的方便性。

总的来说，墨刀适用于快速原型制作和小型项目，而Axure RP则适用于复杂的应用和大规模项目，需要更精细控制和高度定制的交互和设计细节。选择哪个工具取决于具体的项目需求和个人偏好。

## 3、原型工具使用初体验

由于以上工具需要付费，所以我挑选了一个免费的原型设计工具来体验


![4.jpg](https://kid-cos-1310921471.cos.ap-shanghai.myqcloud.com/blog/e43e099c21d8ff80d1f705b381093733.4.webp)