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小时内与您取得联系。

整合营销服务商