Compare commits

...

31 Commits
main ... main

Author SHA1 Message Date
贺志豪 375439d2c1 code
11 months ago
贺志豪 7c55d86ea4 delete
11 months ago
贺志豪 09a9bbefa3 project code
11 months ago
贺志豪 0ed90e3e06 delete all file
11 months ago
贺志豪 a448bdbe7a delete 汉诺塔
11 months ago
贺志豪 3996dc3992 初步完成
12 months ago
贺志豪 b691364c86 初步代码
12 months ago
贺志豪 ccbc14f0d3 test
1 year ago
liujun c3c8389041 分享
1 year ago
柊叶 289271cdb8 查找联系人
1 year ago
柊叶 16c1094222 Merge branch 'main' of https://bdgit.educoder.net/p59qpvlxt/tongxun
1 year ago
李平科 72b1af3373 保护客户隐私
1 year ago
李平科 ce1ae244b6 Merge branch 'main' of https://bdgit.educoder.net/p59qpvlxt/tongxun
1 year ago
柊叶 0d47ccc0a5 Merge branch 'main' of https://bdgit.educoder.net/p59qpvlxt/tongxun
1 year ago
李平科 a177c79f67 保护客户隐私
1 year ago
guyuming 410356d8ac 编辑联系人.mdj
1 year ago
zhuhao 36cbd7fa39 添加联系人
1 year ago
柊叶 e19cd67b79 查找联系人
1 year ago
p59qpvlxt 09788760ce Delete '3f4f55f4f01a7e04.jpg'
1 year ago
p59qpvlxt 7d05178fe9 Delete 'R-C.jpg'
1 year ago
p59qpvlxt 7e3f154158 Delete 'id_cache.db-shm'
1 year ago
p59qpvlxt e349049451 Delete 'sfa.png'
1 year ago
p59qpvlxt 6c8979a8e2 Delete '匆匆样式.JPG'
1 year ago
李平科 cecaa44373 递归算法计算
1 year ago
贺志豪 04c2f91688 code
1 year ago
guyuming 11f9f38f78 hannuota
1 year ago
柊叶 f607150570 折半查找
1 year ago
zhuhao 1df9091936 链表
1 year ago
YangHong 5f64500d62 递归求和
1 year ago
liujun 9f8bcffb02 分支
1 year ago
Qiang-志 4ce305a938 测试
1 year ago

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
This is 404 page
</body>
</html>

