暑期答辩
暑期进行了一个月的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我刚开始是这样存的
<input type="hidden" th:value="${list1.follow_id}" id="followid" name="movie_id">
但是这样存就会导致一个问题，因为我是循环list显示的，那么就会有很多个id=“followid”，这样的话我通过js取值就会取不到，因为有多个相同的id，这个时候就会默认选取循环的第一个id中的value的值。刚开始我以为是后台出了问题，改了半天都没改好，后来想了许久，才知道是这个地方。
然后我就去查了thymeleaf中的each的用法，发现each是存在两个用法的
（1）th:eath迭代集合用法:
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>用户昵称</th>
</tr>
<tr th:each="user:${userlist}">
<td th:text="${user.id}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
<td th:text="${user.petname}"></td>
</tr>
</thead>
</table>
这个是我所知道的一个用法，下面这个我不知道。
（2）迭代下标变量用法：
状态变量定义在一个th:每个属性和包含以下数据:
1.当前迭代索引,从0开始。这是索引属性。index
2.当前迭代索引,从1开始。这是统计属性。count
3.元素的总量迭代变量。这是大小属性。 size
4.iter变量为每个迭代。这是目前的财产。 current
5.是否当前迭代是奇数还是偶数。这些even/odd的布尔属性。
6.是否第一个当前迭代。这是first布尔属性。
7.是否最后一个当前迭代。这是last布尔属性。
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>用户昵称</th>
</tr>
<tr th:each="user,userStat:${userlist}" th:class="${userStat.odd}?'odd':'even'">
<td th:text="${user.id}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
<td th:text="${user.petname}"></td>
</tr>
</thead>
</table>
这个就是我解决的办法。这里我把input的id换成了动态的id。
<input type="hidden" th:value="${list1.follow_id}" th:id="followid+${liststatus.index}" name="follow_id">
然后onclick点击的时候传入此时循环的index下标值
<button class="btn" th:onclick="'javascript:inserthuifu1('+${liststatus.index}+')' ">回复</button>
然后前端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
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.10</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>3.7.1</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-dysmsapi</artifactId>
<version>1.1.0</version>
</dependency>
</dependencies>
3:项目分层目录
util中含有拦截器的配置，阿里云发送短信的板子和一个随机生成六位数的Random函数。
4：存在不足
- 前端页面过于简陋，看上去不美观，整体感觉不好。
- 上面提到的建表的不足，建表分析不够好，导致走了很多弯路。
- 功能写的还是比较少，后期可以利用时间继续完善。
- 没有用分页功能，也没有用富文本编辑器，体验感较差。
5：收获
- 巩固了暑期一个月所学到的知识，然后能利用这些知识做一点小东西，感觉能力上面还是得到了一点的提升。
- 数据库建表比以前有了提升，建表之前要先想好表与表之间的联系，一对一，一对多，多对多这些，是什么对应关系，就怎么建立数据表。
- 提升了改BUG的能力，项目开发中难免会遇到一些问题，其实也没有什么难的，其实百度上面都有，把错误信息复制粘贴，然后对症下药就行了。
- 逻辑能力提高，关于如何实现一个功能，有了大概的流程以及想法，对以后在进行此类项目的开发应该是会比之前要更加来的熟练一点。
1641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
