js实现文件下载有很多种方式，本文主要介绍7种。

最新推荐文章于 2024-04-19 11:25:38 发布
最新推荐文章于 2024-04-19 11:25:38 发布
阅读量3.4w 收藏 218
点赞数 41
文章标签： javascript vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljy123w/article/details/123438648
版权

 一、a标签下载

<body>
  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">a标签下载</button>
  <script>
    function downloadEvt(url, fileName = '未知文件') {
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
     /**
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      fileName && el.setAttribute('download', fileName);
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    }
  </script>
</body>
​

优点：

  • 可以下载txt、png、pdf等类型文件

  • download的属性是HTML5新增的属性 href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式；所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)

缺点：

  • a标签只能做get请求，所有url有长度限制

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 跨域限制

  • 无法判断接口是否返回成功

  • IE兼容问题

二、form标签下载

图2-1

<body>
  <button onclick="inputDownloadEvt('get', 'http://192.168.66.183:13666/download', 'name', 'HAP.pdf')">form标签下载</button>
  <script>
    /**
     * @param {String} method - 请求方法get/post
     * @param {String} url
     * @param {String} paramsKey - 请求参数名
     * @param {String} paramsValue - 请求参数值
    */
    function inputDownloadEvt(method, url, paramsKey, paramsValue) {
      const form = document.createElement('form');
      form.style.display = 'none';
      form.setAttribute('target', '_blank');
      form.setAttribute('method', method);
      form.setAttribute('action', url);
      const input = document.createElement('input');
      input.setAttribute('type','hidden');
      // 对于get请求 最终会拼成http://192.168.66.183:13666/download?name=HAP.pdf
      input.setAttribute('name', paramsKey);
      input.setAttribute('value', paramsValue);
      form.appendChild(input);
      document.body.appendChild(form);
      form.submit();
      document.body.removeChild(form);
    }
  </script>
</body>
优点

  • 兼容性好，不会出现URL长度限制问题

  • form标签get和post都可以

缺点

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）

  • 无法判断接口是否返回成功

三、window.open下载

<body>
  <button 
    onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
    window.open下载
  </button>

  <script>
    function downloadEvt(url) {
      window.open(url, '_self');
    }
  </script>

</body>
​

优点

  • 简单方便直接

缺点

  • 会出现URL长度限制问题

  • 需要注意url编码问题

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）

  • 无法判断接口是否返回成功

四、iframe下载

<body>
  <button 
    onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
    iframe下载
  </button>

  <script>
    // 批量下载时，动态创建a标签，会始终只下载一个文件，改为动态创建iframe标签
    function downloadEvt(url) {
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
      document.body.appendChild(iframe);
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 200);
    }
  </script>

</body>
​

优点

  • 可以下载txt、png、pdf等类型文件

缺点

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法判断接口是否返回成功

  • 兼容、性能差

五、location.href下载

<body>
  <button 
    onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
    location.href下载
  </button>

  <script>
    function downloadEvt(url) {
      window.location.href = url;
    }
  </script>
</body>
优点

  • 简单方便直接

  • 可以下载大文件(G以上)

缺点

  • 会出现URL长度限制问题

  • 需要注意url编码问题

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）

  • 无法判断接口是否返回成功

六、ajax下载（Blob - 利用Blob对象生成Blob URL）

如果后端需要做token验证，那么a、form、iframe、window.open、location.href都无法在header中携带token，这时候可以使用ajax来实现。

