javaWeb用maven管理的ajax前后端分离的物业维修管理

javaWeb用maven管理的ajax前后端分离的物业维修管理

说明:

使用maven项目

前后端分离

使用注解版Servlet(>3版本)

1、效果展示

在这里插入图片描述

已维修

在这里插入图片描述

待维修

在这里插入图片描述

在这里插入图片描述

说明:

使用了ajax异步

使用了jQuery动态创建div

未实现翻页

2、新建maven下的javaweb项目

1、新建项目

在这里插入图片描述

2、maven骨架选择

在这里插入图片描述

3、项目名

在这里插入图片描述

4、maven管理(重要)

在这里插入图片描述

5、项目结构

在这里插入图片描述

6、main下新建java,resource

右键main新建文件夹,一般会自动提示这两个文件夹

新建好后分别右击这两个文件夹

在这里插入图片描述

java包设置被javaroot,resources设置为resource root(一般idea自动会设置好的)

在这里插入图片描述

3、部分源码

说明:

各层都做了简化处理

pom依赖

<dependencies>
    <!--数据库驱动-->
    <!--数据库连接-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.11</version>
    </dependency>
    <dependency>
      <groupId>javax</groupId>
      <artifactId>javaee-api</artifactId>
      <version>7.0</version>
    </dependency>
    <!--servlet tomcat10改名javax jakarta-->
    <!--jsp依赖(可能用上)-->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
    </dependency>
    <!--jstl依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!--json转换器-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.14</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

复制代码
<!--资源导出问题-->
<build>
    <resources>
      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
    </resources>
</build>
复制代码

jdbc.properties

driver=com.mysql.cj.jdbc.Driver  ==这里是使用的8版本
url=jdbc:mysql://你的ip:3306/数据库名?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT
user=root
password=root
复制代码

pojo

package entity;
/**
 * Author:甲粒子
 * Date: 2021/11/30
 * Description:维修
 */
public class Wx {
    private Integer id;
    private String username;
    private String project;
    private String address;
    private String ctime;
    private String phonenum;
    private int status;
    private String wxname;
    private String wxphonenum;
    private String wxtime;
    private int wxmoney;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getProject() {
        return project;
    }

