Vue+Webpack项目如何内嵌HTML页面,实现点击跳转

VUE项目内嵌HTML页面,点击跳转

背景

重构项目(前后端不分离的项目改成VUE),尽可能不动之前的代码逻辑,就需要将一个打印逻辑搬到vue项目里,原来是一个HTML写的一个打印条码的页面,现在要直接嵌入项目里

实现

思路:

  1. 通过window.open直接打开页面
  2. 文件选择的目录很重要
    • 选择当前目录,通过相对路径本地可以找到文件,但是当部署服务器之后就会找不到
    • 所以要借助webpack打包,将文件放在static文件夹中(webpack打包之后会把static文件夹里面的东西原封不动的打包)

在这里插入图片描述

代码实现

  1. 跳转代码
const originUrl = `${window.location.origin}/static/print/printDoubleCode.html?${codes}`;
window.open(originUrl, "_blank");
  1. 如何部署后还是找不到文件,需要改一个webpack配置assetsPublicPath。
    在config.js把assetsPublicPath:‘/‘改成’./’
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue全家桶+ES6+Webpack+Axios可以实现登录、注册、商品列表展示与分页、搜索、商品详情、加入购物车、查看订单详情和支付等功能的具体实现如下: 1. 登录和注册功能: - 创建登录和注册的组件,包括输入框和按钮等元素。 - 在组件中使用Vue的双向数据绑定,将用户输入的用户名和密码与组件的数据进行绑定。 - 使用Axios发送POST请求将用户输入的用户名和密码发送到后端API进行验证。 - 根据后端返回的验证结果,进行相应的处理,如跳转到首页或显示错误信息。 2. 商品列表展示与分页功能: - 创建商品列表组件,使用Axios发送GET请求获取商品列表数据。 - 将获取到的商品列表数据绑定到组件的数据中。 - 使用Vue的v-for指令遍历商品列表数据,展示商品的相关信息。 - 实现分页功能,根据用户点击的页码发送相应的请求获取对应页码的商品列表数据。 3. 搜索功能: - 在商品列表组件中添加搜索框和搜索按钮等元素。 - 使用Vue的双向数据绑定,将用户输入的关键词与组件的数据进行绑定。 - 监听用户点击搜索按钮事件,在事件处理函数中使用Axios发送GET请求,将关键词作为参数发送到后端API进行搜索。 - 根据后端返回的搜索结果进行展示,更新商品列表数据。 4. 商品详情功能: - 创建商品详情组件,接收商品ID作为参数。 - 使用Axios发送GET请求,根据商品ID获取商品详情数据。 - 将获取到的商品详情数据绑定到组件的数据中,展示商品的详细信息。 5. 加入购物车功能: - 在商品详情组件中添加加入购物车按钮。 - 监听加入购物车按钮的点击事件,在事件处理函数中使用Axios发送POST请求,将商品ID和用户ID等信息发送到后端API进行处理。 - 后端API将用户选择的商品加入购物车,并返回相应的结果。 6. 查看订单详情和支付功能: - 创建订单详情组件,接收订单ID作为参数。 - 使用Axios发送GET请求,根据订单ID获取订单详情数据。 - 将获取到的订单详情数据绑定到组件的数据中,展示订单的相关信息。 - 实现支付功能,根据用户选择的支付方式使用Axios发送POST请求,将支付相关的信息发送到后端API进行处理。 通过以上步骤的实现,您可以在Vue全家桶+ES6+Webpack+Axios的技术栈下完成登录、注册、商品列表展示与分页、搜索、商品详情、加入购物车、查看订单详情和支付等功能的开发。希望对您有所帮助!如果有任何进一步的问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值