jQuery的todolist案例实现

编程语言 2023-09-06 17:27:34 阅读次数: 0

想必大家都需要记录一些小事情，类似于记录生活，以后还能翻出来看看，本次就可以用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', '[email protected]', '繁华001', '男');
INSERT INTO `reg` VALUES ('1800', 'w123456789', '[email protected]', '繁花1', '男');
INSERT INTO `reg` VALUES ('1658', 'w123456789', '[email protected]', '繁花2', '男');
INSERT INTO `reg` VALUES ('55555', '21933250', '[email protected]', '繁花3', '男');
INSERT INTO `reg` VALUES ('4290', 'gjx030929', '[email protected]', '繁花4', '男');
INSERT INTO `reg` VALUES ('353491', 'w123456789', '[email protected]', '繁花5', '男');
INSERT INTO `reg` VALUES ('16544', 'w123456789', '[email protected]', '繁花6', '男');
INSERT INTO `reg` VALUES ('1801', 'w123456789', '[email protected]', '繁花', '男');
INSERT INTO `reg` VALUES ('521', '123456', '[email protected]', '繁花', '男');
INSERT INTO `reg` VALUES ('17523', 'w123456789', '[email protected]', '繁花', '男');
INSERT INTO `reg` VALUES ('12345', 'w123456789', '[email protected]', '繁花', '男');
INSERT INTO `reg` VALUES ('111111', '111111', '[email protected]', '繁花', '男');

有了数据库后，就是前端和后端代码的实现，想必大家也很清楚了，这里就是简单的前后端交互，以及数据库的配到传输，直接上代码了，不啰嗦了:

前端实现效果：

 前端页面代码如下：

<!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>
    最快 &copy; 最好的项目打造
  </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端口启动完成`)
})

猜你喜欢

转载自blog.csdn.net/qq_63656102/article/details/131109053
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022