本节开始写一写有关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 就可以看到一下网页内容:
![18868aa255c5169e8cc8fa6a20e4fdef.png](https://i-blog.csdnimg.cn/blog_migrate/3ef058bb9e1ed2761e0376365b5feba8.png)
这时候我们如果不登录或者注册的话,点击上面任何一个链接,比如c语言,可以看到以下内容:
![33e465bd142d30046f1384128efbe1c2.png](https://i-blog.csdnimg.cn/blog_migrate/3abeae912613c0168a1534eb5dc66b43.png)
不登录的话,有些内容是看不到的,比如点击第5个:c语言指针与数组.显示如下:
![eced7be5f2297f18d7396ee1d6cce780.png](https://i-blog.csdnimg.cn/blog_migrate/22ed503f290c3474ddf67e124bf576ea.png)
当我们点击登录链接去登录后,再重新刷新页面,原先页面内容会变成:
![8f74b0951246443355a3c7a567e48ae2.png](https://i-blog.csdnimg.cn/blog_migrate/c11ae2d062bcb1d66b8444bb1bd59728.png)
原先不可看的内容变成可见的了.这样相当于完成了一个简易的用户登录,并且设置了一部分仅登录后可见的内容的网页功能.
当然这只是很简易的网页,而且代码写的也不规范,比如将js代码写在了html里面,一般是将css和js代码单独写在一个文件里面,然后在html里面引入这个路径就可以.
暂时先写这么多,我在此方面也还有很多不懂和要学的,慢慢来吧,希望大家一起交流学习,拜拜~