初步完成

main
贺志豪 12 months ago
parent b691364c86
commit 3996dc3992

@ -3,6 +3,7 @@ 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;
@ -12,6 +13,10 @@ 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
@ -36,7 +41,7 @@ public class control {
//这里要开始编写我们的对于账号上面的处理了
@RequestMapping("/postProcessorRegistration")
public ModelAndView postProcessorRegistration(@RequestParam Map<String,String> map){
public ModelAndView postProcessorRegistration(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse,@RequestParam Map<String,String> map){
System.out.println("postProcessorRegistration");
//这里我们是进行注册操作
//我们先去数据库里面查一下,有没有这个账号
@ -62,18 +67,22 @@ public class control {
modelAndView.setViewName("Login");
modelAndView.addObject("isHaveAccount","当前账号已有");
}
return modelAndView;
}
//这里要开始编写我们的对于账号上面的处理了
@RequestMapping("/postProcessorLogin")
@ResponseBody
public ModelAndView postProcessorLogin(Map<String,String> map){
// @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("还没有账号,请注册一个");
@ -81,9 +90,17 @@ public class control {
modelAndView.addObject("isHaveAccount","还没有账号,注册一个");
modelAndView.setViewName("Login");
}else{
if((one.getTxl_password() == password)){
if((one.getTxl_password().equals(password))){
System.out.println("密码正确,登入成功");
modelAndView.setViewName("data_operator");
// 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");
@ -91,4 +108,143 @@ public class control {
}
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
user_data_operator.deleteOne(account,name);
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;
}
}

@ -10,4 +10,13 @@ import java.util.List;
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);
}

@ -17,6 +17,9 @@
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">

@ -15,4 +15,23 @@
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.

After

Width:  |  Height:  |  Size: 113 KiB

@ -129,7 +129,7 @@
#box{
width: 1000px;
height: 500px;
background-color: aqua;
background-color: ivory;
margin-top: 5%;
border: 1px solid transparent;
display: flex;
@ -237,11 +237,13 @@
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 = '登入';
@ -253,6 +255,7 @@
//要输出已有
var secondP = document.querySelector("#context p:first-child");
secondP.innerText = isHaveAccount;
secondP.style.color="red";
}else if(isHaveAccount ===''){
console.log("没有账号")

@ -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="请输入联系人姓名"></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>

@ -1,10 +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="请输入要删除的联系人姓名">
<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,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="@{/find_user_data}" target="_self" >
<div class="search">
<input class="sousuo" type="search" name="name" placeholder="请输入要查找的联系人姓名">
<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>
Loading…
Cancel
Save