    public void setProject(String project) {
        this.project = project;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getCtime() {
        return ctime;
    }

    public void setCtime(String ctime) {
        this.ctime = ctime;
    }

    public String getPhonenum() {
        return phonenum;
    }

    public void setPhonenum(String phonenum) {
        this.phonenum = phonenum;
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getWxname() {
        return wxname;
    }

    public void setWxname(String wxname) {
        this.wxname = wxname;
    }

    public String getWxphonenum() {
        return wxphonenum;
    }

    public void setWxphonenum(String wxphonenum) {
        this.wxphonenum = wxphonenum;
    }

    public String getWxtime() {
        return wxtime;
    }

    public void setWxtime(String wxtime) {
        this.wxtime = wxtime;
    }

    public int getWxmoney() {
        return wxmoney;
    }

    public void setWxmoney(int wxmoney) {
        this.wxmoney = wxmoney;
    }

    public Wx(Integer id, String username, String project, String address, String ctime, String phonenum, int status, String wxname, String wxphonenum, String wxtime, int wxmoney) {
        this.id = id;
        this.username = username;
        this.project = project;
        this.address = address;
        this.ctime = ctime;
        this.phonenum = phonenum;
        this.status = status;
        this.wxname = wxname;
        this.wxphonenum = wxphonenum;
        this.wxtime = wxtime;
        this.wxmoney = wxmoney;
    }

    public Wx() {
    }
}
复制代码

dao

package dao;

import entity.Wx;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;

/**
 * Author:甲粒子
 * Date: 2021/11/30
 * Description:
 */
public class WxDaoImpl {
    public static List<Wx> queryWxs()
    {
        Connection conn=null;
        PreparedStatement pstmt = null;
        ResultSet rt=null;
        try
        {
            ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
            String driver = bundle.getString("driver");
            String url = bundle.getString("url");
            String user = bundle.getString("user");
            String password = bundle.getString("password");
            Class.forName(driver);
            conn = DriverManager.getConnection(url,user,password);
            String sql="select * from wx";
            pstmt=conn.prepareStatement(sql);
            rt=pstmt.executeQuery();

            List<Wx>lst=new ArrayList<Wx>();
            while(rt.next())
            {
                Wx dt=new Wx(rt.getInt("id"),rt.getString("username"),rt.getString("project"),rt.getString("address"),rt.getString("ctime"),rt.getString("phonenum"),rt.getInt("status"),rt.getString("wxname"),rt.getString("wxphonenum"),rt.getString("wxtime"),rt.getInt("wxmoney"));
                lst.add(dt);
            }
            return lst;
        }
        catch(ClassNotFoundException e)
        {
            e.printStackTrace();
            return null;
        }
        catch(SQLException e)
        {
            e.printStackTrace();
            return null;
        }
        catch(Exception e)
        {
            e.printStackTrace();
            return null;
        }
        finally
        {
            try
            {
                if(rt!=null)
                {
                    rt.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }

            try
            {
                if(pstmt!=null)
                {
                    pstmt.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }
            try
            {
                if(conn!=null)
                {
                    conn.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }
        }
    }

    public static List<Wx> queryWxsByStatus(int status)
    {
        Connection conn=null;
        PreparedStatement pstmt = null;
        ResultSet rt=null;
        try
        {
            ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
            String driver = bundle.getString("driver");
            String url = bundle.getString("url");
            String user = bundle.getString("user");
            String password = bundle.getString("password");
            Class.forName(driver);
            conn = DriverManager.getConnection(url,user,password);
            String sql="select * from wx where status=?";
            pstmt=conn.prepareStatement(sql);
            pstmt.setInt(1,status);
            rt=pstmt.executeQuery();

            List<Wx>lst=new ArrayList<Wx>();
            while(rt.next())
            {
                Wx dt=new Wx(rt.getInt("id"),rt.getString("username"),rt.getString("project"),rt.getString("address"),rt.getString("ctime"),rt.getString("phonenum"),rt.getInt("status"),rt.getString("wxname"),rt.getString("wxphonenum"),rt.getString("wxtime"),rt.getInt("wxmoney"));
                lst.add(dt);
            }
            return lst;
        }
        catch(ClassNotFoundException e)
        {
            e.printStackTrace();
            return null;
        }
        catch(SQLException e)
        {
            e.printStackTrace();
            return null;
        }
        catch(Exception e)
        {
            e.printStackTrace();
            return null;
        }
        finally
        {
            try
            {
                if(rt!=null)
                {
                    rt.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }

            try
            {
                if(pstmt!=null)
                {
                    pstmt.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }
            try
            {
                if(conn!=null)
                {
                    conn.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }
        }
    }

    public static List<Wx> queryWxsByName(String name)
    {
        Connection conn=null;
        PreparedStatement pstmt = null;
        ResultSet rt=null;
        try
        {
            ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
            String driver = bundle.getString("driver");
            String url = bundle.getString("url");
            String user = bundle.getString("user");
            String password = bundle.getString("password");
            Class.forName(driver);
            conn = DriverManager.getConnection(url,user,password);
            String sql="select * from wx where username like ?";

            pstmt=conn.prepareStatement(sql);
            pstmt.setString(1,"'%"+name+"%'");
            //System.out.println(sql);
            rt=pstmt.executeQuery();

            List<Wx>lst=new ArrayList<Wx>();
            while(rt.next())
            {
                Wx dt=new Wx(rt.getInt("id"),rt.getString("username"),rt.getString("project"),rt.getString("address"),rt.getString("ctime"),rt.getString("phonenum"),rt.getInt("status"),rt.getString("wxname"),rt.getString("wxphonenum"),rt.getString("wxtime"),rt.getInt("wxmoney"));
                lst.add(dt);
            }
            return lst;
        }
        catch(ClassNotFoundException e)
        {
            e.printStackTrace();
            return null;
        }
        catch(SQLException e)
        {
            e.printStackTrace();
            return null;
        }
        catch(Exception e)
        {
            e.printStackTrace();
            return null;
        }
        finally
        {
            try
            {
                if(rt!=null)
                {
                    rt.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }

            try
            {
                if(pstmt!=null)
                {
                    pstmt.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }
            try
            {
                if(conn!=null)
                {
                    conn.close();
                }
            }
            catch(SQLException e)
            {
                e.printStackTrace();
            }
        }
    }

}
复制代码

service

package service;

import dao.WxDaoImpl;
import entity.Wx;

import java.util.List;

/**
 * Author:甲粒子
 * Date: 2021/11/30
 * Description:
 */
public class WxServiceImpl {

    public static List<Wx> selectAllWx(){
        return WxDaoImpl.queryWxs();
    }

    public static List<Wx> selectAllWxByStatus(int status){
        return WxDaoImpl.queryWxsByStatus(status);
    }

    public static List<Wx> selectAllWxByName(String name){
        return WxDaoImpl.queryWxsByName(name);
    }
}
复制代码

servlet

package servlet;

import com.alibaba.fastjson.JSONObject;
import entity.Wx;
import service.WxServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "test",urlPatterns = "/test")
public class WxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out=response.getWriter();
        try{
            List<Wx> wxes = WxServiceImpl.selectAllWx();
            out.write(JSONObject.toJSONString(wxes));
            out.flush();
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            out.close();
        }

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
}
复制代码

4、html

核心在js中,想要源码的私信笔者吧

由于篇幅的原因,这里只展示js

说明:

在页面加载的时候发送ajax请求

根据结果动态渲染

<script>
    window.onload=function(){
        $.ajax({
            url:"/test",
            type:"POST",
            success:function(data){
                data=jQuery.parseJSON(data)
                console.log(data);
                console.log(data.length);
                console.log(data[0].id);
                console.log(data);
                for(var i=0;i<data.length;++i){
                    if(data[i].status==1){
                        $("#wx").prepend("\
                        <tr>\
                            <td class='text-center'><input type='checkbox' id='check5-td1' name='check5-td1'></td>\
                            <td class='cell-small text-center'>"+data[i].id+"</td>\
                            <td>"+data[i].username+"</td>\
                            <td>"+data[i].project+"</td>\
                            <td>"+data[i].address+"</td>\
                            <td>"+data[i].ctime+"</td>\
                            <td>"+data[i].phonenum+"</td>\
                            <td><span class='label label-success'>已维修</span></td>\
                            <td>"+data[i].wxname+"</td>\
                            <td>"+data[i].wxphonenum+"</td>\
                            <td>"+data[i].wxtime+"</td>\
                            <td>"+data[i].wxmoney+"</td>\
                            <td class='text-center'>\
                                 <div class=\"btn-group\">\
                                    <div  class=\"btn btn-xs btn-info\">   <i class=\"fa fa-globe\"></i>   </div>\
                                    <div  onclick=\"pop()\" class=\"btn btn-xs btn-success\"><i class=\"fa fa-pencil\"></i>  </div>\
                                    <div  class=\"btn btn-xs btn-danger\"> <i class=\"fa fa-trash-o\"></i> </div>\
                                </div>\
                            </td>\
                         </tr>");
                    }else{
                        $("#wx").prepend("\
                        <tr>\
                            <td class='text-center'><input type='checkbox' id='check5-td1' name='check5-td1'></td>\
                            <td class='cell-small text-center'>"+data[i].id+"</td>\
                            <td>"+data[i].username+"</td>\
                            <td>"+data[i].project+"</td>\
                            <td>"+data[i].address+"</td>\
                            <td>"+data[i].ctime+"</td>\
                            <td>"+data[i].phonenum+"</td>\
                            <td><span class='label label-danger'>待维修</span></td>\
                            <td>"+data[i].wxname+"</td>\
                            <td>"+data[i].wxphonenum+"</td>\
                            <td>"+data[i].wxtime+"</td>\
                            <td>"+data[i].wxmoney+"</td>\
                            <td class='text-center'>\
                                <div class=\"btn-group\">\
                                    <div  class=\"btn btn-xs btn-info\">   <i class=\"fa fa-globe\"></i>   </div>\
                                    <div  onclick=\"pop()\" class=\"btn btn-xs btn-success\"><i class=\"fa fa-pencil\"></i>  </div>\
                                    <div  class=\"btn btn-xs btn-danger\"> <i class=\"fa fa-trash-o\"></i> </div>\
                                </div>\
                            </td>\
                         </tr>");
                    }
                }
            },
            error:function(){
                alert("false")
            }
        })
</script>
<script>
复制代码

说明:

$(function(){
 	$(“#divId”).append("<div>这个是追加的div</div>");
 //或者 $("<div>这个是追加的div</div>").appendTo("#divId");
 
 //这里是在前面追加
 $("#wx").prepend("...");
 

复制代码

5、问题处理

1、jdbc.properties要放在src目录下

2、tomcat的配置

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述 谢谢您的阅读。

猜你喜欢

转载自juejin.im/post/7036550476136972324