搜索到
109
篇与
的结果
-
若依系统上传图片压缩 虽然标题里面有若依，实际上所有的Vue项目都能够适用的。最近基于若依系统做点东西，若依系统本身封装了一个图片上传组件ImageUpload，但是这个组件对我来说不太适用，最主要的问题就是这个组件是自动上传的，这样就会导致我们业务数据跟附件无法做到同步，比如我们新增一个单据，点了上传图片，此时图片已经上传到服务器，但是我并没有保存单据，这样就造成了部分垃圾数据。当然不是说不能处理，只是来说更加麻烦。先来说下我们目前做的功能需求吧：基于ElementUI的el-upload上传图片为了减少图片占用的空间（目前基于阿里云OSS，这个后期介绍），我们在前端上传图片之前在不影响图片展示质量的前提下，对图片进行压缩表单数据与图片文件同步上传可以单张图片上传也可以同时上传多张图片（以下我们以多张图片上传来说明）壹、提取图片压缩公共方法在ruoyi.js公共方法中，封装图片压缩方法/** 图片压缩，默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参数，base64的字符串数据 */ export function compress(fileObj, callback) { // console.log('压缩前文件大小', fileObj.size) try { const image = new Image() image.src = URL.createObjectURL(fileObj) image.onload = function () { const that = this // 默认按比例压缩 let w = that.width let h = that.height const scale = w / h w = fileObj.width || w h = fileObj.height || (w / scale) let quality = 0.5 // 默认图片质量为0.7 // 生成canvas const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') // 创建属性节点 const anw = document.createAttribute('width') anw.nodeValue = w const anh = document.createAttribute('height') anh.nodeValue = h canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(that, 0, 0, w, h) // 图像质量 if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) { quality = fileObj.quality } // quality值越小，所绘制出的图像越模糊 const data = canvas.toDataURL('image/jpeg', quality) // 压缩完成执行回调 const newFile = convertBase64UrlToBlob(data) callback(newFile) // console.log('压缩后文件信息', newFile) } } catch (e) { console.log('压缩失败!') } } // Base64 => 二进制（Blob） function convertBase64UrlToBlob(urlData) { // 去掉url的头，并转换为byte const bytes = window.atob(urlData.split(',')[1]) // 处理异常,将ascii码小于0的转换为大于0 const ab = new ArrayBuffer(bytes.length) const ia = new Uint8Array(ab) for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i) } return new Blob([ab], {type: 'image/png'}) } 在main.js中挂载公共方法，方便在后面使用Vue.prototype.compress = compress贰、页面增加上传图片功能在表单中，增加上传图片功能<el-upload action="#" list-type="picture-card" :auto-upload="false" multiple :headers="headers" ref="carPhotoListRef" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange" :file-list="imageFileList" :disabled="form.inquiryStatus !== 'inquirying'" :class="{ hide: form.inquiryStatus !== 'inquirying' }" accept="image/bmp,image/jpg,image/png,image/svg,image/psd,image/webp,image/jpeg"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogImageVisible" :append-to-body="true"> <img width="100%" :src="dialogImageUrl" alt=""/> </el-dialog>因为我们要手工上传图片，所以需要对el-upload的属性进行配置action因为我们要收工上传，所以action需要设置成#auto-upload设置成false禁止自动上传headers是基于若依的认证，传递头部信息的on-preview预览图片on-remove删除图片同步处理我们后端绑定数据on-change图片改变的钩子，因为我们要手工上传图片，因此通过这个钩子完成图片的压缩其他的一些属性基本设置图片预览，限制上传图片类型的，按需设置即可。data里面主要设置图片预览、绑定图片列表等属性data() { return { headers: { Authorization: "Bearer " + getToken() }, //预览图片窗口是否可见 dialogImageVisible: false, //预览图片Url dialogImageUrl: null, imageFileList: [], } }method方法如下//删除图片 handleRemove(file, fileList) { this.imageFileList = fileList if (this.form.carPhotoList) { let index = -1 for (let i = 0; i < this.form.carPhotoList.length; i++) { if (this.form.carPhotoList[i].photoId === file.photoId) { index = i } } if (index !== -1) { this.$delete(this.form.carPhotoList, index) } } }, //图片改变 handleChange(file, fileList) { let that = this // 调用自定义的压缩方法 compress(file.raw, function (val) { // 图片格式： blob => file let newFile = new window.File([val], file.name, {type: file.raw.type}); // 新增属性（file）并赋值 let fileObj = {} fileObj.raw = newFile fileObj.name = file.name fileObj.uid = file.uid; fileObj.url = URL.createObjectURL(file.raw); that.imageFileList.push(fileObj) }) // this.imageFileList = fileList }, //预览图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogImageVisible = true },实现图片压缩主要是通过on-change钩子，选择图片后，通过on-change钩子调用handleChange方法，我们拿到图片文件后，调用compress方法，通过回调函数，将压缩后的图片绑定到imageFileList表单保存/** 提交按钮 */ submitForm() { if (this.imageFileList.length <= 0) { this.msgInfo('请上传图片') return } const loading = this.$loading({ lock: true,//lock的修改符--默认是false text: "保存中",//显示在加载图标下方的加载文案 spinner: "el-icon-loading",//自定义加载图标类名 background: "rgba(0, 0, 0, 0.7)",//遮罩层颜色 target: document.querySelector("#table")//loadin覆盖的dom元素节点 }) this.$refs["form"].validate(valid => { if (valid) { let formData = new FormData() this.imageFileList.forEach(file => { formData.append("imageFileList", file.raw)// 图片列表 }) formData.append("form", JSON.stringify(this.form))//表单 if (this.form.inquiryId != null) { updateInquiry(formData).then(response => { loading.close() this.msgSuccess("修改成功") this.open = false this.getList() }).catch(error => { loading.close() }) } else { addInquiry(formData).then(response => { loading.close() this.msgSuccess("新增成功") this.open = false this.getList() }).catch(error => { loading.close() }) } } else { loading.close() } }) },在表单保存方法中，我们通过FormData将图片文件与表单数据，一起保存。 -
是否有必要白嫖jsDelivr 壹、jsDelivr是做什么的jsDelivr是一款公共免费的CDN，提供稳定的CDN，可在流量巨大的流行网站上进行使用，没有带宽限制，任何人都可以完全免费使用。jsDelivr在中国大陆也拥有超过数百个节点，因为jsDelivr拥有正规的ICP备案，解决了中国大陆的访问速度优化，实现真正的全球极速低延迟体验。贰、是否有必要白嫖我个人建议是谨慎使用。数据或者说文件，不掌握在自己手里，你永远无法得知是否由于未知的原因导致文件丢失。如果使用第三方托管的代码，如果托管的代码出现问题（比如感染木马等），可能会给自己造成不可逆的伤害。第三方库无法完全保证稳定性，就好比jsDelivr在21年还是22年底在大陆备案失效，导致大面积网站访问出现异常（这里不是说无法访问哈，主要是网站脚本、样式啥的都加载不出来）。现在像又拍云（需要加入联盟，挂个链接）、七牛云等免费CDN，对于个人网站基本也够用，没必要使用第三方的CDN。叁、个人博客的处理我之所以想替换网站整体的jsDelivr，是因为公司网络限制，导致jsDelivr无法访问，所以我也是不得不更换。目前测试下来，整站替换之后再配合上CDN，整体访问速度上感觉没有太大的变化。
-
纯js实现html添加水印 有时候出于保密等需要，我们可能需要在前端展示页面添加一些水印信息。window.onload = function () { const element = document.body; watermark(element); } // window.onresize = function () { // const element = document.body; // watermark(element); // } function watermark(element, config) { let chArr = document.body.getElementsByClassName("watermark-item"); for (i = 0; i < chArr.length; i++) { //删除元素 元素.parentNode.removeChild(元素); if (chArr[i] != null) chArr[i].parentNode.removeChild(chArr[i]); } // 获取元素的坐标 function getOffset(el) { if (el.offsetParent) { return { x: el.offsetLeft + getOffset(el.offsetParent).x, y: el.offsetTop + getOffset(el.offsetParent).y, }; } return { x: el.offsetLeft, y: el.offsetTop, }; } if (!element) return; // 默认配置 const _config = { text1: '内部文档', //文本1 text2: '注意保密', // 文本2 start_x: 0, // x轴起始位置 start_y: 0, // y轴起始位置 space_x: 100, // x轴间距 space_y: 50, // y轴间距 width: 210, // 宽度 height: 80, // 长度 fontSize: 20, // 字体 color: '#aaa', // 字色 alpha: 0.4, // 透明度 rotate: 15, // 倾斜度 }; // 替换默认配置 if (arguments.length === 2 && typeof arguments[1] === "object") { const src = arguments[1] || {}; for (let key in src) { if (src[key] && _config[key] && src[key] === _config[key]) { continue; } else if (src[key]) { _config[key] = src[key]; } } } // 节点的总宽度 const total_width = element.scrollWidth; // 节点的总高度 const total_height = element.scrollHeight; // 创建文本碎片，用于包含所有的插入节点 const mark = document.createDocumentFragment(); // 水印节点的起始坐标 const position = getOffset(element); let x = position.x + _config.start_x, y = position.y + _config.start_y; // 先循环y轴插入水印 do { // 再循环x轴插入水印 do { // 创建单个水印节点 const item = document.createElement('div'); item.className = 'watermark-item'; // 设置节点的样式 item.style.position = "absolute"; item.style.zIndex = 99999; item.style.left = `${x}px`; item.style.top = `${y}px`; item.style.width = `${_config.width}px`; item.style.height = `${_config.height}px`; item.style.fontSize = `${_config.fontSize}px`; item.style.color = _config.color; item.style.textAlign = 'center'; item.style.opacity = _config.alpha; item.style.filter = `alpha(opacity=${_config.alpha * 100})`; // item.style.filter = `opacity(${_config.alpha * 100}%)`; item.style.webkitTransform = `rotate(-${_config.rotate}deg)`; item.style.MozTransform = `rotate(-${_config.rotate}deg)`; item.style.msTransform = `rotate(-${_config.rotate}deg)`; item.style.OTransform = `rotate(-${_config.rotate}deg)`; item.style.transform = `rotate(-${_config.rotate}deg)`; item.style.pointerEvents = 'none'; //让水印不遮挡页面的点击事件 // 创建text1水印节点 const text1 = document.createElement('div'); text1.appendChild(document.createTextNode(_config.text1)); item.append(text1); // 创建text2水印节点 const text2 = document.createElement('div'); text2.appendChild(document.createTextNode(_config.text2)); item.append(text2); // 添加水印节点到文本碎片 mark.append(item); // x坐标递增 x = x + _config.width + _config.space_x; // 超出文本右侧坐标停止插入 } while (total_width + position.x > x + _config.width); // 重置x初始坐标 x = position.x + _config.start_x; // y坐标递增 y = y + _config.height + _config.space_y; // 超出文本底部坐标停止插入 } while (total_height + position.y > y + _config.height); // 插入文档碎片 element.append(mark); }
-
Vue 2.X过渡系统 Vue2.X过渡系统过渡系统是Vue.js为DOM动画效果提供的一个特性，它能在元素从DOM中插入或移除时触发你的CSS过渡（transition）和动画（animation），也就是说在DOM元素发生变化时为其添加特尔顶的class类名，从而产生过渡效果。一、Vue2.X定义过渡动画的方法不同于Vue1.X，Vue2.x过渡系统取消了v-transion指令，新增了<transition/>内置标签，用法如下<transition name="hello"> <h1 v-if="show">你好</h1> </transition>transition标签为一个抽象标签，并不会额外渲染一个DOM元素，仅仅时用于包裹过渡元素及触发过渡行为。v-if、v-show等指令仍旧标记在内容元素上。二、transition参数2.1、nameVue根据name自动生成对应的对应的类名。name-enter、name-enter-active、name-enter-to、name-leave、name-leave-active、name-leave-to六种状态类名说明name-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。name-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。name-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 name-enter 被移除)，在过渡/动画完成之后移除。name-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。name-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。name-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 name-leave 被删除)，在过渡/动画完成之后移除。2.2、appear元素首次渲染的时候是否启用transition，默认为false。即v-if绑定值初始为true时，是否渲染时调用transition效果。2.3、css如果设置为true，则只监听钩子函数的调用。2.4、type设置监听CSS动画结束事件的类型。2.5、mode控制过渡插入/移除的先后顺序，主要用于元素切换时。可选择的值有out-in、in-out，如果不设置则同时调用。三、钩子函数与类名类似，也可以使用对应的钩子函数，包括@before-enter、@enter、@after-enter、@before-leave、@leave、@after-leave、四、transition-grouptransition-group主要用于将过渡动画应用到多个DOM元素上。五、Demo<style rel="stylesheet" type="text/css"> /* 动画退出类名 */ .hello-leave-active { animation: amt1 0.5s linear reverse; } /* 定义动画 */ @keyframes amt1 { from { transform: translateX(-100%); } to { transform: translateX(0px); } } /* 进入的起点、离开的终点 */ .hello-enter, .hello-leave-to { transform: translateX(-100%); } /* 进入的过程 */ .hello-enter-active, .hello-leave-active { transition: 0.5s linear; } /* 进入的终点、离开的起点 */ .hello-enter-to, .hello-leave { transform: translateX(0); } </style> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> --> </head> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script> <body> <div id='app'> <button v-on:click="show = !show"> Toggle </button> <transition name="hello" @before-enter="beforeEnter"> <h1 v-if="show">你好</h1> </transition> <!-- <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing" leave-active-class="animate__backOutUp"> <h1 v-show="!show" key="1">你好啊！</h1> <h1 v-show="show" key="2">迪丽热巴！</h1> </transition-group> --> </div> <script> let vm = new Vue({ el: '#app', data: { show: false }, methods: { beforeEnter: function () { console.log('beforeEnter'); } } }) </script>
-
Vue自定义指令 Vue除了内置的v-bind、v-model、v-once、v-pre等内置指令外，我们还可以注册自定义指令，以便封装对DOM元素的重复处理行为，提高代码的复用率。指令的注册自定义指令分为两种，全局自定义指令及组件（局部）自定义指令。全局自定义指令在所有组件中都可以使用，组件（局部）自定义指令顾名思义，只能在当前组件中使用。全局自定义指令全局自定义指令通过Vue.directive(id,definition)进行注册。如下，我们定义一个自动获取焦点的自定义组件。实现功能，当页面打开时，让<input>控件自动获取焦点。<html> <head> <title></title> </head> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script> <body> <div id='app'> <input type="text" v-g-focus="'1111'"/> </div> <script> Vue.directive('gFocus', { inserted: function (el,binding) { el.focus(); } }) let vm = new Vue({ el: '#app' }) </script> </body> </html> 组件（局部）自定义指令组件（局部）自定义指令通过组件的directives进行注册，如下let comp = Vue.extend({ directives: { 'localDirective': {} } })该指令只能在当前组件内调用，其他组件无法使用。指令的定义对象我们在注册指令的同时，可以传入definition定义对象，对指令赋予一些特殊的功能。这些对象主要包括五个钩子函数。bind:只被调用一次，在指令第一次绑定到元素上时调用。inserted:指令所绑定的元素插入到DOM中时调用update:指令在绑定之后以初始值作为参数进行第一次调用，之后每次当绑定值发生变化时调用。描述的是组件更新前的状态。componentUpdated:被绑定元素所在模板完成一次更新周期时调用。描述的是组件更新后的状态unbind:只被调用一次，当指令与元素解绑时调用。我们可以通过以下代码简单看一下使用方法<div id='app'> <input type="text" v-g-focus="param" v-if="exist" /> </div> <script> Vue.directive('gFocus', { bind:function(el, binding){ console.log('bind:' + binding.value) }, inserted: function (el, binding) { el.focus(); console.log('inserted:' + binding.value) }, update: function (el, binding) { console.log('update:' + binding.value) }, unbind:function(el, binding){ console.log('unbind:' + binding.value) }, componentUpdated:function(el, binding){ console.log('componentUpdated:' + binding.value) }, }) let vm = new Vue({ el: '#app', data: { param: 'first', exist: true } }) </script>当我们第一次打开页面时，查看控制台，会看到如下输出我们在控制台输入vm.param='second'，可以看到如下输出我们在控制台输入vm.exist=false，可以看到如下输出钩子函数参数钩子函数参数 (即 el、binding、vnode 和 oldVnode)指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作DOM。binding：一个对象，包含以下属性：name：指令名，不包括v-前缀。value：指令的绑定值，例如：我们上面代码传递的param。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为1 + 1。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为foo。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。vnode：Vue 编译生成的虚拟节点。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
-
JS !（非运算）详解 逻辑非运算!是布尔取反操作（NOT）。作为一元运算符，直接放在操作数之前，把操作数的值转换为布尔值，然后取反并返回。下面是一些特殊操作数的逻辑非运算返回值。console.log( ! {} ); //如果操作数是对象，则返回false console.log( ! 0 ); //如果操作数是0，则返回true console.log( ! (n = 5)); //如果操作数是非零的任何数字，则返回false console.log( ! null ); //如果操作数是null，则返回true console.log( ! NaN ); //如果操作数是NaN，则返回true console.log( ! Infinity ); //如果操作数是Infinity，则返回false console.log( ! ( - Infinity )); //如果操作数是-Infinity，则返回false console.log( ! undefined ); //如果操作数是undefined，则返回true如果对操作数执行两次逻辑非运算操作，就相当于把操作数转换为布尔值。console.log( ! 0 ); //返回true console.log( ! ! 0 ); //返回false逻辑与和逻辑或运算的返回值不必是布尔值，但是逻辑非运算的返回值一定是布尔值。
-
零基础学HTML5+CSS3---图片热区链接 <area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。图像热区链接的定义方式1.设置图片首先需要在图像文件中设置映射图像名。在添加图像的<img>标记中使用usemap属性添加图像要引用的映射图像的名称。<img src="图像地址" usemap="#映射图像名称">2.定义热区图像及热区的链接<map name = "映射图像名称" id = "映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址" title="标题"> </map>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3）...示例 <img src="img/main.jpeg" usemap="#beauty"> <map name="beauty" id="beauty"> <area shape="rect" coords="0,0,60,60" href="img/topleft.jpeg" title="美女"> </map>
-
零基础学HTML5+CSS3---字体 斜体、下划线、删除线说明[alt type="success"][tag type="success"]<em>文字斜体标记[/tag][tag type="success"]<u>文字下划线标记[/tag][tag type="success"]<strike>文字删除线标记[/tag][/alt]示例代码<body style="color: mediumvioletred;"> <h3>书名：<em>《山海经》</em></h3> <h4>出版日期：<u>古代</u></h4> <h4>原价：<strike>200</strike> 促销价：300</h4> </body>文字的上标与下标说明[card-default width="100%" label="说明"][tag type="warning"]<sup>上标标记内容[/tag][tag type="danger"]<sub>下标标记内容[/tag][/card-default]示例代码<body style="color: mediumvioletred;"> <h2>数学公式</h2> 2X+4<sup>2</sup>=16 <h2>化学符号</h2> 水：H<sub>2</sub>O </body>特殊符号说明一般情况下，特殊符号由前缀&、字符名称和后缀分号;组成。常见特殊符号如下表：特殊符号实体名称含义''"引号<<左尖括号>>右尖括号✖️×乘号©©居右 居右原格式标记说明<pre>原格式标记，保留代码中的原始格式。示例代码 <pre> ^_^ </pre>[alt type="success"]<pre>标签中如果有html标签，仍然会被渲染[/alt]水平线说明水平线用于段落与段落之间的分隔。通过<hr>来创建水平线。示例代码 <hr style="margin-top: 20px;border: 1px solid royalblue;"> <pre> ^_^ </pre> <hr>
-
angular基础知识之路由 基本使用首先从@angular/router库中导入一些常量。修改我们的app.module.ts文件，增加以下内容import { RouterModule, Routes } from '@angular/router'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';增加路由const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]修改imports增加以下内容RouterModule.forRoot(routes),修改providers增加以下内容{ provide: LocationStrategy, useClass: HashLocationStrategy }安装路由器platformBrowserDynamic().bootstrapModule(AppModule)完整代码app.module.ts修改后，完整代码如下，请忽略无效内容import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http'; import { RouterModule, Routes } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NZ_I18N } from 'ng-zorro-antd/i18n'; import { zh_CN } from 'ng-zorro-antd/i18n'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzCardModule } from 'ng-zorro-antd/card'; import { SimpleHttpComponent } from './simple-http/simple-http.component'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { AboutComponent } from './about/about.component'; import { HomeComponent } from './home/home.component'; registerLocaleData(zh); const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ] @NgModule({ declarations: [ AppComponent, SimpleHttpComponent, AboutComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes), HttpClientJsonpModule, BrowserAnimationsModule, NzDatePickerModule, NzButtonModule, NzFormModule, NzInputModule, NzIconModule, NzSelectModule, NzGridModule, NzCardModule, NzMenuModule ], providers: [ { provide: NZ_I18N, useValue: zh_CN }, { provide: LocationStrategy, useClass: HashLocationStrategy } ], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)创建模块我们创建两个模块，分别是Home、About修改App模板文件，配置路由<ul nz-menu nzMode="horizontal"> <li nz-submenu nzTitle="Home" nzIcon="mail" [routerLink]="['home']"></li> <li nz-submenu nzTitle="About" nzIcon="mail" [routerLink]="['about']"></li> </ul> <br /> <router-outlet></router-outlet><router-outlet>用于展示路由内容，[routerLink]用于配置节点的路由配置完成后，我们可以访问一下首页传递参数我们可能需要路由中传递参数，那么我们继续改造。修改路由参数修改about的路由，我们传递一个name属性。修改后如下const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about/:name', component: AboutComponent }, { path: 'about', component: AboutComponent } ]修改模块import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { route: ActivatedRoute; name: string = ""; constructor(route: ActivatedRoute) { this.route = route route.params.subscribe( param => { this.name = param['name'] console.log(param) } ) } ngOnInit(): void { } }修改about模板<p>about works!</p> <br> {{name}}
-
angular HTTP请求 Angular有自己的HTTP库，我们可以用它来调用外部API。 在老的版本中HTTP模块位于@angular/http ，新的版本已经迁移到@angular/common/http。导入http模块在app.module.ts中，引入http模块import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';然后注入模块@NgModule({ declarations: [ AppComponent, SimpleHttpComponent ], imports: [ HttpClientModule, HttpClientJsonpModule ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] })新建一个测试模块执行以下命令创建模块ng g c SimpleHttp引入HttpClient在新建模块的ts文件中，引入HttpClient模块，并在构造函数中注入。import { HttpClient } from '@angular/common/http'; private httpClient: HttpClient; constructor(httpClient: HttpClient) { this.httpClient = httpClient }使用let url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1" this.httpClient.get(url).subscribe((response) => { console.log(response); }, (err) => { console.warn(err) })其他除了get方法，还有我们常用的post、put、delete、request等方法。传递参数当然我们可以给后台传递参数的，这里我模拟一个login请求。post处理请求时，我们可能需要传递头部还有返回值类型信息，不然会报错。后台用Spring Boot模拟登陆@RestController public class LoginController { @PostMapping("login") @CrossOrigin public String Login(@RequestBody LoginEntity loginEntity){ LoginEntity entity = loginEntity; return "success"; } }前端完整调用代码import { Component, OnInit } from '@angular/core'; import { HttpClient ,HttpHeaders} from '@angular/common/http'; @Component({ selector: 'app-simple-http', templateUrl: './simple-http.component.html', styleUrls: ['./simple-http.component.css'] }) export class SimpleHttpComponent implements OnInit { private httpClient: HttpClient; private headers = new HttpHeaders({'Content-Type': 'application/json'}); constructor(httpClient: HttpClient) { this.httpClient = httpClient } ngOnInit(): void { let url = "http://localhost:8080/login" let param = { userName:'张三' } this.httpClient.post(url,param,{headers:this.headers,responseType:'text'}).subscribe(function(response) { console.log('我取到数据了：'+response) }, function(err){ debugger console.log('报错了:'+err) }) } }
-
简约精致苹果风格 LINUX 系统：CUTEFISHOS 近又新出了一个 Linux 桌面发行版「CutefishOS」基于 Ubuntu，桌面风格非常苹果味，根据官方的介绍，做更好的桌面操作系统、注重简洁、美观和实用性。访问百度网盘：https://pan.baidu.com/s/1KjdN-C2Vdf5OTVwKYXYh5Q (提取码: 7dx2)天翼网盘：https://cloud.189.cn/web/share?code=Qzi6biUFfi2q（访问码：sbi6）官方：https://cn.cutefishos.com2021年09月12日昨天趁着周六在家里电脑安装了一下，简单说一下体会吧，因为我上午安装的，晚上就把电脑搞崩了￣□￣｜｜系统安装上之后，虽然是测试版，但是还是挺流畅的。整体界面比较简洁，类似Mac风格，但是感觉没那么精致。基于Ubuntu，所以Ubuntu的那套逻辑都能正常用。
-
angular监听表单变化及双向数据绑定 监听表单变化FormGroup及FormControl都带有EventEmitter（事件发射器）用于监控表单控件的变化。要监听控件的变化，我们通过以下步骤：通过调用control.valueChanges访问这个EventEmitter然后调用.subscribe方法添加一个监听器。html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')"> <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>ts代码如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } 双向数据绑定ngModel是一个特殊的指令，它将模型绑定到表单中。ngModel的特殊之处在于它实现了双向绑定。相对于单向绑定来说，双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的：自顶向下。但对于表单来说，双向绑定有时会更加容易。我们在ts文件添加一个sku属性，修改后如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup sku: string constructor(formBuilder: FormBuilder) { this.sku = '' this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } html模板中通过[(ngModel)]绑定我们添加的属性<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']" [(ngModel)]="sku"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')" > <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> <div> sku:{{sku}} </div> </nz-card>
