2.2版本分析

Word count: 2.8k   |   Reading time≈ 14 min

2.2版本分析

2.1版本上的升级

需求

最近在读书做笔记时，想到，传统的手写笔记不容易编写，也不容易阅读。

而且受写作的人的笔迹影响很大。由于我的笔迹看着很差，但是我是不想改的，因此我想到编写一个程序用来存放我的阅读笔迹。

正好“阶梯计划”程序还有一个空闲地方没有用，因此就直接塞进这个程序吧

z3eGm6.png

这里模块虽然显示的是党章，但是这里其实只添加了一个别人的超链接，修改一下不会有影响。

编写

前端准备

首先我们应该挑选一个漂亮的前端来渲染我们的数据

z3ewpd.png

并没有在网上找到合适的页面，就自己手写吧

z3eDXt.png

大概就是这个样子 后续还会添加分页功能

前端预留的功能有：

  • 添加金句
  • 修改金句
  • 删除金句
  • 分页查询

后端准备

最简单一个测试demo

数据库准备

z3efpj.png

**表名为：fagment(片段)**列名包括

列名 意义 类型
content 金句内容 text
from 节选自 varchar
addByID 添加的管理员的ID varchar

后端框架搭建

POJO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.dwx.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor

public class Fragment {
    private String content;
    private String from;
    private String addByID;
    private String addByName;
}

Mapper

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.dwx.mapper;

import com.dwx.pojo.Fragment;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface FragmentMapper {
    //查询金句操作
    //首先写一个能够查询所有金句的程序试水
    List<Fragment> getAllFragments();
}

前端jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/houtai/jsp/common/head.jsp" %>

<head>
    <style type="text/css">
        .head {
            margin-left: 90%;
        }
        .main{
            align-self: center;
            /*background-color: #61CAD0;*/
            /*height: auto;*/
            height: 160px;
            width: 60%;
            margin-left: 20%;
            margin-bottom: 20px;

            /*设置一个边框*/
            border:4px solid #eeab07;
            border-radius: 10px;
        }
        .body{
            /*background-color: #0a5eb6;*/
            height: 70%;
        }
        .foot{
            /*background-color: #2b4906;*/
            height: 30%;
            /*横向布局*/
            display: flex;
            border:2px solid #eeab07;
            border-top-color: #ab1e1e;
        }
        .from{
            /*background-color: #ab1e1e;*/
            height: 100%;
            width: 40%;
            /*float: left;*/
        }
        .addBy{
            /*background-color: #6A6AFF;*/
            height: 100%;
            width: 20%;
            /*float: left;*/
            margin-left: 5%;
            margin-right: 5%;
        }
        .update{
            /*background-color: #aaaaaa;*/
            height: 100%;
            width: 10%;
            margin-left: 5%;
            margin-right: 5%;
            /*float: right;*/
            text-align: center;
        }
        .delete{
            /*background-color: #f6f7f9;*/
            height: 100%;
            width: 10%;
            margin-left: 5%;
            text-align: center;
            /*float: right;*/
        }
        .p1{
            font-weight: bold;
            font-family: 华文楷体;
            font-size: large;
        }
        .p2{
            font-weight: bold;
            font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
            font-size: large;
        }




    </style>
</head>


<div class="right">
    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>金句节选界面</span>
    </div>
    <div class="head">
        <form  method="get" action="${pageContext.request.contextPath }/houtai/jsp/bill.do">
            <input  value="添加金句" type="submit" id="searchbutton">
        </form>
    </div>
    <!--文章块-->
    <c:forEach var="fragment" items="${fragments}" varStatus="status">
            <div class="main">
                <div class="body">
                    <p class ="p1">${fragment.content}
                    </p>
                </div>
                <div class="foot">
                    <div class="from">
                        <p class="p2">节选自: ${fragment.from}</p>
                    </div>
                    <div class="addBy">
                        <p class="p2">添加者: ${fragment.addByID}</p>
                    </div>
                    <div class="update">
                        <p class="p2"><a>修改</a></p>
                    </div>
                    <div class="delete">
                        <p class="p2"><a>删除</a></p>
                    </div>
                </div>
            </div>
    </c:forEach>

</div>
</section>


<%@include file="/houtai/jsp/common/foot.jsp" %>
<script type="text/javascript" src="${pageContext.request.contextPath }/houtai/js/billlist.js"></script>

最简单的框架执行结束

z3eX9J.png

优化

查询数据需要修改

z3exj1.png

这里应该是name，不是id，在service层进行一个修改即可。

编写添加金句程序

前端准备

z3m9HK.png

我的水平 写成这样已经是我的极限了

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/houtai/jsp/common/head.jsp" %>

