如何進行網頁數據抓取與綁定

什么是網頁數據？以我個人的理解：網站內容其實就是你展示出來，并且想要創造價值的東西。舉個例子，如果你的網站是個人企業網站，那么你網站內容的主體就應該是產品展示，目的是為了讓別人看到自己企業的產品從而線上交易；如果你的網站是資訊站，那么你網站的主題就應該是新聞媒資訊，目的為了讓別人看你的資訊，通過流量或其他手段來盈利。那么，如何來抓取和綁定這些數據呢？具體方法如下：

工具/材料

angular

操作方法

01
在編譯環境（webstorm）右擊工程名，新建一個index.html文件
02
找到angular文件夾，把所需要的angular.min.js文件引入到index,html文件里面
03
用{{}}進行數據綁定。1、例：在網頁頁面輸出以下文字：“歡迎來到angular的世界”顏色為紅色，字體大小為h1,居中對齊顯示：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
h1{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>{{"你好，歡迎來到angular的世界"}}</h1>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html>
04
運行程序。
05
對變量進行數據綁定（注：在對變量進行數據綁定之前，要對變量進行初始化設置，一般在body或者div標簽里：ng-init="變量名='變量值'"）代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-init="user={name:'tom',age:20,work:'前端開發工程師'}">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html>
06
｛｛變量名.數組里面的數據名稱｝｝提取并綁定數據，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
h1{
color: red;
text-align: center;
}
</style>

</head>
<body ng-init="user={name:'tom',age:20,work:'前端開發工程師'}">
<h1>{{user.name}}</h1>
<h1>{{user.age}}</h1>
<h1>{{user.work}}</h1>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html>
07
運行程序。
08
用（ng-bind）進行綁定。例：創建一條數據，內容包括用戶名，年齡，職業等；要求字體大小為18px,居中對齊，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
*{
text-align: center;
}
a{
font-size: 18px;
color: red;
}
</style>
</head>
<body ng-init="user={name:'李雷',age:20,work:'前端開發工程師'}">
<a href="" ng-bind="user.name"></a>
<a href="" ng-bind="user.age"></a>
<a href="" ng-bind="user.work"></a>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html><html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
*{
text-align: center;
}
a{
font-size: 18px;
color: red;
}
</style>
</head>
<body ng-init="user={name:'李雷',age:20,work:'前端開發工程師'}">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html>
09
創建三個超鏈接，分別用（ng-bind）提取并綁定數據，綁定的數據，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
*{
text-align: center;
}
a{
font-size: 18px;
color: red;
}
</style>
</head>
<body ng-init="user={name:'李雷',age:20,work:'前端開發工程師'}">
用戶名：<a href="" ng-bind="user.name"></a>　　　　
年齡：<a href="" ng-bind="user.age"></a>　　　　
職業：<a href="" ng-bind="user.work">：</a>　　
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html>
10
運行程序：結果如圖8，是不是減少了很多代碼？
End

發表于 2017-11-28 00:00
閱讀 ( 863 )
分類：電腦網絡

如何進行網頁數據抓取與綁定

工具/材料

操作方法

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章