@ -0,0 +1,272 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通讯录登入界面</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
body{
display:flex;
align-items: center;
justify-content: center;
border:1px solide transparent;
background-color:ivory;
}
#account{
display:inline-block;
width:250px;
height:75px;
border:1px solid transparent;
margin-top:80px;
}
#account input{
height:25px;
}
#passwd{
display:inline-block;
width:250px;
height:75px;
border:1px solid transparent;
}
#passwd input{
height:25px;
}
input {
text-indent: 3em;
border:0.3px solid rgb(177, 161, 161);
border-radius: 5px;
box-shadow: 0.5px 0.5px 0.5px 0.05px rgb(247, 194, 227) inset;
text-align: justify;
}
input:focus{
outline:none;
}
#head{
text-align: center;
margin-top:50px;
font-size:5ch;
font-family: 'Courier New', Courier, monospace;
}
div i{
color:rgb(151, 235, 227);
}
#login{
width:350px;
height:400px;
border:black solid 1px;
border-radius:3%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 3px 2px rgb(247, 194, 227);
box-sizing: border-box;
text-align: center;
transition:1s;
position: absolute;
transform:translateX(100px);
z-index: 1;
}
#button{
border: 1px solid rgb(223, 254, 252) ;
background-color: rgb(223, 254, 252);
height:35px;
width: 75px;
border-radius: 15%;
border-right: 0px;
}
#context{
width: 250px;
height: 400px;
border: 1px solid black;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 3px 2px rgb(247, 194, 227);
border-radius:3%;
display: flex;
justify-content: end;
align-items: center;
flex-direction:column;
transition: 1s;
position: absolute;
transform:translateX(-200px);
z-index: 2;
padding-bottom: 50px;
}
#context p{
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 75px;
font-family: 'Courier New', Courier, monospace ;
color: chartreuse;
font-size: 2.5ch;
}
#registration{
width:350px;
height:400px;
border:black solid 1px;
border-radius:3%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 3px 2px rgb(247, 194, 227);
box-sizing: border-box;
text-align: center;
transition:1s;
position: absolute;
transform:translateX(100px);
}
#box{
width: 1000px;
height: 500px;
background-color: ivory;
margin-top: 5%;
border: 1px solid transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
</style>
<body>
<div id="box">
<div id="context">
<p></p>
<p>注册</p>
</div>
<form id="login" th:action="@{/postProcessorLogin}" target="_self">
<div id="head">
<i>登录页面</i>
</div>
<div id="account">
<i>账号 : </i>
<input type="text" placeholder="请输入账号" name="account">
</div>
<div id="passwd">
<i>密码 : </i>
<input type="password" placeholder="请输入密码" name="password">
</div>
<div><button id="button">登入</button></div>
</form>
<form id="registration" th:action="@{/postProcessorRegistration}" target="_self" >
<div id="head">
<i>注册页面</i>
</div>
<div id="account">
<i>账号 : </i>
<input type="text" placeholder="请输入账号" name="account">
</div>
<div id="passwd">
<i>密码 : </i>
<input type="password" placeholder="请输入密码" name="password">
</div>
<div><button id="button">注册</button></div>
<form>
</div>
<script th:inline="javascript">
// 这里就写js代码 在我们点击上面的注册按钮之后就会转到注册界面上面
//注册完成之后就会显示 我们可以进行登录了,我们就在此点击登录按钮就可以了
var p = document.querySelector("#context p:nth-child(2)");
p.addEventListener("click", function(){
//我们可以通过判断当前的内容是什么来劲判断操作
if( p.innerText === '注册'){
//也就是是在我们点击了这个按钮之后我们就要将我们的登陆界面消掉
//将我们的注册界面显示出来
var login = document.querySelector("#login");
login.style.opacity=0;
login.zIndex='0';
var context = document.querySelector("#context");
context.style.transform='translateX(200px)';
p.innerText = '登入';
var registration = document.querySelector("#registration");
registration.style.transform = 'translateX(-100px)';
registration.style.zIndex = 1;
registration.style.opacity = 1;
}
else if( p.innerText==='登入') {
var registration = document.querySelector("#registration");
registration.style.opacity = 0;
registration.zIndex = '0';
var context = document.querySelector("#context");
context.style.transform = 'translateX(-200px)';
p.innerText = '注册';
var login = document.querySelector("#login");
login.style.transform = 'translateX(100px)';
login.style.zIndex = 1;
login.style.opacity = 1;
}
//这个是将我们显示的 账号已有进行刷新的操作
var secondP = document.querySelector("#context p:first-child");
secondP.innerText = "";
});
//这个是判断当前是否已经发有了账号
//账号 在数据库里已经有了的不能使用相同的账号
var isHaveAccount = [[${isHaveAccount}]];
if(isHaveAccount != null){
if(isHaveAccount === "当前账号已有"){
p.innerText = '注册';
console.log("没有账号")
var login = document.querySelector("#login");
login.style.opacity=0;
login.zIndex='0';
var context = document.querySelector("#context");
context.style.transform='translateX(200px)';
p.innerText = '登入';
var registration = document.querySelector("#registration");
registration.style.transform = 'translateX(-100px)';
registration.style.zIndex = 1;
registration.style.opacity = 1;
//要输出已有
var secondP = document.querySelector("#context p:first-child");
secondP.innerText = isHaveAccount;
secondP.style.color="red";
}else if(isHaveAccount ===''){
console.log("没有账号")
}
console.log("还没有置为null " + isHaveAccount);
isHaveAccount=null;
console.log("值为null " + isHaveAccount);
}
</script>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

