社区项目总结

前言

这应该算我第一次写博客吧

为什莫在这个时间段来写这个博客

最近有点颓废( 还是懒 )，一个本来两周可以搞定的项目，硬是拖拖拉拉写了一个月，然后今天项目算是写完了，

其实并不满意，等下一阶段在进行重构吧，所以就想起写篇博客记录一下，也是为了巩固吧，然后准备下一阶段的学习。

好了，废话不多说了，进入主题

在6月中旬，写完一个springboot项目后，觉得还是不熟练，便构思去在做一个项目，然后 社区 项目的思路就出来，

项目

1、数据库

首先对数据库进行构思，如图：

看着是5张表，其实只用到了三张表，另外两张表等重构了在去使用

一般情况下，有关系的表都要设置外键关系 ，但是，为了方便，我就没设，哈哈

-- 用户
drop table if exists user;
create table user(
id int primary key auto_increment,
uid VARCHAR(255),
uname VARCHAR(50),
sex char ,
photo VARCHAR(255),
address VARCHAR(100),
u_create datetime not NULL default CURRENT_TIMESTAMP,
u_modified datetime,
type VARCHAR(10)
);
-- 问题
drop table if exists question;
create table question(
id int primary key auto_increment,
title VARCHAR(50),
q_create datetime not NULL default CURRENT_TIMESTAMP,
q_modified datetime,
description LONGTEXT,
creator_id int ,
like_count int DEFAULT 0,
comment_count int DEFAULT 0,
reading_count int DEFAULT 0,
tag VARCHAR(255)
);
-- 通知
drop table if exists notice;
create table notice(
id int primary key auto_increment,
notifier int, -- 通知人
receiver int, -- 接收人
outer_id int, -- 对象id
type int, -- 回复类型 问题/评论
gmt_create datetime not NULL default CURRENT_TIMESTAMP, -- 创建时间
status int DEFAULT '0'
);
select * from notice;
drop table if exists comments;
-- 评论
create table comments(
id int primary key auto_increment,
content VARCHAR(255),
parent_id int , -- 问题id
child_id int,
commentator int, -- 评论人id
c_create datetime not NULL default CURRENT_TIMESTAMP, -- 创建时间
c_modified datetime,
like_count int -- 点赞数
);
-- 分类
drop table if exists type;
create table type(
tid int primary key auto_increment,
tname VARCHAR(50),
tag VARCHAR(50)
);
-- 标签
drop table if exists tags;
create table tags(
tid int primary key auto_increment,
tag VARCHAR(50)
);
insert into type(tname,tag) values("前端","javascript");
insert into type(tname,tag) values("前端","vue.js");
insert into type(tname,tag) values("前端","css");
insert into type(tname,tag) values("前端","html");
insert into type(tname,tag) values("前端","jquery");
insert into type(tname,tag) values("前端","bootstarp");
insert into type(tname,tag) values("前端","layui");
insert into type(tname,tag) values("前端","es6");

insert into type(tname,tag) values("后端","Java");
insert into type(tname,tag) values("后端","爬虫");
insert into type(tname,tag) values("后端","golang");
insert into type(tname,tag) values("后端","spring");
insert into type(tname,tag) values("后端","Springboot");

insert into type(tname,tag) values("数据库","mysql");
insert into type(tname,tag) values("数据库","redis");
insert into type(tname,tag) values("数据库","Sql");
insert into type(tname,tag) values("数据库","mogodb");

insert into type(tname,tag) values("运维","linux");
insert into type(tname,tag) values("运维","nginx");
insert into type(tname,tag) values("运维","docker");
insert into type(tname,tag) values("运维","apache");
insert into type(tname,tag) values("运维","服务器");
insert into type(tname,tag) values("运维","负载均衡");

insert into type(tname,tag) values("工具","idea");
insert into type(tname,tag) values("工具","git");
insert into type(tname,tag) values("工具","eclipse");
insert into type(tname,tag) values("工具","sublime-text");

insert into type(tname,tag) values("其他","shiro");
insert into type(tname,tag) values("其他","security");
insert into type(tname,tag) values("其他","安全");
insert into type(tname,tag) values("其他","其他");

数据库就这样。

2、java

先想到去做那些功能，然后就下手

我理了一下，大概就下面这些功能吧

• 登录功能是少不了的
• 发布问题
• 修改问题
• 查询问题
• 修改问题
• 用户进行评论
• 二级评论
• 首页的模糊查询
• 全局异常处理（可能是第一次写吧，觉得有点难，下次一定理解）
• 使用泛型封装返回数据 ( 挺香的 )
• 使用editor 并 上传图片到七牛云

这是项目结构

