目标达成-CSDN博客

原创格式化日期对象

1、将一个Date类型的数据格式化为字符串类型如：2022-05-09 00:00:00// 格式化日期对象：参数为Date对象function dateFormat(dateObj){ let fullYear = dateObj.getFullYear() let month = completionZero(dateObj.getMonth() + 1) let date = completionZero(dateObj.getDate()) let hours = compl

2022-05-09 09:54:14 694

原创使用nginx部署vue项目

1 配置nginx.conf 1.1 用xshell连接上linux测试服务器 1.2 执行命令查看nginx服务启动情况：ps aux | grep nginx 1.2.1 会出现多个，其中有一个是master，然后后面跟了一段路径，这里是：/usr/sbin/nginx，表示运行的是这个/usr/sbin/ 下的 nginx文件； 1.2.2 执行/usr/sbin/nginx -t(或者进入/usr/sbin目录执行 nginx -t)，这个时候你会看到...

2022-05-07 17:50:00 2803 1

原创 vue中的代理proxy

由于大多情况下由前端像后端服务器发起的请求都会存在跨域，由于跨域，会导致请求不通，因此需要进行代理跨域：协议、域名、端口只要有一个不同，就会存在跨域如前端网站为：http://192.168.1.1:8100后端服务器接口地址为：http://192.168.1.2:8001这样前端要请求接口时就会存在跨域问题，这个时候就需要使用代码来进行请求配置vue.config.js：这里的配置只对本地有效，测试环境或正式环境的需要通过nginx进行代理配置module.exports =

2022-05-07 16:20:43 1995 2

原创 vue按需引入ElementUI

1、安装 babel-plugin-component：npm install babel-plugin-component -D2、babel.config.js文件中，在plugins中添加如下："plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]]3、在mai

2022-05-07 14:52:32 432

原创 vue中引入JQuery

