暑期答辩

暑期答辩

暑期进行了一个月的Javaweb培训，然后在家中利用时间，写了一个简易的Web网站

用到的技术

• 后台：SpringBoot+Mybatis+thymeleaf
• 数据库：Mysql 8.0
• 前端：自己在百度上找的一个Bootstrap模板

开发工具

• IDEA
• JDK 8

答辩介绍

主要是一个类似与影评网站，用户可以收藏自己喜欢的电影，可以在喜欢的东西下面留言，以及实现用户与用户之间的互动，关注，互粉，然后就是话题讨论。附上几张图片：

1：功能介绍

1.1 用户的登录与注册

（1）登录：用户的登录使用了两种方式，一个是使用原始的账号密码登录，另外一个是通过验证码登录，验证码发送基于用户注册时绑定的手机号。附上图片：

在这里加入了一个简单的验证，就是说如果用户输入了一个并未注册的手机号的话，系统是不会进行短信发送的，会显示出这个手机号未注册。
（2）注册：注册页面使用了简单的js表单验证以及昵称和账号查重

1.1.1 登录实现

（1）账号密码登录验证就是简单的ajax传值，然后数据库查找操作，不为空就成功，否则就是失败。
（2）手机验证码登录实现：首先在数据库user字段中建立了一个code字段，用来存放验证码，发送短信时，首先利用随机函数生成一个六位数的验证码，然后更新user字段的code，再利用阿里云短信发送前面生成的验证码到用户的手机上，然后进行输入后进行查找验证。

1.1.2注册实现

直接上js代码

function isright() {
      if(form.account.value.length<3 || form.account.value.length>12)
      {
        alert('账号不合法！请输入3-12位用户名');
        form.account.focus();
        return false;
      }
      if(form.password.value.length<6 ||form.password.value.length>16)
      {
        alert('密码不合法！请输入6-16位密码');
        form.password.focus();
        return false;
      }
      if(form.password.value != form.password2.value)//判断两次输入的密码是否一致
      {
        alert("两次输入的密码不一致！");
        form.password.focus();
        return false;
      }
      for( var i = 0 ; i < list.length;i++){
        if(list[i]==0){
          alert("您输入信息有错误，无法完成注册!")
          return false;
        }
      }
    }

1.2 用户的收藏和评论实现

1.2.1 收藏

收藏其实比较容易，就点击之后，记录下对应的电影的id，然后传值，从session中取到当前登录用户的id，然后数据库插入。

1.2.1 评论

评论是我整个东西实现过程中比较头疼的，因为当时数据库建表出现了一些问题。评论是可以实现互评回复功能的，然后当时我就把用户的回复和评论分开建表，评论是评论，回复是回复，结果后面写起来发现这样很麻烦。其实完全可以只用建立一张表，其中只需要在最后面多加一个parent_id,也就是父id，这样建表要容易的多。
还有一个比较棘手的问题就是，我的回复是存在一个list里面，然后thymeleaf通过循环来显示，然后旁边有一个回复按钮。此时我实现用户的回复，就需要获取当前被回复的人的id，被回复的id我刚开始是这样存的

但是这样存就会导致一个问题，因为我是循环list显示的，那么就会有很多个id=“followid”，这样的话我通过js取值就会取不到，因为有多个相同的id，这个时候就会默认选取循环的第一个id中的value的值。刚开始我以为是后台出了问题，改了半天都没改好，后来想了许久，才知道是这个地方。
然后我就去查了thymeleaf中的each的用法，发现each是存在两个用法的
（1）th:eath迭代集合用法:

        

            

                
序号
                
用户名
                
密码
                
用户昵称
            
            

                

                

                

                

            
        
    

这个是我所知道的一个用法，下面这个我不知道。
（2）迭代下标变量用法：
状态变量定义在一个th:每个属性和包含以下数据:

1.当前迭代索引,从0开始。这是索引属性。index

2.当前迭代索引,从1开始。这是统计属性。count

3.元素的总量迭代变量。这是大小属性。　size

4.iter变量为每个迭代。这是目前的财产。　current

5.是否当前迭代是奇数还是偶数。这些even/odd的布尔属性。

6.是否第一个当前迭代。这是first布尔属性。
　　　　
7.是否最后一个当前迭代。这是last布尔属性。

        

            

                
序号
                
用户名
                
密码
                
用户昵称
            
            

                

                

                

                

            
        
    

