碵蝎-优快云博客

原创背景渐变、字体渐变

背景渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {

2022-01-20 00:26:57 484

一行显示……{ width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}两行以上显示......{ width: 100px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;

2022-01-19 23:58:03 706

原创使用字体库

2022-01-19 23:51:20 779

原创数组去除重复数字

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组去重</title></head><body> <script>.

2022-01-14 18:48:26 327

原创把111122223333转成1111 2222 3333

function cutStringFor4(str) { return str.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")}console.log(cutStringFor4('11112222333344445555'))

2022-01-14 18:32:05 357

原创打字机效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打字机效果</title></head><body> <div id="c.

2022-01-14 18:25:44 349

原创 JS倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时</title></head><body> <div id="con.

2022-01-14 17:49:12 305

原创 08.分组函数

分组函数一共5个，分别是：count 计数sum 求和avg 平均值max 最大值min 最小值分组函数还有另一个名字，多行处理函数。分组函数特点输入多行，最终输出的结果是1行。例子查询数学分数中，最高分的SELECT MAX(math) FROM studens;查询数学分数中，最低分的SELECT MIN(math) FROM studens;查询所有学生，数学分数的平均分SELECT AVG(math) FROM studens;查询所有学

2021-07-07 00:22:03 265

原创 07.给查询结果的列重命名

SELECT name, chinese FROM studens;把chinese改成 “语文成绩”SELECT name, chinese AS '语文成绩' FROM studens;使用AS关键字，AS关键字也可以被省略SELECT name, chinese '语文成绩' FROM studens;

2021-07-06 00:10:20 2241

原创 06.排序

语法格式：select * from 表名 order by 字段名（asc / desc）;学生的年龄从小到大排序SELECT name, age FROM studens ORDER BY age;也可以这样写SELECT name, age FROM studens ORDER BY age ASC;ASC（从小到大），默认就是从小到大，所以可以不用写ASC学生的年龄从大到小排序SELECT name, age FROM studens ORDER BY ag

2021-07-04 15:00:50 272

原创 05.条件查询

语法格式：select字段,字段...from表名where条件;执行顺序：先from，然后where，最后select例子查询sex为女的学生SELECT * FROM studens WHERE sex = '女';查询语文成绩小于60分的学生SELECT name,china FROM studens WHERE china < 60;查询语文成绩在80分~100分的学生SELECT name,china FROM studens WHERE ch...

2021-06-25 01:09:17 270

原创 04.查询语句（DQL）

语法格式：select 字段名1,字段名2,字段名3,.... from 表名;提示1、任何一条sql语句以“;”结尾。2、sql语句不区分大小写。例子比如有下面这个学生表id name age sex china math english banji issanhaoxuesheng 1 tom 18 男 20 58 54 1 Null 2 marry 17 女.

2021-06-24 00:26:36 485

原创 03.SQL语句分类

DQL（数据查询语言）: 查询语句，凡是select语句都是DQL。DML（数据操作语言）：insert delete update，对表当中的数据进行增删改。DDL（数据定义语言）：create drop alter，对表结构的增删改。TCL（事务控制语言）：commit提交事务，rollback回滚事务。(TCL中的T是Transaction)DCL（数据控制语言）: grant授权、revoke撤销权限等。...

2021-06-23 23:56:02 138

原创 02.什么是表

表：table是数据库的基本组成单元，所有的数据都以表格的形式组织，目的是可读性强。一个表包括行和列：行：被称为数据/记录(data) 列：被称为字段(column)如：学号姓名年龄 110 张三 20 120 李四 21 ...

2021-06-23 23:54:38 311

原创 01. sql、DB、DBMS分别是什么，他们之间的关系？

DBDataBase（数据库，数据库实际上在硬盘上以文件的形式存在）DBMSDataBase Management System（数据库管理系统，常见的有：MySQL Oracle DB2 Sybase SqlServer...）SQL:

2021-06-17 00:01:44 1793

原创基于vue-cli3的后台管理系统

github地址：https://gitee.com/tainiu123/vue-admin-js预览地址：http://39.108.183.7/vue-admin-js/#/ （账号和密码随便输）只写了最基本的功能，可快速用于二次开发

2021-02-24 20:50:20 343

原创 08.mongo db 数据的增删改查

查看所有数据库列表show dbs创建一个数据库use testuse命令用于创建或者切换一个数据库。如果没有这个数据库，则创建。反之则切换。注意，执行了该命令后，mongodb不会真的创建了一个名为test的数据库，如果真的想把这个数据库创建成功，那么必须插入一个数据。数据库中不能直接插入数据，只能往集合(collections)中插入数据。下面命令表示给 test 数据库的 user 表中插入数据db.user.insert({“name”:”xiaoming”});//

2020-11-18 00:00:52 182

原创 07、mongo db 数据库的下载与安装

链接数据库打开cmd，输入mongo。若报一下错误：在命令行中输入mongod.exe --dbpath D:\mongodb\data\db其中 D:\mongodb\data\db 代表的是你存放的位置，需要事先进行创建该文件夹，运行完成后该cmd窗口不要关闭，再次打开一个新的cmd窗口，输入mongo命令：即打开MongoDB查看所有数据库列表show dbs创建数据库创建数据库的命令：use itying改命令也用于切换..

2020-07-25 05:28:30 208

原创 06、处理get和post事件

get例子：（获取前端传过来的参数）const http = require('http');const url = require('url');http.createServer((req,res)=>{ if(req.url === '/favicon.ico'){return;} let path = url.parse(req.url).pathname; if(path == '/getNews'){ let data = u

2020-07-22 20:15:28 328

原创 node.js常用方法

url.parseconst url = require('url');let str = 'http://www.baidu.com?search=xxx';console.log( url.parse(str) );console.log( url.parse(str).pathname );输出：Url { protocol: 'http:', slashes: true, auth: null, host: 'www.baidu.com', port:

2020-07-22 19:06:11 397

原创写一个类似express框架

express.jsconst http = require('http');const fs = require('fs');const path = require('path');const url = require('url');let G = { _get: {}, _post: {}, //扩展res方法 extendRes(res){ res.send=(data)=>{ res.writeH

2020-07-22 18:27:49 255

原创 05、fs模块

fs.stat 检测是文件还是目录const fs = require('fs');fs.stat('./css', (error,stats)=>{ if(error){ console.log(error); }else{ console.log(stats); console.log(`文件：${stats.isFile()}`); console.log(`目录：${stats.isDirec.

2020-07-21 00:11:11 246

转载什么是原型链？

我们知道 JS 有对象，比如var obj = { name: 'obj' } 我们可以对 obj 进行一些操作，包括「读」属性「新增」属性「更新」属性「删除」属性下面我们主要来看一下「读」和「新增」属性。为什么有 valueOf / toString 属性呢？在我们没有对 obj 进行任何其他操作之前，发现 obj 已经有几个属性（方法）了：那么问题来了：valueOf / toString / constructor 是怎么来？我们并没有给 ob..

2020-07-19 02:12:01 467

原创同步和异步回调函数

同步回调函数let arr = [1,2,3,4,5,6];arr.forEach(item=>{ console.log(item);});console.log('end');console.log是最后打印的，则成为同步回调异步回调函数setTimeout(()=>{ console.log('func');},0);console.log('end');先打印这句end，在打印func。则成为异步回调setTimeout ..

2020-07-18 03:40:37 288

原创扩展运算符

三个点代表扩展运算符，如下：let arr = [1,2,3];console.log(...arr);输出1 2 3扩展运算符，大概的意思就是把一个数组的数据一个个拆出来。用途合并数组let arr1 = [1,2,3];let arr2 = [4,5,6];arr1.push(...arr2);console.log(arr1);输出：[1, 2, 3, 4, 5, 6]深拷贝（只对基本数据类型管用）let a = { id : ...

2020-07-18 03:24:32 1508

原创 axios

安装先在当前项目安装axioscnpm i axios -Sget请求axios.get('http://localhost:8082/getAllStudents').then(res=>{ console.log(res);}).catch(err=>{ console.log(err);});上面这个例子并没有带参数过去，如果需要携带参数可以有2种写法。方法1直接在请求的地址里，写上?key=valueaxios.get('h.

2020-07-13 17:35:35 216

原创 18.$nextTick

如上图，实现这个功能。当我们点击按钮的时候，让input框显示并且让它自动对焦。代码：<template> <div class="hello"> <button v-if='isShowButton' @click="setButton">show input</button> <input ref="input" v-else type="text"> </div></temp..

2020-07-12 18:06:35 201

原创 JS深拷贝

function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况 if(prop === obj) { continue; } .

2020-06-21 02:07:30 205

原创 12、区分开发环境和生产环境

开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要强大的、具有实时重新加载或热模块替换能力和本地服务器。而在生产环境中，我们目标则转向于关注更小的包，以及资源的优化，以改善加载时间。所以我们通常建议每个环境编写独立的webpack配置。现在我们把下面的webpack配置分别写在3个文件上const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('h

2020-06-04 00:12:08 3437

原创 11、模块热替换（HMR）

模块热替换：当修改一个js或者css的时候，只刷新修改的内容，不进行整个页面的刷新。1、若本地服务器是使用webpack-dev-server的，则把hot : true 加上devServer : { contentBase : './dist', host : 'localhost', port : 8080, open : true, hot : true, //这里 }2、配置2个插件plugins:[ new webp

2020-06-02 19:05:08 514

原创 07、CleanWebpackPlugin

若打包的js文件我们设置了hash值，如：output : { path : path.resolve(__dirname, 'dist'), filename : 'js/index[hash].js' //有hash值的js}则每次打包后，之前的js文件未被删除。又或者我们修改了打包后的图片文件夹的名字，在进行一次打包，旧的文件夹也不会被删除。这时候我们就要手动删除打包的文件，然后在进行一次打包。这挺麻烦，CleanWebpackPlugin这个插件就是帮助我们删除

2020-05-27 20:05:36 206

原创 04、编译less、sass

sass和less类似，这里以less为例1、安装less-loadercnpm i less-loader -S2、配置webpack.config.jsmodule:{ rules : [{ test : /\.less$/, //匹配以.less结尾的文件，匹配到的文件将用下面的loader use : ['style-loader','css-loader', 'less-loader'] }]}...

2020-05-27 00:25:04 219

原创 10、提取css

之前我们打包的css文件，会在打包出来的js文件里面。现在使用mini-css-extract-plugin这个插件可以单独把css文件分离出来1、安装插件cnpm i mini-css-extract-plugin2、rules配置{ test : /\.css$/, use : [MiniCssExtractPlugin.loader, 'css-loade...

2020-04-08 18:59:30 318

原创 09、生产html模板

1、安装html-webpack-plugin插件cnpm i html-webpack-plugin2、配置const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry : './src/main.js',...

2020-04-08 18:21:28 231

原创 08、es6转es5

1、安装如下插件cnpm i babel-loader @babel/core @babel/preset-env2、配置const path = require('path');const webpack = require('webpack');module.exports = { entry : './src/main.js', output : { ...

2020-04-08 17:48:54 305

原创 07、第三方js库处理

const path = require('path');const webpack = require('webpack');module.exports = { entry : './src/main.js', output : { path : path.resolve(__dirname, 'dist'), filename : 'm...

2020-04-08 17:29:47 252

原创 06、文件处理

文件处理包括图片处理、字体文件处理、以及第三方js文件处理（比如jquery）图片处理1、安装file-loadercnpm i file-loader2、配置rules{ test : /\.(png|jpg|gif|jpeg)$/, use : 'file-loader'}...

2020-04-08 16:24:31 228

原创 05、添加css3浏览器前缀

1. 安装postcss-loader autoprefixer2. 在webpack.config.js中配置const path = require('path');module.exports = { entry : './src/index.js', output : { path : path.resolve(__dirname, 'dis...

2020-04-06 00:51:36 288

原创 03、打包css文件

1. 安装style-loader和css-loader2. 在webpack.config.js中配置const path = require('path');module.exports = { entry : './src/index.js', output : { path : path.resolve(__dirname, 'dist'),...

2020-04-06 00:21:27 205

原创 02.、本地服务器

若项目中有webpack.config.js这个文件，则打包的时候webpack则会按照这个文件的配置进行打包。1. 创建webpack.config.js2. 编写以下代码：const path = require('path'); //用于读写文件操作module.exports = { entry : './src/index.js', //入口文件 ou...

2020-04-05 20:24:07 315