1、下载依赖包 npm install jquery -S2、vue.config.js中const webpack = require("webpack");......module.exports = { configureWebpack: { //支持jquery plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery"

2022-05-07 14:36:31 2507

原创 vue中的.env文件

vue中的几个.env文件，用来处理某些情况下不同环境需要不同的值比如：在某个商品在测试环境跳转的域名和正式环境跳转的域名就不同，这个时候就需要用到.env文件，这几个文件都放在package.json同目录下.env: 网上是说无论开发环境还是生成环境都会加载，这里我没用到，就不描述了.env.development: 本地开发环境(文件名也可以是.env.dev等，没有规定死)NODE_ENV=development #这里的NODE_ENV都要有，本地环境取值developmen，非

2022-05-07 12:00:19 3615

原创 WebSocket

WebSocket：也是一种协议，基于tcp协议，这里来和Http协议做一个对比场景：http或https协议只能用来从前端发送请求给后端，而当服务端需要主动给前端发送消息时就没办法实现了，如：聊天系统；如果使用http协议就只能实现发送消息，而不能接收消息（因为接收消息需要服务端主动发送，这时候就需要用到WebSocket来进行通讯了）websocket协议：ws://或wss://（区别一下http/https）方法：websocket协议有这么几个方法1、创建WebSock

2022-05-07 10:07:26 1856

原创 vue .env文件

.env文件的作用：当某个变量需要在不同环境下取不同的值时，可以使用.env进行配置.env相关的文件有好几个，这里主要用到2个：.env.development和.env.production默认情况下，npm run serve命令，对应的会取.env.development文件中的配置；npm run build构建生成的包，放到服务器去运行，会读取.env.production文件中的配置听说还可以通过--mode命令指定读取哪个配置，没去试过：在package.json中的script

2021-05-14 17:03:13 487

原创 vue中引入vue-xss

在写需求时，有输入框，因此需要处理下xss攻击的问题。它会帮忙过滤一些攻击的代码，下面是最简单的使用，不考虑设置白名单的情况1、下载依赖：npm install vue-xss --save2、main.jsimport VueXss from 'vue-xss'Vue.use(VueXss)3、使用在js中let message = xxxmessage = this.$xss(message)在html中<div v-html="$xss(message

2021-05-14 16:22:30 3017

原创解决移动端scrollTo({behavior: “smooth“})滑动效果失效的问题

js自带的scrollTo方法可以设置动画，滚动的效果，代码在电脑上正常，但是在手机上的时候就没有smooth的滑动效果了，只能僵硬的跳到某个位置，类似scrollTop赋值的效果，这里从一个博客看到的一个解决办法，试了下确实可以，所以记录一下：首先安装这个插件：smoothscroll-polyfillnpm install smoothscroll-polyfill --save然后引入并在组件创建的时候调用下这个方法：比如mounted中import smoothscroll fr

2021-05-14 16:12:29 7214 1

原创 vue实现：聊天记录，下拉加载下一页数据，并让页面停留在原位置

需要实现一个类似微信聊天记录的功能，其中碰到一个问题：下拉加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果。实现思路：1、首先，要实现让页面到某个位置，需要用到scrollTop属性；2、然后就需要计算scrollTop的值为多少，则滑动多少距离；3、计算滑动距离的思路：既然需要停留在当前位置的话，那么正常思考的话就是需要知道加载的这一页数据所占的高度，然后将scrollTop值设置为这个高度即可，但这里有个问题，即便每次加载

2021-05-14 15:43:37 7388 12

原创做聊天表情时，表情图片放在assets目录中，读取数组动态显示图片时发现图片显示不出来

问题描述：做聊天表情时，表情图片放在assets目录中，读取数组动态显示图片时发现图片显示不出来，但是如果是在src=""这里是写死的字符串是能显示的如下图：第一个img可以显示，第二个不行（变量的路径是没错的，一样的路径）<div class="face-item" v-for="(item,index) in emotionList" @click="clickEmoticon(item.src, item.sign)" :key="index" :title="item.desc"&g

2021-03-03 16:56:08 642 1

原创在＜pre＞元素作为输入框时，选择表情插入到输入框并将光标定位到表情后面

现在以pre元素作为输入框（通过contenteditable属性将pre元素变为可编辑输入框）<pre contenteditable="true" @click="inputAreaClick" @input="inputAreaInput" @keydown="inputAreaKeyEnter"></pre>实现：比如我要下面这样的内容，那么页面显示如下图2：步骤：这里的代码是适用于我这里的场景的，有些多余的代码，但思路是这个思路1 监听输入框的点

2021-03-03 16:21:51 1014 1

原创 vue中使用axios

1 安装依赖：npm install axios --save2 在需要使用的地方引入：import axios from 'axios'3 使用3.1 创建axios实例const request = axios.create({ // 每次通过request对象进行请求的时候都会在前面带/api这个路径,这里没有用"http://xx:8081/api"，是因为这里做了proxy配置代理，因为跨域了 baseURL: '/api', timeout: 600 /

2021-02-20 17:29:55 192

原创关于在vue中使用echarts时碰到的问题: Error Initialize failed invalid dom

今天在使用echarts时碰到的一个小问题，记录一下：首先，如何使用echarts：// 1：npm安装依赖npm install echarts --save// 2：引入echartsimport * as echarts from 'echarts'; // 注意：这里要 * as echarts 而不是 import echarts from xxx// 3：需要一个显示echarts的出口<div id="hello-world"></div>// 4

2021-02-07 17:45:56 26534 11

原创关于es6的export与import

在关于import导入的时候，碰到一点疑惑？看代码里，有的时候导入是：import XXComponent from './XXCiomponent.vue' (这是导入一个组件)有的时候是：import {a, b, c} from './xxUtil'就不太明白为什么有的时候要"{}"，而有的时候不用？查了下资料，理解如下：说到import，那么就要说到export，因为import导入的就是先要有export导出，看下面代码的export：// A模块导出export let

2021-02-07 14:01:29 189

原创 css布局

需要关注的一些点：1 display属性：元素都会有自己默认的display属性值，一般最多的是block和inline block: 一个块级元素会新开始一行并且尽可能撑满容器，如：p, form inline:一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局，如：span, a none:一些特殊元素的默认 display 值是它，如：script（把display设置成none元素不会占据它本来应该显示的空间）2 盒模型：当你设置了元素的宽度，实际展...

2020-12-22 16:28:08 91

原创 mac上安装git

首先，下面这段取自廖雪峰的官方网站：如果你正在使用Mac做开发，有两种安装Git的方法。一是安装homebrew，然后通过homebrew安装Git，具体方法请参考homebrew的文档：http://brew.sh/。第二种方法更简单，也是推荐的方法，就是直接从AppStore安装Xcode，Xcode集成了Git，不过默认没有安装，你需要运行Xcode，选择菜单“Xcode”->“Preferences”，在弹出窗口中找到“Downloads”，选择“Command Line Tool

2020-10-23 12:06:12 1235

原创在执行sentry-cli命令进行删除工件时，报错：Invalid token(http status:401)

问题：在执行删除sentry上某个项目的某个分支的工件时：sentry-cli releases files test@0.1.0delete --all提示需要提供组织org和项目project，于是我执行了：sentry-cli releases -o 组织 -p 项目 files test@0.1.0 delete --all报错了；Invalid token(http status:401)，意思是说token无效，但是我明明在上面先进行登陆了，而且登陆也成功了解决办法.

2020-10-16 11:04:27 3336 1

原创 vue转kbone

新建一个kbone项目将代码对应拷贝过去注：package.json: 依赖需要修改，将我们的依赖添加进去，有重复的删除我们这边的注意一个Bable的版本可能会产生冲突，将我们dependencies的"babel-loader"版本改成和kbone里面生成的同样的版本即可小程序中不支持<style scoped>？？突然会包缺少一个文件sitemap.json，之前没有这个问题，解决：在dist/mp下添加一个sitemap.json文件即可...

2020-09-16 10:32:03 644

原创 ios 屏幕滑动时z-index失效问题(android不会出现)

问题描述：为一块区域设置z-index值，让它在上面；如A区域是2，B区域z-index:3，A和B区域有部分重叠在android上运行时没有问题，但在ios上会出现一个问题：上下滑动的时候，发现A区域和B区域的重叠部分上面为A了原因：ios系统，当滑动屏幕时，z-index失效了，因此导致A-B区域重叠处B被遮挡了解决办法：添加如下：-webkit-transform属性允许我们对元素进行旋转、缩放、移动或倾斜，这里是进行移动，但距离都是0，即可解决问题原因暂时不明..

2020-09-07 11:25:19 972 1

原创 vue+elementUI(el-table)：分页修改数据源后，子组件的数据不刷新问题

问题：父组件中加载数据，部分数据传到子组件，通过子组件显示，切换页码之后，使用子组件显示的部分数据不刷新解决办法：类似v-for，给子组件加一个v-key，值唯一即可<el-table-column align="center" label="购买商品" min-width="100" fixed="right"> <template slot-scope="scope"> <item-info v-if="sco

2020-08-25 18:08:49 2114 2

原创 css均分成n列

方式一、floatHTML:<div class="footer"> <div class="tab" style="background-color: blue">首页</div> <div class="tab" style="background-color: red">缤纷活动</div> <div class="tab" style="background-color: green">我的</div&gt

2020-08-24 14:30:39 858

原创 vue(单页面应用)接入腾讯移动分析（这里只说创建完应用之后的代码相关内容）

由于单页面应用只有一个页面，路由到其他url时页面是不会刷新的，而腾讯移动分析默认情况下是自动上报，而是需要刷新页面才能记录到的，因此这里不能使用自动上报，修改下面截图所以的勾选项，去掉自动上报的勾选，即为手动上报(注意修改了这里，下面的统计代码也会相应变化，记得使用最新的统计代码)，下面都是基于使用手动上报的相关操作一、查看我的应用相关配置信息进入到应用管理->翻到最下面的配置指南，有一段统计代码（注：这段代码会根据你上面高级功能、可选功能的勾选相应的变化，记得使用最新的统计代码）二

2020-08-12 18:29:13 2037

原创 vue中实现日期显示格式化（按照指定的格式展示时间）

这里需要使用到一个插件：moment1 npm安装（--save表示保存到package.json中）npm install moment --save2 main.js中定义全局变量import moment from 'moment'Vue.prototype.$moment = moment3组件中的使用<div>开售时间{{$moment(startAt).format('YYYY-MM-DD HH:mm')}}</div> 就是这...

2020-07-27 15:13:29 4756

原创 vue中实现复制功能

这里使用到一个插件：clipboard.js，官网地址：http://www.clipboardjs.cn/1通过npm安装clipboard.js（如果要将插件添加到配置，则npm命令后面加上--save） npm install clipboard2在需要使用到复制功能的组件中引入：import ClipboardJS from 'clipboard';3...

2020-07-27 15:06:59 3461 1

原创 css 红点

html:<i class="reTip" v-if="shortcut.iconIndex === 2 && isShowRedDot"></i>css:位置不对调一下位置即可.reTip{ display:block; background:#f00; border-radius:50%; width:0.6rem; height:0.6rem; top:-0.2rem; right:-0.2rem; position:absolu

2020-07-27 11:33:54 1121

原创关于vue的keep-alive

一、keep-alive的作用： 1 具有缓存的作用通过在router.js中的meta配置中添加keepAlive:ture来指定对哪个组件进行缓存 2具体加了这个有什么影响？由于加了keepAlive:true，则该组件被缓存到内存中，那么其他的钩子函数都将不会再执行，除了activated(进来) 和deactivated(离开)，这2个会相应执行，这2个钩子函数是专门for keep-alive的，因此如...

2020-07-27 11:27:17 1102

原创使用cordova对vue项目进行打包(android)

说明：当前有一个vue项目，需要使用cordova进行打包环境条件：1 jdk-即Java运行环境这个很简单，百度一下就行，学过Java的话都有安装过jdk 检查电脑是否安装了jdk：win+R->输入cmd->回车进入黑窗口，输入javac->如果出现关于javac的帮助信息则表示已安装 2安装nodejs环境相信一般要打包vue项目肯定开始也是装了nodejs了查看是否安装了nodejs：node -v（如果出现了版...

2020-06-17 16:20:37 960

原创 typeoff的一些简单了解（instance的比较）

一、运算结果首先，typeof运算符判断完之后会返回一个字符串形式的类型如：let type = typeof 10; //"number"二、返回类型然后，说一下typeof运算符返回的类型有哪些？以下六种（其实就是5种基础类型(缺少null，因为null归于'object')+‘function’）1 number 数字2 string 字符串3 object 对象，null的返回值是object4 boolean 布尔值5 function 函...

2020-06-15 15:52:24 557

原创显示器没有按钮，调整屏幕亮度方法

网上下载这个软件：gamma-panel下载完解压即可，然后双击这个即可，然后可以鼠标调整亮度这个真的有效，显示里面的亮度已经调到最低了，但还是很亮，网上找了很多办法，都无效，最后这个软件可以，太难了！！，记录一下...

2020-06-12 17:58:50 3277

原创 es6整理

javascrip原有的表现集合概念的数据结构： Array-数组 Object-对象es6:四种集合概念的数据结构 Array-数组 Object-对象 Map SetIterator遍历器 1 提供一种通用的遍历不同数据结构的方法 2 拥有Symbol.iterator属性的数据结构，都可以使用for...of来进行遍历 3 原生具备Iterator接口的数据结构如下 3.1 Array 3.2 ...

2020-06-12 14:55:23 161

原创 vue中的computed和watch

<template><template>  <div id="app"> msg:{{msg}}<br/> msg2:{{msg2}}<br/> <button @click="setMsg()">执行方法改变msg</button> </div></template>&l

2020-06-12 14:42:38 112

原创函数参数的默认值与解构赋值的默认值

参数默认值可以与解构赋值的默认值，结合起来使用。function foo({x, y = 5}) { //这里定义了一个函数，参数为一个{}对象，没有默认值，只有解构赋值参数的默认值 console.log(x, y);}foo({}) // undefined 5foo({x: 1}) // 1 5foo({x: 1, y: 2}) // 1 2foo() // TypeError: Cannot read property 'x' of undefined上面代码只使用了对象

2020-06-11 16:12:48 1428 1

原创 vue组件之间的引用

有个App.vue，需要引入HelloWorld.vue的组件HelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }}</

2020-06-11 11:25:34 736

原创一个script标签引入js文件的问题

问题情况描述：定义了一个func函数，当点击按钮时触发，但是点击按钮时报错：func函数没有被定义代码如下：<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"/><script> function func(obj) { console.log(""); }</script>问题所在：引入js文件时，这里不能使用<script/&

2020-05-26 11:16:10 3456

原创 ActiveMQ

一、安装ActiveMQ官网下载ActiveMQ的压缩包，这里提供各个版本的下载页面地址：http://activemq.apache.org/download-archives.html每个版本分别有windows系统和其它系统的二、ActiveMQ相关目录和文件这里我自己主要接触到的是bin和conf目录bin目录下有一个win32和win64，分别试用与32位和64...

2020-03-26 11:14:38 111

原创 Redis的基本了解

Redis(NoSQL：not only sql:非关系型数据库) 1 redis是一个NoSQL的数据库，以键值对的形式保存数据 2 redis支持很多数据类型的操作，如：string（字符串）+hash（散列）+list（列表）+set(集合)+sorted set(有序集合) 3 redis的数据是存放在内容中的，所以执行速度快；但是可以以日志的形式存放在本地磁盘，所以也不会丢失 ...

2020-03-23 08:59:44 112

原创 BigDecimal基本运算（加，减，乘，除，比较大小，取余）

BigDecimal a = new BigDecimal(10);BigDecimal b = new BigDecimal(11);1 加 add()BigDecimal c = a.add(b);2减subtract()BigDeciaml c = a.subtract(b)3乘multiply()BigDeciaml c = a.multiply(...

2020-03-17 17:05:42 2497

原创 mysql中的datetime类型的比较

例如有一个user表如下：create table user( id int(11) primary key, name varchar(50) not null, age int(3) not null, create_time datetime not null);一、DATE()如需要查询近一个月新增的用户：select * from u...

2020-03-17 16:40:45 6272

空空如也

空空如也