整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JS 獲取當前頁面 URL

          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

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

          前端開發三大塊:

          1. HTML:負責網頁結構
          2. CSS:負責網頁樣式
          3. JavaScript:負責網頁行為

          JavaScript的使用方式

          行內式(主要用于事件)

          <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. number 數字類型
          2. string 字符串類型
          3. boolean 布爾類型 true 或 false
          4. undefined undefined類型,變量聲明未初始化,它的值就是undefined
          5. null null類型,表示空對象,在頁面上獲取不到對象,返回的值就是null

          1種復合類型:

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


          變量命名規范:

          1. 區分大小寫
          2. 第一個字符必須是字母、下劃線(_)或者美元符號($)
          3. 其他字符可以是字母、下劃線、美元符或數字

          匈牙利命名風格:

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


          函數定義和調用

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

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

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

          變量作用域

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

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

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

          條件語句

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

          條件語句語法:

          1. if 語句 - 只有當指定條件為 true 時,使用該語句來執行代碼
          2. if...else 語句 - 當條件為 true 時執行代碼,當條件為 false 時執行其他代碼
          3. 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);
              }
          }
          復制代碼

          執行測試

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


          主站蜘蛛池模板: 无码国产精品一区二区免费模式 | 国产福利一区二区三区在线观看| 亚洲国产成人一区二区三区| 亚洲国产AV无码一区二区三区| 中文字幕Av一区乱码| 成人国产精品一区二区网站公司| 亚洲国产精品一区第二页| 中文字幕亚洲一区| 一区二区视频免费观看| 精品一区精品二区| 日本福利一区二区| 国产乱码精品一区二区三区 | 日韩精品一区二区三区四区| 精品亚洲一区二区三区在线观看| 国产视频福利一区| 在线精品日韩一区二区三区| 亚洲愉拍一区二区三区| 亚洲熟妇AV一区二区三区浪潮| 2020天堂中文字幕一区在线观| 日韩精品区一区二区三VR| 亚洲bt加勒比一区二区| 亚洲国产精品一区二区成人片国内 | 精品亚洲福利一区二区| 在线|一区二区三区| 蜜臀AV无码一区二区三区 | 麻豆视频一区二区三区| 免费一区二区三区四区五区| 日本在线观看一区二区三区| 日韩精品一区二区三区影院| 国产免费伦精品一区二区三区| 亚洲性日韩精品一区二区三区| 变态调教一区二区三区| 日韩精品无码一区二区三区四区| 成人免费区一区二区三区| 久久国产免费一区二区三区| 国产手机精品一区二区| 爱爱帝国亚洲一区二区三区| 亚洲一区二区视频在线观看 | 国产成人久久精品区一区二区| 无码av人妻一区二区三区四区| 欧洲精品码一区二区三区|