前端
关注
分享
扫一扫
我是锴
前端开发小菜鸟
展开
-
实现html可配置换行
有个需求：需要动态的配置某些属性来控制html是否换行原理利用 <span>、<p> 来实现<span>内联元素，不铺满一行，不会换行<p> 块元素，独占一行<div class="div1"> <span>131313113</span> <span>131313113</span> <span>131313113</span><原创 2021-03-25 21:58:34 · 157 阅读 · 0 评论 -
项目部署后，通过动态配置json文件实现某种功能
主要是通过请求来获取对应的JSON文件// 配置面板地址，打包后可在服务上修改相关配置文件生效let isProd = process.env.NODE_ENV !== 'development'let isDefaultPanel = []let isPanelInitData = {}let isAllPanel = {}function ajax({ url, url_ENV, success }) { let xmlHttp = new XMLHttpRequest();原创 2021-03-25 21:54:06 · 367 阅读 · 0 评论 -
vue 图片动态路径不生效
需要使用require将图片引入，然后当作一个变量使用 <img :src="require(`@/assets/images/list/${key.icon}`)" alt="" srcset="" />原创 2021-03-25 21:51:43 · 432 阅读 · 0 评论 -
Vue 如何在事件中将 Event 传入
有时候在开发时，除了需要的参数，还需要将事件传入<div v-for="(item,index) in list" @click="goDetail($event,item)">goDetail(e, item){ // e 就是事件}原创 2021-03-25 21:49:37 · 698 阅读 · 0 评论 -
vue中使用element的自定义滚动条
vue 自定义滚动条在 Element-UI 中存在一个标签<el-scrollbar> 不知什么原因 在文档中并没有对这个进行体现。使用方式<div class="div"> <el-scrollbar style="height:100%"> <ul> <li></li> ...原创 2019-12-14 21:44:46 · 1005 阅读 · 0 评论 -
JS实现链式调用
JS实现链式调用var obj = { a: 0, fn1: function(){ this.a = 1; console.log(this.a); return this; // 实现链式调用 }, fn2:function(){ this.a = 2; console.log(...原创 2019-06-20 10:22:09 · 726 阅读 · 0 评论 -
animation动画
animation动画什么是 animationanimation则是通过关键帧@keyframes来实现更为复杂的动画效果属性[注意]IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀属性介绍例子animation-name动画名称(默认值为none)，可自定义animation-na...转载 2019-06-21 11:23:19 · 239 阅读 · 0 评论 -
transform
transform（变形）属性属性介绍例子rotate旋转（以中心为原点）transform: rotate(10deg);skew skew(x,y), skewX(x), skewY(y)扭曲、倾斜transform: skew(20deg);scale scale(x,y), scaleX(x), scaleY(y)缩放（负数为缩小）t...原创 2019-07-08 21:41:58 · 207 阅读 · 0 评论 -
Express+art-template通过文件读取写入实现增、删、改、查
Express原生的 http 在某些方面不能满足开发需求，需要使用框架来提升开发效率。http://expressjs.com/ 作者是 tj, 他写了很多库 ==> www.github.com/tj1、安装$ mkdir myapp # 创建目录$ cd myapp # 进入目录$ npm init [--yes] # 初始化创建 package.json 文件 ...原创 2019-07-08 21:46:33 · 670 阅读 · 0 评论 -
js中的模块系统
模块系统1、什么是模块化文件作用域通信规则加载方法导出方法2、CommonJs 模块规范2.1、加载 requirevar 变量名 = require('模块标识符');2.1.1、require 加载规则从上到下依次加载并执行console.log('第一行');require('./b.js');console.log('第三行');//...原创 2019-07-08 21:52:13 · 416 阅读 · 0 评论 -
vue+element导航栏实现
index.vue<template> <div class="indexmain"> <div class="container"> <div class="containerbox"> <div class="left"> <navmenu :active="ac...原创 2019-07-11 14:33:36 · 2481 阅读 · 1 评论 -
阿里矢量图标库在vue中的使用
symbol优势：支持多色图标了，不再受单色限制。支持像字体那样通过font-size,color来调整样式。支持 ie9+可利用CSS实现动画。减少HTTP请求。矢量，缩放不失真可以很精细的控制SVG图标的每一部分使用方法# 引入 iconfont.js# 加入通用css代码（引入一次就行）：<style type="text/css"> .ic...原创 2019-07-23 17:13:14 · 651 阅读 · 0 评论 -
vue实现路由导航
前言在每个项目中，我们的头部导航栏是必不可少的，一般情况下都需要实现路由导航。意思就是导航的高亮状态会根据地址栏的变更来改变。想要实现路由导航核心就是active-class这个属性，他的功能是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性vue-router官方地址<router-link :to="/home" active-cl...原创 2019-07-23 11:04:30 · 1166 阅读 · 0 评论 -
原生JS封装异步API（回调函数的应用）
封装异步API如下：想要得到延时器里面 data 的值，有什么好的办法呢？function fn(){ setTimeout(()=>{ var data = 'hello'; }, 1000)}console.log(fn()); // undefined --> 想要输出结果为 setTimeout 中 data 的值可以通过回调函...原创 2019-05-23 14:54:19 · 2776 阅读 · 1 评论 -
nodeJS +Express + art-template实现简单服务
开始1、Express1.1、安装$ npm install express --save # 安装 express 并保存在项目依赖列表中$ npm install express --no-save # 临时使用 express 不保存在项目依赖列表中1.2 使用// 引入 expressconst express = require('express');// 创建服务...原创 2019-05-17 17:30:12 · 634 阅读 · 0 评论 -
js实现复制功能
document.execCommand()方法参考地址这个方法有个限制, 只能复制可编辑区域。所以我们创建一个<input>或<textarea>将他们隐藏将我们所需的值给了<input>或<textarea>然后调用copy函数html <textarea id="input">用来复制课ID</te...转载 2019-04-02 17:52:14 · 546 阅读 · 0 评论 -
JavaScript中this的指向文问题
注意:1、this 的指向在函数定义的时候是确定不了的, 只有在函数执行的时候才能确定 this 指向谁;2、实际上 this 指向的是最终调用他的那个对象 ==> 谁调用 让方法 去执行, this 就指向谁3、构造函数中, this 指向 new 的实例4、构造函数中, 如果 return 的是一个复杂的数据类型, this 指向的就是返回的那个复杂的数据类型, 若否: ...原创 2019-04-26 17:53:22 · 133 阅读 · 0 评论 -
NodeJs中使用模板引擎
模板引擎我使用的模板引擎是 art-template安装$ npm install art-template --save项目结构ejs目录ejs.htmlejs.jsesj.html<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"&...原创 2019-04-22 17:57:16 · 1375 阅读 · 0 评论 -
NodeJS实现一个简单的server
创建server.js文件// 引入node的核心模块 httpvar http = require('http');// 创建一个servervar server = http.createServer();// 监听到客户端到请求server.on('request', (req, res)=>{ res.end('hello world !'); // 结束响应 ...原创 2019-04-19 11:36:57 · 2199 阅读 · 0 评论 -
客户端渲染和服务端渲染
客户端渲染和服务端渲染原创 2019-04-24 09:32:28 · 328 阅读 · 1 评论 -
NodeJS模块的引入和导出
模块的导出新建文件 Hello.js1、写一个函数function Hello(){ console.log('我就是Hello模块')}2、导出Hello函数 (exports)格式 ：module.exports = 函数名例子1 ：module.exports= Hello;例子2 ：exports.hell = Hello; 相当于将Hello函数添加到ex...原创 2019-04-19 14:38:34 · 2151 阅读 · 0 评论 -
IP 地址和端口号的概念
所有的联网程序都需要进行网络通信计算机中有一个网卡，而且同一个局域网中，网卡的地址必须是唯一的网卡是通过唯一的 IP 来定位的服务器可以理解为 24 小时不关机的电脑IP：用来定位到服务端口：是用来定位到应用程序服务器: 127.0.0.1 / https://www.qian.comQQ 应用程序 -> 对应端口 -> 3000微信 应用程序 ->...原创 2019-04-19 15:05:40 · 1964 阅读 · 0 评论 -
NodeJS响应内容中文乱码
Node 服务端默认发送的数据编码是 utf-8 格式浏览器在不知道服务器响应内容编码的情况下,会使用当前操作系统的默认编码去解析中文操作系统默认的编码格式 gbk# 设置响应头res.setHeader('Content-Type', 'text/palin; charset=utf-8');...原创 2019-04-19 15:17:48 · 4402 阅读 · 0 评论 -
NodeJS实现一个简单文件读取
一、准备工作NodeJS核心模块 fs 、http1、文件目录结构：node文件夹file文件夹read.txt 文件图片 photo.jpegindex.html 文件index.js 文件2、文件内容：# read.txt 文件中我是TXT文件# index.html 文件# 任意html代码二、文件读取index.js 文件中var http =...原创 2019-04-19 16:18:31 · 577 阅读 · 0 评论 -
NodeJS的fs模块
创建文件 fs.js// nodeJS 核心模块 用来读取文件var fs = require('fs');//读取文件fs.readFile('./read.txt', 'utf-8', function(err, data){ if(data){ // 因为结果是二进制 所以需要转换 console.log('读取到的数据：', data.t...原创 2019-04-19 16:53:14 · 127 阅读 · 0 评论 -
NodeJS静态资源路径统一处理
var http = require('http');var fs = require('fs');var server = http.createServer();var wwwDir = 'D:/Apache.www'; // 所有读取文件所在的根目录server.on('request', (req, res) => { var url = req.url; ...原创 2019-04-19 17:36:13 · 1657 阅读 · 0 评论 -
NodeJS服务端渲染实现简单评论功能
目录结构feedfBack 文件夹static 文件夹 用来存放静态资源index.css 样式文件mes.json 评论数据view 文件夹 用来存放 html 模板文件index.html 首页404.htmlpost.html 发布留言app.js 文件 服务端逻辑Demomes.json[]index.css.comments{ ...原创 2019-04-25 18:06:28 · 853 阅读 · 0 评论 -
vue不使用vuex的前提下怎么进行非父子组件通信
借助中央事件总线实现非父子组件通信创建Bus.js文件import Vue from 'Vue';export default new Vue;Bus.js文件一般都是放在assets文件下面组件1中<button @click='sendMsg'>传送信息给组件2</button>import Bus from '@/assets/js/bus';...原创 2019-03-28 16:46:00 · 245 阅读 · 0 评论