JS 獲取當前頁面 URL

前端開發中，經常需要獲取當前頁面的 URL，用于處理一些邏輯或者進行數據的統計。本篇文章將介紹如何使用 JavaScript 獲取當前頁面的 URL，讓你的開發更加高效。

步驟一：使用 location 對象

JavaScript 提供了 location 對象，可以獲取到當前頁面的 URL 信息。可以使用以下代碼獲取當前頁面的 URL：

var url=window.location.href;

上述代碼中，window 對象是全局對象，可以省略。location 對象的 href 屬性包含了當前頁面的 URL 信息。將其賦值給變量 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 信息，以確保獲取到的信息準確有效。

部分瀏覽器可能會有安全限制，例如跨域訪問的限制。請考慮這些因素，在實際開發中進行調試和優化。

avaScript的介紹

JavaScript是運行在瀏覽器端的腳本語言, 是由瀏覽器解釋執行的, 簡稱js

它能夠讓網頁和用戶有交互功能, 增加良好的用戶體驗效果

前端開發三大塊:

HTML：負責網頁結構
CSS：負責網頁樣式
JavaScript：負責網頁行為

JavaScript的使用方式

行內式（主要用于事件)

內嵌式

<script>
// js
alert("你等著！")
</script>

外鏈式

變量和數據類型

JavaScript 是一種弱類型語言，也就是說不需要指定變量的類型

JavaScript的變量類型由它的值來決定，定義變量需要用關鍵字 'var', 一條JavaScript語句應該以“;”結尾

弱類型語言:
data=10 整型
data=“itcast” 字符串類型
強類型語言:
int data=10 整形
str data=“itcast” 字符串類型

JavaScript的注釋分為單行注釋(//注釋內容)和多行注釋(/*多行注釋*/)

js中有六種數據類型，包括五種基本數據類型和一種復雜數據類型(object)

5種基本數據類型：

number 數字類型
string 字符串類型
boolean 布爾類型 true 或 false
undefined undefined類型，變量聲明未初始化，它的值就是undefined
null null類型，表示空對象，在頁面上獲取不到對象，返回的值就是null

1種復合類型：

object 后面學習的JavaScript對象屬于復合類型

變量命名規范:

區分大小寫
第一個字符必須是字母、下劃線（_）或者美元符號（$）
其他字符可以是字母、下劃線、美元符或數字

匈牙利命名風格:

對象o Object 比如：oDiv
字符串s String 比如：sUserName
整數i Integer 比如：iItemCount
布爾值b Boolean 比如：bIsComplete
浮點數f Float 比如：fPrice
函數fn Function 比如：fnHandler

函數定義和調用

函數就是可以重復使用的代碼塊, 使用關鍵字 function 定義函數

函數調用就是函數名加小括號，比如:函數名(參數[參數可選])

定義函數時，函數如果有參數，參數放到小括號里面，函數如果有返回值，返回值通過 return 關鍵字來返回

變量作用域

變量作用域就是變量的使用范圍

局部變量就是在函數內使用的變量，只能在函數內部使用

全局變量就是在函數外定義的變量，可以在不同函數內使用

條件語句

條件語句就是通過條件來控制程序的走向

條件語句語法:

if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
if...else if....else 語句 - 使用該語句來判斷多條件，執行條件成立的語句

獲取標簽元素

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>
復制代碼

配置application.properties

# 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

復制代碼

POJO

@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;
}
復制代碼

Dao

public interface ItemDao extends JpaRepository<Item,Long> {
}
復制代碼

Service

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();
    }
}
復制代碼

封裝HttpClient

@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與SKU

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);
    }
}
復制代碼

執行測試

啟動項目，執行測試。查看數據庫與本地下載照片。

在線咨詢

上一篇：Hessian 序列化、反序列化
下一篇：GitHub 熱點速覽 Vol.20：VSCode

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商