这个就是我解决的办法。这里我把input的id换成了动态的id。

然后onclick点击的时候传入此时循环的index下标值

回复

然后前端js获取值

function inserthuifu1(index) {
        var i = index;
        var movieid1=document.getElementById("movie"+i).value;
        var userid1 = document.getElementById("userid"+i).value;
        var followid1 = document.getElementById("followid"+i).value;
        var details1 = document.getElementById("huifu1"+i).value;
        var obj = {
          movie_id:movieid1,
          user_id:userid1,
          follow_id:followid1,
          details:details1,
        }
        $.ajax({
          "url": "/testBoot/inserthuifu",
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          data: JSON.stringify(obj),
          success: function (huifu) {
            if (huifu == "1") {
              alert("回复成功");
              window.location.reload();
            } else{
              alert("回复失败");
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log('XMLHttpRequest:');
            console.log(XMLHttpRequest);
            alert('网络异常！尝试刷新网页解决问题')
          }
        });
      }

这样就解决了我上面的问题。
但在这个过程中还有一个细节，那就是js传值的方法。
springboot2.0中这样写

th:onclick="'javascript:inserthuifu1('+${liststatus.index}+')' "

一定要注意格式。
更新后的3.0中采用了新的写法

th:onclick="|inserthuifu1(${liststatus.index})|"

1.3 用户的发起话题功能

其实这个很简单，就往对应的数据表中插入数据，然后在前端显示。

1.4 用户的关注与被关注

这个涉及到多表与多表之间的关系，我们知道，一个用户可以关注很多用户，同时可以被很多用户关注。此时只需要建立一张关联表即可。数据库建表语句如下：

create table if not exists follow_id(
	id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
	user_id int(10) default null,
	follow_id int(10) default null
)ENGINE=INNODB AUTO_INCREMENT=1 CHARSET=utf8;

user_id中记录的是被关注的用户，follow_id中记录的是关注的用户。

这个是遇到的一些问题，所以挑出来说一下，其余的功能就是基本的增删改查就可以实现。

2：配置与依赖

1：springboot

• web
• thymeleaf
• mysql

2：application.yml配置

server:
  port: 8080

spring:
  datasource:
    username: root
    password: ******
    url: jdbc:mysql://localhost:3306/dabian?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
    spring:
      mvc:
        static-path-pattern=/static/**
thymeleaf:
  prefix: classpath:/templates/
  suffix: .html
  mode: HTML
  encoding: UTF-8
  mvc:
    static-path-pattern: /static/**
mybatis:
  mapper-locations: classpath:mapping/*Mapper.xml
  type-aliases-package: com.ctgu.mybatis.pojo

#showSql
logging:
  level:
    com:
      example:
        mapper : debug

3:pom.xml

    
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.0
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            org.projectlombok
            lombok
            1.16.10
        
        
            com.github.pagehelper
            pagehelper
            4.1.6
        

        
            org.springframework.boot
            spring-boot-starter-data-jpa
        
        
            com.github.pagehelper
            pagehelper
            3.4.2
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
            com.aliyun
            aliyun-java-sdk-core
            3.7.1
        
        
            com.aliyun
            aliyun-java-sdk-dysmsapi
            1.1.0

        

    

3:项目分层目录

util中含有拦截器的配置，阿里云发送短信的板子和一个随机生成六位数的Random函数。

4：存在不足

1. 前端页面过于简陋，看上去不美观，整体感觉不好。
2. 上面提到的建表的不足，建表分析不够好，导致走了很多弯路。
3. 功能写的还是比较少，后期可以利用时间继续完善。
4. 没有用分页功能，也没有用富文本编辑器，体验感较差。

5：收获

1. 巩固了暑期一个月所学到的知识，然后能利用这些知识做一点小东西，感觉能力上面还是得到了一点的提升。
2. 数据库建表比以前有了提升，建表之前要先想好表与表之间的联系，一对一，一对多，多对多这些，是什么对应关系，就怎么建立数据表。
3. 提升了改BUG的能力，项目开发中难免会遇到一些问题，其实也没有什么难的，其实百度上面都有，把错误信息复制粘贴，然后对症下药就行了。
4. 逻辑能力提高，关于如何实现一个功能，有了大概的流程以及想法，对以后在进行此类项目的开发应该是会比之前要更加来的熟练一点。

6：源码地址

git地址