JavaWeb小项目——【源码】使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发

女爷i 2023-10-12 15:27 5阅读 0赞

#### 目录 ####

*  引出
 *  小项目要求
 *  固定的东西
 *   *  1.pom.xml文件配置 + web.xml文件配置
     *  2.util里面JDBC的DBUtils + 字符串工具StringUtils
     *  3.entity里面的PageInfo分页实体类+ResData响应标准格式
     *  4.filter里面的编码CharacterEncodingFilter和权限LoginAuthorFilter
     *  5.前端固定的js包和bootstrap包
 *  小项目源码
 *  总结

## 引出 ##

使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发

## 小项目要求 ##

（一）题目要求  
使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发

（二）数据库设计（10分）  
创建数据库woniu\_note  
（1）用户表：t\_user，必要字段包含：用户名（username）、密码（passwd）  
（2）文件夹表：t\_folder，必要字段包含：文件夹id（id）、文件夹名（folder\_name）  
（3）笔记表：t\_note，必要字段包含：笔记id（id）、笔记标题（title）、笔记内容（content）、关联文件夹表id(folder\_id)

（三）项目需求（共90分）  
（1）实现用户登录（10分）  
① 登录成功可跳转主页（5分）  
② 要求使用过滤器验证用户的登陆权限（5分）  
③ ![在这里插入图片描述][6579d345b75445a2998d7da6a475fd4a.png]

（2）实现笔记列表查询功能（20分）  
① 备注：文件夹是通过笔记表（t\_note）连接查询文件夹表（t\_folder）获取，否则不得分（10分）

（3）实现笔记列表分页显示功能（20分）  
① 备注：文件夹是通过笔记表（t\_note）连接查询文件夹表（t\_folder）获取，否则不得分（10分）  
![在这里插入图片描述][8b9a55485bae4733a875524ccee567cd.png]

（4）实现添加笔记功能（10分）  
![在这里插入图片描述][cdd57b0867fc49e588a39dff815fe964.png]

（5）实现修改笔记功能（20分）  
① 要求数据回显（10分）  
② 修改成功（10分）

（6）实现删除笔记功能（10分）

## 固定的东西 ##

### 1.pom.xml文件配置 + web.xml文件配置 ###

pom.xml文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <groupId>com.tianju</groupId>
      <artifactId>javawebTest0612</artifactId>
      <packaging>war</packaging>
      <version>1.0-SNAPSHOT</version>
      <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
      </properties>
    
      <dependencies>
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <version>4.0.1</version>
          <scope>provided</scope>
        </dependency>
    
        
        <dependency>
          <groupId>javax.servlet.jsp</groupId>
          <artifactId>javax.servlet.jsp-api</artifactId>
          <version>2.3.3</version>
        </dependency>
    
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>jstl</artifactId>
          <version>1.2</version>
        </dependency>
    
        <dependency>
          <groupId>taglibs</groupId>
          <artifactId>standard</artifactId>
          <version>1.1.2</version>
        </dependency>
    
        
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>8.0.20</version>
        </dependency>
    
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>druid</artifactId>
          <version>1.2.16</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-jdbc</artifactId>
          <version>5.2.22.RELEASE</version>
        </dependency>
    
        
        <dependency>
          <groupId>org.projectlombok</groupId>
          <artifactId>lombok</artifactId>
          <version>1.18.22</version>
        </dependency>
    
        <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.5</version>
        </dependency>
    
        
        <dependency>
          <groupId>cn.hutool</groupId>
          <artifactId>hutool-all</artifactId>
          <version>5.8.11</version>
        </dependency>
    
        
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.76</version>
        </dependency>
    
      </dependencies>
    </project>

web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
    </web-app>

### 2.util里面JDBC的DBUtils + 字符串工具StringUtils ###

DBUtils.java文件：

package com.tianju.util;
    import com.alibaba.druid.pool.DruidDataSource;
    import org.springframework.jdbc.core.JdbcTemplate;
    
    public class DBUtils {
        
        private static DruidDataSource dataSource =null;
        static {
        
            String driverClassname = "com.mysql.cj.jdbc.Driver";
            String ip = "127.0.0.1:3306/javaweb";
    //        String ip = ConfigMap.getConfig().get("ip");
            // jdbc:mysql://127.0.0.1:3306/javaweb06?useUnicode=true&characterEncoding=UTF-8&userSSL=false&serverTimezone=GMT%2B8
            String url = "jdbc:mysql://"+ip+"?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true";
    //        String url = "jdbc:mysql://"+"127.0.0.1:3306/javaweb"+"?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true";
            String username = "root";
            String password = "123";
            dataSource = new DruidDataSource();
            dataSource.setDriverClassName(driverClassname);
            dataSource.setUrl(url);
            dataSource.setUsername(username);
            dataSource.setPassword(password);
        }
    
        /**
         *
         * @return 返回一个JdbcTemplate对象
         */
        public static JdbcTemplate getJdbcTemplate(){
        
            return new JdbcTemplate(dataSource);
        }
    }