大概就这些吧，基本上的crud ，还是太菜了。。。。

3、前端

前端这块使用了bootstarp ，拿着模板 直接就是ctrl c +v 。也太简单了。

难的就是前端的页面调优，大概搞了一天吧。。。。

js这块的话，也遇到了些问题，也搞了几天，还专门去快速过了一下js的基本使用

说多了都是泪

4、难点（遇到的问题）

4.1、二级评论

首先这块的逻辑搞了好久，搞的都想放弃了，最后还是坚持下来了

这块我只用了一张表，有好有坏吧，

一级评论首先对应问题id，二级在对应评论的id，其实很简单，不知道当时我在想什么 [ 真菜 ]

4.2、mybatis日志打印出多条数据，可是只显示一条数据问题

一对多，如果多个表字段名相同，要记住使用别名，否则多条数据只显示一条

    <select id="commentListByQID" resultMap="commentUser">
      select u.id as uid,u.uname,u.photo,c.content,c.c_create,c.id,c.child_id,c.parent_id
      from user u left join comments c
      on u.id=c.commentator and c.parent_id=#{id} ORDER BY c.id desc
    </select>
    <resultMap id="commentUser" type="comment">
        <id property="id" column="id"/>
        <result property="content" column="content"/>
        <result property="cCreate" column="c_create"/>
        <result property="childId" column="child_id"/>
        <result property="parentId" column="parent_id"/>
        <collection property="user" ofType="User">
            <id property="id" column="uid"/>
            <result property="uName" column="uname"/>
            <result property="photo" column="photo"/>
        </collection>
    </resultMap>

这真的是低级错误了

当时还搞了半小时

4.3、用户添加不上去（编码，非法字符）

• 首先从qq拿出来的用户名是非法字符，应该是不支持的，所以会添加失败
• mysql的编码集里有一套编码是支持的，utf8mb4

这个搞了半天

4.4、使用editor(富文本编辑器)

官方地址：http://editor.md.ipandao.com/

GItHub地址：https://github.com/pandao/editor.md

算是第二次使用了，还是遇到了第一次使用的问题，光标不换行，真的都想放弃用它了

然后去找了找其他富文本编辑器，看了看，要不就是英文的开发文档，要不就没预览模式，

最后还是去使用它了，当然问题也解决了，就是因为路径的问题导致不能正常使用

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

这块我使用到了图片上传

<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            width  : "100%",
            height : 550,
            path   : "/editormd/lib/",
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/upload",  //这个对应controller地址
        });
    });
</script>

java层代码：

public class QiNiuUtils {
    public static String upload(String fileName,byte[] bytes) {

        String[] split = fileName.split("\\.");
        if (split.length > 1) {
            fileName = UUID.randomUUID().toString() + "." + split[split.length - 1];
        }
        //构造一个带指定 Region 对象的配置类
        Configuration cfg = new Configuration(Zone.zone0());
//...其他参数参考类注释

        UploadManager uploadManager = new UploadManager(cfg);
//...生成上传凭证，然后准备上传

        String bucket = "你的 空间名";

//        ByteArrayInputStream byteInputStream=new ByteArrayInputStream(bytes);
        Auth auth = Auth.create(“你的 AccessKey ”,"你的 SecretKey");
        String upToken = auth.uploadToken(bucket);

        try {
            Response response = uploadManager.put(bytes, fileName, upToken);
            //解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
        } catch (QiniuException ex) {


        }
        return fileName;
    }
}

FileDTO：

@Data
public class FileDTO {
    private int success;
    private String message;
    private String url;
}

controller:

@Controller
public class FileImgController {


    @RequestMapping("/upload")
    @ResponseBody
    public FileDTO upload(HttpServletRequest request){
        String imgUrl = "";
        MultipartHttpServletRequest multipartHttpServletRequest=(MultipartHttpServletRequest) request;
        MultipartFile file = ((MultipartHttpServletRequest) request).getFile("editormd-image-file");

        try {
            imgUrl = QiNiuUtils.upload(file.getOriginalFilename(), file.getBytes());
            System.out.println(file.getOriginalFilename());
        } catch (Exception e) {
            e.printStackTrace();
        }
        FileDTO fileDTO = new FileDTO();
        fileDTO.setSuccess(1);
        fileDTO.setUrl("这个上自己储存空间看吧"+imgUrl+"");
        return fileDTO;

    }
}

总结

前前后后一个月，实际上写项目的时间可能两周不到，

中间有段时间静不下心去写，便把抖音，快手什么的都卸载了，然而并没有什么卵用

还是坐不下去在那敲，

可能是没目标，没方向了

现在，下一阶段的目标，方向明确了。可以埋头干了 gogogo