前端学习笔记
关注
分享
扫一扫
文章平均质量分 63
Miss.lang
前端初学者
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
yarn常用安装命令
纯属哔哔赖赖瞎扯一下，以前一直用npm install、npm run ，突然来yarn，懵逼了，这是啥？感觉应该是和npm一样的东西，只是这里用yarn，难道它是npm更高级的替代品？为什么要替代npm？也不怎么敢问，默默百度了解一下yarn这个东西。看大佬的解释：https://www.jianshu.com/p/254794d5e741统一前端平台中命令：启动项目：yarn dev 或 yarnrun dev;打包命令:yarn build或 yarnrun bui...原创 2021-07-20 15:52:55 · 11186 阅读 · 0 评论 -
git常用的指令笔记
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言这个只是我工作中用到的情况写的笔记，百度一搜一大把。只是为了自己后面回顾自己学习的而作的记录笔记。很粗糙，刷到了求键盘下留情哈。项目开发常用的就是git和svn了，经常远程开发的话，我们常常要用git拉取项目代码，提交，修改等等。一、拉取项目代码大佬发来了项目前端框架的代码，以前用的都是svn，g...原创 2021-07-20 15:19:46 · 412 阅读 · 0 评论 -
使用 nvm 管理不同版本的 node 与 npm的笔记
前言： 因为多个项目用的node版本不一样，所以总是要卸载自己本地的node，然后去官网下载合适的版本，感觉很麻烦，朋友推荐使用nvm（node多版本管理器）。第一次使用，所以做个笔记。记录一下，毕竟好记性不如烂笔头嘛！1、首先，去GitHub上下载nvm https://github.com/coreybutler/nvm-windows/releases注：一定要先把自己原本下载了node卸载了，不然会可能会有冲突。2、win+r，cmd界面，打开终端，然后输入...原创 2021-07-20 14:40:32 · 326 阅读 · 0 评论 -
layui做树形表格，checkbox可勾选添加删除，对指定的td可编辑
前言新的项目需求是要做一个菜单权限的界面--弹框界面，界面里面是树形表格，然后表格要有checkbox去控制菜单的添加、删除。可修改菜单名字。百度查了一下，layui有拓展的组件treetable,要下载js。但是我下载的treetable.js源码不是很理解，表格里面的checkbox实现勾选就添加，反之就删除这个事件不知道怎么处理，只好自己写一个了。有些粗糙，当做一个笔记好了。放代码html<div class="layui-field-box layui-...原创 2020-05-21 10:46:08 · 1830 阅读 · 0 评论 -
layui的树形表格treetable
前言项目需要要做一个树形表格，项目用的技术框架是layui。去查看了文档，layui没有treeTable的相关内容，但是他的拓展里面有，感觉有点生硬。后面是百度看大牛们写的，自己跟着写的，觉得还是做个笔记好一点。 注意：我用的layui的版本2.4.5，低版本的可能会使树形表格的样式会加载不全的。 话不说多，当代码：代码<body> <div class="admin-main"> <table class="layui-table layui-f...原创 2020-05-13 18:10:03 · 1309 阅读 · 0 评论 -
vue+svg+d3.js清除放大缩小的效果
前言前阵子做svg的项目，要求能实现放大缩小。于是使用了d3.js，但是对于这个技术，现学现用，不是很会。放大缩小的功能是实现了，但是又来了一个新的需求就是给一个按钮，点击后。放大还是缩小的图形能够恢复成原来的样子。实话实说，我又百度看了好多。参考了别人的写法写的，能力渣渣，大牛们勿喷啊！直接放代码html： <div class="full-screen" style="margin-left: 20px;float: right;padding-top: 5px;">原创 2020-05-11 16:09:05 · 1302 阅读 · 2 评论 -
vue+elementUI抽离公共布局组件
前言因为在做项目的时候，我们绝大部分的界面布局都是一样的。所以做一个简单的公共布局组件出来，后期维护或者改样式的时候，就会方便很多。这也是公共组件抽离的思维。用的是elementUI的插槽slot代码// 公共的布局组件<template> <el-container style="border:1px solid #ccc;margin: 0 1px...原创 2020-05-05 10:45:24 · 2707 阅读 · 0 评论 -
vue里面引用svg文件，并给svg里面的元素赋值
前言项目里面用的svg图片比较复杂，还要对里面的元素赋值等等的。在HTML里面有试着用过svg，在vue里面还是第一次尝试。百度了很多要配置webpack.base.conf.js,还要封装组件什么的，但是没有用，那些方法应该是对icon的svg或者简单的svg图片有用吧。后面改变思路，想着能不能组件的形式引入svg文件。静态界面下看看能不能实现，然后在做动态赋值。折腾了一天，还是弄出来了。真...原创 2020-04-28 15:32:57 · 9420 阅读 · 1 评论 -
搜索条件过多时，点击左右箭头滑动内容
前提：因为平时做项目的时候，一个简单的界面，搜索条件很多，然后屏幕缩小的时候，那些搜索条件就会滑下来，会显得界面很不美观。于是就自己加了左右的箭头，内容过多的时候可以点击箭头，显示内容。代码：也不是很难的东西，就不解释那么多啦！直接放代码HTML：<i class="el-icon-arrow-left" @mousedown="scrollLeft" @mous...原创 2020-04-11 10:44:41 · 688 阅读 · 0 评论 -
关于iview、bootstrap-vue、model、layui学习过程中的一些总结
html:文件的声明头 <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-w...原创 2019-02-20 16:57:52 · 1754 阅读 · 0 评论 -
vue项目发布上线，外部修改公共路径，不用每次都进行打包部署
项目需求要想修改整体的后台接口域名，不用更改路径之后，每次发布都要打包部署。参考：https://blog.youkuaiyun.com/qq_41772754/article/details/88106508这个大神是真的写的很好，但是我自己引用的时候，出现了刷新就报错，然后不能用的问题。因为我做的项目基本弄完了，不好改动太多。就参照大神写的，改了。比较详细的解释说明请参照https://blo...原创 2019-07-13 14:05:19 · 3046 阅读 · 0 评论 -
获取今日、本周、本月、上月、今年的日期
1、首先格式化时间// 格式化时间function formatDate(date) {var myyear = date.getFullYear();var mymonth = date.getMonth() + 1;var...原创 2019-07-02 17:17:36 · 1626 阅读 · 0 评论 -
前端自己写登录验证码，图片base64的使用，获取本地IP
1、效果图html:getCode(){var code = "";var codeLength = 4; //验证码的长度var captcha = document.getElementById("captcha");var codeRandom = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a', 'b', 'c', ...原创 2019-05-09 09:35:33 · 978 阅读 · 0 评论 -
Vue + Element UI 实现权限管理系统
动态加载菜单之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。接口模块化我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api.js，并把里边原来登录、用户、菜单的相关接口都转移到我们新建的接口模块文件中。模块化之后...转载 2019-05-04 15:59:18 · 3870 阅读 · 2 评论 -
vuex的详细使用说明
首先要安装、使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :npminstallvuex--save在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：import store from './store'//引入store new Vue({ el: '#app'...转载 2019-05-04 14:10:44 · 219 阅读 · 0 评论 -
vue项目连接后台数据库配置
1、也就是项目如何配置生产环境和发布环境的接口地址平常我们开发项目时,都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题.在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口.首先现在vue项目里面找到config这个文件，配置里面的index.js，代码如下：...原创 2019-05-04 10:53:42 · 43814 阅读 · 1 评论 -
vue页面里面引入json数据，不用配置webpack.dev.conf.js
1、首先在安装axios，npm install axios --save2、然后在main.js里面引入import axios from 'axios'Vue.prototype.$axios = axios（也可以写Vue.prototype.$http=axios）3、最后在页面上的应用在data（）{return{muensList ：{}}}在m...原创 2019-04-28 14:16:52 · 1021 阅读 · 0 评论 -
MUI弹框里面添加输入框（mui.prompt）的使用
1、html点击事件<button type="button" id="promptBtn" class="mui-btn mui-btn-warning" v-cloak @click="charge(item)">充值</button>2、js：（我charge事件是写在li的v-for里面）...原创 2019-04-23 17:26:55 · 9672 阅读 · 3 评论 -
限制输入框输入类型
1、关于价格$("#price").on('input propertychange', function() { this.value = this.value.replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/, '$1$2$3$4$5.$3'); //只能输入四个小数 this.va...原创 2019-04-03 14:47:57 · 922 阅读 · 0 评论 -
nodeJS详细的安装教程
首先是先下载nodejs软件，和mongodb的软件，我们可以去官网直接查找。 然后，就是配置环境啦！我是将mongodb的压缩文件包放在了E盘，要工作的工作目录放在E盘，所以我的配置路线是在E盘，详细步骤如下：win7的系统：（win7的配置路线和我win10的配置路线不一样）1、打开计算机->属性->高级系统设置->环境变量->newuser用户变量...原创 2018-09-27 13:07:34 · 1383 阅读 · 0 评论 -
前端入门学学习推荐
1、完全没有基础的话，可以从HTML基础开始。网易云课堂里面免费的课程， 入门你可以去看李炎恢老师的，讲的很详细。https://study.163.com/course/introduction.htm?courseId=1003005#/courseDetail?tab=12、JavaScript入门基础学习推荐腾讯课堂的，免费的。对于JavaScript基础学习足够了。...原创 2019-01-11 10:07:36 · 208 阅读 · 0 评论 -
折线图结合表格和日期的界面实例
#1、功能需求分析◆上班人数：该平台当天有多少人上班（一个人只统计一次，即无论一个人一天上班下班几次都只统计一次）◆初始状态：折线图展示各时段上班人数1，折线面积图2，筛选条件：统计周期（日、周、月）、日期、平台名称日：统计该日期的上班人数周：统计该日期向前推7天的上班人数月：统计该日期月份的上班人数（若日期筛选框可变为月份选择更佳）3，列表展示字段：平台名称、上班人数、各时段点...原创 2018-12-26 17:32:37 · 1396 阅读 · 0 评论 -
接口写法
#1、导出接口：getExcel() {window.open('/api' + 接口+ '?data1=' + this.data1+'&data2=' +this.data2)},//导出接口第一个参数用？连接，后面的用&连接符连接起来。一般情况下，导出接口要传的参数是列表搜索条件的参数。主要是看后台让你传什么参数，你就传什么的参数就好了。api<=>proces...原创 2018-12-26 16:43:15 · 1784 阅读 · 0 评论 -
关于vue.js单界面应用实例的开发
1、首先是要下载安装node.js，官网里面有相关的步骤说明。不知道自己有没有安装或者不知道安装是否成功的的朋友们可以打开小黑窗测试看看。检测node版本号：node -v检测npm版本号：npm -v小黑窗返回相对应的版本号给你，代表你已经安装成功了。2、接下来就是vue项目的搭建了1.# 全局安装vue-cli$ npm install --global vue-cli...原创 2018-11-13 10:26:32 · 650 阅读 · 0 评论 -
关于导出Excel表格接口写法
文章里面的url(这里是接口的地址)1、直接拼接参数，列表传什么参数，接口地址就拼接什么参数。//导出excelexportWork() {window.open( '/api' + url + '?data1=' + this.data1 +'&data2' + this.data2)}},最前面的是接口地址，第一个参数用？，后面的参数要用&拼接。...原创 2018-10-22 16:22:13 · 1453 阅读 · 0 评论 -
关于iview和bootstrap-vue表格里面td的样式
因为列表输出的很多东西，采用自适应属性的话，会因为有些td里面的文字内容过长，而占用其他的td宽度。因此我们需要对特定的td设置相应的样式。比如：td内容过长，则限制输出长度，超出显示省略号，且鼠标移入有文字悬浮框显示。iview：theads:[{key: 'companyName',title: '企业名称',render: (h, params) => ...原创 2018-10-22 15:24:40 · 1628 阅读 · 0 评论 -
直接在相同的折线图里面更新成单个的产品的数据信息
#1、功能需求分析◆上班人数：该平台当天有多少人上班（一个人只统计一次，即无论一个人一天上班下班几次都只统计一次）◆初始状态：折线图展示各时段上班人数1，折线面积图2，筛选条件：统计周期（日、周、月）、日期、平台名称日：统计该日期的上班人数周：统计该日期向前推7天的上班人数月：统计该日期月份的上班人数（若日期筛选框可变为月份选择更佳）3，列表展示字段：平台名称、上班人数、各时段点...原创 2018-12-26 17:40:40 · 284 阅读 · 1 评论 -
关于列表里面的链接，点击后可查看文件以及列表数据翻译
1、bootstrap-vue表格里面做文字转译，将后台返回的状态码翻译<b-table striped bordered hover :items="list" :fields="theads" show-empty empty-text="没有查询到数据" style="text-align:center;table-layout:fixed;"><template ...原创 2018-10-10 10:38:29 · 808 阅读 · 0 评论 -
表格里面的内容用弹框显示
#1、表格里面的评价内容，点击查看后，显示弹框以及相关文字#1、data（）{return{detail:'',}}showDetail(data) {this.modalFlag = true;this.detail = data},原创 2019-01-02 15:14:55 · 483 阅读 · 0 评论 -
折线图显示当前七天，数组倒序
#截取数组的后七个，参考方法slice（-7），for后面七个（i<30,i>23）,数组倒序revenue1、折线图显示当前七天，但是后台显示的是当前一个月的数据，没有数据的日期不显示出来。2、代码处理var xAxisData = [];var seriesData = [];、、、、、、、、、、、如果返回的数据为空，则补零。data.forEach(ite...原创 2019-01-14 12:47:59 · 771 阅读 · 0 评论 -
限制表格里面的显示字数
关于bootstrap-vue表格里面的td文字样式处理1、bootstrap-vue 的表格样式设置，文字超出隐藏，超出显示省略号，鼠标移入悬浮框显示内容。2、文字限制输出两行，超出后隐藏项目：bootstrap-vue表格的处理：代码如下：<b-table striped hover bordered :items="infoList" :fields="thea...原创 2019-01-09 17:11:15 · 2614 阅读 · 0 评论