想必大家都需要记录一些小事情,类似于记录生活,以后还能翻出来看看,本次就可以用jQuery来实现一下
对于本案例其实也不难,无非是一个增删查改加上本地存储缓存机制来实现的操作。
下面就给出代码相关分析,相关样式资源可以私下找我(QQ3534912941)获取,这里不太好上传
先给大家数据库的代码(大家直接复制sql去建表就可以了):
/*
Navicat MySQL Data Transfer
Source Server : mysqlda
Source Server Version : 80032
Source Host : 8.130.120.38:3306
Source Database : mysqldata
Target Server Type : MYSQL
Target Server Version : 80032
File Encoding : 65001
Date: 2023-06-05 19:45:03
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for assetsaccount
-- ----------------------------
DROP TABLE IF EXISTS `assetsaccount`;
CREATE TABLE `assetsaccount` (
`asset` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci,
`username` int DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of assetsaccount
-- ----------------------------
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":600,\"business\":\"你好\"},{\"monetaryunit\":200,\"business\":\"打赏\"},{\"monetaryunit\":852,\"business\":\"合法开始\"},{\"monetaryunit\":-79,\"business\":\"打款\"},{\"monetaryunit\":-250,\"business\":\"取款\"},{\"monetaryunit\":-200,\"business\":\"取款\"},{\"monetaryunit\":152,\"business\":\"存款\"},{\"monetaryunit\":45,\"business\":\"实施方案\"},{\"monetaryunit\":412,\"business\":\"撒旦\"},{\"monetaryunit\":-154,\"business\":\"阿萨\"},{\"monetaryunit\":-154,\"business\":\"解决方法规划和\"},{\"monetaryunit\":-456,\"business\":\"和国际化\"},{\"monetaryunit\":-152,\"business\":\"大厦看\"},{\"monetaryunit\":-150,\"business\":\"吃饭\"},{\"monetaryunit\":-145,\"business\":\"dasd\"},{\"monetaryunit\":-45,\"business\":\"放大\"}]', '1799');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":150,\"business\":\"存款\"},{\"monetaryunit\":150,\"business\":\"存款\"}]', '1800');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":-452,\"business\":\"是否是\"},{\"monetaryunit\":45,\"business\":\"发\"},{\"monetaryunit\":45,\"business\":\"撒旦\"},{\"monetaryunit\":-123,\"business\":\"是否健康\"}]', '1658');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":-11,\"business\":\"吃饭\"}]', '55555');
INSERT INTO `assetsaccount` VALUES ('', '4290');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":-452,\"business\":\"梵蒂冈\"},{\"monetaryunit\":412,\"business\":\"方法\"},{\"monetaryunit\":5,\"business\":\"激活工具\"},{\"monetaryunit\":-200,\"business\":\"蓝桥杯公费\"}]', '353491');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":145,\"business\":\"范德萨\"},{\"monetaryunit\":145,\"business\":\"是该公司\"}]', '16544');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":142,\"business\":\"急急急\"},{\"monetaryunit\":452,\"business\":\"花费\"},{\"monetaryunit\":-120,\"business\":\"国际化\"}]', '1801');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":-200,\"business\":\"取款\"},{\"monetaryunit\":-125,\"business\":\"啥空间\"}]', '521');
INSERT INTO `assetsaccount` VALUES ('[{\"monetaryunit\":-23,\"business\":\"撒大大\"}]', '17523');
INSERT INTO `assetsaccount` VALUES ('', '12345');
INSERT INTO `assetsaccount` VALUES ('', '111111');
-- ----------------------------
-- Table structure for dailyroutine
-- ----------------------------
DROP TABLE IF EXISTS `dailyroutine`;
CREATE TABLE `dailyroutine` (
`username` int DEFAULT NULL,
`ki` int DEFAULT NULL,
`kj` int DEFAULT NULL,
`kk` int DEFAULT NULL,
`livelist` text,
`livelist2` text,
`livelist3` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of dailyroutine
-- ----------------------------
INSERT INTO `dailyroutine` VALUES ('1799', '7', '7', '7', '[{\"starttime\":\"05:30\",\"endtime\":\"07:30\",\"workcontent\":\"团本时间\"},{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"吃饭\"},{\"starttime\":\"05:45\",\"endtime\":\"09:30\",\"workcontent\":\"先睡\"},{\"starttime\":\"00:30\",\"endtime\":\"02:00\",\"workcontent\":\"萨达\"},{\"starttime\":\"02:00\",\"endtime\":\"03:00\",\"workcontent\":\"撒旦\"},{\"starttime\":\"02:00\",\"endtime\":\"03:00\",\"workcontent\":\"撒旦撒是否\"},{\"starttime\":\"01:00\",\"endtime\":\"01:45\",\"workcontent\":\"睡觉奥\"}]', '[{\"starttime\":\"05:30\",\"endtime\":\"07:30\",\"workcontent\":\"团本时间\"},{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"吃饭\"},{\"starttime\":\"05:45\",\"endtime\":\"09:30\",\"workcontent\":\"先睡\"},{\"starttime\":\"00:30\",\"endtime\":\"02:00\",\"workcontent\":\"萨达\"},{\"starttime\":\"02:00\",\"endtime\":\"03:00\",\"workcontent\":\"撒旦\"},{\"starttime\":\"02:00\",\"endtime\":\"03:00\",\"workcontent\":\"撒旦撒是否\"},{\"starttime\":\"01:00\",\"endtime\":\"01:45\",\"workcontent\":\"睡觉奥\"}]', '[{\"starttime\":\"05:30\",\"endtime\":\"07:30\",\"workcontent\":\"团本时间\"},{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"吃饭\"},{\"starttime\":\"05:45\",\"endtime\":\"09:30\",\"workcontent\":\"先睡\"},{\"starttime\":\"00:30\",\"endtime\":\"02:00\",\"workcontent\":\"萨达\"},{\"starttime\":\"02:00\",\"endtime\":\"03:00\",\"workcontent\":\"撒旦\"},{\"starttime\":\"02:00\",\"endtime\":\"03:00\",\"workcontent\":\"撒旦撒是否\"},{\"starttime\":\"01:00\",\"endtime\":\"01:45\",\"workcontent\":\"睡觉奥\"}]');
INSERT INTO `dailyroutine` VALUES ('1800', '3', '3', '3', '[{\"starttime\":\"00:30\",\"endtime\":\"01:00\",\"workcontent\":\"吃饭\"},{\"starttime\":\"00:30\",\"endtime\":\"00:45\",\"workcontent\":\"后即可\"},{\"starttime\":\"01:00\",\"endtime\":\"01:45\",\"workcontent\":\"和健康的\"}]', '[{\"starttime\":\"00:30\",\"endtime\":\"01:00\",\"workcontent\":\"吃饭\"},{\"starttime\":\"00:30\",\"endtime\":\"00:45\",\"workcontent\":\"后即可\"},{\"starttime\":\"01:00\",\"endtime\":\"01:45\",\"workcontent\":\"和健康的\"}]', '[{\"starttime\":\"00:30\",\"endtime\":\"01:00\",\"workcontent\":\"吃饭\"},{\"starttime\":\"00:30\",\"endtime\":\"00:45\",\"workcontent\":\"后即可\"},{\"starttime\":\"01:00\",\"endtime\":\"01:45\",\"workcontent\":\"和健康的\"}]');
INSERT INTO `dailyroutine` VALUES ('1658', '0', '0', '0', '[{\"starttime\":\"\",\"endtime\":\"\",\"workcontent\":\"\"}]', '[]', '[{\"starttime\":\"\",\"endtime\":\"\",\"workcontent\":\"\"}]');
INSERT INTO `dailyroutine` VALUES ('55555', '0', '0', '0', '[{\"starttime\":\"\",\"endtime\":\"\",\"workcontent\":\"\"}]', '[]', '[{\"starttime\":\"\",\"endtime\":\"\",\"workcontent\":\"\"}]');
INSERT INTO `dailyroutine` VALUES ('4290', '0', '0', '0', '', '', '');
INSERT INTO `dailyroutine` VALUES ('353491', '2', '2', '2', '[{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"价格\"},{\"starttime\":\"00:45\",\"endtime\":\"01:45\",\"workcontent\":\"睡觉\"}]', '[{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"价格\"},{\"starttime\":\"00:45\",\"endtime\":\"01:45\",\"workcontent\":\"睡觉\"}]', '[{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"价格\"},{\"starttime\":\"00:45\",\"endtime\":\"01:45\",\"workcontent\":\"睡觉\"}]');
INSERT INTO `dailyroutine` VALUES ('16544', '3', '3', '3', '[{\"starttime\":\"00:15\",\"endtime\":\"00:30\",\"workcontent\":\"放大\"},{\"starttime\":\"02:00\",\"endtime\":\"04:00\",\"workcontent\":\"撒旦撒\"},{\"starttime\":\"01:00\",\"endtime\":\"02:15\",\"workcontent\":\"的说法是\"}]', '[{\"starttime\":\"00:15\",\"endtime\":\"00:30\",\"workcontent\":\"放大\"},{\"starttime\":\"02:00\",\"endtime\":\"04:00\",\"workcontent\":\"撒旦撒\"},{\"starttime\":\"01:00\",\"endtime\":\"02:15\",\"workcontent\":\"的说法是\"}]', '[{\"starttime\":\"00:15\",\"endtime\":\"00:30\",\"workcontent\":\"放大\"},{\"starttime\":\"02:00\",\"endtime\":\"04:00\",\"workcontent\":\"撒旦撒\"},{\"starttime\":\"01:00\",\"endtime\":\"02:15\",\"workcontent\":\"的说法是\"}]');
INSERT INTO `dailyroutine` VALUES ('1801', '3', '3', '3', '[{\"starttime\":\"01:30\",\"endtime\":\"04:00\",\"workcontent\":\"给\"},{\"starttime\":\"01:00\",\"endtime\":\"03:00\",\"workcontent\":\"吃早饭\"},{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"和经济后果\"}]', '[{\"starttime\":\"01:30\",\"endtime\":\"04:00\",\"workcontent\":\"给\"},{\"starttime\":\"01:00\",\"endtime\":\"03:00\",\"workcontent\":\"吃早饭\"},{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"和经济后果\"}]', '[{\"starttime\":\"01:30\",\"endtime\":\"04:00\",\"workcontent\":\"给\"},{\"starttime\":\"01:00\",\"endtime\":\"03:00\",\"workcontent\":\"吃早饭\"},{\"starttime\":\"01:00\",\"endtime\":\"02:00\",\"workcontent\":\"和经济后果\"}]');
INSERT INTO `dailyroutine` VALUES ('521', '1', '1', '1', '[{\"starttime\":\"00:30\",\"endtime\":\"00:45\",\"workcontent\":\"dfg\"},{\"starttime\":\"00:45\",\"endtime\":\"01:00\",\"workcontent\":\"四大\"}]', '[{\"starttime\":\"00:30\",\"endtime\":\"00:45\",\"workcontent\":\"dfg\"},{\"starttime\":\"00:45\",\"endtime\":\"01:00\",\"workcontent\":\"四大\"}]', '[{\"starttime\":\"00:30\",\"endtime\":\"00:45\",\"workcontent\":\"dfg\"},{\"starttime\":\"00:45\",\"endtime\":\"01:00\",\"workcontent\":\"四大\"}]');
INSERT INTO `dailyroutine` VALUES ('17523', '0', '0', '0', '[{\"starttime\":\"\",\"endtime\":\"\",\"workcontent\":\"\"}]', '[]', '[{\"starttime\":\"\",\"endtime\":\"\",\"workcontent\":\"\"}]');
INSERT INTO `dailyroutine` VALUES ('12345', '0', '0', '0', '', '', '');
INSERT INTO `dailyroutine` VALUES ('111111', '0', '0', '0', '', '', '');
-- ----------------------------
-- Table structure for diarys
-- ----------------------------
DROP TABLE IF EXISTS `diarys`;
CREATE TABLE `diarys` (
`uesrname` int DEFAULT NULL,
`journalcontent` text,
`messagecontent` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of diarys
-- ----------------------------
INSERT INTO `diarys` VALUES ('1799', '\"\"', '[{\"authorname\":\"发士大夫\",\"abstractcontent\":\"房贷首付\",\"titlecontent\":\"示范点发射点\"},{\"authorname\":\"可画\",\"abstractcontent\":\"发\",\"titlecontent\":\"会更加\"},{\"authorname\":\"士大夫\",\"abstractcontent\":\"第三方\",\"titlecontent\":\"发生的\"},{\"authorname\":\"士大夫\",\"abstractcontent\":\"第三方\",\"titlecontent\":\"发生的\"},{\"authorname\":\"士大夫\",\"abstractcontent\":\"第三方\",\"titlecontent\":\"发生的\"},{\"authorname\":\"士大夫\",\"abstractcontent\":\"第三方\",\"titlecontent\":\"发生的\"}]');
INSERT INTO `diarys` VALUES ('1800', '\"\"', '[{\"authorname\":\"地方\",\"abstractcontent\":\"士大夫\",\"titlecontent\":\"四个\"}]');
INSERT INTO `diarys` VALUES ('1658', '\"\"', '[{\"authorname\":\"gg\",\"abstractcontent\":\"hg\",\"titlecontent\":\"uuhjk\"},{\"authorname\":\"士大夫\",\"abstractcontent\":\"d算法\",\"titlecontent\":\"发\"}]');
INSERT INTO `diarys` VALUES ('55555', '', '');
INSERT INTO `diarys` VALUES ('4290', '', '');
INSERT INTO `diarys` VALUES ('353491', '\"\"', '[{\"authorname\":\"撒旦\",\"abstractcontent\":\"阿斯顿\",\"titlecontent\":\"撒\"},{\"authorname\":\"大大\",\"abstractcontent\":\"这是一篇好的日记\",\"titlecontent\":\"日记管理\"}]');
INSERT INTO `diarys` VALUES ('16544', '\"\"', '[{\"authorname\":\"41\",\"abstractcontent\":\"会更好\",\"titlecontent\":\"第三方\"},{\"authorname\":\"41\",\"abstractcontent\":\"会更好\",\"titlecontent\":\"第三方\"},{\"authorname\":\"大使馆\",\"abstractcontent\":\"大家是客户角度看\",\"titlecontent\":\"阿萨看见回复可见\"}]');
INSERT INTO `diarys` VALUES ('1801', '\"\"', '[{\"authorname\":\"士大夫\",\"abstractcontent\":\"s地方\",\"titlecontent\":\"算法\"},{\"authorname\":\"都是大客户\",\"abstractcontent\":\"的撒旦艰苦和\",\"titlecontent\":\"的回复\"}]');
INSERT INTO `diarys` VALUES ('521', '\"\"', '[{\"authorname\":\"好机会\",\"abstractcontent\":\"和国际化\",\"titlecontent\":\"交换空间\"}]');
INSERT INTO `diarys` VALUES ('17523', '\"\"', '[]');
INSERT INTO `diarys` VALUES ('12345', '', '');
INSERT INTO `diarys` VALUES ('111111', '', '');
-- ----------------------------
-- Table structure for drinking
-- ----------------------------
DROP TABLE IF EXISTS `drinking`;
CREATE TABLE `drinking` (
`username` int DEFAULT NULL,
`drinkingmeg` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of drinking
-- ----------------------------
INSERT INTO `drinking` VALUES ('1799', '[{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-19 16:41:50\"}]');
INSERT INTO `drinking` VALUES ('1801', '[{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 14:00:21\"},{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 14:01:24\"},{\"date\":\"酸奶\",\"name\":\"95\",\"address\":\"2023-05-14 16:04:14\"},{\"date\":\"酸奶\",\"name\":\"95\",\"address\":\"2023-05-14 16:04:15\"}]');
INSERT INTO `drinking` VALUES ('1800', '[{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-14 16:09:11\"},{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-14 16:09:23\"},{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-15 09:00:33\"},{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-15 09:00:37\"},{\"date\":\"咖啡\",\"name\":\"86\",\"address\":\"2023-05-15 09:20:45\"}]');
INSERT INTO `drinking` VALUES ('1658', null);
INSERT INTO `drinking` VALUES ('55555', null);
INSERT INTO `drinking` VALUES ('4290', null);
INSERT INTO `drinking` VALUES ('353491', '[{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 16:57:24\"},{\"date\":\"中药\",\"name\":\"90\",\"address\":\"2023-05-14 16:57:36\"}]');
INSERT INTO `drinking` VALUES ('16544', '');
INSERT INTO `drinking` VALUES ('521', '[{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 12:20:50\"},{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 12:23:12\"},{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 12:51:24\"},{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-14 13:04:22\"}]');
INSERT INTO `drinking` VALUES ('17523', '[{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 13:37:58\"},{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 13:40:02\"},{\"date\":\"水\",\"name\":\"100\",\"address\":\"2023-05-14 13:41:06\"},{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-14 13:41:43\"}]');
INSERT INTO `drinking` VALUES ('12345', '');
INSERT INTO `drinking` VALUES ('111111', '[{\"date\":\"柠檬水\",\"name\":\"80\",\"address\":\"2023-05-29 10:59:17\"}]');
-- ----------------------------
-- Table structure for feedback
-- ----------------------------
DROP TABLE IF EXISTS `feedback`;
CREATE TABLE `feedback` (
`username` int DEFAULT NULL,
`content` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of feedback
-- ----------------------------
INSERT INTO `feedback` VALUES ('1799', '好像有问题');
INSERT INTO `feedback` VALUES ('1800', '没有问题');
INSERT INTO `feedback` VALUES ('1658', '好像有问题');
INSERT INTO `feedback` VALUES ('55555', '好像有问题');
INSERT INTO `feedback` VALUES ('4290', '范德萨');
INSERT INTO `feedback` VALUES ('353491', '好像有问题');
INSERT INTO `feedback` VALUES ('15644', '好像有问题');
INSERT INTO `feedback` VALUES ('16544', '好像有问题');
INSERT INTO `feedback` VALUES ('1801', '好像有问题');
INSERT INTO `feedback` VALUES ('521', '这次怎么样');
INSERT INTO `feedback` VALUES ('17523', '');
INSERT INTO `feedback` VALUES ('12345', '');
INSERT INTO `feedback` VALUES ('111111', '');
-- ----------------------------
-- Table structure for loginout
-- ----------------------------
DROP TABLE IF EXISTS `loginout`;
CREATE TABLE `loginout` (
`username` int DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of loginout
-- ----------------------------
INSERT INTO `loginout` VALUES ('1799');
INSERT INTO `loginout` VALUES ('111111');
-- ----------------------------
-- Table structure for rankinglist
-- ----------------------------
DROP TABLE IF EXISTS `rankinglist`;
CREATE TABLE `rankinglist` (
`username` int DEFAULT NULL,
`integral` bigint DEFAULT NULL,
`name` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of rankinglist
-- ----------------------------
INSERT INTO `rankinglist` VALUES ('1799', '680', '繁华001');
INSERT INTO `rankinglist` VALUES ('1800', '780', '繁花1');
INSERT INTO `rankinglist` VALUES ('1658', '560', '繁花2');
INSERT INTO `rankinglist` VALUES ('55555', '480', '繁花3');
INSERT INTO `rankinglist` VALUES ('4290', '632', '繁花4');
INSERT INTO `rankinglist` VALUES ('353491', '256', '繁花5');
INSERT INTO `rankinglist` VALUES ('16544', '0', '繁花6');
INSERT INTO `rankinglist` VALUES ('1801', '0', '繁华');
INSERT INTO `rankinglist` VALUES ('521', '0', '繁华');
INSERT INTO `rankinglist` VALUES ('17523', '0', '繁华');
INSERT INTO `rankinglist` VALUES ('12345', '0', '繁华');
INSERT INTO `rankinglist` VALUES ('111111', '0', '繁华');
-- ----------------------------
-- Table structure for reg
-- ----------------------------
DROP TABLE IF EXISTS `reg`;
CREATE TABLE `reg` (
`urename` bigint DEFAULT NULL,
`pasword` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
`email` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci,
`nickname` varchar(255) DEFAULT NULL,
`sex` varchar(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- ----------------------------
-- Records of reg
-- ----------------------------
INSERT INTO `reg` VALUES ('1799', 'w123456789', '2251084392@qq.com', '繁华001', '男');
INSERT INTO `reg` VALUES ('1800', 'w123456789', '2251084392@qq.com', '繁花1', '男');
INSERT INTO `reg` VALUES ('1658', 'w123456789', '2251084392@qq.com', '繁花2', '男');
INSERT INTO `reg` VALUES ('55555', '21933250', '2194511879@qq.com', '繁花3', '男');
INSERT INTO `reg` VALUES ('4290', 'gjx030929', '1085704260@qq.com', '繁花4', '男');
INSERT INTO `reg` VALUES ('353491', 'w123456789', '2251084392@qq.com', '繁花5', '男');
INSERT INTO `reg` VALUES ('16544', 'w123456789', '2251084392@qq.com', '繁花6', '男');
INSERT INTO `reg` VALUES ('1801', 'w123456789', '2251084392@qq.com', '繁花', '男');
INSERT INTO `reg` VALUES ('521', '123456', '2427848576@qq.com', '繁花', '男');
INSERT INTO `reg` VALUES ('17523', 'w123456789', '2251084392@qq.com', '繁花', '男');
INSERT INTO `reg` VALUES ('12345', 'w123456789', '2251084392@qq.com', '繁花', '男');
INSERT INTO `reg` VALUES ('111111', '111111', '1557907898@QQ.com', '繁花', '男');
有了数据库后,就是前端和后端代码的实现,想必大家也很清楚了,这里就是简单的前后端交互,以及数据库的配到传输,直接上代码了,不啰嗦了:
前端实现效果:
前端页面代码如下:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!--图标样式-->
<!-- <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'> -->
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/elementcss.css"> -->
</head>
<body>
<h2>TODOlist</h2>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>注册</h1>
<!-- <div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div> -->
<!-- <span>第三方账号注册</span> -->
<input class="user" type="text" placeholder="用户名" maxlength="10"/>
<input class="username" type="text" placeholder="邮箱" maxlength="17"/>
<input class="pasword" type="password" placeholder="密码" maxlength="20"/>
<button class="register">注册</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>登录</h1>
<!-- <div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div> -->
<!-- <span>第三方账号登录</span> -->
<input class="account" type="text" placeholder="账号" maxlength="17"/>
<input class="password" type="password" placeholder="密码" maxlength="20"/>
<button class="login">登录</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>欢迎回来!</h1>
<p>请您先登录的个人信息,进行操作。</p>
<button class="ghost" id="signIn">登录</button>
</div>
<div class="overlay-panel overlay-right">
<h1>你好ToDolist!</h1>
<p>输入您的个人信息注册成为会员。</p>
<button class="ghost" id="signUp">注册</button>
</div>
</div>
</div>
</div>
<script src="js/login.js"></script>
<!-- <script src="js/vue.js"></script> -->
<!-- <script src="js/elementjs.js"></script> -->
<!-- <script src="js/axios.js"></script> -->
<script src="js/jquery.js"></script>
<script>
//后台接口
let ip = "http://127.0.0.1:3000"
//注册发送验证
$(".register").click(()=>{
if($(".user").val()==''||$(".username").val()==''||$(".pasword").val()==''){
// console.log(document.querySelector(".user").value);
// console.log(document.querySelector(".username").value);
// console.log(document.querySelector(".pasword").value);
alert("输入不能为空")
}else{
$.ajax({
url: `${ip}/user`,
type:'get',
data:{
"username":$(".user").val(),
"email":$(".username").val(),
"password":$(".pasword").val(),
},
// dataType: 'json',
success: (data) => {
if(data=="成功"){
alert("注册成功");
}
}
})
}
})
// 登录请求验证
$(".login").click(()=>{
if($(".account").val()==''||$(".password").val()==''){
alert("输入账号或密码为空");
}else{
// 登录请求
$.ajax({
url:`${ip}/login`,
type:'post',
data:{
"email":$(".account").val(),
"password":$(".password").val(),
},
success: (data) => {
if(data=="成功"){
alert("登陆成功");
window.location.href="./index.html";
}else{
alert("账号密码不正确")
}
}
})
}
})
</script>
</body>
</html>
首页部分:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ToDo—最简单的待办事项列表</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
</head>
<style>
.homepage{
color: #fff;
line-height: 50px;
position: absolute;
left: 2%;
}
</style>
<body>
<header>
<div class="homepage">首页</div>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2 style="color: red;">正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2 style="color: green;">已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
最快 © 最好的项目打造
</footer>
<!-- 测试部分 -->
<!-- <script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script>
$.ajax({
url: '/api/user',
type: 'GET',
dataType: 'json',
success: function(response) {
console.log(response); // 输出Mock数据
}
});
</script>
<script>
Mock.mock('/api/user', 'get', {
code: 200,
message: 'success',
data: {
id: '@id',
name: '@cname',
age: '@integer(18, 60)',
gender: '@integer(0, 1)',
email: '@email',
phone: /^1[3456789]\d{9}$/,
avatar: '@image("200x200", "#50B347", "#FFF", "Mock.js")'
}
});
</script> -->
</body>
</html>
后端代码:
const express = require('express')
const mysql = require("mysql");
const app = express()
const port = 3000
const bodyparser = require("body-parser")
app.use(bodyparser.urlencoded({extended:false}))
app.use(bodyparser.json())
const con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'w123456789',
port: 3306,
database: 'jquery'
})
// 测试连接
con.connect(err=>{
// null代表连接成功
console.log(err);
})
//解决跨域
let cors = require("cors");
app.use(cors());
app.get('/user', (req, res) => {
console.log(req.query);
let sql = `INSERT INTO users VALUES(${parseInt(Math.random()*10000)},'${req.query.username}','${req.query.email}','${req.query.password}')`;
con.query(sql);
res.send('成功')
});
app.post('/login', (req, response) => {
console.log(req.body);
let sql = `SELECT * FROM users WHERE email='${req.body.email}' and password='${req.body.password}'`;
con.query(sql,(err,res)=>{
// console.log(res[0]);
if(res[0]==undefined){
// console.log(res);
response.send('失败');
}else{
response.send('成功');
}
});
});
app.get('/add', (req, res) => {
console.log(req.query);
let sql = `INSERT INTO todos VALUES(${parseInt(Math.random()*10000)},'${req.query.name}','加入一个事项','一级优先','2023-06-03',0,1)`;
con.query(sql);
res.send('成功')
});
app.get('/del', (req, res) => {
console.log(req.query);
let sql = `DELETE FROM todos WHERE name='${req.query.name}'`;
con.query(sql);
res.send('成功')
});
app.get('/updata', (req, res) => {
console.log(req.query);
//1表示完成0表示未完成
let flg
if(req.query.completed=='false'){
flg=0;
}else{
flg=1
}
console.log(flg);
let sql = `UPDATE todos SET completed=${flg} WHERE name='${req.query.name}'`;
con.query(sql);
res.send('成功')
});
app.listen(port, () => {
console.log(`3000端口启动完成`)
})