<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[JKC_HOWL的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/JKC_HOWL</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; JKC_HOWL]]></copyright><item><title><![CDATA[微前端 qiankun mirco-app]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/144087352</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/144087352</guid><author>JKC_HOWL</author><pubDate>Wed, 27 Nov 2024 16:55:05 +0800</pubDate><description><![CDATA[微前端 qiankun和mirco-app在vue3+vite中使用]]></description><category></category></item><item><title><![CDATA[vue中使用高德地图2.0（一）加载地图]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/126836677</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/126836677</guid><author>JKC_HOWL</author><pubDate>Tue, 13 Sep 2022 17:16:18 +0800</pubDate><description><![CDATA[vue加载高德地图]]></description><category></category></item><item><title><![CDATA[vue前端根据url批量下载图片]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/116640861</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/116640861</guid><author>JKC_HOWL</author><pubDate>Tue, 11 May 2021 10:56:30 +0800</pubDate><description><![CDATA[安装依赖

npm install jszip
npm install file-saver

代码
// import
import JSZip from'jszip'
import FileSaver from'file-saver'

// html
&lt;el-button type="primary" :loading="download" @click="down"&gt;批量下载&lt;/el-button&gt;
&lt;span v-if="download"&gt;{{ title }]]></description><category></category></item><item><title><![CDATA[IIS搭建http服务]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/116204751</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/116204751</guid><author>JKC_HOWL</author><pubDate>Tue, 27 Apr 2021 17:14:34 +0800</pubDate><description><![CDATA[搭建IIS-HTTP服务器
1.搜索iis打开 Internet Information Services(IIS)管理器

2.网站 右键添加网站

3.填写对应信息

网站名称：
物理路径：
端口号：


4.找到目录浏览 启动


5.浏览网站 点击查看

6.其他电脑访问本机外网ip加设置的端口号

7.遇到的问题

1.找不到目录浏览
2.其他电脑无法访问，本机打开可以

找不到目录浏览

打开控制面板 – 打开程序和功能 – 打开启动或关闭window功能
找到Internet Informat]]></description><category></category></item><item><title><![CDATA[vue 项目 web端如何实现天气预报1]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/116143748</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/116143748</guid><author>JKC_HOWL</author><pubDate>Mon, 26 Apr 2021 09:59:27 +0800</pubDate><description><![CDATA[自动定位天气信息


1.拿到当前电脑ip
2.高德接口获取ip的地址
3.通过和风天气获取城市id
4.通过id获取实时天气




高德API：https://lbs.amap.com/api/webservice/guide/api/ipconfig
和风天气：https://dev.qweather.com/docs/api/weather/weather-now/


拿到当前IP
一、在index.js里引入
&lt;script src="http://pv.sohu.com/cityjson]]></description><category></category></item><item><title><![CDATA[html格式的图片数据处理展示]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/115612383</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/115612383</guid><author>JKC_HOWL</author><pubDate>Mon, 12 Apr 2021 09:50:27 +0800</pubDate><description><![CDATA[截取a标签的href值
请求数据拿到后端返回html模板
this.$axios.get('/static/xxxxxx/', {
	baseURL: ''
}).then(res =&gt; {
	console.log(res)
})

对拿到的html模板a标签的href值截取
const b = /&lt;a([\s]+|[\s]+[^&lt;&gt;]+[\s]+)href=(\"([^&lt;&gt;"\']*)\"|\'([^&lt;&gt;"\']*)\')[^&lt;&gt;]*&gt;/]]></description><category></category></item><item><title><![CDATA[element组件表格实现高度自适应，并且随父元素动态更改]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/112304041</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/112304041</guid><author>JKC_HOWL</author><pubDate>Thu, 07 Jan 2021 10:43:03 +0800</pubDate><description><![CDATA[element ui 文档高度都是设置的 height=“50” 没有给出动态适应的办法

el-table 绑定属性 :height=“Height”
&lt;el-table :height="Height" style="width:100%;"&gt;
。。。。
&lt;/el-tale&gt;

data() {
	return {
		Height: ''
	}
}

初始化时获取&lt; el-table &gt;&lt; /el-table &gt;的父元素 的高度，并赋值给变量 Heig.]]></description><category></category></item><item><title><![CDATA[supermap超图选取起点终点添加折线显示路线]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/111319272</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/111319272</guid><author>JKC_HOWL</author><pubDate>Thu, 17 Dec 2020 17:33:12 +0800</pubDate><description><![CDATA[思路


1.拿到地图起点终点的笛卡尔坐标
2.将起点和终点的笛卡尔坐标转成经纬度，调用高德接口拿到路线geojson坐标
3.使用geojson绘制线路


高德接口文档
https://lbs.amap.com/api/webservice/guide/api/direction
超图文档
http://support.supermap.com.cn:8090/webgl/docs/Documentation/Polyline.html?classFilter=poly
http://support.s]]></description><category></category></item><item><title><![CDATA[vue+supermap超图实现点击地图添加点]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/111317147</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/111317147</guid><author>JKC_HOWL</author><pubDate>Thu, 17 Dec 2020 16:30:57 +0800</pubDate><description><![CDATA[点击地图加点并添加图标（已规划导航路线选取终点起点为例）
首先是点击获取坐标
getPosition(item) {
   this.point = item  // item 接受两个字符串 'start', 'end' 用来区分起点和终点
   const that = this 
   that.pickState = true // 加点时开关，为true时点击地图调用加点方法加点，
   const handler = new Cesium.ScreenSpaceEventHandler(view]]></description><category></category></item><item><title><![CDATA[echarts 在 vue项目中使用及立体柱状图的实现]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/110000473</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/110000473</guid><author>JKC_HOWL</author><pubDate>Mon, 23 Nov 2020 17:04:25 +0800</pubDate><description><![CDATA[vue 项目中使用echarts
首先安装echarts依赖

cnpm install echarts -S / yarn add echarts

在需要使用echarts图表的组件内引入

import echarts from ‘echarts’

通过ref进行标记
&lt;div ref="echarts" style="width:100%;height:100%" class="echarts"&gt;&lt;/div&gt;

在mounted内进行实例化
mounted() {
	thi]]></description><category></category></item><item><title><![CDATA[vue 项目 web端如何实现天气预报2]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109900739</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109900739</guid><author>JKC_HOWL</author><pubDate>Sat, 21 Nov 2020 16:41:27 +0800</pubDate><description><![CDATA[在web段实现天气展示
首先我们要获取到天气信息，我们可以请求下面的接口

访问上面的接口后，可以看到返回值，拿到返回值后对数据进行处理和渲染就可以了


注意：通过返回值我们可以看到，wea_img的属性值是汉语拼音’yu’,
我们如果想要展示气象图片的话就需要将各种天气的图片放在public文件夹下

在使用图片的时候通过绑定src属性拼接路径拿到展示的图片，具体代码在下面 有注释。

下面是请求数据js代码
export function getSevenDaysWeather(query) {
  ]]></description><category></category></item><item><title><![CDATA[vue项目中 EasyPlayer 的封装与使用]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109745054</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109745054</guid><author>JKC_HOWL</author><pubDate>Tue, 17 Nov 2020 16:53:30 +0800</pubDate><description><![CDATA[vue中如何集成EasyPlay播放器
安装EsayPlay依赖（npm慢可以使用cnpm或者yarn）
npm install @easydarwin/easywasmplayer --save

安装完成后找到下面两个文件 拷贝到public文件下(必须)

node_modules &gt;&gt; @easydarwin &gt;&gt; easywasmplayer &gt;&gt; EasyWasmPlayer.js
node_modules &gt;&gt; @easydarwin &gt;&]]></description><category></category></item><item><title><![CDATA[vue 前端将Excel表格导入 ，并解析成Json数据发送给后端]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109572128</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109572128</guid><author>JKC_HOWL</author><pubDate>Mon, 09 Nov 2020 12:51:54 +0800</pubDate><description><![CDATA[首先我们通过input框的file进行上传
&lt;span class="file-box"&gt;
	Excel上传
	&lt;input 
	type="file" 
	accept=".xls,.xlsx" 
	class="upload-file" 
	@change="Excel($event)" /&gt;
&lt;/span&gt;

修改样式让其变得漂亮一些，添加完下面的样式，就会变成这个的样子：
.file-box {
      position: relative;
      di]]></description><category></category></item><item><title><![CDATA[vue实现列表的导出excel表格的功能]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109233051</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109233051</guid><author>JKC_HOWL</author><pubDate>Thu, 22 Oct 2020 23:53:26 +0800</pubDate><description><![CDATA[vue在做后台管理系统，会有导出excel表格的功能。
首先，通过npm或者yarn安装插件xlsx和file-saver

npm i xlsl -S  // 用于导出Excel表
npm i file-saver -S // 用于文件的下载

然后，话不多说复制就完事了，创建一个js文件ExportExcel.js,将下面所有代码ctrl + c，ctrl + v 到里面。这段代码为封装的导出表格的功能。
/* eslint-disable */
require('file-saver');
impor]]></description><category></category></item><item><title><![CDATA[vue实现列表的复选框，单选，多选]]></title><link>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109232552</link><guid>https://blog.youkuaiyun.com/JKC_HOWL/article/details/109232552</guid><author>JKC_HOWL</author><pubDate>Thu, 22 Oct 2020 23:13:57 +0800</pubDate><description><![CDATA[不适用组件库的方式，实现列表的单选，多选。
一，在获取到列表数据赋值给parkList后，动态的添加checked属性为false
// 将列表parkList进行遍历动态添加checked为false
 this.parkList.map(item =&gt; {
     this.$set(item, 'checked', false)
 })

二，将复选框绑定checked属性，属性值为动态添加checked。
&lt;-- 通过v-for生成的，每一行前面的复选框，item为v-for的每一项 ]]></description><category></category></item></channel></rss>