手機賺錢怎麼賺,給你們推薦一個手機賺錢APP彙總平臺:手指樂(http://www.szhile.com/),辛苦搬磚之餘用閒餘時間動動手指,就能夠日賺數百元javascript
web先後端交互php
先後端交互能夠採用混合式，好比：css
<?php
//首先在這裏寫好相關的調用代碼
function OutputTitle(){
echo 'TestPage';
}
function OutputContent(){
echo 'Hello!';
}
//而後再下面調用相關函數就能夠了
?>
<!DOCTYPE html>
<html>
<head>
<title><?php OutputTitle(); ?></title>
</head>
<body>
<span><?php OutputContent(); ?></span>
</body>
</html>
示例2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖書信息顯示</title>
<link rel="stylesheet" type="text/css" href="css/font.css">
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table width="703" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#EF5E0F" ><table width="703" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="25" colspan="5" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="187" height="25" bgcolor="#F39A40"><div align="center">書名</div></td>
<td width="173" bgcolor="#F39A40"><div align="center">做者</div></td>
<td width="101" bgcolor="#F39A40"><div align="center">價格</div></td>
<td width="131" bgcolor="#F39A40"><div align="center">出版社</div></td>
<td width="105" bgcolor="#F39A40"><div align="center">出版時間</div></td>
</tr>
<?php
$conn=mysql_connect("localhost","root","root");
mysql_select_db("db_book",$conn);
mysql_query("set names gb2312");
$sql=mysql_query("select * from db_book order by id desc",$conn);
$info=mysql_fetch_array($sql);
if($info==false)
{
echo "暫無圖書信息！";
}
else
{
do
{
?>
<tr>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookname];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[author];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[price];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookpublic];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[pubtime];?></div></td>
</tr>
<?php
}while($info=mysql_fetch_array($sql));
}
?>
</table></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖書信息顯示</title>
<link rel="stylesheet" type="text/css" href="css/font.css">
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table width="703" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#EF5E0F" ><table width="703" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="25" colspan="5" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="187" height="25" bgcolor="#F39A40"><div align="center">書名</div></td>
<td width="173" bgcolor="#F39A40"><div align="center">做者</div></td>
<td width="101" bgcolor="#F39A40"><div align="center">價格</div></td>
<td width="131" bgcolor="#F39A40"><div align="center">出版社</div></td>
<td width="105" bgcolor="#F39A40"><div align="center">出版時間</div></td>
</tr>
<?php
$conn=mysql_connect("localhost","root","root");
mysql_select_db("db_book",$conn);
mysql_query("set names gb2312");
$sql=mysql_query("select * from db_book order by id desc",$conn);
$info=mysql_fetch_array($sql);
if($info==false)
{
echo "暫無圖書信息！";
}
else
{
do
{
?>
<tr>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookname];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[author];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[price];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookpublic];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[pubtime];?></div></td>
</tr>
<?php
}while($info=mysql_fetch_array($sql));
}
?>
</table></td>
</tr>
</table>
</body>
</html>
還可使用模板，好比php+Smarty模板：
test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>smarty test1</title>
</head>
<body>
它的名字叫{$name}
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>smarty test1</title>
</head>
<body>
它的名字叫{$name}
</body>
</html>
test1.php:
<?php
require './libs/Smarty.class.php';
$smarty=new Smarty();
$name='劉二狗';
$smarty->assign( 'name' , $name );
$smarty->display('./test1.html');
require './libs/Smarty.class.php';
$smarty=new Smarty();
$name='劉二狗';
$smarty->assign( 'name' , $name );
$smarty->display('./test1.html');
可是如今流行的模式是先後端分離（好比web service），後臺提供http api，返回json數據供前端動態解析顯示
nodejs
nodejs是用js寫服務端代碼的框架（功能至關於php，jsp），與php不一樣，nodejs能夠本身啓動http服務，php要依賴apache等web服務器
NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：html
- 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
- 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
- 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。
mac默認安裝了nodejs和npm
一個簡單的後臺實例，還有配套的與後臺進行交互的簡單網頁。
頁面端使用了jQuery進行控制，
後臺使用nodejs做爲操控語言，使用express執行網絡操做
頁面端使用了jQuery進行控制，
後臺使用nodejs做爲操控語言，使用express執行網絡操做
整個工程結構以下：前端
根目錄--------------
|-package.json |-test.js |-public |-main.html |-add.html
Nodejs端，名字爲test.jsjava
// file name :test.js var express = require('express'); var app = express(); var bodyParse = require('body-parser') var cookieParser = require('cookie-parser') ; app.use(cookieParser()) ; app.use(bodyParse.urlencoded({extended:false})) ; // 處理根目錄的get請求 app.get('/',function(req,res){ res.sendfile('public/main.html') ; console.log('main page is required '); }) ; // 處理/login的get請求 app.get('/add', function (req,res) { res.sendfile('public/add.html') ; console.log('add page is required ') ; }) ; // 處理/login的post請求 app.post('/login',function(req,res){ name=req.body.name ; pwd=req.body.pwd ; console.log(name+'--'+pwd) ; res.status(200).send(name+'--'+pwd) ; }); // 監聽3000端口 var server=app.listen(3000) ;
main.html的代碼以下node
<html> <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Tangerine|Inconsolata|Droid+Sans"> <style> div#test{ font-family: 'Tangerine',serif; font-size: 48px; } p#link1{ font-family: 'Tangerine',serif; } </style> <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> </head> <body> <div id="test"> <h1>Main Page</h1> </div> <p>Register & Login</p> <form action="test.jsp" method="post"> 帳號 : <input type="text" id="name" /> <br/><br/> 密碼 : <input type="text" id="pwd" /> <br/><br/>       <div><a href="/add" id="add">EXTRA</a></div> <input type="button" value="Submit" id="x"> </form> </body> <script type="text/javascript"> var after_login=function(data,status){ if (status=='success'){ alert(data+'--'+status) ; } else alert('login refused') ; } $(document).ready(function(){ $("#x").click(function(){ var name = $("#name").val() ; var pwd = $("#pwd").val() ; $.post('http://127.0.0.1:3000/login', { name : name , pwd : pwd }, // function(data,status){ // alert(data+'--'+status) ; // } after_login ); // $.get('add',function(data,status){ // document.write(data) ; // }) ; }); }); </script> </html>
add.html的代碼以下mysql
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>嘿</title> </head> <body> <h1>This is an additional web page</h1> <p>just for test</p> </body> </html>
啓動項目：
cd 到項目目錄，輸入 node test.js，運行服務器
打開瀏覽器，輸入127.0.0.1:3000，可獲得以下頁面
jquery
輸入帳號和密碼，能獲得彈出窗口，裏面是服務器的返回值
web
點擊EXTRA頁面，能獲得二級頁面