React (1702H) 点击复制、滚动条、图形验证码、ridis、密码rsa加密、token、发邮件、文件上传、sql语句
一、使用到的npm包
1.clipboard-polyfill
复制到剪切板
示例代码：
import * as clipboard from "clipboard-polyfill"
<Button onClick={this.handleCopy.bind(this, record)} >复制链接</Button>
handleCopy(record) {
clipboard.writeText(record.path);
}2.react-custom-scrollbars
滚动条组件
示例代码：
import { Scrollbars } from 'react-custom-scrollbars'
<div className="m-content">
<Scrollbars>
<div className="m-content-inner">
</div>
</Scrollbars>
</div>.m-content{ height: 500px;}
.m-content-inner{padding: 50px 20px;}3.svg-captcha
生产图形验证码
示例代码：
const svgCaptcha = require('svg-captcha')
//验证码
app.get('/captcha', function (req, res) {
var captcha = svgCaptcha.create({});
let text = captcha.text.toLowerCase()
captchaId = getID(10)
let temp = {
captchaId: captchaId,
captcha: captcha.data,
}
client.set(captchaId, text, 'EX', 60) //60秒后验证码过期知道
client.get(captchaId, function (err, v) {
console.log("图形验证码的值存入redis，值为：", v);
})
res.send({
code: 200,
data: temp,
message: '验证码'
});
});4.redis
key value数据库
示例代码：
const redis = require('redis')
const client = redis.createClient();
//如果没有启动redis,会报错，启动redis方法，在cd到redis的安装目录，执行redis-server.exe redis.windows.conf
client.on("error", function (err) {
console.log("Error " + err);
});
//登陆
app.post('/login', async function (req, res) {
let { username, password, captcha } = req.body
let token = req.headers['token']
let redisCaptcha = await new Promise((resolve) => {
client.get(token, function (err, res) {
return resolve(res);
});
});
console.log('login', redisCaptcha)
if (captcha && captcha === redisCaptcha) {
} else {
res.send({
code: 400,
message: '验证码错误或过期'
})
return
}
});5.node-jsencrypt
密码加密解密
前端页面密码加密：
import JSEncrypt from 'jsencrypt'
export function jsEncrypt(str) {
let encrypt = new JSEncrypt();
let key = `MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgZbK33WxyTm+mQlnrpDhrlRlSMi54zSVKUICvh234DfN5/UOuRd5xcIQ17zSGX/pttcZM95pTJv1MHDj4FvjEtWAyX3rTL/6tGixyVZmv5T93ok6ZXe6ZDyJIQ5mbrQFBh2/im92gOI+iGIebb0FihEYCqr1C08ik/ppxitr6+Do7bHL1LZeYdYAQ/hgoY9IIzt2N5QBlFOmaMK99omSIQ3Wu6ojfNla6ENWdmW3yxw7F0sDWQON0dsYQOiUw8DQ8UV5HWBf/wbhpTWHKrfWAk3kzZhD1AFBhtnwkQKvl0HQLl3kP/bjBDq0ocFsCtokvQxyrB1c0JOqly9e8hzU/QIDAQAB`
encrypt.setPublicKey(key);
let data = encrypt.encrypt(str);
let code = encodeURI(data).replace(/\+/g, '%2B')
return code
}
node后端密码解密：
const JSEncrypt = require('node-jsencrypt');
password = password.replace(/%2B/g, '+')
let decrypt = new JSEncrypt()
decrypt.setPrivateKey('MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCBlsrfdbHJOb6ZCWeukOGuVGVIyLnjNJUpQgK+HbfgN83n9Q65F3nFwhDXvNIZf+m21xkz3mlMm/UwcOPgW+MS1YDJfetMv/q0aLHJVma/lP3eiTpld7pkPIkhDmZutAUGHb+Kb3aA4j6IYh5tvQWKERgKqvULTyKT+mnGK2vr4OjtscvUtl5h1gBD+GChj0gjO3Y3lAGUU6Zowr32iZIhDda7qiN82VroQ1Z2ZbfLHDsXSwNZA43R2xhA6JTDwNDxRXkdYF//BuGlNYcqt9YCTeTNmEPUAUGG2fCRAq+XQdAuXeQ/9uMEOrShwWwK2iS9DHKsHVzQk6qXL17yHNT9AgMBAAECggEAT1IwvdU5zLUW0G/sUfMG4QFxubp75fICt21bZmmkao9d7vSWXX9cH0tpqdQ/OjKMqUlCePhTtfvkehEvut4jwRyEp1D3HVSJrbJD2LyVSgF136hZ4VAG/GH9gglhc7OnO5Yr7x3JCJzzr+F3RK6l3FwYPjdkpNZ8kN1/rzhW59syV5SSfZxhqS8j454tow6vdhjIHhsuZj/JR1yo6zp+Jgh1m/Js2tPq/3VtbhUsyWLbkUxZ0hFtlAIDhYYyu//9eHthEgelgXePXuPXTLb234PjTFs5gh17qiMozVJGuJLdOuw5SPggXkOwoM05yNyk1VcYVnA6PLh9uqy6J/vg4QKBgQDWuJh+qoFOniUH7DIob0LootQQZX8JEPu1opn308Ee3MurWImD8iB6Sgv4v1p5cggxz180uINf8CgfnKnRFY7iZE4rrHDhpepnJjc3EoFuBr4qOkKxt4+UpfpW+akingL6e2+TsE3hiWn7+anQ2CDHBtewb1zPmcEUCoXhGhwiyQKBgQCagHXXYKZkQP8ONt68d613cmnsarJ+A7WTPLsT9FdR/ue5f2XfLZieiJrz1XE3gNT0M4uGwQ1K5xGVDxAlDowICTR62bLTfcrlgDEabX7Ie6LoKHn94DuzYJp0hGIOoW/B/MUm1jGnabmRwd5fMN7kYkTHW76GOgCdtworFpzmlQKBgAKWmw/70i82bM/ZowklvjK7s7622n8rez1HRn/cR5mto67fFFlI0+dleRt4gwivvTWMgGNMThkb9f/bjZh9oAlOmDqii4HM1DSGG2hIitLetfAgX6lwwwRRs+DUhZtrODH4xvGK0IWFeIeXDNr9n/eGN5di4EWIXvF05wQ9olUxAoGAGFOnulzWdiyhvEw5b/VsE8WpFfeK2TqeSWujjTXI1flL5TJBCQ313OhndYMjC3k2jqjbDEGzZRrS8uRnR15uAAnrAHjspk5FNzOjB6U79Dc7ZFCTPL0kyU6pozUA94rFvQaeyEmrkc+cz212JQjd35n1eGpiqmHRnQOoDzbFR60CgYBYdZj0hYgVXVeSgZVWQGteLi46s/puRLgLZLjudqUZcQIq4GwBpVfSbsfuy+HjBc1GhlYpMp6ZZPzvPKasYyyFy2lgJj0AT7INuA9bnILYvqMzeCVL8RrEFrIGff64mxIMN/qE9uu+e9x2nWYdfXPfjaL6r7eOaZ59kE5UsCg/gA==')
password = decrypt.decrypt(password)6.jwt-simple
JWT(JSON Web Token) 编码解码模块
示例代码：
const jwt = require('jwt-simple')
//token加密的key
let secret = 'xxx';
var token = jwt.encode(user.uid, secret);7.nodemailer
发邮件
示例代码：
const nodemailer = require("nodemailer");
// async..await is not allowed in global scope, must use a wrapper
async function sendEmail(username, email, url) {
// Generate test SMTP service account from ethereal.email
// Only needed if you don't have a real mail account for testing
let testAccount = await nodemailer.createTestAccount();
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: 'smtp.sina.cn',
// service: 'qq',
// port: 465,
//secure: false, // true for 465, false for other ports
secureConnection: true, // 使用了 SSL
auth: {
user: '13642061747@sina.cn', // generated ethereal user
pass: '123456' // generated ethereal password
}
});
// send mail with defined transport object
let info = await transporter.sendMail({
from: '<13642061747@sina.cn>', // sender address
to: email, // list of receivers
subject: "重新设置密码", // Subject line
html: `<b>${username}您好！您可以点击下面的链接设置新的密码</b>
<a href=${url}>${url}</a>`// html body
});
console.log("Message sent: %s", info.messageId);
// Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>
// Preview only available when sending through an Ethereal account
console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
// Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
}
await sendEmail(username, user.email, `http://localhost:8080/reset_password/${token}`).catch(console.error);
8.multer
文件上传
示例代码：
const multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
// 接收到文件后输出的保存路径（若不存在则需要创建）
cb(null, 'public/images/');
},
filename: function (req, file, cb) {
// 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
cb(null, Date.now() + "-" + file.originalname);
}
});
var upload = multer({ dest: 'public/images/', storage: storage });
//文件上传
app.post('/upload', upload.single('file'), async function (req, res, next) {
var file = req.file;
console.log('文件类型：%s', file.mimetype);
console.log('原始文件名：%s', file.originalname);
console.log('文件大小：%s', file.size);
console.log('文件保存路径：%s', file.path);
console.log(file)
let uid = getID(10)
let createTime = new Date().getTime()
const data = await uploadAdd(
uid,
`http://localhost:8888/images/${file.filename}`,
file.originalname,
createTime)
if (data) {
res.send(({
code: 200,
data: file,
message: '上传成功'
}))
} else {
res.send(({
code: 400,
data: file,
message: '上传失败'
}))
}
})二、sql语句
建表：
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`uid` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT '用户id',
`username` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '用户昵称',
`password` varchar(1000) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '密码',
`email` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '邮箱',
PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
插值：
BEGIN;
INSERT INTO `user` VALUES ('21ma84sk2tkw00021ma84sk2tkw000', 'admin', 'admin');
INSERT INTO `user` VALUES ('3a9f12z1ey200003a9f12z1ey20000', 'xutongbao', 'xutongbao');
COMMIT;
删除：
delete from overtime where applicationNumber='80nt32no6jddg022'更新修改：
UPDATE overtime SET nickname = '新名字' WHERE applicationNumber = '12pnraanmsbk0';模糊搜索：
SELECT * FROM overtime WHERE nickname like '%名%';查询一个表格里有多少条数据：
select count(*) from upload;降序升序查找：
select * from upload order by create_time DESC
select * from upload order by create_time ASC分页查找加排序：
从0开始，查找10条记录：
select * from upload order by create_time ASC limit 0,10 从10开始，查找10条记录：
select * from upload order by create_time ASC limit 10,10
