JavaWeb项目【源码】——图书项目2.0：Tomcat版本 & Vue + axios + Servlet + Lombok + JDBC + MySQL技术栈实现
目录
- 项目简介
- 思考 & 改进
-
- 1.Jsp都是同步请求---->改成异步Ajax【完成】
- 2.前端用Jsp技术落后----->用Vue框架【完成】
- 3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合
- 4.架构问题：servlet只能处理一个请求
- 用Vue和异步Ajax改造项目
- 前端的修改和升级
-
- 1.固定的响应格式
- 2.name 变成 v-model 进行双向绑定
- 3.下拉框选中--:value="type.id" +v-model="companyDb.typeId"
- 4.vue导包固定写法
- 5.script固定写法
- 6.axios的get请求
- 7.axios的post请求---let params = new URLSearchParams()
- 8.前端美化table 和 btn
- 后端的响应
-
- 1.后端改成resp响应
- 思考 & 改进
-
- 3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合
- 4.架构问题：servlet只能处理一个请求
- 5.响应方式为响应一个Json，但是servlet写法很繁琐
- 6.在servlet中接收前端传的参数都是String，用的时候还需要类型转换
项目简介
本项目是一个简单的图书管理系统，本博客在tomcat中采用servlet 和 jsp技术实现如下功能：
- 用户登陆，输入用户名，密码，登陆成功后保存到session中，跳转到首页；
- 用户注册，输入相关信息，以及验证码，注册成功到登陆页面；
- 用户信息修改，昵称修改，密码修改；
- 图书信息页面：展示所有信息，到数据分页显示，到分页展示+模糊查询+只看自己的书；
- 新增图书信息，新增一条图书信息，类型下拉框选择，书名，简介输入，session中获取用户名和id，数据插入数据库中，再回到图书信息页面；
- 删除图书信息：只能删除自己的书，删除成功再回到图书信息页面；
- 修改图书信息：原有的信息进行回显，修改成功后再回到图书信息页面；
- 图书类型分类统计：按照图书类型进行统计，数量为0显示0
思考 & 改进
1.Jsp都是同步请求---->改成异步Ajax【完成】
Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求
2.前端用Jsp技术落后----->用Vue框架【完成】
前端基础（JavaScript）——基础语法（变量，分支…）& Json对象【重要】& 函数定义 & 事件
前端基础（Vue）——基础语法（{{}}, v-model, :src=“imagSrc“, v-for）& 事件@click & 属性和方法（this.add() + this.name）
3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合
4.架构问题：servlet只能处理一个请求
用Vue和异步Ajax改造项目
Java网络开发（Tomcat异步分页+增删改查）——从同步到异步 & 从jsp 到 js + axios + vue 实现 数据分页显示 & 数据增删改查
前端的修改和升级
1.固定的响应格式
import com.alibaba.fastjson.JSON;
import com.tianju.entity.ResData;
resp.getWriter().write(JSON.toJSONString(
new ResData(200, "登陆成功", newUser)));
2.name 变成 v-model 进行双向绑定
<%-- 要把原有的书名，和简介，以及类型信息显示出来--%>
书名：<input type="text" v-model="opus.name" ><br>
简介：<input type="text" v-model="opus.intro" ><br>
类型：
<%-- 用forEach把类型信息拼出来--%>
<%-- v-model="opus.typeId" 双向绑定--%>
<select v-model="opus.typeId">
<%-- 如果根据id查询到的书籍信息，和这里拼的某一个类型信息一致，则设置成selected ，实现默认选中--%>
<option v-for="types in bookTypeList" :value="types.id">{{types.name}}</option>
</select><br>
3.下拉框选中–:value=“type.id” +v-model=“companyDb.typeId”
<select v-model="companyDb.typeId">
<option value="">请选择</option>
<option v-for="type in typeList" :value="type.id">{{type.name}}</option>
</select>
4.vue导包固定写法
<head>
<title>修改公司信息</title>
<link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
<script src="/day06/js/axios.min.js"></script>
<script src="/day06/js/jquery-3.5.1.js"></script>
<script src="/day06/bootstrap/js/bootstrap.js"></script>
<script src="/day06/js/vue.min-v2.5.16.js"></script>
</head>
5.script固定写法
let app = new Vue({
// 选择操作的div区域
el:"#app",
// 数据区
data:{},
// 方法区
methods:{},
// 文档加载之后就执行
created(){},
// 整个页面全部加载完成后再执行
mounted(){},
})
6.axios的get请求
axios.get("/day06/types/list/vue?name="+"柯基")
.then(response=>{
let resp = response.data;
console.log(resp);
},error=>{
console.log(error)
})
7.axios的post请求—let params = new URLSearchParams()
let params = new URLSearchParams();
params.append("username",this.username);
params.append("password",this.password);
params.append("rePassword",this.rePassword);
params.append("gender",this.gender);
params.append("birthday",this.birthday);
params.append("imgCode",this.imgCode);
console.log(params);
axios.post("/day06/comUser/register/vue",params)
.then(response=>{
let resp = response.data;
console.log(resp);
if (resp.code==200)
{
// 成功，跳转回到list页面
location.href="/day06/compMess/listVue.jsp"
}
else
{
alert(resp.msg);
}
},error=>{
console.log(error)
})
8.前端美化table 和 btn
<table class="table-condensed table-hover table-striped table-responsive table-cell table-row-cell table-view table-bordered">
class="btn btn-primary btn-sm"
后端的响应
1.后端改成resp响应
// 4.new PageInfo对象，共享页数等，以及查询到的数据
List<Company> list = companyService.queryByLikeNameLimit(pageNum, pageSize,name);
PageInfo<Company> pageInfo = new PageInfo<>(pageNum, pageSize, total, pages, list);
resp.getWriter().write(JSON.toJSONString(
new ResData(200, "ok", pageInfo)
));
思考 & 改进
3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合
4.架构问题：servlet只能处理一个请求
5.响应方式为响应一个Json，但是servlet写法很繁琐
resp.getWriter().write(JSON.toJSONString(new ResData(
// 4.new PageInfo对象，共享页数等，以及查询到的数据
List<Company> list = companyService.queryByLikeNameLimit(pageNum, pageSize,name);
PageInfo<Company> pageInfo = new PageInfo<>(pageNum, pageSize, total, pages, list);
resp.getWriter().write(JSON.toJSONString(
new ResData(200, "ok", pageInfo)
));
6.在servlet中接收前端传的参数都是String，用的时候还需要类型转换
String name = req.getParameter("name");
String typeId = req.getParameter("typeId");
String birthday = req.getParameter("birthday");
当用的时候，如果想要的类型其实不是String，还需要自己转换格式
// 日期类型转换
private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
comUser.setBirthday(sdf.parse(birthday));
} catch (ParseException e) {
throw new RuntimeException(e);
}
// int类型转换
opus.setTypeId(Integer.parseInt(typeId));