StringUtils.java文件

package com.tianju.util;
    
    /**
     * 防止前端传过来为null 或者 ""
     */
    public class StringUtils {
        
        public static Boolean isBlank(String str){
        
            if(str==null || str.trim().equals("")){
        
                return true;
            }
            return false;
        }
    }

### 3.entity里面的PageInfo分页实体类+ResData响应标准格式 ###

PageInfo.java

package com.tianju.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    import java.util.List;
    
    /**
     * 和分页相关的实体类
     */
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class PageInfo<T> {
        
        private Integer pageNum; // 当前是第几页，如果没有输入，默认是第一页
        private Integer pageSize; // 每页显示的数据条数，百度默认一页10条
        private Integer total; // 总条数；
        private Integer pages; // 总页数；
        private List<T> list; // 传给前端的list
    }

ResData.java

package com.tianju.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    /**
     * 响应的实体类
     */
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public class ResData {
        
        private Integer code;
        private String msg;
        private Object data;
    }

### 4.filter里面的编码CharacterEncodingFilter和权限LoginAuthorFilter ###

CharacterEncodingFilter.java文件

package com.tianju.filter;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import java.io.IOException;
    
    /**
     * 解决编码问题的过滤器
     */
    @WebFilter("/*")
    public class CharacterEncodingFilter implements Filter {
        
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        
    
        }
    
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        
            // 编码问题
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=utf-8");
            // 一定要记得放行
            chain.doFilter(request, response);
    
        }
    
        @Override
        public void destroy() {
        
    
        }
    }

LoginAuthorFilter.java文件

package com.tianju.filter;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    /**
     * 控制权限
     */
    @WebFilter("/*")
    public class LoginAuthorFilter implements Filter {
        
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        
    
        }
    
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        
            HttpServletRequest req = (HttpServletRequest) request;
            HttpServletResponse resp = (HttpServletResponse) response;
            String requestURI = req.getRequestURI();
            // 1.不登录也可以访问的连接，放行
            if (requestURI.contains("/js/")
                    || requestURI.contains("/bootstrap/")
                    || requestURI.contains("/css/")
                    || requestURI.contains("/img/")
                    || requestURI.contains("/user/login")
                    || requestURI.contains("/user/login.jsp")
            ){
        
                chain.doFilter(request, response);
            }else {
        
                // 2.其他连接必须登陆后才能访问
                HttpSession session = req.getSession();
                Object user = session.getAttribute("user");
                // 如果没有登陆，就去登陆页面
                if (user==null){
        
                    resp.sendRedirect(req.getContextPath()+"/user/login.jsp");
                }else {
        
                    //登陆了,就放行
                    chain.doFilter(request, response);
                }
            }
        }
    
        @Override
        public void destroy() {
        
    
        }
    }

### 5.前端固定的js包和bootstrap包 ###

见本文的代码包

## 小项目源码 ##

见本文的代码包

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

![在这里插入图片描述][63385f27d180483db7accb18481ffd45.png]  
![在这里插入图片描述][207931af30234dc99398d202adb286aa.png]

--------------------

## 总结 ##

使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发

[6579d345b75445a2998d7da6a475fd4a.png]: https://img-blog.csdnimg.cn/6579d345b75445a2998d7da6a475fd4a.png
[8b9a55485bae4733a875524ccee567cd.png]: https://img-blog.csdnimg.cn/8b9a55485bae4733a875524ccee567cd.png
[cdd57b0867fc49e588a39dff815fe964.png]: https://img-blog.csdnimg.cn/cdd57b0867fc49e588a39dff815fe964.png
[f411a8652bc144aca12ee9e40e59e84a.png]: https://img-blog.csdnimg.cn/f411a8652bc144aca12ee9e40e59e84a.png
[63385f27d180483db7accb18481ffd45.png]: https://img-blog.csdnimg.cn/63385f27d180483db7accb18481ffd45.png
[207931af30234dc99398d202adb286aa.png]: https://img-blog.csdnimg.cn/207931af30234dc99398d202adb286aa.png