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框架【完成】

JavaWeb项目【源码】——图书项目2.0:Tomcat版本 & Vue + axios + Servlet + Lombok + JDBC + MySQL技术栈实现_第1张图片

前端基础(JavaScript)——基础语法(变量,分支…)& Json对象【重要】& 函数定义 & 事件

前端基础(Vue)——基础语法({{}}, v-model, :src=“imagSrc“, v-for)& 事件@click & 属性和方法(this.add() + this.name)

3.架构问题:配置数据和Java代码耦合;SQL语句和Java代码耦合

在这里插入图片描述

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

在这里插入图片描述

用Vue和异步Ajax改造项目

JavaWeb项目【源码】——图书项目2.0:Tomcat版本 & Vue + axios + Servlet + Lombok + JDBC + MySQL技术栈实现_第2张图片
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));

你可能感兴趣的:(Java,vue.js,servlet,mysql,tomcat,maven,java)