功能案例
关注
分享
扫一扫
工作中常用的一些功能案例
yingxingyf
热爱前端，每周三篇博客总结记载
展开
-
vue实现全选，反选，全不选功能？
<template> <div> <button @click="checkAnti">反选</button> <button @click="checkAll">全选</button> <button @click="checkNone">全不选</button> <input type="checkbox" value="" v-model="inputAll" @click="che原创 2022-01-06 10:46:58 · 746 阅读 · 0 评论 -
日期函数格式转换
data.jsconst localTime = function (date) { const D = new Date(date); const y = D.getFullYear(); const m = D.getMonth() + 1 < 10 ? ('0'+(D.getMonth() + 1)) : D.getMonth() + 1; const d = D.getDate() < 10 ? ('0'+D.getDate()) : D.getDa.原创 2021-08-19 11:04:28 · 178 阅读 · 0 评论 -
省市区联动数据
provinceList.jsconst provice = [ { "areaId":"11", "areaName":"北京市", "children":[ { "areaId":"1101", "areaName":"北京市", "children":[ { .原创 2021-08-19 11:02:39 · 467 阅读 · 0 评论 -
封装函数baseData.js
import axios from 'axios'import store from '../store'import {location} from "./locationFn";let getCookie = (name) => { let arr, reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)') if (arr = document.cookie.match(reg)) { return unesca原创 2021-08-19 10:59:25 · 154 阅读 · 0 评论 -
前端get,post,put,delete,update,patch,请求封装。
baseApi.jsimport axios from 'axios'// axios.defaults.crossDomain = false;// axios.defaults.withCredentials = false; // 设置crose， 访问权限，允许携带cookie// post 新增 get 拉取 put delete 删除 patch 更新// 添加有ajax请求就显示模态框export const downloadFn = (url, params,showL.原创 2021-08-19 10:56:59 · 1284 阅读 · 0 评论 -
JavaScript长时间未操作自动退出登录
主要是通过mouseover 来监听有没有进行当前页面操作，通过未操作时间和设定退出的时间做比较，从而退出登录。var oldTime = new Date().getTime();var newTime = new Date().getTime();var outTime = 8 * 60 * 1000; //设置超时时间： 8分钟$(function(){ /* 鼠标移动事件 */ $(document).mouseover(function(){ oldTi.原创 2021-08-19 10:40:24 · 2161 阅读 · 0 评论 -
登陆状态如何管理？登录流程？
1.初次登录前端：1.将正确的用户名和密码（md加密或者rsa加密）传给后端。后端：2.生成当前用户对应的唯一id（token),保存cookie,并且设置与前端共享。这样在接口请求成功响应时头部就会告诉前端浏览器要设置一条当前登录用户对应的id(token)。3.后续所有接口请求前端头部都会携带当前用户的id(token),这样后端就知道是登录状态下，且是哪个用户在请求接口。前端：4.登录接口请求成功后保存当前用户信息到window.localStorage,（看下有没有返回token,）有的话原创 2021-06-10 11:19:24 · 914 阅读 · 0 评论 -
React+React16+Router4+jquery+bootstrap登录功能
1.login文件下index.js(登陆组件)/** @Author: YangXing* @Date: 2018-01-25 17:37:22* @Last Modified by: YangXing* @Last Modified time: 2018-01-26 12:29:31*/import React from 'react';import MUtil from 'util/mm.jsx'import User from '原创 2021-06-09 16:56:42 · 246 阅读 · 0 评论 -
全站http配置函数封装、get,post,delete,update请求函数封装（axios请求拦截，响应拦截）
1.axios.jsimport axios from 'axios'import {Message,Loading} from 'element-ui'import api from "@/api/api";import NProgress from 'nprogress'import 'nprogress/nprogress.css'NProgress.configure({showSpinner:false})let timeRange = [0,];let loadingInsta原创 2021-06-09 15:47:08 · 474 阅读 · 0 评论 -
纯html+css+js实现楼层跳转
代码实现以及注释<!DOCTYPE html><html><head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: none.原创 2021-05-25 11:03:12 · 348 阅读 · 0 评论 -
纯html+css+js实现楼层跳转
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼层跳跃</title> <style> * { padding: 0; margin: 0; } .原创 2021-05-25 10:58:38 · 750 阅读 · 0 评论 -
原生js如何做拖拽_javascript的拖拽怎么做？可拖拽的窗口（div）
原生js如何做拖拽_javascript的拖拽怎么做？可拖拽的窗口（div）<!DOCTYPE html><html id="hId"><head><meta charset="UTF-8"><title></title></head><style type="text/css">*{margin:0px;padding:0px;}#box{position:absolute;原创 2021-05-24 13:52:16 · 127 阅读 · 0 评论 -
前端div拖拽移动
前端div拖拽功能html代码<div id='dragDiv'></div>js代码function dragFunc(id) { var Drag = document.getElementById(id); Drag.onmousedown = function(event) { var ev = event || window.event; event.stopPropagation(); var disX = ev.client原创 2021-05-24 10:11:45 · 522 阅读 · 0 评论