<![CDATA[刘新修]]> http://liuxinxiu.com:80/index.php zh-cn http://liuxinxiu.com:80/s/337/ <![CDATA[Vue 设置proxy后post请求失效，pending挂起]]> 刘新修 <admin@yourname.com> Fri, 16 Aug 2024 06:31:08 +0000 http://liuxinxiu.com:80/s/337/
JavaScript代码
  1. proxy: {  
  2.     '/dev-api': {  
  3.         target: 'http://1x.xx.x.xxx:xxxx', //  
  4.         changeOrigin: true,  
  5.         pathRewrite: {  
  6.           '^/dev-api': ''  
  7.         },  
  8.         //第一种方法  
  9.         onProxyReq: function(proxyReq, req, res, options) {  
  10.           if (req.body) {  
  11.             const bodyData = JSON.stringify(req.body)  
  12.             // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json  
  13.             proxyReq.setHeader('Content-Type', 'application/json')  
  14.             proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData))  
  15.             // stream the content  
  16.             proxyReq.write(bodyData)  
  17.           }  
  18.        }  
  19.    }  
  20. },  
  21. //第二种方法，注释这行  
  22. before: require('./mock/mock-server.js')  
]]> http://liuxinxiu.com:80/uniapp/ <![CDATA[uniapp创建项目脚手架的区别]]> 刘新修 <admin@yourname.com> Wed, 09 Aug 2023 03:49:32 +0000 http://liuxinxiu.com:80/uniapp/ vue-cli 构建 uniapp 项目：

优点：
vue-cli 是一个强大的工具，可以快速构建出各种类型的项目，配置灵活，便于维护和管理。同时，其支持 TypeScript 等最新技术，可以提高开发效率和代码质量。
vue-cli 集成了丰富的插件和模板，可以帮助您快速搭建 uniapp 项目，并提供了丰富的功能和组件。
vue-cli 社区活跃度高，得到广泛应用和支持，很多开发者都已经熟悉了 vue-cli 的使用和优化。
缺点：
基于 vue-cli 构建 uniapp 项目需要一定的前端开发经验和技能，对初学者来说可能会有些困难。
构建出来的项目大小比较大，需要考虑如何压缩和优化代码，以提升页面加载速度。
HBuilderX.exe 构建 uniapp 项目：
优点：
 
HBuilderX.exe 是一款专门为 uniapp 开发提供的开发工具，可以快速搭建 uniapp 项目，支持调试、运行等功能，适合初学者或没有前端开发经验的开发者使用。
HBuilderX.exe 集成了丰富的组件和模板，可以快速搭建出各种类型的 uniapp 项目，并且自带了一些 UI 组件，方便快速开发。
HBuilderX.exe 教程和文档详尽，易于上手，初学者可以快速掌握。
 
缺点：
HBuilderX.exe 对于更高级的定制和优化需要进行配置和扩展，需要一定的前端开发经验和技能。
 
在使用 HBuilderX.exe 构建 uniapp 项目时可能会有一些限制，例如只支持部分平台等问题，需要根据项目需求选择适合的构建方式。
创建uni-app项目（步骤流程）
方式一：直接在HBuilder X上创建（常用）
在窗口栏找到“文件”=>新建=>项目
会在HBuilder X会在右下角提示项目创建成功，成功之后的项目目录结构如下：
方式二：使用命令行（vue-cli）创建
vue create -p dcloudio/uni-preset-vue my-project
创建成功之后，运行即可。
cd my-project
npm run serve
项目目录结构：

Tags - ]]> http://liuxinxiu.com:80/vue_countDown/ <![CDATA[Vue实现倒计时组件(可自定义时间倒计时功能的组件)：]]> 刘新修 <admin@yourname.com> Thu, 27 Jul 2023 06:12:26 +0000 http://liuxinxiu.com:80/vue_countDown/  一、创建countDown.vue（倒计时组件）：

XML/HTML代码
  1. <template>  
  2.     <span :endTime="endTime" :endText="endText">  
  3.         <slot>{{content}}</slot>  
  4.     </span>  
  5. </template>  
  6.   
  7. <script>  
  8.     export default {  
  9.         data(){  
  10.             return {  
  11.                 content: '',  
  12.             }  
  13.         },  
  14.         props:{//接收父组件的数据  
  15.             endTime:{type:String,default:''},  
  16.             endText:{type:String,default:'活动已结束'},  
  17.         },  
  18.         watch: {//监听时间的变化  
  19.             endTime() {  
  20.                 this.countdowm(this.endTime)  
  21.             }  
  22.         },  
  23.         mounted () {  
  24.             this.countdowm(this.endTime)  
  25.         },  
  26.         methods: {  
  27.             countdowm(timestamp){  
  28.                 let self = this;  
  29.                 let timer = setInterval(function(){  
  30.                     let nowTime = new Date();  
  31.                     let endTime = new Date(timestamp * 1000);  
  32.                     let t = endTime.getTime() - nowTime.getTime();  
  33.                     if(t>0){  
  34.                         let day = Math.floor(t/86400000);  
  35.                         let hour=Math.floor((t/3600000)%24);  
  36.                         let min=Math.floor((t/60000)%60);  
  37.                         let sec=Math.floor((t/1000)%60);  
  38.                         hourhour = hour < 10 ? "0" + hour : hour;  
  39.                         minmin = min < 10 ? "0" + min : min;  
  40.                         secsec = sec < 10 ? "0" + sec : sec;  
  41.                         let format = '';  
  42.                         if(day > 0){  
  43.                             format = `${day}天${hour}小时${min}分${sec}秒`;  
  44.                         }  
  45.                         if(day <= 0 && hour > 0 ){  
  46.                             format = `${hour}小时${min}分${sec}秒`;  
  47.                         }  
  48.                         if(day <= 0 && hour <= 0){  
  49.                             format =`${min}分${sec}秒`;  
  50.                         }  
  51.                         self.content = format;  
  52.                     }else{  
  53.                         clearInterval(timer);  
  54.                         selfself.content = self.endText;  
  55.                     }  
  56.                 },1000);  
  57.             }  
  58.         }  
  59.     }  
  60. </script>  

 二、vue倒计时组件的使用方法（父组件里面）：