<head>
    <style type="text/css">
        .fragmentAddBody {
            height: 80%;
            width: 30%;
            /*background-color: #eee304;*/
            /*居中*/
            margin-left: 30%;
            margin-top: 20px;

            /*添加边框*/
            border-width: 6px;
            border-style: solid;
            border-color: #a40505;
            border-radius: 10px;

        }

        .fragmentAddContest {
            height: 240px;
            width: 90%;
            margin-top: 20px;
            margin-left: 5%;
            background-color: #10c278;
        }

        .fragmentAddFrom {
            height: 60px;
            width: 90%;
            margin-top: 8px;
            margin-left: 5%;
            background-color: #f6bc04;
        }

        .fragmentAddBtn {
            height: 60px;
            width: 90%;
            margin-top: 8px;
            margin-left: 5%;

            /*background-color: #ab1e1e;*/
            display: flex;

        }

        .save {
            /*background-color: #a2d866;*/
            height: 60px;
            width: 40%;
            margin-right: 20%;
            margin-left: 5%;
            margin-top: 20px;
        }

        .back {
            /*background-color: #61CAD0;*/
            height: 60px;
            width: 40%;
            margin-top: 20px;
        }
        .contest{


        }




    </style>
</head>


<div class="right">
    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>金句管理页面 >> 金句添加页面</span>
    </div>


    <div class="fragmentAddBody">

        <!--操作按钮-->
        <form method="post" action="${pageContext.request.contextPath}/fragmentAdd">

            <div class="fragmentAddContest">
                <p>金句片段:</p><textarea cols="46" name="fragmentContest" rows="16" class="contest"></textarea>
            </div>
            <div class="fragmentAddFrom">
                <p>选自: </p><textarea cols="46" name="fragmentFrom" rows="3" class="from"></textarea>
            </div>

            <div class="fragmentAddBtn">
                <div class="save">
                    <input  style="width: 100px"   type="submit"   value="保存">
                </div>

                <div class="back">
                    <input  style="width: 100px"   type="submit"   value="返回">
                </div>
            </div>


        </form>

    </div>

</div>
</section>

<%@include file="/houtai/jsp/common/foot.jsp" %>
<%--<script type="text/javascript" src="${pageContext.request.contextPath }/js/billmodify.js"></script>--%>

后端编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
@RequestMapping("/fragmentAdd")
  public String fragmentAdd(String fragmentContest, String fragmentFrom, String type, HttpServletRequest req, HttpServletResponse resp) {

      //添加一个过滤器
      UserUtil util = new UserUtil();
      boolean b1 = false;
      try {
          b1 = util.userExist(req, resp);
      } catch (IOException e) {
          throw new RuntimeException(e);
      }
      if (!b1) {
          return "/error/index";
      }
      //首先判断类型
      System.out.println("该操作的类型为: " + type);
      if (type.equals("保存")) {

          System.out.println("输入的金句内容是: " + fragmentContest);
          System.out.println("输入的金句节选自: " + fragmentFrom);
          //从session里得到用户ID
          HttpSession session = req.getSession();
          User user = (User) session.getAttribute("userSession");
          System.out.println("添加者ID: " + user.getId());

          if (!fragmentContest.equals("") && !fragmentFrom.equals("")) {
              //如果都不为空 则进行添加程序
              boolean b = fragmentService.addFragment(fragmentContest, fragmentFrom, user.getId());
              if (b) {
                  System.out.println("添加金句成功");
              } else {
                  System.out.println("添加金句失败");
              }
          }
          return "/houtai/jsp/billadd";
      } else {
          //执行一个查询程序
          getALlFragments(req, resp);
          return "/houtai/jsp/billlist";
      }

  }

编写删除程序

z3miND.png

删除成功

image-20221122181527392

