vue前端获取项目下的静态资源文件夹中的文件并下载

<template>
  <div id="app">
    <el-button @click="openFile">下载文件</el-button>
    <el-button @click="openImg">下载图片</el-button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  methods: {
    openFile() {
      //word excel 下载项目种本地资源
      //window.location = `${process.env.BASE_URL}static/大.xlsx`;
      window.location = `${process.env.BASE_URL}static/静态文件.docx`;
    },
    openImg1() {
      //下载图片 下载项目种本地资源
      let request = new XMLHttpRequest();
      let appUrl = `${window.location.protocol}//${window.location.host}/`;
      request.responseType = "blob";
      let url = appUrl + `${process.env.BASE_URL}static/1.png`;
      request.open("GET", url);
      request.onload = functio
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在 Django 项目,你可以使用 Vue.js 创建前端文件。下面是一些简单的步骤: 1. 安装 Vue CLI 首先,你需要安装 Vue CLI。你可以使用以下命令安装: ``` npm install -g @vue/cli ``` 2. 创建 Vue.js 项目 在 Django 项目的根目录下创建一个新的文件夹,比如 `frontend`,然后在该文件夹运行以下命令来创建一个新的 Vue.js 项目: ``` vue create . ``` 这将创建一个新的 Vue.js 项目,并将其添加到当前文件夹。你需要选择一些选项,如 Babel、CSS 预处理器等,根据你的需求进行选择。 3. 配置 Django 项目 接下来,你需要将 Vue.js 项目与 Django 项目连接起来。可以在 Django 项目的 `settings.py` 文件添加以下配置: ```python STATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend", "dist", "static"), ] TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [ os.path.join(BASE_DIR, "frontend", "dist"), ], "APP_DIRS": True, "OPTIONS": { "context_processors": [ "django.template.context_processors.debug", "django.template.context_processors.request", "django.contrib.auth.context_processors.auth", "django.contrib.messages.context_processors.messages", ], }, }, ] ``` 这将使 Django 项目在运行时可以找到 Vue.js 生成的静态文件和模板。 4. 构建 Vue.js 项目 最后,你需要构建 Vue.js 项目并将生成的静态文件放入 Django 项目。可以在 Vue.js 项目的根目录下运行以下命令来构建项目: ``` npm run build ``` 这将生成一个名为 `dist` 的文件夹,其包含静态文件和模板。你需要将该文件夹复制到 Django 项目的根目录下。 现在,你已经成功地将 Vue.js 项目添加到 Django 项目。在 Django 项目使用 Vue.js 时,你可以在模板使用 Vue.js 组件,或者使用 Django REST framework 创建 API 并从 Vue.js 组件获取数据。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值