最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

【JavaEE

IT培训 admin 5浏览 0评论

【JavaEE

大概划分

JavaEE密码学算法对外01

kk+2022-06-08+21-21-07

1、domain 实体类

Account

package person.hyy.domain;public class Account {Integer id;String username;String password;public Account() {}public Account(Integer id, String username, String password) {this.id = id;this.username = username;this.password = password;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}

2、dao 数据库持久层

AccountDao

package person.hyy.dao;import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
import person.hyy.domain.Account;import java.util.List;@Mapper
@Repository
public interface AccountDao {/*登录*/@Select("select * from account where username=#{username} and password=#{password}")List<Account> findByUsernamePassword(Account account);/*注册之前检验是否用户名重复*/@Select("SELECT username FROM account WHERE account.username=#{username}")String check(Account account);/*注册*/@Insert("INSERT into account(username,password) VALUES (#{username},#{password})")int addAccount(Account account);}

3、service层 业务模块逻辑应用

以下都是接口
AccountService

package person.hyy.service;public interface AccountService {/*登录*/public boolean validateAccount(String username,String password);/*注册*/public boolean addAccount(String username,String password);/*检查用户名是否重复*/public boolean checkAccount(String username);
}

CaesarService

package person.hyy.service;public interface CaesarService {//加密public String encryption(String clearText, String key);//解密public String decode(String unClearText,String key);
}

DESService

package person.hyy.service;public interface DESService {//加密public String encryption(String clearText, String userKey);//解密/*public String decode(String unClearText,String userKey);*/
}

FenceService

package person.hyy.service;public interface FenceService {//加密public String encode(String clearText);//解密public String decode(String unclearText);
}

实际方法
AccountServiceImpl

package person.hyy.service.impl;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import person.hyy.dao.AccountDao;
import person.hyy.domain.Account;
import person.hyy.service.AccountService;import java.util.List;@Service("accountService")
public class AccountServiceImpl implements AccountService {@AutowiredAccountDao accountDao;/*检验是否该账户,若是,则登录成功*/public boolean validateAccount(String username,String password){Account account = new Account();account.setUsername(username);account.setPassword(password);List<Account> accountList = accountDao.findByUsernamePassword(account);if(accountList.isEmpty()){return false;}else {return true;}}/*注册*/public boolean addAccount(String username,String password){Account account = new Account();account.setUsername(username);account.setPassword(password);int i = accountDao.addAccount(account);if(i!=0){return true;}else {return false;}}/*注册时检查用户名是否重复*/@Overridepublic boolean checkAccount(String username) {Account account = new Account();account.setUsername(username);String check = accountDao.check(account);if(check == null){return true; //为空,即没有重复名}else {return false; //为真,即有重复名}}}

CaesarServiceImpl

package person.hyy.service.impl;import org.springframework.stereotype.Service;
import person.hyy.service.CaesarService;@Service("caesarService")
public class CaesarServiceImpl implements CaesarService {//加密(输入  明文+密钥)@Overridepublic String encryption(String clearText, String key) {int j =Integer.valueOf(key).intValue();//获得偏移量(密钥)//加密字符串StringBuffer sb = new StringBuffer(" ");char b[];char ch=' ';b=clearText.toCharArray();for(int i=0;i<clearText.length();i++){if(b[i]>='a' && b[i]<='z'){ch=(char)((b[i]-'a'+j)%26+'a');}if(b[i]>='A' && b[i]<='Z'){ch=(char)((b[i]-'A'+j)%26+'A');}sb.append(ch);}return String.valueOf(sb);}//解密(输入  密文+密钥)@Overridepublic String decode(String unClearText, String key) {int j =Integer.valueOf(key).intValue();//获得偏移量//加密字符串StringBuffer sb = new StringBuffer("");char b[];char ch=' ';b=unClearText.toCharArray();for(int i=0;i<unClearText.length();i++){if(b[i]>='a' && b[i]<='z'){ch=(char)((b[i]-'a'+26-j)%26+'a');}if(b[i]>='A' && b[i]<='Z'){ch=(char)((b[i]-'A'+26-j)%26+'A');}sb.append(ch);}return String.valueOf(sb);}
}

DESServiceImpl

package person.hyy.service.impl;import com.sun.org.apache.xerces.internal.impl.dv.util.Base64;
import jdk.nashorn.internal.ir.debug.ClassHistogramElement;
import org.springframework.stereotype.Service;
import person.hyy.service.DESService;import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.spec.SecretKeySpec;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;@Service("DESService")
public class DESServiceImpl implements DESService {/*DES加密*/@Overridepublic String encryption(String clearText, String userKey) {//根据给定的字节数组构建一个密钥String plainText = clearText; //明文String originKey = userKey;  //原始密钥SecretKeySpec key = new SecretKeySpec(originKey.getBytes(),"DES");//1.获取加密算法工具类Cipher cipher = null;try {cipher = Cipher.getInstance("DES");} catch (NoSuchAlgorithmException e) {e.printStackTrace();} catch (NoSuchPaddingException e) {e.printStackTrace();}//2.对工具类对象进行初始化//mode 加密/解密模式//key  对原始密钥处理之后的密钥try {cipher.init(Cipher.ENCRYPT_MODE,key);} catch (InvalidKeyException e) {e.printStackTrace();}//3.用加密工具类对象 对明文进行加密byte[] encipherByte = new byte[0];try {encipherByte = cipher.doFinal(plainText.getBytes());} catch (IllegalBlockSizeException e) {e.printStackTrace();} catch (BadPaddingException e) {e.printStackTrace();}//4.防止乱码,使用Base64编码String encode = Base64.encode(encipherByte);return encode;}/*DES解密*//*  @Overridepublic String decode(String unClearText,String userKey) {String originKey = userKey;  //原始密钥String encode = unClearText; //密文//获取加密算法工具类Cipher cipher = null;try {cipher = Cipher.getInstance("DES");} catch (NoSuchAlgorithmException e) {e.printStackTrace();} catch (NoSuchPaddingException e) {e.printStackTrace();}//处理之后的密钥SecretKeySpec key = new SecretKeySpec(originKey.getBytes(),"DES");//对工具类对象进行初始化try {cipher.init(Cipher.DECRYPT_MODE,key);} catch (InvalidKeyException e) {e.printStackTrace();}//用加密工具类对象对密文进行解密byte[] byteDecode = Base64.decode(encode);byte[] decipherByte = new byte[0];try {decipherByte = cipher.doFinal(byteDecode);} catch (IllegalBlockSizeException e) {e.printStackTrace();} catch (BadPaddingException e) {e.printStackTrace();}String decipherText = new String(decipherByte);return decipherText;}*/
}

FenceServiceImpl

package person.hyy.service.impl;import org.springframework.stereotype.Service;
import person.hyy.service.FenceService;@Service("fenceService")
public class FenceServiceImpl implements FenceService {//加密@Overridepublic String encode(String clearText) {String str_p = clearText;char[] str_p_char = null;{try {str_p_char = str_p.toCharArray();} catch (Exception e) {System.out.println("Exception");}int len = str_p_char.length;// System.out.println("len:"+len);StringBuffer sb_1 = new StringBuffer();StringBuffer sb_2 = new StringBuffer();if (len % 2 == 1) {for (int i = 0; i < len; i = i + 1) {if (i % 2 == 0) {sb_1.append(str_p_char[i]);} else {sb_2.append(str_p_char[i]);}}} else {for (int i = 0; i < len; i = i + 2) {sb_1.append(str_p_char[i]);sb_2.append(str_p_char[i + 1]);}}str_p = sb_1.toString() + sb_2.toString();return str_p;}}//解密@Overridepublic String decode(String unclearText) {String str_c = unclearText;char []str_c_char = null;try {str_c_char=str_c.toCharArray();}catch(Exception e) {System.out.println("Exception");}int len=str_c_char.length;int half=len/2;StringBuffer sb = new StringBuffer();if(len%2==1) {int i=0;for (i = 0; i <half;i=i+1) {sb.append(str_c_char[i]);sb.append(str_c_char[i+half+1]);}sb.append(str_c_char[half]);}else {for (int i = 0; i <half; i=i+1) {sb.append(str_c_char[i]);sb.append(str_c_char[i+half]);}}str_c=sb.toString();return str_c;}
}

4、Controller层 控制业务模块流程

CaesarController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import person.hyy.service.CaesarService;@Controller("CaesarController")
public class CaesarController {@AutowiredCaesarService caesarService;//进入凯撒加密/解密页面@RequestMapping("/Caesar")public String caesar(){return "Caesar";}//凯撒加密@RequestMapping("/Caesar_clearText")public String caesarClearText(String clearText, String offSet1, Model model){if (!clearText.equals("") && !offSet1.equals("")){String unclearText = caesarService.encryption(clearText,offSet1);model.addAttribute("clearText",clearText); //明文model.addAttribute("unclearText",unclearText); //密文return "Caesar1";}else{return null;}}//凯撒解密@RequestMapping("/Caesar_unclearText")public String caesarUnclearText(String unClearText,String offSet2,Model model){if (!unClearText.equals("") && !offSet2.equals("")){String clearText = caesarService.decode(unClearText,offSet2);model.addAttribute("unclearText",unClearText); //密文model.addAttribute("clearText",clearText);  //明文return "Caesar1";}else{return null;}}}

DESController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import person.hyy.service.DESService;import javax.jws.WebParam;@Controller("DESController")
public class DESController {@AutowiredDESService desService;//跳转到DES解密的主界面@RequestMapping("/DES")public String des(){return "DES";}//跳转到加密@RequestMapping("/DES_encryption")public String encryption(String clearText, String key1, Model model){if(!clearText.equals("")&&!key1.equals("")){String unclearText = desService.encryption(clearText,key1);model.addAttribute("clearText",clearText);model.addAttribute("unclearText",unclearText);return "DES1";}return null;}/*//跳转到解密@RequestMapping("/DES_decode")public String encode(String unclearText, String key2, Model model){if(!unclearText.equals("")&&!key2.equals("")){String clearText = desService.decode(unclearText,key2);model.addAttribute("unclearText",unclearText); //密文model.addAttribute("clearText",clearText);  //明文return "DES1";}return  null;}*/}

FenceController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import person.hyy.service.FenceService;@Controller("FenceController")
public class FenceController {@AutowiredFenceService fenceService;//进入栅栏加密/解密页面@RequestMapping("/Fence")public String caesar(){return "Fence";}//加密@RequestMapping("/Fence_encode")public String fenceEncode(String clearText, Model model){if(!clearText.equals("")){String unclearText = fenceService.encode(clearText);model.addAttribute("clearText",clearText);model.addAttribute("unclearText",unclearText);return "Fence1";}else {return null;}}//解密@RequestMapping("/Fence_decode")public String fenceDecode(String unClearText, Model model){if(!unClearText.equals("")){String clearText = fenceService.decode(unClearText);model.addAttribute("clearText",clearText);model.addAttribute("unclearText",unClearText);return "Fence1";}else {return null;}}}

MyController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import person.hyy.service.AccountService;
import person.hyy.service.CaesarService;import java.io.BufferedReader;@Controller("MyController")
public class MyController {@AutowiredAccountService accountService;//登录@RequestMapping( "/login1")public  String login(String username_login ,String password_login,Model model){if(accountService.validateAccount(username_login,password_login)){model.addAttribute("user",username_login);return "success";}else {return "faliure";}}//注册@RequestMapping("/register1")public String firstRegister(String username_regist,String password_regist,Model model){if(accountService.checkAccount(username_regist)){if (accountService.addAccount(username_regist,password_regist)){model.addAttribute("user",password_regist);return "success";}}else {return "faliure";}return "faliure";}//返回主页@RequestMapping("/main")public String main(){return "success";}}

5、CSS

1、登录的背景图片上百度瞎找的,直接搜电脑壁纸高清就可以了2、style.css

:root {/* 颜色 */--white: #e9e9e9;--gray: #333;--blue: #095c91;--blue-r: #315a7491;--lightblue: #0393a3;/* 圆角 */--button-radius: 0.7rem;/* 大小 */--max-width: 758px;--max-height: 420px;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}body {align-items: center;background-color: var(--white);background: url(start.png);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;display: grid;height: 100vh;place-items: center;
}.form_title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;
}.link {color: var(--gray);font-size: 0.9rem;margin: 1.5rem 0;text-decoration: none;
}.container {background-color: var(--white);border-radius: var(--button-radius);box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);height: var(--max-height);max-width: var(--max-width);overflow: hidden;position: relative;width: 100%;
}.container_form {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;
}.container--signin {left: 0;width: 50%;z-index: 5;
}.container.right-panel-active .container--signin {transform: translateX(100%);
}.container--signup {left: 0;opacity: 0;width: 50%;z-index: 4;
}.container.right-panel-active .container--signup {-webkit-animation: show 0.6s;animation: show 0.6s;opacity: 1;transform: translateX(100%);z-index: 8;
}.container_overlay {height: 100%;left: 50%;overflow: hidden;position: absolute;top: 0;transition: transform 0.6s ease-in-out;width: 50%;z-index: 100;
}.container.right-panel-active .container_overlay {transform: translateX(-100%);
}.overlay {background-color: rgba(255, 255, 255, 0.25);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;height: 100%;left: -100%;position: relative;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 200%;
}.container.right-panel-active .overlay {transform: translateX(50%);
}.overlay_panel {align-items: center;display: flex;flex-direction: column;height: 100%;justify-content: center;position: absolute;text-align: center;top: 0;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 50%;
}.overlay--left {transform: translateX(-20%);
}.container.right-panel-active .overlay--left {transform: translateX(0);
}.overlay--right {right: 0;transform: translateX(0);
}.container.right-panel-active .overlay--right {transform: translateX(20%);
}.btn {background-color: var(--blue);background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);border-radius: 20px;border: 0.2px solid var(--blue-r);color: var(--white);cursor: pointer;font-size: 0.8rem;font-weight: bold;letter-spacing: 0.1rem;padding: 0.9rem 4rem;text-transform: uppercase;transition: transform 80ms ease-in;
}.form>.btn {margin-top: 1.5rem;
}.btn:active {transform: scale(0.95);
}.btn:focus {outline: none;
}.form {background-color: var(--white);display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 3rem;height: 100%;text-align: center;
}.input {background-color: #fff;border: none;padding: 0.9rem 0.9rem;margin: 0.5rem 0;width: 100%;
}@-webkit-keyframes show {0%,49.99% {opacity: 0;z-index: 4;}50%,100% {opacity: 1;z-index: 8;}
}@keyframes show {0%,49.99% {opacity: 0;z-index: 4;}50%,100% {opacity: 1;z-index: 8;}
}.slidershow {position: absolute;width: 100vw;height: 100vh;overflow: hidden;
}.slidershow--image {position: absolute;width: 100%;height: 100%;background: no-repeat 50% 50%;background-size: cover;-webkit-animation-name: kenburns;animation-name: kenburns;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-duration: 16s;animation-duration: 16s;opacity: 1;-webkit-transform: scale(1.2);transform: scale(1.2);
}

3、style_faliure.css

@import url('=Quicksand&display=swap');
@import url('https:/fonts.              /css2?family=Ubuntn:wght@300;400;500;700&display=swap');:root {font-size: 15px;
}* {margin: 0;margin: 0;box-sizing: border-box;font-family: 'Ubuntn', sans-serif;
}body {display: flex;justify-content: center;align-items: center;/* font-family: 'Quicksand', sans-serif; */margin: 0;min-height: 100vh;background-color: #fbd7e3;background-image: radial-gradient(closest-side, rgba(210, 195, 252, 1), rgba(155, 197, 252, 0)),radial-gradient(closest-side, rgba(236, 240, 246, 1), rgba(204, 214, 230, 0)),radial-gradient(closest-side, rgba(212, 157, 195), rgba(252, 204, 241, 0));background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax;background-position: -80vmax -80vmax, 60vmax 60vmax, 10vmax 10vmax;animation: 10s movement linear infinite;
}/* body::after {content: '';display: block;position: fixed;width: 100%;height: 100%;left: 0;top: 0;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
} */.card {position: relative;display: flex;justify-content: center;align-items: center;
}.card .glass {position: absolute;width: 450px;height: 300px;background: rgba(255, 255, 255, 0.5);border-radius: 20px;border: 1px solid #fff;overflow: hidden;display: flex;justify-content: flex-start;align-items: flex-end;
}.card .glass::before {content: '';position: absolute;top: 0;left: -50%;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.2);pointer-events: none;transform: skew(345deg);
}.card .glass h4 {padding: 20px;font-weight: 400;width: 100%;background: rgba(225, 225, 225, 0.2);color: #333;text-align: end;
}.card .glass h4 a {font-weight: 300;font-size: 0.75rem;font-style: normal;
}@keyframes movement {0%,100% {background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax;background-position: -80vmax -80vmax, 60vmax 60vmax, 10vmax 10vmax;}25% {background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax;background-position: -60vmax -60vmax, 50vmax 50vmax, 0vmax -20vmax;}50% {background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax;background-position: -50vmax -50vmax, 40vmax -30vmax, 10vmax 0vmax;}75% {background-size: 90vmax 990vmax, 90vmax 90vmax, 100vmax 100vmax;background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax;}
}

4、style_main.css

body {margin: 0;padding: 0;min-height: 100vh;background: #8aacfe;display: flex;justify-content: center;align-items: center;font-family: consolas;
}.container {width: 1000px;position: relative;display: flex;justify-content: space-between;
}.container .card {position: relative;
}.container .card .face {width: 300px;height: 200px;transition: 0.5s;
}.container .card .face.face1 {position: relative;background: #8aacfe;display: flex;justify-content: center;align-items: center;z-index: 1;transform: translateY(100px);
}.container .card:hover .face.face1 {background: #fce9f6;transform: translateY(0);
}.container .card .face.face1 .content {opacity: 1;
}.container .card:hover .face.face1 .content {opacity: 0.2;/*transform: 0.5s;*/
}.container .card .face.face1 .content img {max-width: 100px;
}.container .card .face.face1 .content h3 {margin: 10px 0 0;padding: 0;color: #fff;text-align: center;font-size: 1.5em;
}.container .card .face.face2 {position: relative;background: #fff;display: flex;justify-content: center;align-items: center;padding: 20px;box-sizing: border-box;/*box-shadow: 2 20px 50px rgba(0, 0, 0, 0.8);*/transform: translateY(-100px);
}.container .card:hover .face.face2 {transform: translateY(0px);
}.container .card .face.face2 .content p {margin: 0;padding: 0;
}.container .card .face.face2 .content a {margin: 15px 0 0;display: inline-block;text-decoration: none;font-weight: 900;color: #8aacfe;padding: 5px;border: 1px solid #8aacfe;
}.container .card .face.face2 .content a:hover {background: #8aacfe;color: #fff;
}

6、JS

script.js

const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const firstForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");signInBtn.addEventListener("click", () => {container.classList.remove("right-panel-active");
});signUpBtn.addEventListener("click", () => {container.classList.add("right-panel-active");
});/*
firstForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());*/

index.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>登录首页</title><link rel="stylesheet" href=".0.1/normalize.min.css"><link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class="container right-panel-active"><!-- 注册 --><div class="container_form container--signup"><form action="register1" class="form" id="form1" method="post"><h2 class="form_title">Sign Up</h2><input type="text" placeholder="User" class="input" name="username_regist" /><input type="password" placeholder="Password" class="input" name="password_regist" /><button class="btn" type="submit">Sign Up</button></form></div><!-- 登录 --><div class="container_form container--signin"><form action="login1" class="form" id="form2" method="post"><h2 class="form_title">Sign In</h2><input type="text" placeholder="Username" class="input" name="username_login" /><input type="password" placeholder="Password" class="input" name="password_login" /><a href="#" class="link">Forgot your password?</a><button class="btn" type="submit">Sign In</button></form></div><!-- 浮层 --><div class="container_overlay"><div class="overlay"><div class="overlay_panel overlay--left"><button class="btn" id="signIn">Sign In</button></div><div class="overlay_panel overlay--right"><button class="btn" id="signUp">Sign Up</button></div></div></div>
</div><!-- partial -->
<script src="JS/script.js"></script></body>
</html>

mima.png 200*200 png

7、动态页面

Caesar.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密/解密</title>
</head>
<body>
<a href="/main">返回主页</a><br>
进行凯撒加密:
<form action="/Caesar_clearText" method="get">明文:<input type="text" name="clearText"><br>偏移量需要填写整数(1-26)<br>偏移量:<input type="text" name="offSet1"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>进行凯撒解密:
<form action="/Caesar_unclearText" method="get">密文:<input type="text" name="unClearText"><br>偏移量需要填写整数(1-26)<br>偏移量:<input type="text" name="offSet2"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>
<h1>凯撒密码解析</h1>
<P>恺撒密码(Caesar cipher),或称恺撒加密、恺撒变换、变换加密,是一种最简单且最广为人知的加密技术。</P>
<P>它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文。</P>
<P>例如,当偏移量是3的时候,所有的字母A将被替换成D,B变成E,以此类推。</P>
<P>这个加密方法是以罗马共和时期恺撒的名字命名的,当年恺撒曾用此方法与其将军们进行联系。</P><P>恺撒密码通常被作为其他更复杂的加密方法中的一个步骤,例如维吉尼亚密码。</P>
<P>恺撒密码还在现代的ROT13系统中被应用。</P>
<P>但是和所有的利用字母表进行替换的加密技术一样,恺撒密码非常容易被破解,而且在实际应用中也无法保证通信安全。</P><p>例如,当偏移量是左移3的时候(解密时的密钥就是3):</p>
<p>明文字母表:ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>密文字母表:DEFGHIJKLMNOPQRSTUVWXYZABC</p></body>
</html>

Caesar1.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密</title>
</head>
<body>明文:[[${clearText}]]<br>密文:[[${unclearText}]]<br><a href="/main">返回主页</a><br><a href="/Caesar">返回凯撒加密</a></body>
</html>

DES.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密/解密</title>
</head>
<body><a href="/main">返回主页</a><br>
进行DES加密:
<form action="/DES_encryption" method="get">明文:<input type="text" name="clearText"><br>原始密钥 长度64 8字节<br>原始密钥:<input type="text" name="key1"><br><button type="submit">提交</button>
</form><div>----------------------------------</div><!--进行DES解密:
<form action="/DES_decode" method="get">密文:<input type="text" name="unClearText"><br>原始密钥 长度64 8字节<br>原始密钥:<input type="text" name="key2"><br><button type="submit">提交</button>
</form>--><div>----------------------------------</div>
<h1>DES加密</h1>
<p>数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,</p>
<p>很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的。</p>
<p>通常,自动取款机(Automated Teller Machine,ATM)都使用DEA。</p>
<p>它出自IBM的研究工作,IBM也曾对它拥有几年的专利权,</p>
<p>但是在1983年已到期后,处于公有范围中,允许在特定条件下可以免除专利使用费而使用。</p>
<p>1977年被美国政府正式采纳。</p><p>DES 使用一个 56 位的密钥以及附加的 8 位奇偶校验位,产生最大 64 位的分组大小。</p>
<p>这是一个迭代的分组密码,使用称为 Feistel 的技术,其中将加密的文本块分成两半。</p>
<p>使用子密钥对其中一半应用循环功能,然后将输出与另一半进行“异或”运算;</p>
<p>接着交换这两半,这一过程会继续下去, 但最后一个循环不交换。</p>
<p>DES 使用 16 个循环,使用异或,置换,代换,移位操作四种基本运算。</p></body>
</html>

DES1.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密</title>
</head>
<body>明文:[[${clearText}]]<br>密文:[[${unclearText}]]<br><a href="/main">返回主页</a><br><a href="/DES">返回DES加密</a></body>
</html>

faliure.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>登录失败</title><link rel="stylesheet" href="/CSS/style_faliure.css">
</head>
<body><div class="card"><div class="glass"><h4>登录失败!请检查用户名和密码是否有误!<br>注册失败是用户名重复,请重新填写用户名!<br><a href="/">返回登录/注册界面</a></h4></div>
</div></body>
</html>

Fence.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密/解密</title>
</head>
<body>
<a href="/main">返回主页</a><br>
进行栅栏加密:
<form action="/Fence_encode" method="get"><p>默认栅栏数为2</p>明文:<input type="text" name="clearText"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>进行栅栏解密:
<form action="/Fence_decode" method="get"><p>默认栅栏数为2</p>密文:<input type="text" name="unClearText"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>
<h1>栅栏密码解析</h1>
<P>栅栏密码(Rail-fence Cipher)就是把要加密的明文分成N个一组,然后把每组的第1个字符组合,每组第2个字符组合…</P>
<P>每组的第N(最后一个分组可能不足N个)个字符组合,最后把他们全部连接起来就是密文。</P>
<P>遇到这种的栅栏加密的密文,解密的key值就是字符串的长度除以加密的key值 (de_key = len / key)</P>
<P>再用de_key将密文字符串加密就可以得到原文字符串。</P>
<P>不过栅栏密码本身有一个潜规则,就是组成栅栏的字母一般不会太多。(一般不超过30个,也就是一、两句话)</P></body>
</html>

Fence1.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>栅栏加密</title>
</head>
<body>明文:[[${clearText}]]<br>密文:[[${unclearText}]]<br><a href="/main">返回主页</a><br><a href="/Fence">返回栅栏加密</a></body>
</html>

success.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls=""xmlns:th="">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href=".0.1/normalize.min.css"><title>登录成功</title><link rel="stylesheet" href="/CSS/style_main.css">
</head>
<!--    [[${user}]]恭喜你,登录成功!<br>-->
<!--    凯撒密码  加密/解密<a href="/Caesar">点击进入</a><br>-->
<body>
<div class="container"><div class="card"><div class="face face1"><div class="content"><img src="/mima.png" alt=""><h3>凯撒密码</h3></div></div><div class="face face2"><div class="content"><p>在密码学中,恺撒密码(英语:Caesarcipher),或称恺撒加密、恺撒变换、变换加密,是一种最简单且最广为人知的加密技术。它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文。</p><a href="/Caesar">Read More</a></div></div></div><div class="card"><div class="face face1"><div class="content"><img src="/mima.png" alt=""><h3>DES加密</h3></div></div><div class="face face2"><div class="content"><p>DES对称加密,是一种比较传统的加密方式,其加密运算、解密运算使用的是同样的密钥,信息的发送者和信息的接收者在进行信息的传输与处理时,必须共同持有该密码(称为对称密码),是一种对称加密算法。</p><a href="/DES">Read More</a></div></div></div><div class="card"><div class="face face1"><div class="content"><img src="/mima.png" alt=""><h3>栅栏密码</h3></div></div><div class="face face2"><div class="content"><p>所谓栅栏密码,就是把要加密的明文分成N个一组,然后把每组的第1个字连起来,形成一段无规律的话。 不过栅栏密码本身有一个潜规则,就是组成栅栏的字母一般不会太多。(一般不超过30个,也就是一、两句话)</p><a href="/Fence">Read More</a></div></div></div>
</div>
</body>
</html>

【JavaEE

大概划分

JavaEE密码学算法对外01

kk+2022-06-08+21-21-07

1、domain 实体类

Account

package person.hyy.domain;public class Account {Integer id;String username;String password;public Account() {}public Account(Integer id, String username, String password) {this.id = id;this.username = username;this.password = password;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}

2、dao 数据库持久层

AccountDao

package person.hyy.dao;import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
import person.hyy.domain.Account;import java.util.List;@Mapper
@Repository
public interface AccountDao {/*登录*/@Select("select * from account where username=#{username} and password=#{password}")List<Account> findByUsernamePassword(Account account);/*注册之前检验是否用户名重复*/@Select("SELECT username FROM account WHERE account.username=#{username}")String check(Account account);/*注册*/@Insert("INSERT into account(username,password) VALUES (#{username},#{password})")int addAccount(Account account);}

3、service层 业务模块逻辑应用

以下都是接口
AccountService

package person.hyy.service;public interface AccountService {/*登录*/public boolean validateAccount(String username,String password);/*注册*/public boolean addAccount(String username,String password);/*检查用户名是否重复*/public boolean checkAccount(String username);
}

CaesarService

package person.hyy.service;public interface CaesarService {//加密public String encryption(String clearText, String key);//解密public String decode(String unClearText,String key);
}

DESService

package person.hyy.service;public interface DESService {//加密public String encryption(String clearText, String userKey);//解密/*public String decode(String unClearText,String userKey);*/
}

FenceService

package person.hyy.service;public interface FenceService {//加密public String encode(String clearText);//解密public String decode(String unclearText);
}

实际方法
AccountServiceImpl

package person.hyy.service.impl;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import person.hyy.dao.AccountDao;
import person.hyy.domain.Account;
import person.hyy.service.AccountService;import java.util.List;@Service("accountService")
public class AccountServiceImpl implements AccountService {@AutowiredAccountDao accountDao;/*检验是否该账户,若是,则登录成功*/public boolean validateAccount(String username,String password){Account account = new Account();account.setUsername(username);account.setPassword(password);List<Account> accountList = accountDao.findByUsernamePassword(account);if(accountList.isEmpty()){return false;}else {return true;}}/*注册*/public boolean addAccount(String username,String password){Account account = new Account();account.setUsername(username);account.setPassword(password);int i = accountDao.addAccount(account);if(i!=0){return true;}else {return false;}}/*注册时检查用户名是否重复*/@Overridepublic boolean checkAccount(String username) {Account account = new Account();account.setUsername(username);String check = accountDao.check(account);if(check == null){return true; //为空,即没有重复名}else {return false; //为真,即有重复名}}}

CaesarServiceImpl

package person.hyy.service.impl;import org.springframework.stereotype.Service;
import person.hyy.service.CaesarService;@Service("caesarService")
public class CaesarServiceImpl implements CaesarService {//加密(输入  明文+密钥)@Overridepublic String encryption(String clearText, String key) {int j =Integer.valueOf(key).intValue();//获得偏移量(密钥)//加密字符串StringBuffer sb = new StringBuffer(" ");char b[];char ch=' ';b=clearText.toCharArray();for(int i=0;i<clearText.length();i++){if(b[i]>='a' && b[i]<='z'){ch=(char)((b[i]-'a'+j)%26+'a');}if(b[i]>='A' && b[i]<='Z'){ch=(char)((b[i]-'A'+j)%26+'A');}sb.append(ch);}return String.valueOf(sb);}//解密(输入  密文+密钥)@Overridepublic String decode(String unClearText, String key) {int j =Integer.valueOf(key).intValue();//获得偏移量//加密字符串StringBuffer sb = new StringBuffer("");char b[];char ch=' ';b=unClearText.toCharArray();for(int i=0;i<unClearText.length();i++){if(b[i]>='a' && b[i]<='z'){ch=(char)((b[i]-'a'+26-j)%26+'a');}if(b[i]>='A' && b[i]<='Z'){ch=(char)((b[i]-'A'+26-j)%26+'A');}sb.append(ch);}return String.valueOf(sb);}
}

DESServiceImpl

package person.hyy.service.impl;import com.sun.org.apache.xerces.internal.impl.dv.util.Base64;
import jdk.nashorn.internal.ir.debug.ClassHistogramElement;
import org.springframework.stereotype.Service;
import person.hyy.service.DESService;import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.spec.SecretKeySpec;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;@Service("DESService")
public class DESServiceImpl implements DESService {/*DES加密*/@Overridepublic String encryption(String clearText, String userKey) {//根据给定的字节数组构建一个密钥String plainText = clearText; //明文String originKey = userKey;  //原始密钥SecretKeySpec key = new SecretKeySpec(originKey.getBytes(),"DES");//1.获取加密算法工具类Cipher cipher = null;try {cipher = Cipher.getInstance("DES");} catch (NoSuchAlgorithmException e) {e.printStackTrace();} catch (NoSuchPaddingException e) {e.printStackTrace();}//2.对工具类对象进行初始化//mode 加密/解密模式//key  对原始密钥处理之后的密钥try {cipher.init(Cipher.ENCRYPT_MODE,key);} catch (InvalidKeyException e) {e.printStackTrace();}//3.用加密工具类对象 对明文进行加密byte[] encipherByte = new byte[0];try {encipherByte = cipher.doFinal(plainText.getBytes());} catch (IllegalBlockSizeException e) {e.printStackTrace();} catch (BadPaddingException e) {e.printStackTrace();}//4.防止乱码,使用Base64编码String encode = Base64.encode(encipherByte);return encode;}/*DES解密*//*  @Overridepublic String decode(String unClearText,String userKey) {String originKey = userKey;  //原始密钥String encode = unClearText; //密文//获取加密算法工具类Cipher cipher = null;try {cipher = Cipher.getInstance("DES");} catch (NoSuchAlgorithmException e) {e.printStackTrace();} catch (NoSuchPaddingException e) {e.printStackTrace();}//处理之后的密钥SecretKeySpec key = new SecretKeySpec(originKey.getBytes(),"DES");//对工具类对象进行初始化try {cipher.init(Cipher.DECRYPT_MODE,key);} catch (InvalidKeyException e) {e.printStackTrace();}//用加密工具类对象对密文进行解密byte[] byteDecode = Base64.decode(encode);byte[] decipherByte = new byte[0];try {decipherByte = cipher.doFinal(byteDecode);} catch (IllegalBlockSizeException e) {e.printStackTrace();} catch (BadPaddingException e) {e.printStackTrace();}String decipherText = new String(decipherByte);return decipherText;}*/
}

FenceServiceImpl

package person.hyy.service.impl;import org.springframework.stereotype.Service;
import person.hyy.service.FenceService;@Service("fenceService")
public class FenceServiceImpl implements FenceService {//加密@Overridepublic String encode(String clearText) {String str_p = clearText;char[] str_p_char = null;{try {str_p_char = str_p.toCharArray();} catch (Exception e) {System.out.println("Exception");}int len = str_p_char.length;// System.out.println("len:"+len);StringBuffer sb_1 = new StringBuffer();StringBuffer sb_2 = new StringBuffer();if (len % 2 == 1) {for (int i = 0; i < len; i = i + 1) {if (i % 2 == 0) {sb_1.append(str_p_char[i]);} else {sb_2.append(str_p_char[i]);}}} else {for (int i = 0; i < len; i = i + 2) {sb_1.append(str_p_char[i]);sb_2.append(str_p_char[i + 1]);}}str_p = sb_1.toString() + sb_2.toString();return str_p;}}//解密@Overridepublic String decode(String unclearText) {String str_c = unclearText;char []str_c_char = null;try {str_c_char=str_c.toCharArray();}catch(Exception e) {System.out.println("Exception");}int len=str_c_char.length;int half=len/2;StringBuffer sb = new StringBuffer();if(len%2==1) {int i=0;for (i = 0; i <half;i=i+1) {sb.append(str_c_char[i]);sb.append(str_c_char[i+half+1]);}sb.append(str_c_char[half]);}else {for (int i = 0; i <half; i=i+1) {sb.append(str_c_char[i]);sb.append(str_c_char[i+half]);}}str_c=sb.toString();return str_c;}
}

4、Controller层 控制业务模块流程

CaesarController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import person.hyy.service.CaesarService;@Controller("CaesarController")
public class CaesarController {@AutowiredCaesarService caesarService;//进入凯撒加密/解密页面@RequestMapping("/Caesar")public String caesar(){return "Caesar";}//凯撒加密@RequestMapping("/Caesar_clearText")public String caesarClearText(String clearText, String offSet1, Model model){if (!clearText.equals("") && !offSet1.equals("")){String unclearText = caesarService.encryption(clearText,offSet1);model.addAttribute("clearText",clearText); //明文model.addAttribute("unclearText",unclearText); //密文return "Caesar1";}else{return null;}}//凯撒解密@RequestMapping("/Caesar_unclearText")public String caesarUnclearText(String unClearText,String offSet2,Model model){if (!unClearText.equals("") && !offSet2.equals("")){String clearText = caesarService.decode(unClearText,offSet2);model.addAttribute("unclearText",unClearText); //密文model.addAttribute("clearText",clearText);  //明文return "Caesar1";}else{return null;}}}

DESController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import person.hyy.service.DESService;import javax.jws.WebParam;@Controller("DESController")
public class DESController {@AutowiredDESService desService;//跳转到DES解密的主界面@RequestMapping("/DES")public String des(){return "DES";}//跳转到加密@RequestMapping("/DES_encryption")public String encryption(String clearText, String key1, Model model){if(!clearText.equals("")&&!key1.equals("")){String unclearText = desService.encryption(clearText,key1);model.addAttribute("clearText",clearText);model.addAttribute("unclearText",unclearText);return "DES1";}return null;}/*//跳转到解密@RequestMapping("/DES_decode")public String encode(String unclearText, String key2, Model model){if(!unclearText.equals("")&&!key2.equals("")){String clearText = desService.decode(unclearText,key2);model.addAttribute("unclearText",unclearText); //密文model.addAttribute("clearText",clearText);  //明文return "DES1";}return  null;}*/}

FenceController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import person.hyy.service.FenceService;@Controller("FenceController")
public class FenceController {@AutowiredFenceService fenceService;//进入栅栏加密/解密页面@RequestMapping("/Fence")public String caesar(){return "Fence";}//加密@RequestMapping("/Fence_encode")public String fenceEncode(String clearText, Model model){if(!clearText.equals("")){String unclearText = fenceService.encode(clearText);model.addAttribute("clearText",clearText);model.addAttribute("unclearText",unclearText);return "Fence1";}else {return null;}}//解密@RequestMapping("/Fence_decode")public String fenceDecode(String unClearText, Model model){if(!unClearText.equals("")){String clearText = fenceService.decode(unClearText);model.addAttribute("clearText",clearText);model.addAttribute("unclearText",unClearText);return "Fence1";}else {return null;}}}

MyController

package person.hyy.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import person.hyy.service.AccountService;
import person.hyy.service.CaesarService;import java.io.BufferedReader;@Controller("MyController")
public class MyController {@AutowiredAccountService accountService;//登录@RequestMapping( "/login1")public  String login(String username_login ,String password_login,Model model){if(accountService.validateAccount(username_login,password_login)){model.addAttribute("user",username_login);return "success";}else {return "faliure";}}//注册@RequestMapping("/register1")public String firstRegister(String username_regist,String password_regist,Model model){if(accountService.checkAccount(username_regist)){if (accountService.addAccount(username_regist,password_regist)){model.addAttribute("user",password_regist);return "success";}}else {return "faliure";}return "faliure";}//返回主页@RequestMapping("/main")public String main(){return "success";}}

5、CSS

1、登录的背景图片上百度瞎找的,直接搜电脑壁纸高清就可以了2、style.css

:root {/* 颜色 */--white: #e9e9e9;--gray: #333;--blue: #095c91;--blue-r: #315a7491;--lightblue: #0393a3;/* 圆角 */--button-radius: 0.7rem;/* 大小 */--max-width: 758px;--max-height: 420px;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}body {align-items: center;background-color: var(--white);background: url(start.png);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;display: grid;height: 100vh;place-items: center;
}.form_title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;
}.link {color: var(--gray);font-size: 0.9rem;margin: 1.5rem 0;text-decoration: none;
}.container {background-color: var(--white);border-radius: var(--button-radius);box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);height: var(--max-height);max-width: var(--max-width);overflow: hidden;position: relative;width: 100%;
}.container_form {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;
}.container--signin {left: 0;width: 50%;z-index: 5;
}.container.right-panel-active .container--signin {transform: translateX(100%);
}.container--signup {left: 0;opacity: 0;width: 50%;z-index: 4;
}.container.right-panel-active .container--signup {-webkit-animation: show 0.6s;animation: show 0.6s;opacity: 1;transform: translateX(100%);z-index: 8;
}.container_overlay {height: 100%;left: 50%;overflow: hidden;position: absolute;top: 0;transition: transform 0.6s ease-in-out;width: 50%;z-index: 100;
}.container.right-panel-active .container_overlay {transform: translateX(-100%);
}.overlay {background-color: rgba(255, 255, 255, 0.25);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;height: 100%;left: -100%;position: relative;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 200%;
}.container.right-panel-active .overlay {transform: translateX(50%);
}.overlay_panel {align-items: center;display: flex;flex-direction: column;height: 100%;justify-content: center;position: absolute;text-align: center;top: 0;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 50%;
}.overlay--left {transform: translateX(-20%);
}.container.right-panel-active .overlay--left {transform: translateX(0);
}.overlay--right {right: 0;transform: translateX(0);
}.container.right-panel-active .overlay--right {transform: translateX(20%);
}.btn {background-color: var(--blue);background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);border-radius: 20px;border: 0.2px solid var(--blue-r);color: var(--white);cursor: pointer;font-size: 0.8rem;font-weight: bold;letter-spacing: 0.1rem;padding: 0.9rem 4rem;text-transform: uppercase;transition: transform 80ms ease-in;
}.form>.btn {margin-top: 1.5rem;
}.btn:active {transform: scale(0.95);
}.btn:focus {outline: none;
}.form {background-color: var(--white);display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 3rem;height: 100%;text-align: center;
}.input {background-color: #fff;border: none;padding: 0.9rem 0.9rem;margin: 0.5rem 0;width: 100%;
}@-webkit-keyframes show {0%,49.99% {opacity: 0;z-index: 4;}50%,100% {opacity: 1;z-index: 8;}
}@keyframes show {0%,49.99% {opacity: 0;z-index: 4;}50%,100% {opacity: 1;z-index: 8;}
}.slidershow {position: absolute;width: 100vw;height: 100vh;overflow: hidden;
}.slidershow--image {position: absolute;width: 100%;height: 100%;background: no-repeat 50% 50%;background-size: cover;-webkit-animation-name: kenburns;animation-name: kenburns;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-duration: 16s;animation-duration: 16s;opacity: 1;-webkit-transform: scale(1.2);transform: scale(1.2);
}

3、style_faliure.css

@import url('=Quicksand&display=swap');
@import url('https:/fonts.              /css2?family=Ubuntn:wght@300;400;500;700&display=swap');:root {font-size: 15px;
}* {margin: 0;margin: 0;box-sizing: border-box;font-family: 'Ubuntn', sans-serif;
}body {display: flex;justify-content: center;align-items: center;/* font-family: 'Quicksand', sans-serif; */margin: 0;min-height: 100vh;background-color: #fbd7e3;background-image: radial-gradient(closest-side, rgba(210, 195, 252, 1), rgba(155, 197, 252, 0)),radial-gradient(closest-side, rgba(236, 240, 246, 1), rgba(204, 214, 230, 0)),radial-gradient(closest-side, rgba(212, 157, 195), rgba(252, 204, 241, 0));background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax;background-position: -80vmax -80vmax, 60vmax 60vmax, 10vmax 10vmax;animation: 10s movement linear infinite;
}/* body::after {content: '';display: block;position: fixed;width: 100%;height: 100%;left: 0;top: 0;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
} */.card {position: relative;display: flex;justify-content: center;align-items: center;
}.card .glass {position: absolute;width: 450px;height: 300px;background: rgba(255, 255, 255, 0.5);border-radius: 20px;border: 1px solid #fff;overflow: hidden;display: flex;justify-content: flex-start;align-items: flex-end;
}.card .glass::before {content: '';position: absolute;top: 0;left: -50%;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.2);pointer-events: none;transform: skew(345deg);
}.card .glass h4 {padding: 20px;font-weight: 400;width: 100%;background: rgba(225, 225, 225, 0.2);color: #333;text-align: end;
}.card .glass h4 a {font-weight: 300;font-size: 0.75rem;font-style: normal;
}@keyframes movement {0%,100% {background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax;background-position: -80vmax -80vmax, 60vmax 60vmax, 10vmax 10vmax;}25% {background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax;background-position: -60vmax -60vmax, 50vmax 50vmax, 0vmax -20vmax;}50% {background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax;background-position: -50vmax -50vmax, 40vmax -30vmax, 10vmax 0vmax;}75% {background-size: 90vmax 990vmax, 90vmax 90vmax, 100vmax 100vmax;background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax;}
}

4、style_main.css

body {margin: 0;padding: 0;min-height: 100vh;background: #8aacfe;display: flex;justify-content: center;align-items: center;font-family: consolas;
}.container {width: 1000px;position: relative;display: flex;justify-content: space-between;
}.container .card {position: relative;
}.container .card .face {width: 300px;height: 200px;transition: 0.5s;
}.container .card .face.face1 {position: relative;background: #8aacfe;display: flex;justify-content: center;align-items: center;z-index: 1;transform: translateY(100px);
}.container .card:hover .face.face1 {background: #fce9f6;transform: translateY(0);
}.container .card .face.face1 .content {opacity: 1;
}.container .card:hover .face.face1 .content {opacity: 0.2;/*transform: 0.5s;*/
}.container .card .face.face1 .content img {max-width: 100px;
}.container .card .face.face1 .content h3 {margin: 10px 0 0;padding: 0;color: #fff;text-align: center;font-size: 1.5em;
}.container .card .face.face2 {position: relative;background: #fff;display: flex;justify-content: center;align-items: center;padding: 20px;box-sizing: border-box;/*box-shadow: 2 20px 50px rgba(0, 0, 0, 0.8);*/transform: translateY(-100px);
}.container .card:hover .face.face2 {transform: translateY(0px);
}.container .card .face.face2 .content p {margin: 0;padding: 0;
}.container .card .face.face2 .content a {margin: 15px 0 0;display: inline-block;text-decoration: none;font-weight: 900;color: #8aacfe;padding: 5px;border: 1px solid #8aacfe;
}.container .card .face.face2 .content a:hover {background: #8aacfe;color: #fff;
}

6、JS

script.js

const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const firstForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");signInBtn.addEventListener("click", () => {container.classList.remove("right-panel-active");
});signUpBtn.addEventListener("click", () => {container.classList.add("right-panel-active");
});/*
firstForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());*/

index.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>登录首页</title><link rel="stylesheet" href=".0.1/normalize.min.css"><link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class="container right-panel-active"><!-- 注册 --><div class="container_form container--signup"><form action="register1" class="form" id="form1" method="post"><h2 class="form_title">Sign Up</h2><input type="text" placeholder="User" class="input" name="username_regist" /><input type="password" placeholder="Password" class="input" name="password_regist" /><button class="btn" type="submit">Sign Up</button></form></div><!-- 登录 --><div class="container_form container--signin"><form action="login1" class="form" id="form2" method="post"><h2 class="form_title">Sign In</h2><input type="text" placeholder="Username" class="input" name="username_login" /><input type="password" placeholder="Password" class="input" name="password_login" /><a href="#" class="link">Forgot your password?</a><button class="btn" type="submit">Sign In</button></form></div><!-- 浮层 --><div class="container_overlay"><div class="overlay"><div class="overlay_panel overlay--left"><button class="btn" id="signIn">Sign In</button></div><div class="overlay_panel overlay--right"><button class="btn" id="signUp">Sign Up</button></div></div></div>
</div><!-- partial -->
<script src="JS/script.js"></script></body>
</html>

mima.png 200*200 png

7、动态页面

Caesar.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密/解密</title>
</head>
<body>
<a href="/main">返回主页</a><br>
进行凯撒加密:
<form action="/Caesar_clearText" method="get">明文:<input type="text" name="clearText"><br>偏移量需要填写整数(1-26)<br>偏移量:<input type="text" name="offSet1"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>进行凯撒解密:
<form action="/Caesar_unclearText" method="get">密文:<input type="text" name="unClearText"><br>偏移量需要填写整数(1-26)<br>偏移量:<input type="text" name="offSet2"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>
<h1>凯撒密码解析</h1>
<P>恺撒密码(Caesar cipher),或称恺撒加密、恺撒变换、变换加密,是一种最简单且最广为人知的加密技术。</P>
<P>它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文。</P>
<P>例如,当偏移量是3的时候,所有的字母A将被替换成D,B变成E,以此类推。</P>
<P>这个加密方法是以罗马共和时期恺撒的名字命名的,当年恺撒曾用此方法与其将军们进行联系。</P><P>恺撒密码通常被作为其他更复杂的加密方法中的一个步骤,例如维吉尼亚密码。</P>
<P>恺撒密码还在现代的ROT13系统中被应用。</P>
<P>但是和所有的利用字母表进行替换的加密技术一样,恺撒密码非常容易被破解,而且在实际应用中也无法保证通信安全。</P><p>例如,当偏移量是左移3的时候(解密时的密钥就是3):</p>
<p>明文字母表:ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>密文字母表:DEFGHIJKLMNOPQRSTUVWXYZABC</p></body>
</html>

Caesar1.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密</title>
</head>
<body>明文:[[${clearText}]]<br>密文:[[${unclearText}]]<br><a href="/main">返回主页</a><br><a href="/Caesar">返回凯撒加密</a></body>
</html>

DES.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密/解密</title>
</head>
<body><a href="/main">返回主页</a><br>
进行DES加密:
<form action="/DES_encryption" method="get">明文:<input type="text" name="clearText"><br>原始密钥 长度64 8字节<br>原始密钥:<input type="text" name="key1"><br><button type="submit">提交</button>
</form><div>----------------------------------</div><!--进行DES解密:
<form action="/DES_decode" method="get">密文:<input type="text" name="unClearText"><br>原始密钥 长度64 8字节<br>原始密钥:<input type="text" name="key2"><br><button type="submit">提交</button>
</form>--><div>----------------------------------</div>
<h1>DES加密</h1>
<p>数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,</p>
<p>很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的。</p>
<p>通常,自动取款机(Automated Teller Machine,ATM)都使用DEA。</p>
<p>它出自IBM的研究工作,IBM也曾对它拥有几年的专利权,</p>
<p>但是在1983年已到期后,处于公有范围中,允许在特定条件下可以免除专利使用费而使用。</p>
<p>1977年被美国政府正式采纳。</p><p>DES 使用一个 56 位的密钥以及附加的 8 位奇偶校验位,产生最大 64 位的分组大小。</p>
<p>这是一个迭代的分组密码,使用称为 Feistel 的技术,其中将加密的文本块分成两半。</p>
<p>使用子密钥对其中一半应用循环功能,然后将输出与另一半进行“异或”运算;</p>
<p>接着交换这两半,这一过程会继续下去, 但最后一个循环不交换。</p>
<p>DES 使用 16 个循环,使用异或,置换,代换,移位操作四种基本运算。</p></body>
</html>

DES1.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密</title>
</head>
<body>明文:[[${clearText}]]<br>密文:[[${unclearText}]]<br><a href="/main">返回主页</a><br><a href="/DES">返回DES加密</a></body>
</html>

faliure.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>登录失败</title><link rel="stylesheet" href="/CSS/style_faliure.css">
</head>
<body><div class="card"><div class="glass"><h4>登录失败!请检查用户名和密码是否有误!<br>注册失败是用户名重复,请重新填写用户名!<br><a href="/">返回登录/注册界面</a></h4></div>
</div></body>
</html>

Fence.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>凯撒加密/解密</title>
</head>
<body>
<a href="/main">返回主页</a><br>
进行栅栏加密:
<form action="/Fence_encode" method="get"><p>默认栅栏数为2</p>明文:<input type="text" name="clearText"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>进行栅栏解密:
<form action="/Fence_decode" method="get"><p>默认栅栏数为2</p>密文:<input type="text" name="unClearText"><br><button type="submit">提交</button>
</form><div>----------------------------------</div>
<h1>栅栏密码解析</h1>
<P>栅栏密码(Rail-fence Cipher)就是把要加密的明文分成N个一组,然后把每组的第1个字符组合,每组第2个字符组合…</P>
<P>每组的第N(最后一个分组可能不足N个)个字符组合,最后把他们全部连接起来就是密文。</P>
<P>遇到这种的栅栏加密的密文,解密的key值就是字符串的长度除以加密的key值 (de_key = len / key)</P>
<P>再用de_key将密文字符串加密就可以得到原文字符串。</P>
<P>不过栅栏密码本身有一个潜规则,就是组成栅栏的字母一般不会太多。(一般不超过30个,也就是一、两句话)</P></body>
</html>

Fence1.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls="">
<head><meta charset="UTF-8"><title>栅栏加密</title>
</head>
<body>明文:[[${clearText}]]<br>密文:[[${unclearText}]]<br><a href="/main">返回主页</a><br><a href="/Fence">返回栅栏加密</a></body>
</html>

success.html

<!DOCTYPE html>
<html lang="en" xmls:th="" xmlns:xmls=""xmlns:th="">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href=".0.1/normalize.min.css"><title>登录成功</title><link rel="stylesheet" href="/CSS/style_main.css">
</head>
<!--    [[${user}]]恭喜你,登录成功!<br>-->
<!--    凯撒密码  加密/解密<a href="/Caesar">点击进入</a><br>-->
<body>
<div class="container"><div class="card"><div class="face face1"><div class="content"><img src="/mima.png" alt=""><h3>凯撒密码</h3></div></div><div class="face face2"><div class="content"><p>在密码学中,恺撒密码(英语:Caesarcipher),或称恺撒加密、恺撒变换、变换加密,是一种最简单且最广为人知的加密技术。它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文。</p><a href="/Caesar">Read More</a></div></div></div><div class="card"><div class="face face1"><div class="content"><img src="/mima.png" alt=""><h3>DES加密</h3></div></div><div class="face face2"><div class="content"><p>DES对称加密,是一种比较传统的加密方式,其加密运算、解密运算使用的是同样的密钥,信息的发送者和信息的接收者在进行信息的传输与处理时,必须共同持有该密码(称为对称密码),是一种对称加密算法。</p><a href="/DES">Read More</a></div></div></div><div class="card"><div class="face face1"><div class="content"><img src="/mima.png" alt=""><h3>栅栏密码</h3></div></div><div class="face face2"><div class="content"><p>所谓栅栏密码,就是把要加密的明文分成N个一组,然后把每组的第1个字连起来,形成一段无规律的话。 不过栅栏密码本身有一个潜规则,就是组成栅栏的字母一般不会太多。(一般不超过30个,也就是一、两句话)</p><a href="/Fence">Read More</a></div></div></div>
</div>
</body>
</html>

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论