暑期答辩
暑期进行了一个月的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的能力,项目开发中难免会遇到一些问题,其实也没有什么难的,其实百度上面都有,把错误信息复制粘贴,然后对症下药就行了。
- 逻辑能力提高,关于如何实现一个功能,有了大概的流程以及想法,对以后在进行此类项目的开发应该是会比之前要更加来的熟练一点。