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