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

Perley620

已于 2023-10-08 09:54:04 修改

阅读量149

点赞数

文章标签： vue.js servlet mysql tomcat maven java

于 2023-07-07 17:20:13 首次发布

本文链接：https://blog.csdn.net/Pireley/article/details/131505875

版权

笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

项目简介

本项目是一个简单的图书管理系统，本博客在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));

Perley620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb项目【源码】——图书项目2.0：Tomcat版本 & Vue + axios + Servlet + Lombok + JDBC + MySQL技术栈实现

用vue框架和异步ajax改造图书项目；遗留问题：java和sql的耦合问题；其他问题：一个业务得写很多servlet，响应json的写法繁琐，后端获取都是string，用的时候还得转换类型
复制链接

扫一扫