前后端_前后端编程
本節開始寫一寫有關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里面引入這個路徑就可以．
暫時先寫這么多，我在此方面也還有很多不懂和要學的，慢慢來吧，希望大家一起交流學習，拜拜～
總結
- 上一篇： docker内外连通ros_docker
- 下一篇： ppt给图片增加高斯模糊_制作PPT时，