@ -1,2 +0,0 @@
# tongxun

@ -0,0 +1,13 @@
package com.example.webproject;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
public class ServletInitializer extends SpringBootServletInitializer {
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(WebProjectApplication.class);
}
}

@ -0,0 +1,13 @@
package com.example.webproject;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class WebProjectApplication {
public static void main(String[] args) {
SpringApplication.run(WebProjectApplication.class, args);
}
}

@ -0,0 +1,23 @@
package com.example.webproject.com.Pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class account {
private String txl_account;
private String txl_password;
@Override
public String toString() {
return "account{" +
"txl_account='" + txl_account + '\'' +
", txl_password='" + txl_password + '\'' +
'}';
}
}

@ -0,0 +1,23 @@
package com.example.webproject.com.Mapper;
import com.example.webproject.com.Pojo.account;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface account_operator {
//查出所有的记录
// @Select("select * from account_table")
public List<account> findAll();
// @Select("select * from account_table where txl_account=#{account}")
public account findOne( @Param("txl_account") String txl_account);
//新增加一条记录
// @Insert("insert into account_table values(txl_account=#{account},txl_password=#{password})")
public Integer insertOne(@Param("account") account account);
// //删除一条记录
//// @Delete("delete from account_table where txl_account=#{account}")
public Integer deleteOne(String txl_account);
}

@ -0,0 +1,34 @@
<?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">
<mapper namespace="com.example.webproject.com.Mapper.account_operator">
<!-- @Select("select * from account_table")-->
<!-- public List<account> findAll();-->
<parameterMap id="param_account" type="com.example.webproject.com.Pojo.account"></parameterMap>
<resultMap id="result_account" type="com.example.webproject.com.Pojo.account"></resultMap>
<select id="findAll" resultMap="result_account">
select * from account_table
</select>
<!-- @Select("select * from account_table where txl_account=#{account}")-->
<!-- public account findOne(@Param("account")String account);-->
<select id="findOne" parameterType="String" resultMap="result_account">
select * from account_table where txl_account=#{txl_account}
</select>
<!-- @Insert("insert into account_table values(txl_account=#{account},txl_password=#{password})")-->
<!-- public Integer insertOne(@Param("account") account account);-->
<insert id="insertOne" parameterMap="param_account">
insert into account_table values( #{account.txl_account}, #{account.txl_password})
</insert>
<!-- @Delete("delete from account_table where txl_account=#{account}")-->
<!-- public Integer deleteOne(@Param("account")String account);-->
<delete id="deleteOne" parameterType="String">
delete from account_table where txl_account=#{txl_account}
</delete>
</mapper>

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加联系人</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
button,
input {
border: 0;
outline: none;
}
section {
border-radius: 15px;
width: 560px;
height: 700px;
margin: 0 auto;
background-image: url(../static/bg2.jpg);
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .1);
}
.title {
width: 560px;
height: 100px;
line-height: 100px;
text-align: center;
}
.xinxi {
width: 560px;
height: 400px;
font-size: 20px;
text-align: center;
}
tr td {
height: 100px;
text-align: center;
line-height: 100px;
}
.name,
.php {
width: 249px;
height: 30px;
}
.submit {
width: 200px;
height: 30px;
color: aqua;
border-radius: 5px;
}
.submit:hover {
background-color: skyblue;
cursor: pointer;
}
footer {
width: 560px;
height: 100px;
font-size: 20px;
text-align: center;
line-height: 100px;
}
footer a {
display: block;
margin: 0 auto;
width: 560px;
height: 100px;
}
footer a:hover {
color: aqua;
}
</style>
</head>
<body>
<section class="add">
<header class="title">
<h1>添加联系人</h1>
</header>
<div class="xinxi">
<form th:action="@{/add_user_data}" target="_self" >
<table width="600px">
<tr>
<td><label for="m">添加的联系人姓名:</label></td>
<td><input class="name" type="text" id="m" name="name" placeholder="请输入联系人姓名" required="required"></td>
</tr>
<!-- <tr>-->
<!-- <td>性别:</td>-->
<!-- <td><label for="nan">男</label><input type="radio" name="sex" id="nan">&nbsp;&nbsp;&nbsp;-->
<!-- <label for="nv">女</label><input type="radio" name="sex" id="nv">-->
<!-- </td>-->
<!-- </tr>-->
<tr>
<td><label for="php">电话号码:</label></td>
<td><input class="php" type="password" id="php" name="contact_phone_number" placeholder="请输入电话号码" required="required">
</td>
</tr>
<tr>
<td colspan="2"><input class="submit" type="submit" value="确认添加" name="上传"></td>
</tr>
</table>
</form>
<div id="message"><p></p></div>
</div>
<footer>
<a th:href="@{/data}">返回联系人列表</a>
</footer>
</section>
</body>
<script th:inline="javascript">
var message = [[${message}]];
if(message != null){
var p = document.querySelector("p");
p.innerText = message;
p.style.color='red';
console.log(message);
}
console.log("message");
</script>
</html>

