JavaWeb项目【源码】——图书项目2.0：Tomcat版本 & Vue + axios + Servlet + Lombok + JDBC + MySQL技术栈实现

悠悠 2023-10-13 10:05 13阅读 0赞

#### 目录 ####

*  项目简介
 *  思考 & 改进
 *   *  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

![在这里插入图片描述][234976b117384aaab6ecfa2ff3b5d165.png]

## 思考 & 改进 ##

### 1.Jsp都是同步请求---->改成异步Ajax【完成】 ###

![在这里插入图片描述][5b7869b5011547acb974bd4d0267b96a.png]

[Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求][Java_Asynchronous_ _ Jsp _ Ajax _ axios _ vue _ _ _]

### 2.前端用Jsp技术落后----->用Vue框架【完成】 ###

![在这里插入图片描述][7745163fa3314aeb9e635694cfed1585.png]

[前端基础（JavaScript）——基础语法（变量，分支…）& Json对象【重要】& 函数定义 & 事件][JavaScript_ Json_ _ _]

[前端基础（Vue）——基础语法（\{ \{\}\}, v-model, :src=“imagSrc“, v-for）& 事件@click & 属性和方法（this.add() + this.name）][Vue_ _ v-model_ _src_imagSrc_ v-for_ _click _ _this.add_ _ this.name]

### 3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合 ###

![在这里插入图片描述][b67844cffdd04b3e83164ed24a934c6b.png]

### 4.架构问题：servlet只能处理一个请求 ###

![在这里插入图片描述][ee94fbaa2afd49e581b266b207ac755f.png]

## 用Vue和异步Ajax改造项目 ##

![在这里插入图片描述][c08fc1ae9f4045e38446d388c3a49328.png]  
[Java网络开发（Tomcat异步分页+增删改查）——从同步到异步 & 从jsp 到 js + axios + vue 实现 数据分页显示 & 数据增删改查][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” ###

### 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() ###

### 8.前端美化table 和 btn ###

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代码耦合 ###

![在这里插入图片描述][b67844cffdd04b3e83164ed24a934c6b.png]

### 4.架构问题：servlet只能处理一个请求 ###

![在这里插入图片描述][ee94fbaa2afd49e581b266b207ac755f.png]

### 5.响应方式为响应一个Json，但是servlet写法很繁琐 ###

> resp.getWriter().write(JSON.toJSONString(new ResData(

### 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));

[234976b117384aaab6ecfa2ff3b5d165.png]: https://img-blog.csdnimg.cn/234976b117384aaab6ecfa2ff3b5d165.png
[5b7869b5011547acb974bd4d0267b96a.png]: https://img-blog.csdnimg.cn/5b7869b5011547acb974bd4d0267b96a.png
[Java_Asynchronous_ _ Jsp _ Ajax _ axios _ vue _ _ _]: https://blog.csdn.net/Pireley/article/details/131142137
[7745163fa3314aeb9e635694cfed1585.png]: https://img-blog.csdnimg.cn/7745163fa3314aeb9e635694cfed1585.png
[JavaScript_ Json_ _ _]: https://blog.csdn.net/Pireley/article/details/131074239
[Vue_ _ v-model_ _src_imagSrc_ v-for_ _click _ _this.add_ _ this.name]: https://blog.csdn.net/Pireley/article/details/131125600
[b67844cffdd04b3e83164ed24a934c6b.png]: https://img-blog.csdnimg.cn/b67844cffdd04b3e83164ed24a934c6b.png
[ee94fbaa2afd49e581b266b207ac755f.png]: https://img-blog.csdnimg.cn/ee94fbaa2afd49e581b266b207ac755f.png
[c08fc1ae9f4045e38446d388c3a49328.png]: https://img-blog.csdnimg.cn/c08fc1ae9f4045e38446d388c3a49328.png
[Java_Tomcat_ _ _jsp _ js _ axios _ vue _ _ _]: https://blog.csdn.net/Pireley/article/details/131160087