- 博客(52)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Vue项目更改为local以及Network启动
compilationSuccessInfo: { messages: [ `App runing at: `, `Local: http://localhost:${port}`, `Network: http://${require('ip').address()}:${port}`, ] },
2021-06-21 20:16:09
3560
原创 MongoDB数据库设置密码
线上MongoDB数据库不设置密码的时候，很容易使数据丢失，这时如果本地没有备份的话，数据有很重要的话，那你就只能凉凉了一般安装MongoDB数据库并不会自动为你设置密码，这时候就需要你自己来操作了创建管理员用户 use admin //默认是没有这个数据库，use会帮我们自动创建这个数据库创建管理员账户 db.createUser({ user: "yourname", pwd: "password", roles: [{ role: "userAdminAnyDatabase",
2020-08-31 09:47:28
1403
原创 react纯函数组件useState更新页面不刷新
问题描述：const [textList, setTextList] = useState(原数组);setTextList(新数组);当修改原数组时，如果原数组是个深层数组（不只一层），使用setTextList修改时，不会触发页面刷新原因分析：这个涉及到可变对象he不可变对象的知识，在vue和react中，如果更新可变对象时，可能会引起视图更新，这是因为，vue和react默认都是浅监听，只会监听数据的第一层，内层数据发生改变，并不会监听到。解决方案：这里我的解决方案是，先将原数
2020-08-30 13:59:11
10754
4
原创 react兄弟组件传值实现注册成功带值跳转登录
项目场景：有些项目要实现注册完成后跳转到登录，并且携带注册的手机号效果展示：下面来看一下效果演示：解决方案：先模块化拆分，将注册和登录拆分成两个组件，然后利用利用了传值，看代码：//组件拆分，父组件的内容state = { activeKey: "1", mobile: ""}//修改父组件选项卡函数changeActiveKey = (value) => { this.setState({ activeKey: value
2020-08-29 10:01:28
409
原创 js数组去重的常用方法
借助新数组去重（最简单的方法）var arr = [1,1,2,1,3,2,1,1,5,6,8,9,6];var arr1 = [];arr.forEach(item=>{ if(arr1.indexOf(item)<0){ arr1.push(item) }})console.log(arr1)Es6新方法Setvar arr = [1,1,2,1,3,2,1,1,5,6,8,9,6];function deduplication (arr) { /.
2020-08-21 09:55:00
138
原创 swiper实现影院轮播效果
首先看效果：主要是使用在移动端，用的是Vue框架：<swiper :options="swiperOption" touch-action: none> <swiper-slide v-for="(item, i) in films" :key="i"> <div style="text-align:center" @click="changemovie(i)"> <van-image width="90" height="130" :
2020-08-20 10:10:00
511
原创 前端数据处理的一些常见操作
var json={};for(var i in data){var node=data[i];if(json[node.name]){json[node.name].push(node);}else {json[node.name]=[node];}}console.log(json);
2020-08-19 16:10:56
423
原创 前端es6使用require引入图片
1、直接写成静态的是没有问题的var imgUrl = require('../images/001.png');2、如果你想动态的引入图片，就会报错var ImgSrc = "../images/001.png";var img = require(ImgSrc)因为require是打包工具所需要的标识，你写成运行时通过变量定义，是无法获取到，没办法打包。3、require()写入的必须是path 1. var imgSrc = "001.png";require("../../ass
2020-08-18 20:20:53
6539
原创 React组件通信（父传子、子传父、兄弟传值）
1、组件传值之父传子先看演示，react里面的父子组件传值可以通过props来实现达到修改子组件里面的值父组件代码：通过props可以实现在子组件里面接收父组件的值，修改父组件的值，可以实现修改子组件里面的值2、组件传值之子传父看演示：子传父也是通过props来实现的，父组件通过props传递一个能修改自身数据的函数给子组件，子组件接收该函数，并且执行该函数，就可以实现子组件通信父组件的效果。父组件修改自身数据函数：子组件通过props接收父元素的方法子组件执行传递过来的函数
2020-08-13 19:45:24
401
原创 Vue之路由导航（路由守卫）
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航1、全局前置守卫使用 router.beforeEach 注册一个全局前置守卫const router = new VueRouter({ routes // (缩写) 相当于 routes: routes})router.beforeEach((to, form, next) => { //to即将要进入的目标 路由对象 next(); //from当前导航正要离开的
2020-07-29 08:27:22
261
原创 Vue之路由详解
1、路由传参参数可以分为；查询参数和路径参数<router-link to="/user?username=XXX&pass=123">Go to user</router-link>//使用$route.query来获取<router-link to="/user/123">Go to user</router-link>//需要先在路由定义中定义<script> var routers = [ { .
2020-07-28 20:51:18
105
原创 Vue之组件分发
当写Vue项目的时候，会把所有的组件进行拆分，根据需求来引入对应的组件，也就是模块化开发。1、模板定义插槽<template id="headers"> <!-- 模板里面定义插槽，只能有一个外部元素--> <div> <div style="border:2px solid green;width:70%;"> <slot name="header"> &
2020-07-28 19:35:33
358
原创 Vue之组件切换
先看效果：两种方法：1、使用v-show来实现组件切换<button @click="flag=!flag">{{flag?"列表":"表格"}}</button><showtable :list="list" v-show="flag"></showtable><showlist :list="list" v-show="!flag"></showlist>//利用v-show的显示隐藏来实现列表和表格之间的切换/
2020-07-28 19:26:55
537
原创 Vue路由创建步骤
路由创建大致分为6步：定义组件：代码示例：<template id="user"> <div> <h2>user------user------user</h2> <h3>path-------{{$route.path}}</h3> <h3>query-------{{$route.query}}</h3> <h3>p
2020-07-27 21:36:39
320
原创 Vue组件传值（父传子，子传父，兄弟相传）
1. 组件传值之父传子父子之间的传值比较简单，父传子直接通过props来进行传值，在子组件中要定义对应的prop来获取父组件的值。代码：<childredone @changeparent="changemsgg" :handler="num" :strings = "msg" ></childredone>props:{ handler:Number, strings:String},2.组件传值之子传父
2020-07-27 21:19:40
386
原创 ajax、fetch、axios使用方法
jquery ajax 来请求数据$.ajax $.get$.post$.put$.delete$.load $.ajax({ url, timeout, // 超时 beforeSend, // 发送之前 dataType, // 返回数据格式 type, // 请求方式 data, // 参数 headers, // 请求头 success, ..
2020-07-24 19:02:28
905
原创 Vue自定义指令实现拖拽效果
Vue提供了自定义指令的方法，使得功能更加丰富，现在就用Vue提供的自定义指令实现拖拽。先看效果：自定义指令，可以实现指令的复用，上代码：Vue.directive("drag", { //指令的名称 inserted: function (el, binding) { //当被绑定的元素插入到 DOM 中时 el.style.position = "absolute"; el.style.left = binding.arg.left + "px";
2020-07-24 16:24:52
861
原创 Vue获取表单的值
Vue自带一个特别神奇的指令，v-model可以实现表单元素的值得双向数据绑定，举个例子：<input type="text" v-model="msg"><p>{{msg}}</P>当改变input的值，对应的p标签的值也会发生改变，修改p标签的值，input里面的值也会发生改变。<div id="example-3"> <input type="checkbox" id="jack" value="JACK" v-model="ch
2020-07-24 08:14:34
3824
原创 Vue结合animate动画库实现选项卡
先看效果：利用animate的动画效果实现，看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <script src=
2020-07-23 20:41:20
396
原创 Vue实现留言板功能以及原生js实现留言板对比
先看效果：原生js实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>留言板</title> <style> .box{
2020-07-22 20:15:51
543
原创 nodeJs操作MongoDB数据库
MongoDB数据库操作简单，使用方便，对于数据的操作十分方便，查询的数据也是能够很好地实现前后端的数据传输。1、导入操作MongoDB数据库的模块,再利用MongoDB数据库操作有promise的特性，将对于数据库的操作封装成一个函数function mongo() { var mongoDB = require("mongodb").MongoClient; var mongoUrl = "mongodb://localhost:27017/"; return new Pro
2020-07-22 19:49:03
250
原创 nodeJs操作mysql数据库
nodeJs操作数据库都需要引入对应的数据库操作模块。1、操作mysql数据库：const mysql = require("mysql");const connection = mysql.createConnection({ host: 'localhost', //地址 user: 'root', //用户名 password: '', //数据库密码 database: 'class', //数据库名 multiple
2020-07-22 19:35:53
884
原创 基于nodeJs的websocket模块实现即时通信
服务器端 socket 功能1、创建 服务器 绑定 IP + 端口 监听端口2、监听 客户端的链接3、监听 客户端发来的消息4、把来自客户端的消息 广播给其他的在线客户端5、监听 客户端的关闭客户端 socket 功能1、创建 客户端 socket2、连接服务器 的 socket3、发送消息 给 服务器4、接收服务器发来的消息5、监听 服务器 关闭 或者 异常前端代码实现：<!DOCTYPE html><html lang="en"><head&
2020-07-22 19:15:50
300
原创 gulp常用操作大全
1.gulp的基本介绍Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js是基于Node.js构建的，利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。Gulp.js源文件和你用来定义任务的Gulp文件都是通过JavaScript源码来实现的2.gulp的安装gulp使用基于node环境，安装使用gulp前需要安装node（node的安装和使用详见day33的内容）npm(cnpm) i gulp-cli -g 命令全局安装gulp
2020-07-22 19:02:27
310
原创 git常用操作指令大全
Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。1.设置个人账号信息git config --global user.name “Your Name”git config --global user.email “email@example.com”2克隆git仓库git clone3将文件加到版本库管理暂存区(stage)git add (file|.|-A) //file表示文件 .表示当前文件夹(包含子文件夹)的所有未被管理的文件
2020-07-22 18:59:26
139
原创 如何判断一个时间是否在某一个时间段内
输入一个时间，以及起始时间和结束时间，即可判断出是否在此时间段内：function isTimes(nowdate, startdate, enddate) { var nowdate= new Date(nowdate); var startdate = new Date(startdate); var enddate = new Date(enddate); var a = nowdate.getTime() - startdate.getTime(); var
2020-07-22 18:04:28
3350
原创 使用nodeJs的express框架实现图片上传
在开发项目过程中，少不了上传图片，可以通过form表单上传图片，前端代码： <form enctype="multipart/form-data" id="form1" method="POST" action="/upload"> <input type="file" id="instructions" name="instructions" multiple="multiple"> <button type="submit">提交</butto
2020-07-22 13:56:44
634
原创 使用nodeJs获取不到mongoDB数据库返回值解决方法
nodeJs获取mongoDB返回的所有值，但是无法获取特定值原因：nodeJs设置的数据库模型Schema类型不对，导致无法获取到指定的值。解决方法案：var movieSchema = new Schema({ genres:Array, casts:Array, directors:Array, title:String, rating:Object, collect_count:Number, original_title:String, subtype:Str
2020-07-22 13:18:58
825
原创 MongoDB数据库常用操作（增、删、改、查）
数据库操作无非是：增、删、改、查增db.userinfo.insert() //db+表名+insert({}或者[])可以实现插入一条数据或者多个数据，多条数据要用数组方式插入db.userinfo.insertOne() //只能插入一条数据,并且是对象型数据db.userinfo.insertMany() //数据只能接受数组db.userinfo.save() //此方法与insert方法类似 对于MongoDB的插入操作，使用最多的就是insert()
2020-07-16 13:17:08
1577
原创 nodeJs读取图片加载到前端Content_type如何设置
在使用nodeJs过读取图片加载到前端页面时，总是无法正确显示图片，而是下载图片主要是content-type设置的不正确：正确写法res.writeHead(200, { "content-type": "image/jpeg"})错误写法res.writeHead(200, { "content-type": "images/jpeg"})第一种写法会正确展示图片，第二种写法会下载图片...
2020-07-15 17:46:22
1045
原创 nodeJs实现简单爬虫
一、导入基本模块首先，先是导入内置http模块，导入cheerio模块，利用jq操作dom，看需求，导入fs文件操作模块，或者是querystring模块，写入数据库。二、利用nodeJs的http模块里面的get API三、将请求到的数据存入数据库或者写入文件，下面演示写入文件操作因为，此时请求到的数据是整个网页源代码，所以，我们需要利用cheerio模块里面的jq方法提取出自己需要的数据来写入数据库，或者文件。四、源码展示const http = require("http");co
2020-07-14 20:52:33
577
原创 nodeJs请求中常见错误
错误实例：今天测试nodeJs请求时，提示出现此错误，整了半天，硬是没解决，上图片：最后才想起来地址栏里面中文需要转成url能识别的编码，js解决方案：就是加上一句话，将中文转化为url编码，让浏览器能够识别。...
2020-07-14 17:10:56
626
原创 原生js实现弹出层
利用原生js的元素创建、添加，手写一个弹出层话不多说，先上效果：可以设置弹出层的类型、宽度、高度、标题、内容区。弹出层默认为1，不自动消失的当初层，类型为2时，默认3s关闭的提示框。layer.open({ tittle:"提示框", type:2, content:msg, width:300, height:200, time:2000})content可以存放字符串以及dom元素。...
2020-07-07 20:07:09
1384
原创 Promise实现红绿灯
生活中常见的红绿灯利用js实现主要是利用的promise的异步来实现功能那个。function change(div){ return new Promise(function(resolve,reject){ setTimeout(function(){ resolve(div); },1000) })}利用promise来实现延迟操作修改每个灯的颜色：function changeColor(div,color){ divs.forEach(item=>{
2020-06-20 13:45:33
671
原创 三级联动（美化版）
话不多说，先上图演示：数据来源都是网上的那些免费的API地区接口先将直辖市和特别行政区进行整合，生成新的数据将这些省会渲染出来再根据省会渲染出城市根据城市渲染地区没有定位，所以利用随机数，来随机出了省会，再根据省会里面的城市，随机出城市，再根据城市里面的地区，随机出默认的地区数据整合成直辖市和特别行政区，上代码：function checkList(list){ var arr = [],arr1=[]; for(var i = 0;i<4;i++){
2020-06-20 13:21:56
169
原创 js中有趣又常用的函数封装
下面介绍一下那些前端比较常用的函数：随机数（在指定范围内）function randoms(max,min){ if(min===undefined) min=0; return Math.floor(Math.random()*(max-min)+min); } randoms(10,2); //8可以随机到指定范围的数字随机颜色function randomColor(){ var col="#"; for(var i=0;i<6;i
2020-06-19 21:17:19
255
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人