<body>
  <button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载</button>
  <script>
    function downloadEvt(url, fileName = '未知文件') {
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
     /**
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      fileName && el.setAttribute('download', fileName);
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    };
​
    // 根据header里的contenteType转换请求参数
    function transformRequestData(contentType, requestData) {
      requestData = requestData || {};
      if (contentType.includes('application/x-www-form-urlencoded')) {
        // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理
        let str = '';
        for (const key in requestData) {
          if (Object.prototype.hasOwnProperty.call(requestData, key)) {
            str += `${key}=${requestData[key]}&`;
          }
        }
        return encodeURI(str.slice(0, str.length - 1));
      } else if (contentType.includes('multipart/form-data')) {
        const formData = new FormData();
        for (const key in requestData) {
          const files = requestData[key];
          // 判断是否是文件流
          const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
          if (isFile) {
            for (let i = 0; i < files.length; i++) {
              formData.append(key, files[i]);
            }
          } else {
            formData.append(key, files);
          }
        }
        return formData;
      }
      // json字符串{key: value}
      return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
    }
    /**
     * ajax实现文件下载、获取文件下载进度
     * @param {String} method - 请求方法get/post
     * @param {String} url
     * @param {Object} [params] - 请求参数，{name: '文件下载'}
     * @param {Object} [config] - 方法配置
     */
     function downLoadAjaxEvt(method = 'get', url, params, config) {
      const _method = method.toUpperCase();
      const _config = Object.assign({
        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型
        fileName: '未知文件',                                        // 下载文件名(必填，若为空，下载下来都是txt格式)
        async: true,                                                // 请求是否异步-true异步、false同步
        token: 'token'                                              // 用户token
      }, config);
​
      const queryParams = transformRequestData(_config.contentType, params);
      const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;
​
      const ajax = new XMLHttpRequest();
      ajax.open(_method, _url, _config.async);
      ajax.setRequestHeader('Authorization', _config.token);
      ajax.setRequestHeader('Content-Type', _config.contentType);
      // responseType若不设置，会导致下载的文件可能打不开
      ajax.responseType = 'blob';
      // 获取文件下载进度
      ajax.addEventListener('progress', (progress) => {
        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
        const msg = `下载进度 ${percentage}%...`;
        console.log(msg);
      });
      ajax.onload = function () {
        if (this.status === 200 || this.status === 304) {
          // 通过FileReader去判断接口返回是json还是文件流
          const fileReader = new FileReader();
          fileReader.onloadend = (e) => {
            if (this.getResponseHeader('content-type').includes('application/json')) {
              const result = JSON.parse(fileReader.result || '{message: 服务器出现问题，请联系管理员}');
              alert(result.message);
            } else {
              // 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则低版本浏览器会一律识别为txt，导致下载下来的都是txt）
              const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));
              /**
              * Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
              * 对于pdf：type为application/pdf  同时 a标签 不设置download属性, 可以直接预览
              */
              const blob = new Blob([this.response]);
              const href = URL.createObjectURL(blob);
              downloadEvt(href, _fileName);
              // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象
              URL.revokeObjectURL(href);
            }
          };
          // 调用readAsText读取文件，少了readAsText将不会触发onloadend事件
          fileReader.readAsText(this.response);
        } else {
          alert('服务器出现问题，请联系管理员');
        }
      };
      // send(string): string：仅用于 POST 请求
      ajax.send(queryParams);
    }
  </script>
</body>
​

  • responseType responseType若不设置，会导致下载的文件可能打不开ajax.responseType = 'blob';

  • new FileReader() 1.文件下载的接口存在返回失败的情况（例如：服务器连接不上、接口报错等），对于下载失败的情况我们需要在页面上弹出失败提示，而不是将失败信息写进文件里等用户打开，这时候可以使用FileReader去根据响应头里的content-type判断接口是否返回成功； 2.如果content-type返回application/json表示文件流返回失败，此时直接在页面上弹出失败信息（图6-1）；如果是其他格式就认为文件流已经返回。

    图6-1

  • this.getResponseHeader('content-disposition') 后端返回的文件名称，主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt

    图6-2

  • new Blob([this.response], {type: '文件类型'}) Application Type 对照表 1.Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串； 2.对于pdf：type为application/pdf 同时 a标签 不设置download属性(图6-3), 可以直接预览（图6-4）

    图6-3

    图6-4

  • axios中其实已经提供了获取文件上传和下载进度的事件，这里我使用的是原生ajax（axios雷同，只需要修改请求方法）。

    图6-5

优点

  • 可以下载txt、png、pdf等类型文件

  • 可以在header中携带token做鉴权操作

  • 可以获取文件下载进度

  • 可以判断接口是否返回成功

缺点

  • 兼容性问题，IE10以下不可用，注意Safari浏览器,官网给出 Safari has a serious issue with blobs that are of the type application/octet-stream

  • 将后端返回的文件流全部获取后才会下载

七、ajax下载（Data URL - base64编码后的url）

