前后端_前后端编程

最新推荐文章于 2024-07-04 15:33:39 发布

weixin_39664696

最新推荐文章于 2024-07-04 15:33:39 发布

阅读量229

点赞数

文章标签：前后端

本文链接：https://blog.csdn.net/weixin_39664696/article/details/112581518

版权

本节开始写一写有关web方面的知识点,web一般分为前端和后端,前端一般就是网页的展示,而后端是用来处理前端传过来的数据.前端一般要学习的是html,css和javascript.

而后端选择很多,比如php,java,python都可以.下面我们写一个例子来展示前后端是如何相互工作的．

我们写一个简易的用户登录网页，如果用户没有登录或注册，那么有些内容是不能看的，一旦用户登录或注册，那么网页会跳转到欢迎登录界面，并且首页显示登录的用户名，并且所有内容都可见．

首页界面html代码如下：

　　<html>
<head>
<meta charset="utf-8">
<title>
我的第一个</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
        $(document).ready(function(){
        
                $("#demo3").click(function(){ 
                window.open("login.php");
               });

                $("#demo4").click(function(){
                        window.open("zhuce.php");
        });

        });

function setcookie(cname,cvalue,exdays){
var d=new Date();
d.setTime(d.getTime()+(exdays*24*60*60));
        var expires="expires="+d.toGMTString();
        document.cookie=cname+"="+cvalue+"; "+expires;
 }
 
function getcookie(cname){
var ca=document.cookie.split("; ");
        for(var i=0;i<ca.length;i++){
        var temp=ca[i].split("=");
                if(temp[0]==cname)
                        return temp[1];
        }
return "";
 }
function check1(){
var user=getcookie("user");
        $("#demo6").hide();
        if(user!=""){
        document.getElementById("demo5").innerHTML="欢迎"+user;
                $("#demo6").show();
                $("#demo3").hide();
                $("#demo4").hide();
        }
        else{
        document.getElementById("demo5").innerHTML="";
        $("#demo3").show();
        $("#demo4").show();
        }

}

function f1(){
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 
 document.getElementById("demo5").innerHTML="";
        $("#demo6").hide();
}

window.onload=check1;
        </script>
</head>
<body>
<table>
<tr><td><a href="/c语言/init_c.html">c语言</a></td><td><a href=11.html">c++</a></td><td><a href="12.html">php</a></td>
</tr>
</table>

<button id="demo3">登录</button>
<button id="demo4">注册</button>
<p id="demo5"></p>
<button id="demo6" onclick="f1()">退出</button>
</body>
</html>

上面是是前端代码内容，下面是后端处理前端输入的数据的代码：

<?php
$a=$_POST["user1"];
$b=$_POST["password1"];
$b=(int)$b;

$user="localhost";
$name="root";
$password="12345";
$db="new1";

$conn=mysqli_connect($user,$name,$password,$db);
if(!$conn)
        die("连接数据库失败");


$sql="select * from user1 where name='$a'";
$result=mysqli_query($conn,$sql);


if(mysqli_num_rows($result)==0){
        echo 0;
        mysqli_close($conn);
}

else{
         mysqli_close($conn);
        echo 1;
}
?>

这一部是处理前端输入的用户名和密码，然后去数据库中匹配，如果匹配成功，说明用户名存在，这样就登录成功．

在浏览器中输入：localhost/page.html 就可以看到一下网页内容：

这时候我们如果不登录或者注册的话，点击上面任何一个链接，比如ｃ语言，可以看到以下内容：

不登录的话，有些内容是看不到的，比如点击第５个：ｃ语言指针与数组．显示如下：

当我们点击登录链接去登录后，再重新刷新页面，原先页面内容会变成：

原先不可看的内容变成可见的了．这样相当于完成了一个简易的用户登录，并且设置了一部分仅登录后可见的内容的网页功能．

当然这只是很简易的网页，而且代码写的也不规范，比如将ｊｓ代码写在了ｈtml里面，一般是将css和js代码单独写在一个文件里面，然后在html里面引入这个路径就可以．

暂时先写这么多，我在此方面也还有很多不懂和要学的，慢慢来吧，希望大家一起交流学习，拜拜～

weixin_39664696

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前后端_前后端编程

本节开始写一写有关web方面的知识点,web一般分为前端和后端,前端一般就是网页的展示,而后端是用来处理前端传过来的数据.前端一般要学习的是html,css和javascript.而后端选择很多,比如php,java,python都可以.下面我们写一个例子来展示前后端是如何相互工作的．我们写一个简易的用户登录网页，如果用户没有登录或注册，那么有些内容是不能看的，一旦用户登录或注册，那么网页会跳转到...
复制链接

扫一扫