- 博客(41)
- 收藏
- 关注
RSS订阅原创 【无标题】nodejs+mogoodb数据库写注册接口
这里主要介绍mogoodb数据库的连接与操作命令，对于项目其他文件就不在赘述，主要讲解有关连接mogoodb数据所涉及到的文件。1、打开cmd,输入mongod启动数据库（请不要关掉黑窗口）1、重新打开一个新的cmd，输入mongo（请不要关闭黑窗口）
2024-04-07 16:38:54
712
原创 gitee创建仓库
本文章记录了怎么在gitee上创建项目，以及使用vscode提代码到远程呢个仓库，如何创建一个新分支，并将新分支提交到远程仓库。
2024-01-02 17:35:43
2232
1
原创 使用css让图片无限循环旋转360度
本文章小小记录了使用animation属性来设置动画的效果，这里主要讲述如何让一张图片以图片中心为轴旋转360度。以下为实现的一些代码示例。
2023-12-15 11:28:10
2327
原创 前端学习之小技巧----快速通过vscode打开项目
3、在黑窗口中输入code . 然后回车，这时就会打开vscode，此时项目就被打开了。比如，我这里的根目录是：‘D:\myData\vue\vue-admin’；2、在项目的根目录下的地址栏中输入cmd，并回车，就会弹出黑窗口。1、首先进入到项目的根目录。
2022-11-27 23:20:20
9256
1
原创 使用jq实现tab栏切换功能，并且展示对应的内容区域
描述当点击tab栏时实现切换tab栏，并且显示对应的内容区域，比如tab栏中有a、b、c。当点击a时内容部分展示的是a对应的内容，当点击b时，内容部分展示的是b对应的内容。思路首先说一下html的布局划分，把整体划分为头部为tab部分，底部为内容部分;默认展示第一个，其余内容都隐藏，当点击tab中的某一个时再让对应的内容展示出来；接着给tab中的a、b、c添加一个自定义属性type,这里的属性名可以随意取，属性值从0开始依次往后排，然后给tab中的a、b、c添加点击事件，在点击事件里获取当前点击的那个
2022-05-31 16:58:48
1129
原创 vue中实现通过循环渲染精灵图
描述通过循环语句将精灵渲染到对应的位置。思路首先计算一个图的宽，然后计算每个图之间的距离，将这两个距离相加起来就是下一个图的位置，这里我多实现了当鼠标滑入时修改另一个精灵图的效果，鼠标划出又显示回原来的图。HTML代码<template> <div class="content"> <div class="box" v-for="(i,index) in 6" :key="index" @mouseover.prevent="over(index)" @m
2022-02-16 17:46:41
922
原创 vue3中引入element ui组件
1、安装npm install element-plus --save2、在main.js中引入import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'app.use(ElementPlus)3、在页面中使用组件<el-button type="primary">主要按钮</el-button>...
2022-01-29 17:22:18
1491
原创 webstrom中创建本地分支
本地创建一个分支：1、点击VCS—>Git–>Branches2、点击New Branch3、查看新建的分支（这里新建的分支为ksd_3.4.5）4、将本地分支推送到远程仓库git push origin ksd_3.4.55、.将本地分支切换到组分支或者其他分支，保证当前分支不是最新分支就行6、把本地新建的分支删除7、拉取远程的分支（ ksd_3.4.5）8、在本地仓库中将分支从主分支切换回新建的分支，并在此分支开发...
2021-10-22 09:17:05
606
原创 vue项目，实现腾讯云上传图片
准备事项通过npm i cos-js-sdk-v5下载cos-js-sdk-v5，然后在做图片上传的组件里，通过import COS from 'cos-js-sdk-v5'引入cos-js-sdk-v5.前端部分解析：这里使用的是element ui 中的上传文件的组件，action表示上传的地址；http-request表示覆盖默认的上传行为，可以自定义上传的实现，类型是function,所以这里的uploadimg是函数；limit表示最多能传多少张图片；list-type表示文件列表的类型；o
2021-08-28 12:43:30
927
1
原创 vue项目中，在input框中输入数字，向数组中添加对应数字的对象个数
描述标题写得不是很明白，结合以下的效果图，在这里描述一下这个功能，当在input框中输入数字几，下面就会产生多少条数据（这里输入数字2，下面产生两条数据，下图中的每一行为 一条数据）。实现的思路1、在input框中绑定回车事件和得焦事件，并且使用v-model绑定一个变量PepNumber，该变量用于绑定input框中输入的值；2、将下面的每一条数据定义为对象obj；3、定义一个变量PepoleNumber，该变量为数组类型；4、在每一条数据的最外层div中绑定定义的那个数组类型的变量；5、
2021-08-27 11:03:11
2688
原创 vue项目中添加水印
需求在vue脚手架创建的项目中，实现项目中的每个页面都显示水印，水印的内容是登录人的名字以及电话号。最终实现的效果图如下实现过程1、下载：warterMark.js文件，并在项目的工具文件夹中存方warterMark.js文件。我存放的目录如下图。2、在App.vue中：（1）、引入warterMark.js文件import Watermark from '../../communitycss/src/assets/utils/warterMark'//注意这了的路径是你自己存放warte
2021-08-19 10:44:35
1212
原创 echarts实现词云
最终效果图实现思路：1、前端引入echarts.min.js和echarts-wordcloud.js实现：前端代码：<body> <section class="mainBox"> <div class="column"> <div class="panel bar"> <h2>词云</h2> <div class="char
2021-08-17 18:55:01
1551
原创 导出文件，导出为Excel文件
1、安装依赖包npm install -S file-savernpminstall -S xlsxnpminstall -D script-loader2.在项目中新建文件夹vendor（名字可以随便取）：把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内<el-button :loading="downloadLoading" class="filter-item" type="info" icon="el-icon-download" @click="h
2021-08-02 11:08:09
153
原创 pc端实现联级选择功能
1、联级选择描述：选择省后，市的数据才回出现，不选择省，市的数据就为空（2）api接口如下，通过pcod参数就能查找市的数据实现：思路：1、在选择框中绑定change事件，用来做连级的事件；2、在mounted中调用接口，获取省的所有数据，然后渲染到页面上；3、在change事件的函数中，调用原来获取省数据的接口，然后传入pcode参数来获取对应的市的数据<table> <tr v-for="(item,index) in list" :key
2021-08-02 10:49:19
454
原创 uni-app小程序，将base64图片保存到本地相册
描述在做项目时，通过填写个人信息，生成一个二维码，现在要求将生成的二维码保存到本地，当点击图片上面的“保存到本地"时，就会将图片保存到本地相册里实现过程下面代码中的picUrl是base64格式的，需要将前面的”data:image/png;base64“这一段去掉，才可以使用接下来调用的apisaveBase64Img(){ console.log("picUrl") console.log(this.picUrl)// let base64=this.picUrl.re
2021-07-28 17:56:45
3255
2
原创 uni-app小程序，实现根据中文首字母排序功能
描述：从后端调用接口获取所有热的姓名，将这些名字的首字母排序，然后放到对应字母下面，最终效果图如下：实现过程**总体实现的思路是：**首先调用接口，获取所有员工的姓名以及其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“张三” 转为“ZS”）这里只需要名字的第一个字的首字母，使用js的截取功能就能实现，中文转拼音这里我使用的是js-pinyin，将转换好的内容渲染到页面上。1、下载js-pinyin包npm install js-pinyin2、在mai
2021-07-28 11:28:18
5029
1
原创 uni-app实现多图片上传
html <!-- 上传图片 --> <view class="Voice_input"> <text class="Voice_title">上传图片:</text> <view class="Image_box"> <div class="box" v-for="(item,index) in totalImg" :key='index'> //选择图片后回显的图片 <
2021-07-15 23:57:04
6145
1
原创 uni-app实现微信小程序长按拍视频的功能
html<!-- 上传视频 --> <view class="Voice_input"> <text class="Voice_title">上传视频:</text> <view class="" > <view class="video_image"> <view class="video_box" v-for="(item,index) in videoSrc" :key='ind
2021-07-15 23:47:21
1508
2
原创 uniapp微信小程序实现按住说话功能
前端页面布局代码描述：@longpress是uniapp的事件，长按时触发的事件，@touchend事件可以监听松开按钮时触发的是。 <!-- 上传语音 --> <view class="Voice_input audiodiv" > <text class="Voice_title">语音输入:</text> <view class="Voice_Btn"> <!-- <view class="sp
2021-07-15 23:36:24
3743
1
原创 uniapp微信小程序分包
描述本篇文章主要讲解uniapp开发微信小程序时的分包过程。这里使用的案例是工作时的一个项目，这里我分了三个包，分别为：Personal、Property、Community，分别表示小程序tebar对应的三个页面，每个包下面有相应的其他页面。目录结构pages目录下面存放的是三个底部导航栏的页面和登录页面操作进行分包相关的配置。点击mainfest.json文件，接着点击源码试图，然后将添加截图中的代码。2"app-plus": { "optimization": { "s
2021-07-15 19:25:14
478
原创 微信小程序生成二维码
描述：根据访客的基本信息生成二维码，当点击生成生成访客码时跳转到二维码页面实现：1、在生成访客页面，点击按钮调用接口获取生成二维码的内容，并将它保存到Storge中 wx.request({ url: '',//url后端地址 method:'POST', data:{ userName:this.data.userName, phone:this.data.phone, content:t
2021-06-28 11:53:09
3561
原创 微信小程序多图片上传功能
前端页面布局： <!-- 上传图片 --> <!--miniprogram/pages/fb/fb.wxml--> <view class=' ImgeContent'> <view >图片上传</view> <!-- 图片 --> <view class="images_box"> <block> <view class="img-v
2021-06-28 10:15:30
130
原创 将代码推送到gitee上
首次推送注册账号创建gitee仓库在项目的根目录下打开gitbushgit配置设置（第一次使用必须配置）git config --global use.name “git账号”git config --global user.email “email”初始化仓库git init将所有本地文件放到暂存区git add .把本地文件放到本地仓库里面git commit -m “提示语”与远程仓库建立连接git remote add origin "
2021-06-26 14:12:43
765
原创 原生微信小程序class绑定
描述：根据后端返回来的数据，判断列表页某一条数据是否置顶，如果置顶，则显示icon小图标，点击置顶消息跳到详情页，在详情页里显示icon和时间。这里对详情页的icon和时间显示位置做讲解，因为我使用的是flex布局，我给每一条数据都设置了justify-content: space-between,但问题是在没有icon的那些数据，使用justify-content: space-between,时间放的位置就在左边了,最终要的效果是无论是否置顶，时间的位置都显示在右边。所以我这里使用到class绑定没
2021-06-17 15:23:11
851
原创 微信小程序列表页跳转到详情页
描述:从列表页,点击不同列,跳转到相对应的详情页,在跳转的过程中需要传递id给详情页.思路:列表页中,在.wxml页面里,在列标签上自定义一个id属性和一个点击事件;点击的时候触发点击事件 ,在.js文件中从这个点击事件的形参event中可以获取到自定义的id,使用wx.navigateTo({})实现路由跳转,在要跳转的路由后面用?号拼接id,将id传给详情页.在详情页调用详情页的接口就可以实现了实现过程:列表页:.wxml页面:定义一个点击事件和自定义一个id属性,这里的id属性名是data-p
2021-06-02 14:58:50
3345
原创 微信小程序progress组件实现动态进度条
描述：使用微信小程序中的组件progress组件，实现动态的进度条，每秒进度条向前一点，知道100%。当给progress组件加上active时，每次进度条向前加1时，所有之前的的进度都会重新刷新。 show-info表示显示百分比，具体效果请自行尝试。实现前端代码：<progress percent="{{deflautWidth}}" color="pink" bindtap="progress" stroke-width="15" show-info />实现js代码： da
2021-05-20 14:34:22
3577
1
原创 css给按钮设置背景透明但是边框和内容不透明
描述：给按钮设置为圆形，并设置背景透明，边框和内容不透明。最终效果图如下：实现思路：给按钮设置宽高，设置为圆形，给按钮加边框，然后设置按钮的背景透明度为0实现代码如下：.videBtn{ position: absolute; top: 136%; left: 37%; width: 200rpx; height: 200rpx; border-radius: 50%; font-size: 30rpx; color:green ; line-height: 1
2021-05-19 19:31:37
2540
原创 Vscode设置简体中文
描述：在第一次使用vscode的时候，显示的是英文的，为了方便后续的使用，将vscode设置为中文状态。实现步骤如下：找到chinese后点击install,然后重启vscode就可以了。
2021-05-07 09:39:19
237
原创 通过axios发起登陆请求
前言：本片文章是实现登陆的请求来实现登陆，使用axios来发起请求，请求的是数据库中的数据，使用vue脚手架搭建的项目，页面布局使用的是element ui,思路：通过axios发起请求，判断statu状态码是否为200，为200则说明登陆成功，反之登陆失败。实现过程如下：1、首先在main.js中先全局引入axios2、在methods中发起请求注：（1）通过axios发起请求，打印congsole.log(result)，返回的数据是promise的，如果某个方法的返回值是promise，
2021-04-24 00:33:00
1437
原创 表单预验证
前言本篇文章写的是在登陆前对表单的预验证，使用到的是element ui 中的表单组件.在表单中有一个validate函数可以进行表单验证。实现过程如下：一、给登陆按钮加点击事件二、通过ref来获得e-form对象三、在methods方法中写入一下内容这里返回的valid是布尔值四、校验结果校验失败的效果：校验成功的效果图：...
2021-04-23 23:40:46
205
原创 登陆页面的重置功能
前言本章是写关于登陆页面中的重置功能，即点击点击“重置”按钮，将用户名，密码重置。这里登陆页面使用的是element ui中的表单（e-form）来实现。实现思路：在element ui中的form表单中提供了一个resetFields方法可以实现重置，只要获取到表单的实例对象，通过表单的实例对象来访问resetFields，就能实现重置；问题：那如何来获取表单对象呢？答：在e-form标签中的ref就是指的是表单对象。实现过程如下：一、给重置按钮添加一个点击事件二、在e-form标签中写入re
2021-04-23 22:57:13
1390
原创 node下的定时任务
一、采用node-schedulenpm install node-schedule --saveschedule.scheduleJob(A,B)scheduleJob 方法接收2个参数, A 为日期规则 (多长时间执行) B 为回调方法 (当日期符合条件时,将要做什么)先来看下参数 A :##六颗星方式‘* * * * * *’┬ ┬ ┬ ┬ ┬ ┬│ │ │ │ │ |│ │ │ │ │
2021-04-21 10:21:24
722
原创 登陆注册的原理分析
登录/退出功能 黑马程序员3.1登录概述1.登录业务流程（1）在登录页面输入用户名和密码调用后台接口进行验证（2）通过验证之后，根据后台的响应状态跳转到项目主页2.登录业务的相关技术点http 是无状态的通过cookie 在客户端记录状态通过session 在服务器端记录状态通过 token 方式维持状态...
2021-04-21 00:45:54
1518
原创 白板功能的实现
前端页面布局 <div id="whiteboard" style="width: 400px; height: 300px;">111</div> <!-- 新加入代码开始 --> Room UUID: <input id="room_uuid" type="text" size="32"></input> Room Token: <input id="room_token" type="text" size="32"&g
2021-04-18 10:55:26
1032
原创 点击下载按钮，调用接口，并显示进度条
功能：点击“下载”按钮，调用接口，实现下载功能，并可以实现显示进度条html代码如下：methods函数中的内容：
2021-04-07 15:38:44
725
原创 vue项目中打印功能的实现
这篇文章是一个关于前端打印报表功能的实现，前端小白，如有问题多多指教，大佬勿喷！！！！案例描述：点击打印按钮，调用浏览器打印功能，实现打印报表。一：以下是前端布局页面 <!-- 打印报表的弹框内容 --> <el-dialog title="报表打印" :visible.sync="dialogVisible" width="70%" :before-close="handleClose"
2021-03-27 10:28:53
945
4
原创 mongodb的安装过程
8、mongodb的安装1、点击next2、打上对勾，然后点next3、随便选一个,然后点next4、把对勾去掉，然后点next5、去掉对勾，然后点next6、点击install7、点击finish8、打开cmd,并输入mongod如果出现"不适内部或外部命令",则说明需要配置环境变量配置环境变量的步骤如下1、找到该文件2、3、4、5、6、进入到bin 里面后，在地址栏中复制该路径7、选中计算机，右键找到属性，并点击属性8、点击高级系统设置9、
2020-11-17 19:24:45
257
原创 运行git push origin master报错
报错内容：$ remote: Permission to 123xiaowang/ty2004.git denied to wjr990218.$ git push origin masterfatal: unable to access ‘https://github.com/123xiaowang/ty2004.git/’: The requested URL returned error: 403bash: $: command not found翻译： 我们来大致的翻译一下这个错误：用户&
2020-11-08 16:24:52
401
原创 css3实现三角形和实现扇形
css3实现三角形 .box{ width: 0px; height: 0px; border: 10px solid transparent; border-top-color:red; }代码解释：1）border-top-color：表示三角形向下2）border-bottom-color ：表示三角形向上3）border-left- color ：表示三角形向右4）border-right-color ：
2020-11-05 08:57:54
260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人