XML/HTML代码
  1. <template>  
  2.     <count-down :endTime="endTime" :endText="endText " />  
  3. </template>  
  4.   
  5. <script>  
  6. import countDown from '@/components/countDown'//引入路径，可更改  
  7.   
  8. export default {  
  9.     data() {  
  10.         return{  
  11.             endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' ',  
  12.             //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法  
  13.             endText:'',  
  14.         }  
  15.     },  
  16.     components: {  
  17.          countDown  
  18.     },  
  19. }  
  20. </script>  

说明一下：

XML/HTML代码
  1. 1）endTime是一个时间戳，而且是字符串数据类型，需要处理下  
  2.   
  3. let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' '  
  4.   
  5. 2）endText是倒计时结束显示的内容  

三、vue倒计时组件效果如下：

]]> http://liuxinxiu.com:80/s/316/ <![CDATA[纯前端让浏览器下载pdf文件]]> 刘新修 <admin@yourname.com> Tue, 18 Jul 2023 02:20:15 +0000 http://liuxinxiu.com:80/s/316/  

XML/HTML代码
  1. <!--  
  2.  * @Description: npage.vue  
  3.  * @Version: 1.0  
  4.  * @Author: LiuXia  
  5.  * @Date: 2022-08-01 20:32:06  
  6.  * @LastEditors: Jesse Liu  
  7.  * @LastEditTime: 2023-07-17 20:38:42  
  8. -->  
  9. <template>  
  10.   <div class="wscn-http404-container">  
  11.       <h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>  
  12.       <div>time:</div>  
  13.   </div>  
  14. </template>  
  15.   
  16.   
  17.   
  18. <script>  
  19. import { parseTime } from '@/utils'  
  20. import { downloadFile } from "@/utils/getFile";  
  21. import { fileLinkToStreamDownload , urlFile } from '@/utils/down'  
  22. export default {  
  23.   name: 'PageTest',  
  24.   computed: {  
  25.     message() {  
  26.       return 'PageTest'  
  27.     },  
  28.     parseTime: parseTime  
  29.   },  
  30.   methods:{  
  31.     downfile(filePath){  
  32.       //https://bbwx.kaitaiming.com/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf  
  33.   
  34.       // 后端上传文件返回请求的filePath地址  
  35.       console.log( filePath, 3333333 );  
  36.       //  获取文件名  
  37.       let fileName = urlFile(filePath, 1);  
  38.       //  获取文件后缀  
  39.       let fileExtension = urlFile(filePath, 2);  
  40.       //  url下载  
  41.       fileLinkToStreamDownload(filePath,fileName,fileExtension);  
  42.     }  
  43.   },  
  44.   mounted() {  
  45.     this.downfile('http://localhost:9527/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf');  
  46.     this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{  
  47.         let data = res.data;  
  48.         let headers = res.headers;  
  49.           
  50.         /*** 调用下载文件 ***/  
  51.         //downloadFile(data, headers)  
  52.     })  
  53.   },  
  54. }  
  55. </script>  
  56.   
  57.   
  58. <style lang="scss" scoped>  
  59. </style>  
JavaScript代码
  1. /* 
  2.  * @Description: down.js 
  3.  * @Author: Jesse Liu 
  4.  * @Date: 2023-02-06 16:27:18 
  5.  * @LastEditors: Jesse Liu 
  6.  * @LastEditTime: 2023-07-17 20:20:05 
  7.  */  
  8. export function fileLinkToStreamDownload(url, fileName, type) {  
  9.   let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;  
  10.   if (!reg.test(url)) {  
  11.     throw new Error("传入参数不合法,不是标准的文件链接");  
  12.   } else {  
  13.     let xhr = new XMLHttpRequest();  
  14.     xhr.open('get', url, true);  
  15.     xhr.setRequestHeader('Content-Type', `application/${type}`);  
  16.     xhr.responseType = "blob";  
  17.     xhr.onload = function () {  
  18.       if (this.status == 200) {  
  19.         //接受二进制文件流  
  20.         console.log(this)  
  21.         var blob = this.response;  
  22.         const blobUrl = window.URL.createObjectURL(blob);  
  23.           // 这里的文件名根据实际情况从响应头或者url里获取  
  24.           const a = document.createElement('a');  
  25.           a.href = blobUrl;  
  26.           a.download = fileName;  
  27.           a.click();  
  28.           window.URL.revokeObjectURL(blobUrl);  
  29.       }  
  30.     }  
  31.     xhr.send();  
  32.   }  
  33. }  
  34.   
  35. // 获取url中需要的数据  type  1: 获取文件名  2：获取后缀  3：获取文件名+后缀  4:获取文件前缀  
  36. export function urlFile(url, type) {  
  37.   let filename = url.substring(url.lastIndexOf('/') + 1)  
  38.   switch (type){  
  39.       case 1: return filename; break;  
  40.       case 2: return filename.substring(filename.lastIndexOf(".") + 1); break;  
  41.       case 3: return filename.substring(0, filename.lastIndexOf(".")); break;  
  42.       case 4: return url.substring(0, url.lastIndexOf('/') + 1)  
  43.   }     
  44. }  

 

]]>