贴吧管理系统 | 脑瓜呆呆

这星期我们在实训，周六要去比赛，实训结束后我又要去集训，所以这星期没学多少东西。不过在实训的时候，因为老师对用框架的同学要求比较严，提了好多附加条件，所以在写实训项目的时候也有学到一点东西吧。

老师给用框架的同学其中一个限制条件是图形验证码和邮箱验证。因为以前写项目我们全都是用的邮箱验证，也没想过去实现一下图形验证码，所以在实训的时候我就去学了一下图形验证码。

public class ImageCodeUtil {


    public static final String RANDOMCODEKEY = "RANDOMVALIDATECODEKEY";//放到session中的key
    private static final Logger logger = LoggerFactory.getLogger(ImageCodeUtil.class);

    private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串

    private int width = 95;// 图片宽
    private int height = 25;// 图片高
    private int lineSize = 40;// 干扰线数量
    private int stringNum = 4;// 随机产生字符数量
    private Random random = new Random();

    private Font getFont() {
        return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
    }
    private Color getRandColor(int fc, int bc) {
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc - 16);
        int g = fc + random.nextInt(bc - fc - 14);
        int b = fc + random.nextInt(bc - fc - 18);
        return new Color(r, g, b);
    }
    public void getRandomCode(HttpServletRequest request, HttpServletResponse response) {
        HttpSession session = request.getSession();
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
        g.setColor(getRandColor(110, 133));
        for (int i = 0; i <= lineSize; i++) {
            drawLine(g);
        }
        String randomString = "";

        for (int i = 1; i <= stringNum; i++) {
            randomString = drawString(g, randomString, i);
        }
        session.removeAttribute(RANDOMCODEKEY);
        session.setAttribute(RANDOMCODEKEY, randomString);
        g.dispose();

        try {
            ImageIO.write(image, "JPEG", response.getOutputStream());
        } catch (Exception e) {
            logger.error("将内存中的图片通过流动形式输出到客户端失败>>>>   ", e);
        }

    }
    private String drawString(Graphics g, String randomString, int i) {
        g.setFont(getFont());
        g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
                .nextInt(121)));
        String rand = String.valueOf(getRandomString(random.nextInt(randString
                .length())));
        randomString += rand;
        g.translate(random.nextInt(3), random.nextInt(3));
        g.drawString(rand, 13 * i, 16);
        return randomString;
    }
    private void drawLine(Graphics g) {

        int x = random.nextInt(width);
        int y = random.nextInt(height);

        int xl = random.nextInt(13);
        int yl = random.nextInt(15);

        g.drawLine(x, y, x + xl, y + yl);

    }
    public String getRandomString(int num) {
        return String.valueOf(randString.charAt(num));
    }
}

点击并拖拽以移动

点击并拖拽以移动编辑

BufferedImage:是抽象类Image类的实现类，主要作用是将图片加载到内存中。BufferedImage生成的图片在内存里有一个图像缓冲区，利用这个缓冲区我们可以很方便的操作这个图片。

Fond：用于设置图形界面上字体样式。

Graphics 类：是所有图形上下文的抽象基类，允许应用程序在组件（已经在各种设备上实现）以及闭屏图像上进行绘制。（类似于画笔）

点击并拖拽以移动编辑

不过这个图形验证码不能在静态的页面测试，要在程序运行之后打开的页面测试。

因为写的是贴吧管理系统，所以我的项目里面有发布帖子的功能，所以我也上网了解了一下富文本，用到了我的项目里面。

<demo-nav title="wangEditor default mode"></demo-nav>
<div class="page-container">
     <div id="editor-toolbar"></div>
     <div id="editor-text-area"></div>
     <p style="background-color: #fff3f3; color: #333333; line-height: 40px;padding-left: 20px">
     总字数: <span id="total-length"></span>
     选择字数: <span id="selected-length"></span>
     </p>
</div>
 <script>
        const E = window.wangEditor

        // 切换语言
        const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
        E.i18nChangeLanguage(LANG)

        window.editor = E.createEditor({
            selector: '#editor-text-area',
            html: '<p><br></p>',
            config: {
                scroll: false,
                placeholder: '请输入你的帖子内容',
                MENU_CONF: {
                    uploadImage: {
                        fieldName: 'your-fileName',
                        base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                    }
                },
                onChange(editor) {
                    console.log(editor.getHtml())
                    // 选中文字
                    const selectionText = editor.getSelectionText()
                    document.getElementById('selected-length').innerHTML = selectionText.length
                    // 全部文字
                    const text = editor.getText().replace(/\n|\r/mg, '')
                    document.getElementById('total-length').innerHTML = text.length
                }
            }
        })

        window.toolbar = E.createToolbar({
                editor,
                selector: '#editor-toolbar',
                config: {}
            })
    </script>