code

delete
project code
23 changed files with 1364 additions and 2 deletions
--- a/3f4f55f4f01a7e04.jpg
+++ b/3f4f55f4f01a7e04.jpg
--- a/404.html
+++ b/404.html
@ -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>
--- a/Login.html
+++ b/Login.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>
--- a/R-C.jpg
+++ b/R-C.jpg
--- a/README.md
+++ b/README.md
@ -1,2 +0,0 @@
 # tongxun
--- a/ServletInitializer.java
+++ b/ServletInitializer.java
@ -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);
 	}
 }
--- a/WebProjectApplication.java
+++ b/WebProjectApplication.java
@ -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);
 	}
 }
--- a/account.java
+++ b/account.java
@ -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 + '\'' +
                '}';
    }
 }
--- a/account_operator.java
+++ b/account_operator.java
@ -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);
 }
--- a/account_operator.xml
+++ b/account_operator.xml
@ -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>
--- a/add_user_data.html
+++ b/add_user_data.html
@ -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>
--- a/application.yml
+++ b/application.yml
@ -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
--- a/control.java
+++ b/control.java
@ -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;
    }
 }
--- a/data_operator.html
+++ b/data_operator.html
@ -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>
--- a/delete_user_data.html
+++ b/delete_user_data.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>
--- a/error.html
+++ b/error.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>
--- a/find_user_data.html
+++ b/find_user_data.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>
--- a/id_cache.db-shm
+++ b/id_cache.db-shm
--- a/sfa.png
+++ b/sfa.png
--- a/user_data.java
+++ b/user_data.java
@ -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 + '\'' +
                '}';
    }
 }
--- a/user_data_operator.java
+++ b/user_data_operator.java
@ -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);
 }
--- a/user_data_operator.xml
+++ b/user_data_operator.xml
@ -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>
--- a/匆匆样式.JPG
+++ b/匆匆样式.JPG
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