프런트엔드와 백엔드 상호작용 공유의 예
이번 주에는 마스터님의 지도하에 ajax와 php 파일 업로드 처리를 활용한 간단한 게시판 기능의 구현 방법을 보여드리겠습니다.
1. 인터페이스 개요
먼저, 이 작은 데모의 구체적인 효과를 살펴보겠습니다.
이 데모에는 주로 세 가지 단계가 포함되어 있으며 이는 세 가지 기능, 즉 등록, 로그인 및 메시지 보드 기능에도 해당됩니다. 이 세 가지 기능은 기본적으로 여러 프런트엔드 및 백엔드 상호 작용 기술에 의존합니다. 아래에서는 이 세 가지 기능을 구현하는 코드를 보여 드리겠습니다.
2. 기능 구현
1. 등록 기능 및 로그인 기능
1.1 코드 표시
1.1.1 등록 기능
(1) 전면
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户注册</title><link rel="stylesheet" type="text/css" href="../libs/bootstrap.css?1.1.11"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 350px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -175px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head>
<body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">用户注册</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>用户名</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密码</label><input type="password" class="form-control" name="pwd" /></div><div class="form-group"><label>确认密码</label><input type="password" class="form-control" name="rePwd" /></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="确定注册" id="submit"/> <a type="button" class="btn btn-success" href="login.php"/>返回登录</a></div></form></div></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script type="text/javascript">$(function(){
$("#submit").on("click",function(){var str = $("form").serialize();
console.log(str);
$.post("doReg.php",{"formData":str},function(data){if(data=="true"){
alert("注册成功！即将跳转登陆页！");
location = "login.php";
}else{
alert("注册失败！因为啥我不知道！");
}
});
});
});</script></html>(2) 백엔드 부분
<?phpheader("Content-Type:text/html;charset=utf-8"); $str = $_POST["formData"]."[;]"; $num = file_put_contents("user.txt", $str,FILE_APPEND); if($num>0){echo "true";
}else{echo "false";
}(3) 사용자 데이터 저장 파일
userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件，就是后台部分的user.txt
1.1.2 로그인 기능
(1) 프론트엔드 부분
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户登录</title><link rel="stylesheet" type="text/css" href="../libs/bootstrap.css?1.1.11"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 280px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -140px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head>
<body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">用户登录</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>用户名</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密码</label><input type="password" class="form-control" name="pwd"/></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="登录系统" id="submit"/> <a type="button" class="btn btn-success" href="reg.php"/>注册账号</a></div></form></div></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script type="text/javascript">$(function(){
$("#submit").on("click",function(){var str = $("form").serialize();
console.log(str);
$.post("doLogin.php",{"formData":str},function(data){if(data=="true"){
location = "index.php?name="+$("input[name='userName']").val();
}else{
alert("用户名或密码错误！！！");
}
});
});
});</script></html>(2) 백엔드 부분
<?phpheader("Content-Type:text/html;charset=utf-8"); $str = $_POST["formData"]; list($userName) = explode("&", $str);list(,$pwd) = explode("&", $str); $users = file_get_contents("user.txt"); $userArr = explode("[;]", $users); foreach ($userArr as $user) {list($realName) = explode("&", $user);list(,$realPwd) = explode("&", $user);if($userName==$realName&&$pwd==$realPwd){echo "true";die();
}
} echo "false";1.2 기능 세부 설명
사용자 등록 및 로그인 기능을 구현하는 데는 세 가지 주요 종속성이 있습니다. 즉, ajax는 데이터를 백그라운드로 전송하고 결과를 받아들이고, php 백그라운드는 ajax가 보낸 데이터를 처리하고 결과를 피드백하며, 사용자 데이터 수신 및 저장(실제로는 백그라운드 처리 부분으로 전환될 수 있음)
1.2.1 프런트엔드 세부정보
프론트엔드 부분의 주요 작업은 사용자로부터 정보를 받아 백그라운드로 전송하는 것입니다. 이 작업 부분의 구현은 주로 두 줄의 코드에 의존합니다.
먼저 ajax 요청이 어떻게 구현되는지 살펴보겠습니다. 이 함수 부분의 구현은 주로 두 줄의 코드에 의존합니다.
코드의 첫 번째 줄은 var str = $("form").serialize(); 이 줄의 기능은 양식에 제출된 데이터를 문자열로 직렬화하는 것입니다. 아래
양식에 제출된 데이터는 배경이 이 부분을 더 잘 구문 분석할 수 있도록 직렬화됩니다.
코드의 다른 핵심 라인은 ajax 요청의 주요 부분입니다. 이 부분에서 가장 이해하기 어려운 것은 허용되는 데이터 매개변수입니다. data 매개변수는 ajax 요청의 해당 백그라운드 처리가 완료된 후 백그라운드가 프론트 데스크에 피드백하는 정보입니다. 예를 들어 등록 성공 시 true가 반환되고 실패 시 false가 반환됩니다.
1.2.2 백스테이지 세부정보
프런트엔드에서 전송된 데이터의 백엔드 처리의 핵심은 전송된 데이터를 어떻게 얻고 구문 분석하는지입니다. 이 부분에서 PHP는 구현할 세 줄의 코드를 제공합니다.
첫 번째 코드 줄: $str = $_POST["formData"]; 슈퍼 전역 배열 $_POST를 통해 프론트 데스크에서 직렬화된 문자열을 얻어 데이터 획득 부분을 해결합니다.
두 번째 코드 줄: file_put_contents("user.txt", $str,FILE_APPEND); PHP는 장기간 보존을 위해 얻은 데이터를 파일에 저장할 수 있는 file_putt_contents()를 제공합니다. .
세 번째 코드 줄: file_get_contents("user.txt"); file_putt_contents()에 해당하는 PHP에서 제공하는 데이터 추출 방법입니다.
위의 세 줄의 코드와 데이터 분석 처리를 결합하여 백그라운드에서 전체 기능을 쉽게 구현할 수 있습니다.
2. 메시지 기능
2.1 코드 표시
(1) 프론트엔드 부분
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#note{width: 400px;height:100px;}</style></head><body><div id="div1"></div><textarea name="note" id="note"></textarea><br /><input type="button" id="submit" value="留言" /><h1>留言内容</h1><hr><div id="liuyanban"></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script>$(function(){
getData(); var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';if(userName=="null"){
location = "login.php";
}
$("#div1").html("欢迎您，<span style='color:red;'>"+userName+"</span>");
$("#submit").on("click",function(){var noteVal = $("#note").val();if(noteVal==""){
alert("留言内容不能为空，请核对！");return;
}var time = getTime();var note = {"userName":userName,"time":time,"noteVal":noteVal
}
$.post("doAdd.php",note,function(data){if(data=="true"){
alert("留言内容提交成功！");
location.reload(true);
}else{
alert("留言失败！原因不明！");
}
});
});
}); function getData(){
$.post("doShowNote.php",function(data){var arr = data.split("[;]");
arr.pop();
console.log(arr);for (var i=0;i< arr.length;i++) {var thisNote = $.parseJSON(arr[i]);var div = "<br/><div id='div"+i+"'>用户名："+thisNote.userName+" 发布时间："+thisNote.time+"<br/><br/> 留言内容："+thisNote.noteVal+"</div><br/><hr>"$("#liuyanban").prepend(div);
}
})
} function getTime(){var today = new Date();var year = today.getFullYear();var month = today.getMonth();var date1 = today.getDate();var hours = today.getHours();var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds; return dateTime;
}</script></html>(2) 백엔드 부분
// 笔记的添加<?phpheader("Content-Type:text/html;charset=utf-8"); $userName = $_POST["userName"];$time = $_POST["time"];$noteVal = $_POST["noteVal"]; $arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal]; $str = json_encode($arr); $num = file_put_contents("note.txt", $str."[;]",FILE_APPEND); if($num>0){echo "true";
}else{echo "false";
}// 笔记的展示<?phpheader("Content-Type:text/html;charset=utf-8");echo file_get_contents("note.txt");(3) 메시지 데이터 저장 파일
2.2 기능설명
2.1.1 프론트엔드 부분
프론트엔드 부분의 기능은 현재 날짜, 사용자 이름 데이터, 게시판 스타일을 추가하는 점만 제외하면 로그인, 등록 기능과 동일합니다. 요구 사항에 따라.
2.1.2 백엔드 부분
백엔드 부분은 실제로 로그인 및 등록의 백엔드 구현과 동일한 루틴이지만 둘보다 한 단계 더 높습니다. json_encode($arr); 이것은 배열을 JSON 개체 형식으로 변환하기 위해 PHP에서 제공하는 방법으로, 프런트 엔드에서 메시지 데이터에 대한 피드백을 더 쉽게 얻을 수 있습니다.
위 내용은 이번 주에 처음으로 제공되는 작은 기능 데모입니다. 혹시라도 실수가 있으면 수정해 주세요.
위 내용은 프런트엔드와 백엔드 상호작용 공유의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7546
15
1381
52
83
11
57
19
21
89
Discuz 백그라운드 로그인 문제 해결 방법 공개
Mar 03, 2024 am 08:57 AM
Discuz 백그라운드 로그인 문제에 대한 해결책이 공개되었습니다. 인터넷의 급속한 발전으로 인해 웹 사이트 구축이 점점 보편화되고 있으며 일반적으로 사용되는 포럼 웹 사이트 구축 시스템으로 Discuz가 선호되고 있습니다. 많은 웹마스터. 그러나 강력한 기능으로 인해 Discuz를 사용할 때 백그라운드 로그인 문제와 같은 몇 가지 문제가 발생할 수 있습니다. 오늘은 Discuz 백그라운드 로그인 문제에 대한 해결책을 공개하고 구체적인 코드 예시를 제공하여 도움이 필요한 분들에게 도움이 되기를 바라겠습니다.
데모는 무슨 뜻인가요?
Feb 12, 2024 pm 09:12 PM
노래를 좋아하는 친구들에게는 데모라는 단어가 더 이상 낯설지 않지만, 한번도 접해보지 못한 많은 유저들은 데모가 무슨 뜻인지 궁금해합니다. 이제 편집자가 가져온 데모의 의미를 살펴보겠습니다. 데모는 무엇을 의미합니까? 답변: 데모 테이프. 1. Demo의 발음은 영어에서는 ['deməʊ], 미국에서는 ['demoʊ]입니다. 2. Demo는 "demonstration"의 약어로, 일반적으로 노래가 공식적으로 녹음되기 전에 듣는 사전 효과를 나타냅니다. 3. Demo는 샘플 테이프 및 샘플 레코드를 지칭하는 명사로 사용됩니다. 동사의 의미는 재판(특히 소프트웨어), 데모 및 시연입니다.
WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요
Mar 05, 2024 pm 09:27 PM
WordPress 백엔드 잘못된 코드가 걱정되나요? 이러한 솔루션을 사용해 보십시오. 웹 사이트 구축에 WordPress가 널리 적용되면서 많은 사용자가 WordPress 백엔드에서 잘못된 코드 문제에 직면할 수 있습니다. 이러한 종류의 문제로 인해 배경 관리 인터페이스에 잘못된 문자가 표시되어 사용자에게 큰 문제를 야기합니다. 이 문서에서는 사용자가 WordPress 백엔드에서 잘못된 문자 문제를 해결하는 데 도움이 되는 몇 가지 일반적인 솔루션을 소개합니다. wp-config.php 파일을 수정하고 wp-config를 엽니다.
PHP와 Vue: 프런트엔드 개발 도구의 완벽한 조합
Mar 16, 2024 pm 12:09 PM
PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.
프론트엔드 면접관이 자주 묻는 질문
Mar 19, 2024 pm 02:24 PM
프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.
프론트엔드 개발에 Go 언어를 사용하는 방법은 무엇입니까?
Jun 10, 2023 pm 05:00 PM
인터넷 기술이 발전하면서 프론트엔드 개발이 점점 더 중요해지고 있습니다. 특히 모바일 장치의 인기는 효율적이고 안정적이며 안전하고 유지 관리가 쉬운 프런트 엔드 개발 기술을 요구합니다. 빠르게 발전하는 프로그래밍 언어로서 Go 언어는 점점 더 많은 개발자가 사용하고 있습니다. 그렇다면 프론트엔드 개발에 Go 언어를 사용하는 것이 가능할까요? 다음으로 이 글에서는 프론트엔드 개발에 Go 언어를 사용하는 방법을 자세히 설명하겠습니다. 먼저 프론트엔드 개발에 Go 언어가 사용되는 이유를 살펴보겠습니다. 많은 사람들이 Go 언어가 언어라고 생각합니다.
C# 개발 경험 공유: 프런트엔드 및 백엔드 공동 개발 기술
Nov 23, 2023 am 10:13 AM
C# 개발자로서 우리의 개발 작업에는 일반적으로 프런트엔드와 백엔드 개발이 포함됩니다. 기술이 발전하고 프로젝트의 복잡성이 증가함에 따라 프런트엔드와 백엔드의 공동 개발이 점점 더 중요해지고 복잡해졌습니다. 이 문서에서는 C# 개발자가 개발 작업을 보다 효율적으로 완료하는 데 도움이 되는 몇 가지 프런트 엔드 및 백엔드 공동 개발 기술을 공유합니다. 인터페이스 사양을 결정한 후 프런트엔드와 백엔드의 공동 개발은 API 인터페이스의 상호 작용과 분리될 수 없습니다. 프론트엔드와 백엔드 협업 개발이 원활하게 진행되기 위해서는 가장 중요한 것은 좋은 인터페이스 사양을 정의하는 것입니다. 인터페이스 사양에는 인터페이스 이름이 포함됩니다.
Django는 프론트엔드인가요, 백엔드인가요? 확인 해봐!
Jan 19, 2024 am 08:37 AM
Django는 빠른 개발과 깔끔한 방법을 강조하는 Python으로 작성된 웹 애플리케이션 프레임워크입니다. Django는 웹 프레임워크이지만 Django가 프런트엔드인지 백엔드인지에 대한 질문에 답하려면 프런트엔드와 백엔드의 개념에 대한 깊은 이해가 필요합니다. 프론트엔드는 사용자가 직접 상호작용하는 인터페이스를 의미하고, 백엔드는 HTTP 프로토콜을 통해 데이터와 상호작용하는 서버측 프로그램을 의미합니다. 프론트엔드와 백엔드가 분리되면 프론트엔드와 백엔드 프로그램을 독립적으로 개발하여 각각 비즈니스 로직과 인터랙티브 효과, 데이터 교환을 구현할 수 있습니다.
