基于SpringBoot的仿微信扫描登陆+轻量级富文本编辑->文章系统

摘要：微信的扫码的登陆是要企业号的，对于一个学生狗哪来企业号，自己有个测试号内心已十分满足。自己决心做一个仿微信扫码登陆，对，你没看错，就是仿，坚信高仿出奇迹。

点击访问项目链接
看到慕课网和segmentfault的发表手记和发表文章是Markdown 编辑器，说实话，对于第一次用的我真的很不习惯。不过对于我们代码开发者来写挺好的，也就对我们这些开发者述写自己的代码故事好点而已。这边我用的summernote的轻量级文本编辑器，操作简单，小白操作。适合一般人使用

这个系统我和我朋友一起做的，我只负责介绍自己部分，他的部分我将到时在文章评论贴上链接。
微信的扫码的登陆是要企业号的，对于一个学生狗哪来企业号，自己有个测试号内心已十分满足。自己决心做一个仿微信扫码登陆，对，你没看错，就是仿，坚信高仿出奇迹。原理很简单，首先要会创建二维码，要会微信授权登陆和websocket，也就是把微信授权登陆的地址变为二维码让微信的【扫一扫】，通过websocket通信完成之间的信息传递。你也可以不用websocket而用轮询，只是性能耗损多。都可实现。
数据库方面采用的是mysql和mongoDB,考虑到文章系统的图片太多容易给mysql带来太多负载，分些压力给mongoDB,所以文件方面存在mongoDB，逻辑方面存在mysql(带宽方面无变化....)
接下来，我要开始我的表演了，给我后退！

小尴尬的是微信测试号，要关注才可以访问微信授权，微信这边也限定了微信测试号只可以100人。

系统已发布云服务器。可长期访问。只是测试号菜单两个系统是不可以访问，因为我关掉了啊哈哈哈，不过我已经写了文章在segmentfault了，SpringBoot做的两个系统....，或点击我的文章查看。
首先查看的首页：

扫码成功到成功授权登陆或者拒绝授权登陆

summernote 图片上传是二进制本地文件的，也就是图片并不会自己上传到服务器，要自己去改写他的图片上传

        $(function(){
            $(".summernote").summernote({
                height: 600, //编辑器的高度
                tabsize: 2,
                lang: "zh-CN",
                focus:true,
                toolbar: [
                    ["style", ["style"]],
                    ["font", ["bold", "underline", "clear"]],
                    ["fontname", ["fontname"]],
                    ["color", ["color"]],
                    ["para", ["ul", "ol", "paragraph"]],
                    ["table", ["table"]],
                    ["insert", ["link", "picture", "video"]],
                    ["view", ["fullscreen", "codeview", "help"]]
                ],
                callbacks: {
                //覆写掉自带的上传文件函数
                    onImageUpload: function (files) { //the onImageUpload API
                        img = sendFile(files[0]);
                    }
                }
            });
        });
    //这一块是上传文件，可传参数是文件
   function sendFile(file) {
            document.getElementById("loading5").style.display="block";
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "${projectUrl}/testuploadimg2",
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    if("uploadFail"==data){
                        alert("插入失败");
                        return;
                    }
                    $("#nanSummernote").summernote("insertImage", data, "image name"); // the insertImage API
                    document.getElementById("loading5").style.display="none";
                },
            });
        }

接下来服务端这端就可以直接存啦！

    @PostMapping("/testuploadimg2")
    public String success(@RequestParam("file") MultipartFile file,
                          HttpServletRequest request){
        String fileId = "";
        try {
            File f = new File(file.getOriginalFilename(), file.getContentType(), file.getSize(), file.getBytes());
            f.setMd5(MD5Util.getMD5(file.getInputStream()) );
            fileId = KeyUtil.genUniqueKey();
            f.setId(fileId);
            mongoFileService.save(f);
            log.info("mongoDB存图片成功！fileId={}",fileId);
        } catch (IOException | NoSuchAlgorithmException ex) {
            ex.printStackTrace();
            log.error("【MongoDB上传文件错误】:fileId={}",fileId);
            return null;
        }
        return urlConfig.getUrl()+urlConfig.getContextPath()+"/file/"+fileId;

MongoDB文件上传我是学习慕课网的老卫老师的手记基于 MongoDB 及 Spring Boot 的文件服务器的实现做的，学无止境啊哈哈。这边就简单贴上。
文章发表等其他功能可以自行去网站体验下，还有权限管理：用户管理和文章审核，在文章编辑器的右下角可以看到，也是扫码登陆，只是需要管理员及以上的权限才可以进入页面，我就简单演示下：

文章按照要求步骤就可以提交你的表演等待审核就可以通过啦！左下角有个预览操作，点击将弹出二维码扫码就可以微信手机端预览文章详情啦，以上我将简单展示下：

所谓权限采用的简单的角色限制也就是所谓的RBAC。
采用切面编程来切面

@Aspect
@Component
@Slf4j
public class ManagerAspect {
    @Autowired
    private UserService userService;
    @Autowired
    private ManagerService managerService;
    @Pointcut("(execution(public * com.test.demo.controller.ManagerController.*(..)))"+"||"+"(execution(public * com.test.demo.controller.SuperManagerController.*(..)))")
    public void verify(){} //验证
    @Before("verify()")
    public void doerify() {    //方法的具体实现
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        String sessionOpenid = (String)attributes.getRequest().getSession().getAttribute("userid");  //openid
        User user = userService.findOne(sessionOpenid);
        Map map = new HashMap<>();
        if(user==null){
            log.error("未进入管理员页面原因：用户不存在");
            throw new ManagerException();
        }
        Manager manager =  managerService.findByOpenid(sessionOpenid);
        if(manager==null){
            log.error("未进入管理员页面原因：无管理信息");
            throw new ManagerException();
        }
        String code = manager.getPower();
        if(code.equals(String.valueOf(PowerEnum.USER.getCode()))){   //如果是读者  您无权限进入管理员页面
            throw new ManagerException();
        }
        String power = "undefind";
        if(code.equals(String.valueOf(PowerEnum.SUPER_ADMIN.getCode()))){
            power = String.valueOf(PowerEnum.SUPER_ADMIN.getMessage());
        }
        if(code.equals(String.valueOf(PowerEnum.ADMIN.getCode()))){
            power = String.valueOf(PowerEnum.ADMIN.getMessage());
        }
        if(power.equals("undefind")){
            map.put("msg","您无权限进入管理员页面");
            log.error("未进入管理员页面原因：无此权限");
            throw new ManagerException();
        }
    }
}

文章评论等是我朋友做的，他将也写篇文章介绍，他的部分我将到时在文章评论贴上链接。
总体就是这样，后期需要我将贴上源码，如需了解系统详情可以邮箱：519286925@qq.com