<body>
  <button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载(base64)</button>
  <script>
    function downloadEvt(url, fileName = '未知文件') {
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
      /**
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      fileName && el.setAttribute('download', fileName);
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    };
​
    // 根据header里的contenteType转换请求参数
    function transformRequestData(contentType, requestData) {
      requestData = requestData || {};
      if (contentType.includes('application/x-www-form-urlencoded')) {
        // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理
        let str = '';
        for (const key in requestData) {
          if (Object.prototype.hasOwnProperty.call(requestData, key)) {
            str += `${key}=${requestData[key]}&`;
          }
        }
        return encodeURI(str.slice(0, str.length - 1));
      } else if (contentType.includes('multipart/form-data')) {
        const formData = new FormData();
        for (const key in requestData) {
          const files = requestData[key];
          // 判断是否是文件流
          const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
          if (isFile) {
            for (let i = 0; i < files.length; i++) {
              formData.append(key, files[i]);
            }
          } else {
            formData.append(key, files);
          }
        }
        return formData;
      }
      // json字符串{key: value}
      return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
    }
    /**
     * ajax实现文件下载、获取文件下载进度
     * @param {String} method - 请求方法get/post
     * @param {String} url
     * @param {Object} [params] - 请求参数，{name: '文件下载'}
     * @param {Object} [config] - 方法配置
     */
     function downLoadAjaxEvt(method = 'get', url, params, config) {
      const _method = method.toUpperCase();
      const _config = Object.assign({
        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型
        fileName: '未知文件',                                       // 下载文件名(必填，若为空，下载下来都是txt格式)
        async: true,                                               // 请求是否异步-true异步、false同步
        token: 'token'                                             // 用户token
      }, config);
​
      const queryParams = transformRequestData(_config.contentType, params);
      const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;
​
      const ajax = new XMLHttpRequest();
      ajax.open(_method, _url, _config.async);
      ajax.setRequestHeader('Authorization', _config.token);
      ajax.setRequestHeader('Content-Type', _config.contentType);
      // responseType若不设置，会导致下载的文件可能打不开
      ajax.responseType = 'blob';
      // 获取文件下载进度
      ajax.addEventListener('progress', (progress) => {
        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
        const msg = `下载进度 ${percentage}%...`;
        console.log(msg);
      });
      ajax.onload = function () {
        if (this.status === 200 || this.status === 304) {
          // 通过FileReader去判断接口返回是json还是文件流
          const fileReader = new FileReader();
          fileReader.readAsDataURL(this.response);
          fileReader.onload = () => {
            if (this.getResponseHeader('content-type').includes('application/json')) {
              alert('服务器出现问题，请联系管理员');
            } else {
              // 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt）
              const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));
              // 也可以用FileSaver（需提前引入https://github.com/eligrey/FileSaver.js）: saveAs(fileReader.result, _fileName);
              downloadEvt(fileReader.result, _fileName);
            }
          }
        } else {
          alert('服务器出现问题，请联系管理员');
        }
      };
      // send(string): string：仅用于 POST 请求
      ajax.send(queryParams);
    }
  </script>
</body>
​

  • fileSaver 网上介绍很多，可以自己百度下

优点

  • 可以下载txt、png、pdf等类型文件

  • 可以在header中携带token做鉴权操作

  • 可以获取文件下载进度

  • 可以判断接口是否返回成功

缺点

  • 兼容性问题，IE10以下不可用

  • 将后端返回的文件流全部获取后才会下载

八、大文件下载注意点

  • fileSaver 批量下载时，总量不超过2G可以用下这个，但是每个浏览器允许下载的最大文件不一样~

    图8-1

  • ajax下载 如果后端需要对下载接口做token鉴权，此时需要使用ajax获取文件流（第六、七点），可以了解下ajax文件下载原理。 简单来说，文件下载依赖浏览器特性。前端获取到服务器端生成的字节流，此时数据是存在于js的内存中的，是不可以直接保存在本地的，利用Blob对象和window.URL.createObjectURL对象生成一个虚拟的URL地址，然后在利用浏览器的特性进行下载。 因此对于ajax下载大文件时，会出现浏览器崩溃情况，此时可以考虑使用链接直接下载或使用分片下载

    图8-2

  • 链接下载 链接下载需要后端一边去下载要打包的文件，一边把打包好的东西写入这个链接。存在的问题是，如果文件很大，那么这个链接需要一直保持，相当于这个接口一直开着没有结束；而且一旦中间出了什么问题，已经下载的东西也全部废了，因此推荐使用分片下载。

