Vue 实现截取网络地址字符串携带的参数

本文介绍如何在Vue中解析并截取网络地址中的参数,通过HTML和JavaScript代码展示具体实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue 实现截取网络地址字符串携带的参数

实现效果,如图:

在这里插入图片描述
HTML代码:

<template>
    <div>
        <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;">
            <p>截取前:{{ testurl }}</p>
            <p>截取后(转为对象):{{ urlObj }}</p>
        </div>
    </div>
</template>

JavaScript代码:

<script>
export default {
    data () {
        return {
            testurl: 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code',
            urlObj: {}
        }
    },
    created() {
        this.getUrl()
    },
    methods: {
        getUrl(){
            var url = this.testurl
            var temp1 = url.split('?')
            var pram = temp1[1]
            var keyValue = pram.split('&')
            for (var i = 0; i < keyValue.length; i++) { // 循环分割后的地址
                var item = keyValue[i].split('=')
                var key = item[0]
                var value = item[1]
                this.urlObj[key] = value
            }
        }
    }
}
</script>
### 使用Spring Boot和Vue实现在线视频剪辑的技术方案 #### 1. 技术栈概述 为了实现一个基于Spring Boot后端和Vue前端的在线视频剪辑系统,需要综合考虑前后端的功能需求和技术选型。以下是可能涉及的主要技术组件及其作用: - **前端**: Vue.js 负责构建用户界面,提供友好的用户体验;使用 Video.js 或其他类似的库来支持视频播放和基本编辑功能[^4]。 - **后端**: Spring Boot 提供 RESTful API 接口,用于处理来自前端的请求并返回数据;集成第三方服务(如 FFmpeg)完成复杂的视频处理任务[^2]。 #### 2. 系统架构设计 整个系统的架构可以划分为三个主要部分:前端、后端和服务层。 ##### 2.1 前端模块 前端由 Vue.js 构建而成,主要包括以下几个方面: - 用户登录注册页面; - 视频上传与管理页面; - 在线视频预览及简单编辑工具条(裁切时间轴、调整音量等基础操作)。 可以通过引入一些开源插件或者自定义开发满足具体业务场景下的交互需求[^3]。 ```javascript // 示例代码展示如何初始化videojs实例 let player = videojs('my-video', { controls: true, autoplay: false, preload: 'auto', }, function onPlayerReady() { console.log('Your player is ready!'); }); ``` ##### 2.2 后端模块 后端采用 Spring Boot 开发,核心职责在于接收从前端传来的指令并对存储于服务器上的原始素材文件执行相应的变换动作。这通常涉及到调用外部命令行程序比如FFmpeg来进行实际的编码转换工作。 下面是一个简单的例子演示怎样利用Runtime.exec方法运行shell脚本来截取指定时间段内的片段: ```java public String cutVideo(String inputPath, String outputPath, int startSecond, int duration){ StringBuilder command=new StringBuilder(); command.append("ffmpeg -i ").append(inputPath); command.append(" -ss ").append(startSecond).append(" -t ").append(duration); command.append(" -c copy ").append(outputPath); try{ Process process= Runtime.getRuntime().exec(command.toString()); BufferedReader stdInput = new BufferedReader(new InputStreamReader(process.getInputStream())); while ((line = stdInput.readLine()) != null) { System.out.println(line); } if (process.waitFor()==0){return "success";} else{return "failed";} }catch(Exception e){ return "error:"+e.getMessage(); } } ``` 此处需要注意的是,在生产环境中直接通过字符串拼接方式构造Shell Command存在安全隐患(如注入攻击),因此建议改用ProcessBuilder类更安全地设置参数列表[^1]。 #### 3. 数据流转流程说明 当用户希望对某个已上传至平台中的视频资源实施修剪或其他形式修改时,大致经历如下几个阶段的操作序列图描述如下所示: 1. 客户端向API发送POST请求携带所需参数例如起始位置结束位置等等信息; 2. 控制器拦截到此HTTP包之后解析其中的内容并将它们映射成Java对象传递给专门的服务类去进一步加工; 3. 如果一切正常,则最终生成的新版本会被保存回磁盘同时更新关联元数据记录以便后续检索方便快捷高效准确无误. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值