资讯专栏INFORMATION COLUMN

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

MyFaith / 675人阅读

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

前言

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

系统介绍

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

tips:

小尴尬的是微信测试号,要关注才可以访问微信授权,微信这边也限定了微信测试号只可以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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/68054.html

相关文章

  • GitHub 上受欢迎的 Android UI Library 整理二

    摘要:通知克服和的限制高仿淘宝微信等热门通知视图通过一行代码实现通知功能工具类轮播框通知全新的通知栏聊天视图简化开发快速创建聊天信息视图聊天视图实现聊天界面基于实际需求做出的灵活可定制的功能模仿饿了么详情页的例子带 通知 https://github.com/Tapadoo/Al... ★2528 - 克服Toast和Snackbar的限制https://github.com/wenming...

    nifhlheimr 评论0 收藏0
  • 经验 - 收藏集 - 掘金

    摘要:实现的原理权限机制与适配经验掘金一概要已经发布一段时间了,市面上很多应用都已经适配。希望对大家有所帮助,更短信验证就是那么简单掘金又有半个月没更新文章了,最近工作比较忙,一时没时间写,今天趁着清闲,赶紧补上一篇。。。。。 2017,你绝对想尝试的新 Android 库 - Android - 掘金1 BufferTextInputLayout 直接看效果图:升序效果 ... 计算机程序...

    yimo 评论0 收藏0
  • 经验 - 收藏集 - 掘金

    摘要:实现的原理权限机制与适配经验掘金一概要已经发布一段时间了,市面上很多应用都已经适配。希望对大家有所帮助,更短信验证就是那么简单掘金又有半个月没更新文章了,最近工作比较忙,一时没时间写,今天趁着清闲,赶紧补上一篇。。。。。 2017,你绝对想尝试的新 Android 库 - Android - 掘金1 BufferTextInputLayout 直接看效果图:升序效果 ... 计算机程序...

    xiangchaobin 评论0 收藏0
  • 经验 - 收藏集 - 掘金

    摘要:实现的原理权限机制与适配经验掘金一概要已经发布一段时间了,市面上很多应用都已经适配。希望对大家有所帮助,更短信验证就是那么简单掘金又有半个月没更新文章了,最近工作比较忙,一时没时间写,今天趁着清闲,赶紧补上一篇。。。。。 2017,你绝对想尝试的新 Android 库 - Android - 掘金1 BufferTextInputLayout 直接看效果图:升序效果 ... 计算机程序...

    刘厚水 评论0 收藏0
  • 基于SpringBoot微信授权登录+仿微信朋友圈+文章查看(评论)系统

    摘要:功能介绍微信网页端顾名思义就是在微信浏览器上看的啦,本系统使用微信测试号条件有限授权登录,可以查看网页端所发的文章,对文章进行评论,回复,点赞,可修改个人的资料,可以发表说说,也是可对说说进行回复点赞评论。 本系统是基于Spring Boot 技术实现的文章发布系统,该系统是我和我朋友一起做的,本文仅介绍自己的这部分,他的那部分会在本文发布后在评论里贴上链接,微信网页上的操作为我所负责...

    shadajin 评论0 收藏0

发表评论

0条评论

MyFaith

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<