小新报道啦
关注
  • 41
    点赞
  • 踩
  • 218
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
1分钟了解js如何实现下载文件功能的4种方式
qq_37174991的博客
11-17 2万+
1、a标签下载 —可以直接下载txt、png、pdf、exe、xlsx等类型文件。4、location.href 下载。3、window.open下载。2、new Blob下载。
通过JavaScript下载文件到本地的方法（单文件）
10-17
主要介绍了通过JavaScript下载文件到本地的方法（单文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript使用a标签实现文件下载
最新发布
码农键盘上的梦
04-19 1197
前端利用a标签实现文件（图片）下载，也就是教大家利用a标签或者是 window.open() 来实现下载功能。
js如何实现点击下载文件
百变鹏仔工作室
01-26 663
在 JavaScript 中，实现点击下载文件的功能一般需要结合服务器端的技术来完成。最后，将下载链接添加到 HTML 页面上，触发下载链接的点击事件，开始下载文件。在事件处理函数中，通过 JavaScript 发起另一个请求，将文件内容下载到客户端。在客户端通过 JavaScript发送一个请求到服务器，获取文件的路径与文件名。在上述示例中，通过服务器端提供文件的路径与文件名，并将其保存在。在服务器上创建一个文件，并将其路径与文件名保存在某个变量中。，指定下载文件的名称，并将链接的。
JS下载文件
06-19
JS下载文件
js下载文件
qq_37299479的博客
03-13 4482
js 下载文件
js实现文件下载功能
热门推荐
kaiup的博客
05-14 3万+
一、a标签下载 <body> <button onClick="download()">a标签下载</button> <script> function download(url = 'http:www.xxx.com/download?name=file.pdf', fileName = '未知文件') { const a = document.createElement('a'); a.style.display = '
js实现下载文件
ejunda的博客
11-15 173
【代码】js实现下载文件。
JavaScript实现多文件下载方法解析
11-19
对于文件的下载，可以说是一个十分常见的话题，前端的很多项目中都会有这样的需求，比如 highChart 统计图的导出，在线图片编辑中的图片保存，在线代码编辑的代码导出等等。而很多时候，我们只给了一个链接，用户...
JS实现表单多文件上传样式美化支持选中文件后删除相关项
11-23
有简单的单文件上传，有多文件上传，因浏览器原生的文件上传样式及功能的支持度不算太高，很多时候我们会对样式进行美化，对功能进行完善。 本文根据一个例子，对多文件的上传样式做了一些简单的美化（其实也没怎么...
js download.js
07-12
js文件下载插件介绍和使用方法 download.js 引用来自于 http://danml.com/download.html
JS下载文件|无刷新下载文件示例代码|angluo-javascript-107570.pdf
10-26
JS下载文件的实现在网上可以找到很多教程，不过本文为大家介绍的是无刷新下载文件，貌似更酷一点是吧
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
12-17
现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。今天在...
JavaScript实现读取与输出XML文件数据的方法示例
12-02
本文实例讲述了JavaScript实现读取与输出XML文件数据的方法。分享给大家供大家参考，具体如下： 一、介绍 通过JavaScript读取XML文档中数据的方法很多。 其根本的思路就是：首先在后台加载XML文档，然后通过...
JS - 下载文件
qq_35389653的博客
12-13 1336
JS实现文件下载
js——下载文件
肖的博客
02-14 8359
能触发浏览器下载的url有两类: response header——指定了Content-Disposition为attachment，它表示让浏览器把响应体作为附件下载到本地 (一般Content-Disposition还会指定filename, 下载的文件默认就是filename指定的名字) response header——指定了Content-Type 为 application/...
js 实现下载文件
nzz_1214
12-02 846
普通的文件下载可以用js的方法，不需要走后台，下面是我亲测好用的方法; <div onclick="download()">下载</div> function downloadFile(content, filename) { var a = document.createElement('a') var blob = new Blob([content]) var url = window.URL.createObjectURL(blob)
js 文件下载
weixin_42737937的博客
04-29 325
主要思路是用 a 标签： <a href="xxxx" download="x.txt"></a> 对a标签设置download属性，触发下载x.txt文件 动态生成a标签，再通过js触发，就可以达到下载文件的目的 const link = document.createElement('a') link.style.display = 'none'...
springboot网上书店代码及实现
05-14
Spring Boot作为一款轻量级、快速开发的框架，受广大开发者的青睐。本文将会介绍如何使用Spring Boot框架来实现一个简单的网上书店。网上书店需要实现浏览、查询、购买等功能。 首先，我们需要搭建基础环境，包括安装Java开发环境、配置Maven环境、安装集成开发工具（IDE）以及安装数据库。在本例中，我们使用MySQL数据库，并且使用MyBatis作为持久层框架。 其次，我们需要创建一个新的Spring Boot项目，并且在pom.xml文件中添加MyBatis和MySQL的依赖关系。然后，我们需要创建一个Book实体类，用于存储图书信息，包括图书名称、作者、出版社、出版日期等。接着，我们需要创建一个BookMapper接口，用于操作数据库，包括插入新图书、查询图书信息、编辑图书信息、删除图书等。最后，我们需要创建一个BookService类，用于业务逻辑的处理，包括插入数据、查询数据、编辑数据、删除数据等操作。 在完成后端的开发之后，我们需要创建前端页面。我们可以使用HTML、CSS、JavaScript等前端框架。在本例中，我们使用Vue框架来实现前端界面。 最后，通过Controller层将前端界面与后端数据连接起来，即实现网上书店的基本功能。例如，我们可以创建一个BookController类，处理所有书籍相关的请求。页面包括图书列表、分页、图书详细信息、购物车等功能。购物车需要在后端使用Session或者Redis等技术来实现。 总结来说，Spring Boot框架提供了很多便捷的操作，可以让我们更快地开发一个功能完备的网上书店。同时，需要注意遵守相关的开发规范，增强代码可读性、可维护性，提高软件质量。希望本文可以为读者提供一些实际的开发思路和经验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值