摘要：微信的掃碼的登陸是要企業(yè)號的，對于一個(gè)學(xué)生狗哪來企業(yè)號，自己有個(gè)測試號內(nèi)心已十分滿足。自己決心做一個(gè)仿微信掃碼登陸，對，你沒看錯(cuò)，就是仿，堅(jiān)信高仿出奇跡。

點(diǎn)擊訪問項(xiàng)目鏈接
看到慕課網(wǎng)和segmentfault的發(fā)表手記和發(fā)表文章是Markdown 編輯器，說實(shí)話，對于第一次用的我真的很不習(xí)慣。不過對于我們代碼開發(fā)者來寫挺好的，也就對我們這些開發(fā)者述寫自己的代碼故事好點(diǎn)而已。這邊我用的summernote的輕量級文本編輯器，操作簡單，小白操作。適合一般人使用

這個(gè)系統(tǒng)我和我朋友一起做的，我只負(fù)責(zé)介紹自己部分，他的部分我將到時(shí)在文章評論貼上鏈接。
微信的掃碼的登陸是要企業(yè)號的，對于一個(gè)學(xué)生狗哪來企業(yè)號，自己有個(gè)測試號內(nèi)心已十分滿足。自己決心做一個(gè)仿微信掃碼登陸，對，你沒看錯(cuò)，就是仿，堅(jiān)信高仿出奇跡。原理很簡單，首先要會創(chuàng)建二維碼，要會微信授權(quán)登陸和websocket，也就是把微信授權(quán)登陸的地址變?yōu)槎S碼讓微信的【掃一掃】，通過websocket通信完成之間的信息傳遞。你也可以不用websocket而用輪詢，只是性能耗損多。都可實(shí)現(xiàn)。
數(shù)據(jù)庫方面采用的是mysql和mongoDB,考慮到文章系統(tǒng)的圖片太多容易給mysql帶來太多負(fù)載，分些壓力給mongoDB,所以文件方面存在mongoDB，邏輯方面存在mysql(帶寬方面無變化....)
接下來，我要開始我的表演了，給我后退！

小尷尬的是微信測試號，要關(guān)注才可以訪問微信授權(quán)，微信這邊也限定了微信測試號只可以100人。

系統(tǒng)已發(fā)布云服務(wù)器?？砷L期訪問。只是測試號菜單兩個(gè)系統(tǒng)是不可以訪問，因?yàn)槲谊P(guān)掉了啊哈哈哈，不過我已經(jīng)寫了文章在segmentfault了，SpringBoot做的兩個(gè)系統(tǒng)....，或點(diǎn)擊我的文章查看。
首先查看的首頁：

掃碼成功到成功授權(quán)登陸或者拒絕授權(quán)登陸

summernote 圖片上傳是二進(jìn)制本地文件的，也就是圖片并不會自己上傳到服務(wù)器，要自己去改寫他的圖片上傳

        $(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: {
                //覆寫掉自帶的上傳文件函數(shù)
                    onImageUpload: function (files) { //the onImageUpload API
                        img = sendFile(files[0]);
                    }
                }
            });
        });
    //這一塊是上傳文件，可傳參數(shù)是文件
   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";
                },
            });
        }

接下來服務(wù)端這端就可以直接存啦！

    @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上傳文件錯(cuò)誤】:fileId={}",fileId);
            return null;
        }
        return urlConfig.getUrl()+urlConfig.getContextPath()+"/file/"+fileId;

MongoDB文件上傳我是學(xué)習(xí)慕課網(wǎng)的老衛(wèi)老師的手記基于 MongoDB 及 Spring Boot 的文件服務(wù)器的實(shí)現(xiàn)做的，學(xué)無止境啊哈哈。這邊就簡單貼上。
文章發(fā)表等其他功能可以自行去網(wǎng)站體驗(yàn)下，還有權(quán)限管理：用戶管理和文章審核，在文章編輯器的右下角可以看到，也是掃碼登陸，只是需要管理員及以上的權(quán)限才可以進(jìn)入頁面，我就簡單演示下：

文章按照要求步驟就可以提交你的表演等待審核就可以通過啦！左下角有個(gè)預(yù)覽操作，點(diǎn)擊將彈出二維碼掃碼就可以微信手機(jī)端預(yù)覽文章詳情啦，以上我將簡單展示下：

所謂權(quán)限采用的簡單的角色限制也就是所謂的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(){} //驗(yàn)證
    @Before("verify()")
    public void doerify() {    //方法的具體實(shí)現(xiàn)
        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("未進(jìn)入管理員頁面原因：用戶不存在");
            throw new ManagerException();
        }
        Manager manager =  managerService.findByOpenid(sessionOpenid);
        if(manager==null){
            log.error("未進(jìn)入管理員頁面原因：無管理信息");
            throw new ManagerException();
        }
        String code = manager.getPower();
        if(code.equals(String.valueOf(PowerEnum.USER.getCode()))){   //如果是讀者  您無權(quán)限進(jìn)入管理員頁面
            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","您無權(quán)限進(jìn)入管理員頁面");
            log.error("未進(jìn)入管理員頁面原因：無此權(quán)限");
            throw new ManagerException();
        }
    }
}

文章評論等是我朋友做的，他將也寫篇文章介紹，他的部分我將到時(shí)在文章評論貼上鏈接。
總體就是這樣，后期需要我將貼上源碼，如需了解系統(tǒng)詳情可以郵箱：[email protected]