后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//删除金句
    @RequestMapping("/fragmentDelete")
    public String fragmentDelete(String fragmentContent,HttpServletRequest req, HttpServletResponse resp){


        System.out.println("要删除金句的内容是:"+fragmentContent);

        //添加一个过滤器
        UserUtil util = new UserUtil();
        boolean b1 = false;
        try {
            b1 = util.userExist(req, resp);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        if (!b1) {
            return "/error/index";
        }
        //进行一个判断看能不能删除
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("userSession");
        String id = user.getId();
        System.out.println(id);
        boolean b = util.userRole(req, resp, id);
        if (b){
            System.out.println("有资格，可以删除");
            fragmentService.deleteFragment(fragmentContent);
        }
        else {
            System.out.println("没资格删除");
        }


        //再次更新一下fragmentList
        getALlFragments(req, resp);
        return "/houtai/jsp/billlist";

    }

编写修改程序

根据修改程序的逻辑，应该分为两块，

第一块，点击能够跳转到类似查看的页面:

前端编写：

z3mVgA.png

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/houtai/jsp/common/head.jsp" %>

<head>
    <style type="text/css">
        .fragmentAddBody {
            height: 80%;
            width: 30%;
            /*background-color: #eee304;*/
            /*居中*/
            margin-left: 30%;
            margin-top: 20px;

            /*添加边框*/
            border-width: 6px;
            border-style: solid;
            border-color: #a40505;
            border-radius: 10px;

        }

        .fragmentAddContest {
            height: 240px;
            width: 90%;
            margin-top: 20px;
            margin-left: 5%;
            background-color: #10c278;
        }

        .fragmentAddFrom {
            height: 60px;
            width: 90%;
            margin-top: 8px;
            margin-left: 5%;
            background-color: #f6bc04;
        }

        .fragmentAddBtn {
            height: 60px;
            width: 90%;
            margin-top: 8px;
            margin-left: 5%;

            /*background-color: #ab1e1e;*/
            display: flex;

        }

        .save {
            /*background-color: #a2d866;*/
            height: 60px;
            width: 40%;
            margin-right: 20%;
            margin-left: 5%;
            margin-top: 20px;
        }

        .back {
            /*background-color: #61CAD0;*/
            height: 60px;
            width: 40%;
            margin-top: 20px;
        }
        .contest{


        }




    </style>
</head>


<div class="right">
    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>金句管理页面 >> 金句添加页面</span>
    </div>


    <div class="fragmentAddBody">

        <!--操作按钮-->
        <form method="post" action="${pageContext.request.contextPath}">

            <div class="fragmentAddContest">
                <p>金句片段:</p><textarea  cols="46" name="fragmentContest" rows="16" class="contest">${fragment.content}</textarea>
            </div>
            <div class="fragmentAddFrom">
                <p>选自: </p><textarea cols="46" name="fragmentFrom" rows="3" class="from">${fragment.from}</textarea>
            </div>

            <div class="fragmentAddBtn">
                <div class="save">
                    <input  style="width: 100px"   name="type" type="submit"   value="保存">
                </div>

                <div class="back">
                    <input  style="width: 100px"   name="type"  type="submit"   value="返回">
                </div>
            </div>


        </form>

    </div>

</div>
</section>

<%@include file="/houtai/jsp/common/foot.jsp" %>
<%--<script type="text/javascript" src="${pageContext.request.contextPath }/js/billmodify.js"></script>--%>

后端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@RequestMapping("/fragmentUpdateView")
//修改程序分为两个 第一个是一个查询程序
public String fragmentUpdateView(int id,HttpServletRequest req, HttpServletResponse resp){

    System.out.println("要修改的金句的id为: "+id);

    Fragment fragment = fragmentService.getFragmentByID(id);

    req.getSession().setAttribute("fragment",fragment);

    return "/houtai/jsp/billmodify";

}    @RequestMapping("/fragmentUpdateView")
//修改程序分为两个 第一个是一个查询程序
public String fragmentUpdateView(int id,HttpServletRequest req, HttpServletResponse resp){

    System.out.println("要修改的金句的id为: "+id);

    Fragment fragment = fragmentService.getFragmentByID(id);

    req.getSession().setAttribute("fragment",fragment);

    return "/houtai/jsp/billmodify";

}

第二个程序是保存修改结果程序

修改前：

z3muHf.png

修改之后

z3mQUS.png

后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//修改金句
    //修改程序
    @RequestMapping("/fragmentUpdate")
    public String fragmentUpdate(String content, String from, String type, HttpServletRequest req, HttpServletResponse resp) {

        //用session获得id
        Fragment fragmentOld = (Fragment) req.getSession().getAttribute("fragment");
        int id = fragmentOld.getId();


        System.out.println("要修改的金句: "+content);
        System.out.println("选自: "+from);
        System.out.println("操作内容: "+type);

        if (type.equals("保存")) {

            //修改程序
            fragmentService.updateFragment(content, from, id);

            //修改完更新一下程序
            Fragment fragment = fragmentService.getFragmentByID(id);
            req.getSession().setAttribute("fragment", fragment);
            return "/houtai/jsp/billmodify";

        } else {
            //没有修改 直接跳转回原页面
            return "/houtai/jsp/billlist";
        }


    }

结束

一个简单的包含增删改查程序的一个模块就写好了，不过还有遗留问题

  • 没有分页查询
  • 分页查询需要大量的数据，但是我现在还没有这些数据
Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2015-2023 dwx
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信