@ -0,0 +1,16 @@
server:
port: 8080
servlet:
context-path: /home
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/student?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
password: 123456
username: root
mybatis:
mapper-locations: classpath:MyBatis/*.xml
type-aliases-package: com.example.webproject.com.Pojo

@ -0,0 +1,256 @@
package com.example.webproject.com.Control;
import com.example.webproject.com.Mapper.account_operator;
import com.example.webproject.com.Mapper.user_data_operator;
import com.example.webproject.com.Pojo.account;
import com.example.webproject.com.Pojo.user_data;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.Map;
@Controller
public class control {
@Autowired
public account_operator account_operator;
@Autowired
public user_data_operator user_data_operator;
//这个是访问登录界面
@GetMapping("/index")
public String test()throws Exception{
System.out.println("index");
// 注意在使用thymleaf时要注意 版本要和starter-web的要配合使用
//否者会跳转不到相应的界面
return "Login";
}
//这里要开始编写我们的对于账号上面的处理了
@RequestMapping("/postProcessorRegistration")
public ModelAndView postProcessorRegistration(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse,@RequestParam Map<String,String> map){
System.out.println("postProcessorRegistration");
//这里我们是进行注册操作
//我们先去数据库里面查一下,有没有这个账号
//有就给出错误
//否则就将其插入
//不能获取model 要获取modelMap
// Map<String, Object> model = modelAndView.getModel();
String account = (String)map.get("account");
String password = (String)map.get("password");
ModelAndView modelAndView = new ModelAndView();
account one = account_operator.findOne(account);
System.out.println("数据库中查询的值: "+one);
if(one == null){
System.out.println("数据库中不存在,进行插入操作");
account_operator.insertOne(new account(account,password));
System.out.println("插入完成");
//在这里我们要将账号创建成功的消息显示出来
modelAndView.setViewName("Login");
modelAndView.addObject("isHaveAccount","");
}else{
//在这里我们要将账号已近存在的消息回显
modelAndView.setViewName("Login");
modelAndView.addObject("isHaveAccount","当前账号已有");
}
return modelAndView;
}
//这里要开始编写我们的对于账号上面的处理了
@RequestMapping("/postProcessorLogin")
// @ResponseBody
public ModelAndView postProcessorLogin(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse,@RequestParam Map<String,String> map){
System.out.println("postProcessorLogin");
ModelAndView modelAndView = new ModelAndView();
//首先我们先从map中拿到 account和 password
String account = (String)map.get("account");
String password = (String)map.get("password");
System.out.println("account=="+account);
System.out.println("password=="+ password);
account one = account_operator.findOne(account);
if(one == null){
System.out.println("还没有账号,请注册一个");
//将没有账号显示出去,提醒用户注册账号
modelAndView.addObject("isHaveAccount","还没有账号,注册一个");
modelAndView.setViewName("Login");
}else{
if((one.getTxl_password().equals(password))){
System.out.println("密码正确,登入成功");
// modelAndView.setViewName("data_operator");
modelAndView.setViewName("redirect:data");
//在这里要进行coockie的设置在response 里面进行操作
//我们要在登入界面进行操作一旦登入操作成功我们就在这里进行cookie设置
//将cookie设置过去
Cookie account_cookie = new Cookie("account",account);
Cookie password_cookie = new Cookie("password",password);
httpServletResponse.addCookie(account_cookie);
httpServletResponse.addCookie(password_cookie);
}else{
System.out.println("密码错误,登入失败");
modelAndView.setViewName("Login");
}
}
return modelAndView;
}
@RequestMapping("data")
public ModelAndView data_operator(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse){
//获得所有的cookie
Cookie[]cookies = httpServletRequest.getCookies();
//为cookie设置过期时间
String account = "";
for (Cookie cookie : cookies) {
//当我们设置了cookie之后就只能通过https进行传输了不会在http里面进行传输
// cookie.setSecure(true);
//设置为1星期的过期时间
// cookie.setMaxAge(7*24*60*60);
System.out.println(cookie.getName() + "==" + cookie.getValue());
if("account".equals(cookie.getName())){
account = cookie.getValue();
}
}
//我们就可以设置cookie,当我们发现cookie里面已经存在了账户之后就直接显示当前的这个用户的数据
ModelAndView modelAndView = new ModelAndView();
//这里我们后面肯定是要根据我们当前的一个用户,进行操作的
//我们根据页面上面的显示来进行操作
//页面上面有什么么,我们就要进行什么操作
//就显示一个列表,通过一个参数显示每页 要显示多少的数据,在显示出来总数据的条数
//在每条数据的后面我们就显示,一个删除的按钮,修改,
List<user_data> all = user_data_operator.findOne(account);
modelAndView.addObject("user_data",all);
modelAndView.setViewName("data_operator");
return modelAndView;
}
@RequestMapping("add_user_data")
public ModelAndView add_user_data(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse,@RequestParam Map<String,String> map){
System.out.println("add_user_data");
ModelAndView modelAndView = new ModelAndView();
Cookie[]cookies = httpServletRequest.getCookies();
//为cookie设置过期时间
String account = "";
for (Cookie cookie : cookies) {
//当我们设置了cookie之后就只能通过https进行传输了不会在http里面进行传输
// cookie.setSecure(true);
//设置为1星期的过期时间
// cookie.setMaxAge(7*24*60*60);
System.out.println(cookie.getName() + "==" + cookie.getValue());
if("account".equals(cookie.getName())){
account = cookie.getValue();
}
}
//获取数据
String name = map.get("name");
// String sex = map.get("sex");
String contact_phone_number = map.get("contact_phone_number");
if(name != null || contact_phone_number != null){
//插入操作
user_data_operator.insertOne(account,name,contact_phone_number);
modelAndView.addObject("message","插入成功");
System.out.println("here");
//modelAndView.setViewName("redirect:data");
}else{
modelAndView.setViewName("add_user_data");
}
return modelAndView;
}
@RequestMapping("delete_user_data")
public ModelAndView delete_user_data(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse,@RequestParam Map<String,String> map){
System.out.println("delete_user_data");
ModelAndView modelAndView = new ModelAndView();
Cookie[]cookies = httpServletRequest.getCookies();
//为cookie设置过期时间
String account = "";
for (Cookie cookie : cookies) {
//当我们设置了cookie之后就只能通过https进行传输了不会在http里面进行传输
// cookie.setSecure(true);
//设置为1星期的过期时间
// cookie.setMaxAge(7*24*60*60);
System.out.println(cookie.getName() + "==" + cookie.getValue());
if("account".equals(cookie.getName())){
account = cookie.getValue();
}
}
String name = map.get("name");
if(name != null ){
//删除操作
// user_data_operator
Integer col = user_data_operator.deleteOne(account,name);
if(col != 0){
modelAndView.addObject("message","删除成功");
}else{
modelAndView.addObject("message","此联系人不存在");
}
System.out.println("here");
// modelAndView.setViewName("redirect:data")
}else{
modelAndView.setViewName("delete_user_data");
}
return modelAndView;
}
@RequestMapping("find_user_data")
public ModelAndView find_user_data(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse,@RequestParam Map<String,String> map){
System.out.println("find_user_data");
ModelAndView modelAndView = new ModelAndView();
Cookie[]cookies = httpServletRequest.getCookies();
//为cookie设置过期时间
String account = "";
for (Cookie cookie : cookies) {
//当我们设置了cookie之后就只能通过https进行传输了不会在http里面进行传输
// cookie.setSecure(true);
//设置为1星期的过期时间
// cookie.setMaxAge(7*24*60*60);
System.out.println(cookie.getName() + "==" + cookie.getValue());
if("account".equals(cookie.getName())){
account = cookie.getValue();
}
}
String name = map.get("name");
//查找完成后英爱回显数据
if(name != null ){
//查找操作
List<user_data> oneByName = user_data_operator.findOneByName(account, name);
modelAndView.addObject("message","查找完成");
modelAndView.addObject("user_data",oneByName);
System.out.println("here");
//modelAndView.setViewName("redirect:data");
}else{
modelAndView.setViewName("find_user_data");
}
return modelAndView;
}
}

@ -0,0 +1,206 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display:flex;
justify-content: center;
align-items: center;
padding: 150px;
background-color: ivory;
}
#box{
display:flex;
justify-content:center;
align-items: center;
width: 100%;
height: 100%;
background-color: ivory;
flex-direction: column;
padding: 150px;
}
#head{
width: 1200px;
height: 100px;
display:flex;
justify-content: center;
align-items: center;
/* background-color: aqua; */
}
#head table{
border-collapse: collapse;
}
td{
text-align: center;
vertical-align: center;
background-color:rgba(255,255,255,0.5);
border: 1px solid black;
}
#content {
width: 1200px;
/* height: 800px; */
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* background-color: red; */
/* z-index: -1; */
}
#content table{
border-collapse: collapse;
}
#content table tr{
background-color: bisque;
}
#operator{
display:flex;
justify-content: space-evenly;
align-items: center;
width: 1200px;
}
#operator input{
border: 1px solid rgb(223, 254, 252) ;
background-color: rgb(223, 254, 252);
height:50px;
width: 125px;
border-radius: 15%;
font-size:2.5ch;
font-family: 'Courier New', Courier, monospace;
margin-top: 20px;
}
</style>
</head>
<!-- 可以设计成两边 一边是姓名和电话 另一边就是具体的一些信息就像Maa那样 -->
<body>
<!-- 先做出来一个表格-->
<main id="box">
<!-- 在这里增加三个按钮-->
<div id="operator">
<input type="button" value="增加联系人">
<input type="button" value="删除联系人">
<input type="button" value="查找联系人">
</div>
<!-- 这里是首行,我们要在这里增加我们对应的显示功能 -->
<div id="head">
<!-- <span>账号</span> -->
<table>
<tr>
<td>姓名</td>
<td>联系电话</td>
<td>邮箱</td>
<td>地址</td>
<td>社交账号</td>
<td>公司名称</td>
<td>职位</td>
<td>标记</td>
<td>生日</td>
<td>爱好</td>
</tr>
</table>
</div>
<div id="content">
<table th:each="data:${user_data}">
<tr>
<!-- <span th:text="${data.txl_account}"></span> -->
<td th:text="${data.txl_name}"></td>
<td th:text="${data.txl_contact_phone_number}"></td>
<td th:text="${data.txl_email}"></td>
<td th:text="${data.txl_address}"></td>
<td th:text="${data.txl_social_media_account}"></td>
<td th:text="${data.txl_company_name}"></td>
<td th:text="${data.txl_position}"></td>
<td th:text="${data.txl_remarks}"></td>
<td th:text="${data.txl_birthday}"></td>
<td th:text="${data.txl_hobbies}"></td>
<!-- <td>账号</td> -->
<!-- <td>姓名</td>
<td>联系电话</td>
<td>邮箱</td>
<td>地址</td>
<td>社交账号</td>
<td>公司名称</td>
<td>职位</td>
<td>标记</td>
<td>生日</td>
<td>爱好</td> -->
</tr>
</table>
</div>
</main>
</body>
<script>
// var widths = [100,100,100,100,100,100,100,100,100,100,100];
var widths = [100,100,100,100,100,100,100,100,100,100];
var head = document.querySelector("#head table tr");
for(var num = 0; num < widths.length; ++num){
head.children[num].style.width = widths[num] + 'px';
head.children[num].style.height = widths[num] + 'px';
// head.children[num].style.borderCollapse = "collapse";
}
//到时候渲染,就要先找到 div,ul,li 才行
// var head = document.querySelector("li");
var lis = document.querySelectorAll("#content table tr");
// console.log(lis)
for(var item = 0; item < lis.length; ++item){
var cur = lis[item];
// console.log(cur)
// console.log(cur.childElementCount)
for(var num = 0; num < cur.childElementCount; ++num){
cur.children[num].style.width = widths[num] + 'px';
cur.children[num].style.height = widths[num] + 'px';
// cur.children[num].style.borderCollapse = "collapse";
}
}
var tables = document.querySelectorAll("#content table");
console.log(tables);
for(var index = 0; index < tables.length; ++index){
tables[index].style.borderCollapse="collapse";
}
var inputs = document.querySelectorAll("#operator input");
inputs[0].addEventListener("click",function(){
window.location.href = "add_user_data";
})
inputs[1].addEventListener("click",function(){
window.location.href = "delete_user_data";
})
inputs[2].addEventListener("click",function(){
window.location.href = "find_user_data";
})
</script>
</html>

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查找联系人</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
button,
input {
border: 0;
outline: none;
}
section {
border-radius: 15px;
width: 560px;
height: 700px;
margin: 0 auto;
background-image: url(../static/bg2.jpg);
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .1);
text-align: center;
}
.title {
width: 560px;
height: 150px;
line-height: 150px;
text-align: center;
}
.search {
position: relative;
width: 560px;
height: 400px;
}
.sousuo {
position: absolute;
left: 100px;
width: 246px;
height: 40px;
padding-left: 50px;
}
.search input[type=submit] {
position: absolute;
left: 346px;
width: 100px;
height: 40px;
}
.search input[type=submit]:hover {
cursor: pointer;
background-color: skyblue;
}
footer {
width: 560px;
height: 100px;
font-size: 20px;
text-align: center;
line-height: 100px;
}
footer a {
display: block;
margin: 0 auto;
width: 560px;
height: 100px;
}
footer a:hover {
color: aqua;
}
</style>
</head>
<body>
<section>
<div class="title">
<h1>删除联系人</h1>
</div>
<form th:action="@{/delete_user_data}" target="_self" >
<div class="search">
<input class="sousuo" type="search" name="name" placeholder="请输入要删除的联系人姓名" required="required">
<input type="submit" value="确认删除">
</div>
</form>
<div id="message"><p></p></div>
<footer>
<a th:href="@{/data}">返回联系人列表</a>
</footer>
</section>
<script th:inline="javascript">
var message = [[${message}]];
if(message != null){
var p = document.querySelector("p");
p.style.color='red';
p.innerText = message;
}
</script>
</body>
</html>

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
This is error page
</body>
</html>

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查找联系人</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
button,
input {
border: 0;
outline: none;
}
section {
border-radius: 15px;
width: 560px;
height: 700px;
margin: 0 auto;
background-image: url("bg2.jpg}");
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .1);
text-align: center;
}
.title {
width: 560px;
height: 150px;
line-height: 150px;
text-align: center;
}
.search {
position: relative;
width: 560px;
height: 400px;
}
.sousuo {
position: absolute;
left: 100px;
width: 246px;
height: 40px;
padding-left: 50px;
}
.search input[type=submit] {
position: absolute;
left: 346px;
width: 100px;
height: 40px;
}
.search input[type=submit]:hover {
cursor: pointer;
background-color: skyblue;
}
footer {
width: 560px;
height: 100px;
font-size: 20px;
text-align: center;
line-height: 100px;
}
footer a {
display: block;
margin: 0 auto;
width: 560px;
height: 100px;
}
footer a:hover {
color: aqua;
}
</style>
</head>
<body>
<section>
<div class="title">
<h1>查找联系人</h1>
</div>
<form th:action="@{/find_user_data}" target="_self" >
<div class="search">
<input class="sousuo" type="search" name="name" placeholder="请输入要查找的联系人姓名" required="required">
<input type="submit" value="确认查找">
</div>
</form>
<div id="message"><p></p></div>
<footer>
<a th:href="@{/data}">返回联系人列表</a>
</footer>
</section>
<script th:inline="javascript">
var message = [[${message}]];
if(message != null){
var p = document.querySelector("p");
p.innerText = message;
p.style.color='red';
}
</script>
</body>
</html>

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

