前端開發中,經常需要獲取當前頁面的 URL,用于處理一些邏輯或者進行數據的統計。本篇文章將介紹如何使用 JavaScript 獲取當前頁面的 URL,讓你的開發更加高效。
JavaScript 提供了 location 對象,可以獲取到當前頁面的 URL 信息。可以使用以下代碼獲取當前頁面的 URL:
var url=window.location.href;
上述代碼中,window 對象是全局對象,可以省略。location 對象的 href 屬性包含了當前頁面的 URL 信息。將其賦值給變量 url 就能獲取到當前頁面的 URL。
除了獲取完整的 URL,還可以進一步獲取其他的 URL 信息,例如主機名、路徑、查詢參數等。以下是一些常用的獲取方式:
主機名: var hostname=location.hostname;
路徑: var path=location.pathname;
查詢參數: var searchParams=location.search;
下面是一個應用示例,使用獲取到的 URL 信息進行處理:
var url=window.location.href;
var hostname=location.hostname;
var path=location.pathname;
var searchParams=location.search;
console.log("當前頁面 URL:" + url);
console.log("主機名:" + hostname);
console.log("路徑:" + path);
console.log("查詢參數:" + searchParams);
在上述代碼中,通過獲取到的 URL 信息,我們可以根據實際需求進行處理,例如根據主機名進行跳轉、根據路徑進行路由判斷等。
以上就是使用 JavaScript 獲取當前頁面 URL 的簡單步驟。通過掌握這個技巧,你的開發將更加高效。
請在合適的時機獲取和使用頁面的 URL 信息,以確保獲取到的信息準確有效。
部分瀏覽器可能會有安全限制,例如跨域訪問的限制。請考慮這些因素,在實際開發中進行調試和優化。
JavaScript是運行在瀏覽器端的腳本語言, 是由瀏覽器解釋執行的, 簡稱js
它能夠讓網頁和用戶有交互功能, 增加良好的用戶體驗效果
前端開發三大塊:
行內式(主要用于事件)
<input type="button" value="你點我一下試試" onclick="alert('ok!')">
內嵌式
<script>
// js
alert("你等著!")
</script>
外鏈式
<script src="./JS/main.js"></script>
JavaScript 是一種弱類型語言,也就是說不需要指定變量的類型
JavaScript的變量類型由它的值來決定, 定義變量需要用關鍵字 'var', 一條JavaScript語句應該以“;”結尾
弱類型語言:
data=10 整型
data=“itcast” 字符串類型
強類型語言:
int data=10 整形
str data=“itcast” 字符串類型
JavaScript的注釋分為單行注釋(//注釋內容)和多行注釋(/*多行注釋*/)
js中有六種數據類型,包括五種基本數據類型和一種復雜數據類型(object)
5種基本數據類型:
1種復合類型:
變量命名規范:
匈牙利命名風格:
函數就是可以重復使用的代碼塊, 使用關鍵字 function 定義函數
函數調用就是函數名加小括號,比如:函數名(參數[參數可選])
定義函數時,函數如果有參數,參數放到小括號里面,函數如果有返回值,返回值通過 return 關鍵字來返回
變量作用域就是變量的使用范圍
局部變量就是在函數內使用的變量,只能在函數內部使用
全局變量就是在函數外定義的變量,可以在不同函數內使用
條件語句就是通過條件來控制程序的走向
條件語句語法:
js能夠讓網頁和用戶有交互功能
步驟:
1.獲取標簽元素
獲取標簽元素需要等待頁面加載完成,使用document.getElementById('標簽id');
獲取到的是一個html對象,然后將它賦值給一個變量
2.改變標簽元素屬性
屬性名在js中的寫法
①html的屬性和js里面屬性大多數寫法一樣,但是“class” 屬性寫成 “className”
②“style” 屬性里面的屬性,有橫杠的改成駝峰式,比如:“font-size”,改成”style.fontSize”
innerHTML可以讀取或者設置標簽包裹的內容
標簽屬性的獲取和設置:
①var 標簽對象=document.getElementById('id名稱'); -> 獲取標簽對象
②var 變量名=標簽對象.屬性名 -> 讀取屬性
③標簽對象.屬性名=新屬性值 -> 設置屬性
數組就是一組數據的集合
javascript 中 , 數組里面的數據可以是不同類型的數據,好比 python 里面的列表
多維數組指的是數組的成員也是數組,把這樣的數組叫做多維數組
根據下標添加和刪除元素
數組.splice(start, num, element1,.....,elementN)
參數解析:
①start:必需,開始刪除的索引
②num:可選,刪除數組元素的個數
③elementN:可選,在start索引位置要插入的新元素
此方法會刪除從start索引開始的num個元素,并將elementN參數插入到start索引位置
數組常用操作:
①數組的定義使用一對中括號
②獲取數組的長度使用length屬性
③從數組最后添加元素使用push方法
④從數組最后刪除元素使用pop方法
⑤根據下標添加和刪除元素使用splice方法
循環語句就是讓一部分代碼重復執行
javascript中常用的循環語句有: for while do-while
數字和字符串拼接會自動進行類型轉換,把數字類型轉成字符串類型進行拼接
定時器就是在一段特定的時間后執行某段程序代碼
setTimeout(func[, delay, param1, param2, ...])
(以毫秒計)調用一次函數的定時器
setTimeout函數的參數說明:
setTimeout(func[, delay, param1, param2, ...])
第一個參數 func , 表示定時器要執行的函數名
第二個參數 delay, 表示時間間隔,默認是0,單位是毫秒
第三個參數 param1, 表示定時器執行函數的第一個參數,依次類推傳入多個執行函數對應的參數
setInterval(func[, delay, param1, param2, ...])
以指定的時間間隔(以毫秒計)重復調用一個函數的定時器
setInterval函數的參數說明:
setInterval(func[, delay, param1, param2, ...])
第一個參數 func , 表示定時器要執行的函數名
第二個參數 delay, 表示時間間隔,默認是0,單位是毫秒
第三個參數 param1, 表示定時器執行函數的第一個參數,依次類推傳入多個執行函數對應的參數
js 清除定時器分別是:
clearTimeout(timeoutID) 清除只執行一次的定時器(setTimeout函數)
clearInterval(timeoutID) 清除反復執行的定時器(setInterval函數)
clearTimeout函數的參數說明:
timeoutID 為調用 setTimeout 函數時所獲得的返回值,使用該返回標識符作為參數,可以取消該 setTimeout 所設定的定時執行操作
clearInterval函數的參數說明:
timeoutID 為調用 setInterval 函數時所獲得的返回值,使用該返回標識符作為參數,可以取消該 setInterval 所設定的定時執行操作
<!--SpringMVC-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--SpringData Jpa-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--MySQL連接包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<!-- HttpClient -->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
</dependency>
<!--Jsoup-->
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.15.2</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
復制代碼
# MySQL配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
# JPA配置
spring.jpa.database=MySQL
spring.jpa.show-sql=true
spring.jpa.generate-ddl=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.hibernate.naming_strategy=org.hibernate.cfg.ImprovedNamingStrategy
復制代碼
@Entity
@Table(name="item")
@Data
public class Item {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
//標準產品單位
private Long spu;
//庫存量單位
private Long sku;
//商品標題
private String title;
//商品價格
private Double price;
//商品圖片
private String pic;
//商品詳情地址
private String url;
//店鋪;
private String shop;
//創建時間
private Date created;
//更新時間
private Date updated;
}
復制代碼
public interface ItemDao extends JpaRepository<Item,Long> {
}
復制代碼
public interface ItemService {
/**
* 保存商品
*
* @param item
*/
void save(Item item);
/**
* 刪除所有商品
*/
void deleteAll();
}
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemDao itemDao;
@Override
@Transactional
public void save(Item item) {
this.itemDao.save(item);
}
@Override
public void deleteAll() {
this.itemDao.deleteAll();
}
}
復制代碼
@Component
public class HttpUtils {
private static final String FILEPATH="D:\\demo\\";
private PoolingHttpClientConnectionManager cm;
public HttpUtils() {
this.cm=new PoolingHttpClientConnectionManager();
//設置最大連接數
this.cm.setMaxTotal(100);
//設置每個主機的最大連接數
this.cm.setDefaultMaxPerRoute(10);
}
/**
* 根據請求地址下載頁面數據
*
* @param url
* @return 頁面數據
*/
public String doGetHtml(String url) {
//獲取HttpClient對象
CloseableHttpClient httpClient=HttpClients.custom().setConnectionManager(this.cm).build();
//創建httpGet請求對象,設置url地址
HttpGet httpGet=new HttpGet(url);
httpGet.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36");
//設置請求信息
httpGet.setConfig(this.getConfig());
CloseableHttpResponse response=null;
try {
//使用HttpClient發起請求,獲取響應
response=httpClient.execute(httpGet);
//解析響應,返回結果
if (response.getStatusLine().getStatusCode()==200) {
//判斷響應體Entity是否不為空,如果不為空就可以使用EntityUtils
if (response.getEntity() !=null) {
String content=EntityUtils.toString(response.getEntity(), "utf8");
return content;
}
}
} catch (IOException e) {
e.printStackTrace();
} finally {
//關閉response
if (response !=null) {
try {
response.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
//返回空串
return "";
}
/**
* 下載圖片
*
* @param url
* @return 圖片名稱
*/
public String doGetImage(String url) {
//獲取HttpClient對象
CloseableHttpClient httpClient=HttpClients.custom().setConnectionManager(this.cm).build();
//創建httpGet請求對象,設置url地址
HttpGet httpGet=new HttpGet(url);
//設置請求信息
httpGet.setConfig(this.getConfig());
CloseableHttpResponse response=null;
try {
//使用HttpClient發起請求,獲取響應
response=httpClient.execute(httpGet);
//解析響應,返回結果
if (response.getStatusLine().getStatusCode()==200) {
//判斷響應體Entity是否不為空
if (response.getEntity() !=null) {
//獲取圖片的后綴
String extName=url.substring(url.lastIndexOf("."));
//創建圖片名,重命名圖片
String picName=UUID.randomUUID() + extName;
//聲明OutPutStream
OutputStream outputStream=new FileOutputStream(new File(FILEPATH + picName));
response.getEntity().writeTo(outputStream);
//返回圖片名稱
return picName;
}
}
} catch (IOException e) {
e.printStackTrace();
} finally {
//關閉response
if (response !=null) {
try {
response.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
//如果下載失敗,返回空串
return "";
}
/**
* 設置請求信息
*
* @return
*/
private RequestConfig getConfig() {
RequestConfig config=RequestConfig.custom()
//創建連接的最長時間
.setConnectTimeout(1000)
// 獲取連接的最長時間
.setConnectionRequestTimeout(500)
//數據傳輸的最長時間
.setSocketTimeout(10000)
.build();
return config;
}
}
復制代碼
SPU
SPU是商品信息聚合的最小單位,是一組可復用、易檢索的標準化信息的集合,該集合描述了一個產品的特性。
屬性值、特性相同的商品就可以稱為一個SPU。
如:某型號某配置某顏色的筆記本電腦就對應一個SPU,它有多種配置,或者多種顏色
SKU
SKU即庫存進出計量的單位, 可以是以件、盒、托盤等為單位。SKU是物理上不可分割的最小存貨單元。在使用時要根據不同業態,不同管理模式來處理。
如:某型號的筆記本電腦有多種配置,8G+512G筆記本電腦就是一個SKU。
爬取筆記本電腦搜索頁面。進行分頁操作,得到分頁請求地址:https://search.jd.com/search?keyword=%E7%94%B5%E8%84%91&wq=%E7%94%B5%E8%84%91&pvid=56a110735c6c491c91416c194aed4c5b&cid3=672&cid2=671&s=56&click=0&page=
所有商品由一個class=J_goodsList的div包裹。div中則是由ul標簽包裹的li標簽,每一個li標簽對應一個商品信息。
li標簽包含的需要的商品信息
@Component
public class ItemTask {
@Autowired
private HttpUtils httpUtils;
@Autowired
private ItemService itemService;
/**
* 使用定時任務抓取最新數據
*
* @throws Exception
*/
@Scheduled(fixedDelay=50 * 1000)
public void itemTask() throws Exception {
// 每次執行前請客數據
itemService.deleteAll();
//聲明需要解析的初始地址
String url="https://search.jd.com/search?keyword=%E7%94%B5%E8%84%91&wq=%E7%94%B5%E8%84%91&pvid=56a110735c6c491c91416c194aed4c5b&cid3=672&cid2=671&s=56&click=0&page=";
// 按照頁面對搜索結果進行遍歷解析,注意頁面是奇數
for (int i=1; i < 10; i=i + 2) {
String html=httpUtils.doGetHtml(url + i);
// 解析頁面,獲取商品數據并存儲
this.parse(html);
}
System.out.println("商品數據抓取完成!");
}
/**
* 解析頁面,獲取商品數據并存儲
*
* @param html
* @throws Exception
*/
private void parse(String html) {
// 解析html獲取Document
Document doc=Jsoup.parse(html);
// 獲取spu信息
Elements spuEles=doc.select("div#J_goodsList > ul > li");
// 循環列表中的SPU信息
for (int i=0; i < spuEles.size(); i++) {
Element element=spuEles.get(i);
//獲取spu
String strSpu=element.attr("data-spu");
if (strSpu==null || strSpu.equals("")) {
continue;
}
long spu=Long.parseLong(strSpu);
//獲取sku
long sku=Long.parseLong(element.attr("data-sku"));
Item item=new Item();
//設置商品的spu
item.setSpu(spu);
//設置商品的sku
item.setSku(sku);
//獲取商品的詳情的url
String itemUrl="https://item.jd.com/" + sku + ".html";
item.setUrl(itemUrl);
// 獲取商品的圖片
String picUrl="https:" + element.select("div.p-img").select("a").select("img").attr("data-lazy-img");
String picName=this.httpUtils.doGetImage(picUrl);
item.setPic(picName);
//獲取商品的價格
String strPrice=element.select("div.p-price").select("i").text();
item.setPrice(Double.parseDouble(strPrice));
//獲取商品的標題
String title=element.select("div.p-name").select("a").attr("title");
item.setTitle(title);
// 店鋪名稱
String shopName=element.select("div.p-shop a").text();
item.setShop(shopName);
item.setCreated(new Date());
item.setUpdated(item.getCreated());
//保存商品數據到數據庫中
this.itemService.save(item);
}
}
}
復制代碼
@SpringBootApplication
// 開啟定時任務
@EnableScheduling
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
復制代碼
啟動項目,執行測試。查看數據庫與本地下載照片。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。