<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[LuviaWu的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/LuviaWu</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; LuviaWu]]></copyright><item><title><![CDATA[【VUE】vue3.0后台常用模板]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/129375203</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/129375203</guid><author>LuviaWu</author><pubDate>Tue, 07 Mar 2023 10:34:50 +0800</pubDate><description><![CDATA[推荐基于vue3.0开发的后台管理好用的模板，让需要的人快速获取合适的模板]]></description><category></category></item><item><title><![CDATA[【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/124591940</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/124591940</guid><author>LuviaWu</author><pubDate>Thu, 05 May 2022 16:58:14 +0800</pubDate><description><![CDATA[vue实现登录滑动拼图验证的两种方法：
第一种是纯前端组件验证，只能区分是人为操作还是机器操作。
第二种是前后端同时验证，这种方法加上后端校验相对会更安全一些。
1、纯前端组件验证
效果如图：

原代码gitee链接
实现步骤，先npm install：
npm install --save vue-monoplasty-slide-verify

在main.js引入
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-]]></description><category></category></item><item><title><![CDATA[【小程序】微信小程序使用个性化地图]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/124383189</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/124383189</guid><author>LuviaWu</author><pubDate>Sun, 24 Apr 2022 15:16:53 +0800</pubDate><description><![CDATA[看开发指南：按照12345点来操作
开发指南-入门

2、创建应用和key
小程序位置服务 - 我的应用

选样式地图，绑定创建的key，会带出该小程序信息，保存即可。


设置完后就可以使用了！
key是腾讯地图key。
layer-style属性设置为该key绑定个性化样式的style编号（1,2,3），即可生效 如上图style 1为微信深色样式，那么将layer-style赋值为1。
&lt;map
  id="map"
  subkey="{{key}}"
  longitude="116.273]]></description><category></category></item><item><title><![CDATA[【小程序】版本发布自动更新机制]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/124186811</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/124186811</guid><author>LuviaWu</author><pubDate>Fri, 15 Apr 2022 09:08:51 +0800</pubDate><description><![CDATA[如果两次提交的版本号一样，  小程序会不会去更新到最新的版本呢？
其实，这并不影响更新机制。你自己的版本号只是备注，审核后微信会有个数字版本号进行对比。
根据微信提供的能力，小程序的更新流程大致如下：

配置：
调试基础库，设置在2.17.0以上。
方法：
在app.js加上这两个方法，并在onLaunch调用
  onLaunch(options) {
    this.autoUpdate()
  },
  // 版本更新
  autoUpdate() {
    var _this = this;
 ]]></description><category></category></item><item><title><![CDATA[【小程序】小程序上使用echarts tooltip不显示x轴的数据，及自定义 tooltip显示]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/122706244</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/122706244</guid><author>LuviaWu</author><pubDate>Wed, 26 Jan 2022 17:52:27 +0800</pubDate><description><![CDATA[小程序上使用echarts tooltip不显示x轴的数据
那就去自定义tooltip的显示！
小程序：
注意！小程序这里换行用：’\n’
tooltip: {
  trigger: 'axis',
  // 这里自定义只是为了把x轴的数据也显示出来
  formatter:function(datas) {
    let res = datas[0].name;
    for (const i in datas){
      res += '\n' + datas[i].seriesName + ']]></description><category></category></item><item><title><![CDATA[【小程序】微信小程序消息订阅]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/122438790</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/122438790</guid><author>LuviaWu</author><pubDate>Tue, 11 Jan 2022 18:33:46 +0800</pubDate><description><![CDATA[微信小程序消息订阅
小程序文档查看
如图：

代码：
  requestMessage() {
    var tmplIds = '***' // 用户同意的消息模板id，此处用*号代替
    // 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions 这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
    wx.getSetting({
      withSub]]></description><category></category></item><item><title><![CDATA[【CSS】常用的CSS元素伪类选择器以及示例]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/120528498</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/120528498</guid><author>LuviaWu</author><pubDate>Tue, 28 Sep 2021 15:18:54 +0800</pubDate><description><![CDATA[CSS元素选择器:




选择器
示例说明




:first-child
选择某个元素的第一个子元素（IE6不支持）


:last-child
选择某个元素的最后一个子元素


:nth-child()
[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）


:nth-last-child()
[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）


:first-of-type
[CSS3]选择一个上级元素下的第一个同类子元素

]]></description><category></category></item><item><title><![CDATA[【小程序】消息订阅requestSubscribeMessage]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/119906017</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/119906017</guid><author>LuviaWu</author><pubDate>Wed, 25 Aug 2021 11:37:53 +0800</pubDate><description><![CDATA[现在企业主体的订阅消息是一次性的，由于公司需要多次发送消息，却又不符合长期性订阅消息条件，只能每次进行弹出授权。

在后台提供消息订阅id后，前端进行授权提示。以下代码适用于有长期性订阅服务id的企业或政府：
  // 司机 - 消息订阅
  requestMessage() {
    var _this = this
    var tmplIds = '***' // 用户同意的消息模板id
    // 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withS]]></description><category></category></item><item><title><![CDATA[【小程序】wx.previewMedia预览图片与视频]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/119256788</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/119256788</guid><author>LuviaWu</author><pubDate>Fri, 30 Jul 2021 22:06:52 +0800</pubDate><description><![CDATA[小程序官方文档：wx.previewMedia 预览图片和视频
自己测试出来的代码实列，查找了一些资料才整理出来的~：
var sources = [{
	url: '图片链接',
	type: 'image'
},{
	url: '视频链接',
	type: 'video'
}]
var index = 0
var url = sources[index].url
wx.previewMedia({
  sources: sources, // 需要预览的资源列表
  current: index, //]]></description><category></category></item><item><title><![CDATA[【VUE】web高德地图海量点标记,全部居中显示在屏幕中]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/118677958</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/118677958</guid><author>LuviaWu</author><pubDate>Mon, 12 Jul 2021 16:41:05 +0800</pubDate><description><![CDATA[官方示例中setFitView()对AMap.Marker可以生效，但对海量点标记 AMap.MassMarks 似乎无效
Map类有一个方法setBounds也能实现重新调整视角：
https://lbs.amap.com/api/javascript-api/reference/map

// &lt;script&gt; 中引入高德地图
import AMap from 'AMap'
var map

// 页面上
&lt;div id="my-aMap" style="width: 500px;he]]></description><category></category></item><item><title><![CDATA[【VUE】ElementUI在Dialog上 mouseup在遮罩上时自动关闭弹窗的问题]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/118668297</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/118668297</guid><author>LuviaWu</author><pubDate>Mon, 12 Jul 2021 09:41:24 +0800</pubDate><description><![CDATA[mousedown在Dialog上 mouseup在遮罩上时自动关闭弹窗的问题总结
在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现

]]></description><category></category></item><item><title><![CDATA[【小程序】微信小程序取消全局或单个页面的标题栏]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/118091112</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/118091112</guid><author>LuviaWu</author><pubDate>Mon, 21 Jun 2021 17:30:58 +0800</pubDate><description><![CDATA[1、取消全部标题栏：
在app.json里的window加上：navigationStyle:custom 。顶部导航栏就会消失,保留右上角胶囊状的按钮
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#444",
    "navigationBarTitleText": "小程序名字",
    "navigationBarTextStyle": "white",
    "na]]></description><category></category></item><item><title><![CDATA[【小程序】微信小程序动态和静态修改页面标题]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/118090758</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/118090758</guid><author>LuviaWu</author><pubDate>Mon, 21 Jun 2021 17:17:57 +0800</pubDate><description><![CDATA[1、静态修改页面标题：
{
  "navigationBarTitleText": "古诗猜谜"
}


2、动态修改标题：
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '古诗猜谜'
    })
  },



]]></description><category></category></item><item><title><![CDATA[【VUE】请求后台，导出表格]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/118088503</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/118088503</guid><author>LuviaWu</author><pubDate>Mon, 21 Jun 2021 16:04:13 +0800</pubDate><description><![CDATA[请求后台，导出表格
这里的文件导出表格方式是：
根据后端返回的值，进行处理下载。（注意后端返回的数据结构，因为会影响到文件流的正常转换，从而导致下载的表格乱码）
// 导出表格
    downloadExcel() {
      var that = this
      this.axios.get('/api/exportExcel', {
        responseType: 'blob',
        headers: { token: that.token, 'Content-Typ]]></description><category></category></item><item><title><![CDATA[【JS】图片、视频、文档等文件下载，解决跨域报错问题]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/118087515</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/118087515</guid><author>LuviaWu</author><pubDate>Mon, 21 Jun 2021 15:26:42 +0800</pubDate><description><![CDATA[文件下载
这里的文件，可以包括图片、视频、文档等
参数说明：
fileUrl：文件服务器的路径（路径后面加上’?response-content-type=application/octet-stream’，可以支持跨域下载）
fileName：文件名
// 下载文件
    downLoad() {
      const url = fileUrl + '?response-content-type=application/octet-stream' // 支持跨域下载
      const name]]></description><category></category></item><item><title><![CDATA[【VUE】数据绑定，js数组赋值，多处使用时，一处修改，另一处也会被改变]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/116131533</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/116131533</guid><author>LuviaWu</author><pubDate>Sun, 25 Apr 2021 16:09:55 +0800</pubDate><description><![CDATA[vue中数据绑定，js数组赋值，多处使用时，一处修改，另一处也会被改变
问题描述如下：
this.A = [1,2,3]

var B = this.A
B.push(4)

var C = this.A
console.log(C)  

此时的C会得到 [1,2,3,4]，而不是 [1,2,3]
解决办法：
1、
this.A = [1,2,3]

var B = JSON.parse(JSON.stringify(this.A))
B.push(4)

var C = JSON.parse(JSON.]]></description><category></category></item><item><title><![CDATA[【VUE】vue-amap高德地图定位以及文本标注]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/115593585</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/115593585</guid><author>LuviaWu</author><pubDate>Sun, 11 Apr 2021 12:11:22 +0800</pubDate><description><![CDATA[vue-amap高德地图定位以及文本标注
因要求需实现在地图的定位以及该定位的文本标注，所有我看了一下实现的方式有哪些。最后选择了用现成的 vue-amap高德组件 去实现。
实现效果如图：

实现过程很简单：
1.到 高德开发者平台 申请key

2.安装vue-amap（官方推荐 npm 安装）
npm install vue-amap --save

3.使用组件调用地图
在main.js引入vue-amap地图组件：
import VueAMap from 'vue-amap'
Vue.use(Vu]]></description><category></category></item><item><title><![CDATA[【VUE】vue-element-admin在IE中打开空白问题]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/114939031</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/114939031</guid><author>LuviaWu</author><pubDate>Wed, 17 Mar 2021 17:30:15 +0800</pubDate><description><![CDATA[一开始没注意vue-element-admin这个比较好用的框架没支持IE浏览器，后来公司要求支持IE浏览器，所以查了一下，其实，实现起来很简单！
附带作者兼容说明链接：https://github.com/PanJiaChen/vue-element-admin/wiki
原话是这样：
由于vue-element-admin项目暂时没有兼容性需求，如有兼容性需求可自行使用babel-polyfill。所以：
1、安装babel-polyfill
npm install --save babel-polyf]]></description><category></category></item><item><title><![CDATA[【nodejs】nodejs升级版本后，运行项目node-sass会报错的解决办法]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/111688747</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/111688747</guid><author>LuviaWu</author><pubDate>Fri, 25 Dec 2020 17:06:11 +0800</pubDate><description><![CDATA[node.js下载
node.js下载安装，升级版本后，运行项目node-sass会报错，如下图：
它告诉你：这通常是因为你的环境在运行“npm install”后发生了更改。运行“npm rebuild node sass”下载当前环境的绑定。
让你运行以下命令：
npm rebuild node-sass

但还是报错：

执行命令的时候有时会遇到上图的错误，然后以 windows 平台为例，管理员权限执行以下命令，安装完即可：
npm install --global --production win]]></description><category></category></item><item><title><![CDATA[【visjs】使用visjs绘制关系图]]></title><link>https://blog.youkuaiyun.com/LuviaWu/article/details/111366337</link><guid>https://blog.youkuaiyun.com/LuviaWu/article/details/111366337</guid><author>LuviaWu</author><pubDate>Fri, 18 Dec 2020 15:17:41 +0800</pubDate><description><![CDATA[附上链接：
vis网站
visjs中文使用说明文档
使用步骤：
1、安装
npm install vis-network

2、在页面中引入
&lt;div id="mynetwork" class="myChart" :style="{width: '100%', height: '90vh'}"&gt;&lt;/div&gt;

require('vis-network/dist/dist/vis-network.min.css')
const vis = require('vis-network/di]]></description><category></category></item></channel></rss>