@ -0,0 +1,40 @@
package com.example.webproject.com.Pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class user_data {
private String txl_account;
private String txl_name;
private String txl_contact_phone_number;
private String txl_email;
private String txl_address;
private String txl_social_media_account;
private String txl_company_name;
private String txl_position;
private String txl_remarks;
private String txl_birthday;
private String txl_hobbies;
@Override
public String toString() {
return "user_data{" +
"txl_account='" + txl_account + '\'' +
", txl_name='" + txl_name + '\'' +
", txl_contact_phone_number='" + txl_contact_phone_number + '\'' +
", txl_email='" + txl_email + '\'' +
", txl_address='" + txl_address + '\'' +
", txl_social_media_account='" + txl_social_media_account + '\'' +
", txl_company_name='" + txl_company_name + '\'' +
", txl_position='" + txl_position + '\'' +
", txl_remarks='" + txl_remarks + '\'' +
", txl_birthday='" + txl_birthday + '\'' +
", txl_hobbies='" + txl_hobbies + '\'' +
'}';
}
}

@ -0,0 +1,22 @@
package com.example.webproject.com.Mapper;
import com.example.webproject.com.Pojo.user_data;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface user_data_operator {
// @Select("select * from user_data_table")
public List<user_data> findAll();
public List<user_data> findOne(String txl_account);
public List<user_data> findOneByName(String txl_account,String txl_name);
public Integer deleteOne(String txl_account,String txl_name);
public Integer insertOne(String account,String name,String contact_phone_number);
}

@ -0,0 +1,37 @@
<?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">
<mapper namespace="com.example.webproject.com.Mapper.user_data_operator">
<!-- // @Select("select * from user_data_table")-->
<!-- public List<user_data> findAll();-->
<resultMap id="result_user_data" type="com.example.webproject.com.Pojo.user_data">
</resultMap>
<parameterMap id="param_user_data" type="com.example.webproject.com.Pojo.user_data">
</parameterMap>
<select id="findAll" resultMap="result_user_data">
select * from user_data_table
</select>
<select id="findOne" resultMap="result_user_data" parameterType="string">
select * from user_data_table where txl_account=#{txl_account}
</select>
<select id="findOneByName" resultMap="result_user_data" parameterType="string">
select * from user_data_table where txl_account=#{txl_account} and txl_name=#{txl_name}
</select>
<delete id="deleteOne" parameterType="string" >
delete from user_data_table where txl_account=#{txl_account} and txl_name=#{txl_name}
</delete>
<insert id="insertOne" parameterType="string">
insert into user_data_table values(#{account},#{name},#{contact_phone_number},'','','','','','','','')
</insert>
</mapper>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

Loading…
Cancel
Save