SpringMvc-maven-Mysql-ajax-bootsrap进行一个简单的web开发(大二下期末考试内容)

最新推荐文章于 2025-04-11 19:27:13 发布
最新推荐文章于 2025-04-11 19:27:13 发布
阅读量187 收藏 1
点赞数
文章标签： ajax javascript maven mysql spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45989228/article/details/125053628
版权

首先创建我们的数据表

如图所示

 

再进行编写我们的一个前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        .info-box{
            width: 1000px;
        }
    </style>

    <!-- 调入默认的 js 文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <!-- 引入 JQ 文件 -->
<!--    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->
    <script src="default.js"></script>
    <script>
        onload = function () {
            // 获取查询所有学员的标签
            var btn = document.querySelector(".btn");
            // 给标签绑定点击事件
            btn.onclick = function () {
                // 调用查询所有学员的函数
                findAll("tbody");
            }
        }
    </script>

</head>
<body>


    <center>
        <div class="info-box">
            <h1 class="bg-primary">学员信息管理</h1>
            <button class="btn btn-info">点击获取所有学员信息</button>
            <br>
            <br>

            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>empid</th>
                        <th>name</th>
                        <th>deptid</th>
                        <th>managerid</th>
                        <th>salary</th>
                        <th>state</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <!-- 以下内容需要通过 js 添加 -->
                <tbody>

                </tbody>
            </table>
        </div>
    </center>
</body>
</html>

如图所示

 然后来到我们的后端创建项目

项目目录如图所示

 

然后进行我们的依赖添加

<?xml version="1.0" encoding="UTF-8"?>

<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/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.abc</groupId>
  <artifactId>qimozuoye</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>zimozuoye Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>
  <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>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.2.9</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <!-- servlet 相关依赖 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>

    <!-- spring 的相关依赖 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.2.21.RELEASE</version>
    </dependency>

    <!-- spring 的 web 项目依赖 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>5.2.21.RELEASE</version>
    </dependency>

    <!-- mysql 的连接依赖 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.48</version>
    </dependency>

    <!-- json 类型转换依赖 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.80</version>
    </dependency>



    <!-- lombok 依赖 -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.16.10</version>

    </dependency>
    <!-- https://mvnrepository.com/artifact/com.google.guava/guava -->
    <dependency>
      <groupId>com.google.guava</groupId>
      <artifactId>guava</artifactId>
      <version>25.1-jre</version>
    </dependency>


  </dependencies>

  <build>
    <finalName>springWeb</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

 然后下载我们的lombok插件，不下载的话会导致使用lombok的时候idea会变红

配置TOMCAT

 

 编写jdbc.properties

# 注释说明
# key=value
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/webdb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
user=root
password=123

配置ApplicationContext

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    <context:component-scan base-package="com.abcdef"/>
    <bean id="employeesService" class="com.abcdef.service.EmployeesService"/>
    <bean id="employeesDao" class="com.abcdef.dao.EmployeesDao"/>

    <context:property-placeholder location="classpath:jdbc.properties" />
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">

        <property name="DriverClassName" value="${driverClassName}"></property>
        <property name="Url" value="${url}"></property>
        <property name="Username" value="${user}"></property>
        <property name="Password" value="${password}"></property>
    </bean>

</beans>

 然后就可以开始我们的后端编写了

首先编写DButil工具类获取Connection

package com.abcdef.utils;

import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;

/**
 * @program: qimozuoye
 * @description:
 * @author:
 * @create: 2022-05-27 09:51
 * @version:1.0
 **/
public class DButil {
    public static Connection getConnection() throws SQLException {
        ApplicationContext app = new ClassPathXmlApplicationContext("applicationContext.xml");
        DataSource bean = app.getBean(DataSource.class);
        Connection connection = bean.getConnection();
        return connection;
    }
}

pojo类

package com.abcdef.pojo;

import lombok.Data;
import lombok.experimental.Accessors;

import java.math.BigDecimal;

/**
 * @program: qimo
 * @description:pojo
 * @author:
 * @create: 2022-05-26 14:44
 * @version:1.0
 **/
@Accessors(chain = true)
@Data(staticConstructor = "of")
public class Employees {
    Integer empid;//id
    String name;//名字
    Integer deptid;//员工部门1为技术部、2为人事部、3为后勤部
    Integer  managerid;//工号
    BigDecimal salary;//工资
    Integer state;//1为在职，2为离职，3为实习
}

BaseController

package com.abcdef.controller;

import com.abcdef.service.EmployeesService;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @program: qimozuoye
 * @description: Controller的基类
 * @author:
 * @create: 2022-05-26 14:49
 * @version:1.0
 **/

public class BaseController extends HttpServlet {
    private EmployeesService employeesService;

    public void init(ServletConfig config) throws ServletException {
        //通过web程序获取IOC容器
        WebApplicationContext wac = WebApplicationContextUtils.getWebApplicationContext(
                config.getServletContext()
        );
        employeesService=wac.getBean(EmployeesService.class);
        System.out.println(employeesService);
    }

    public void defaultSet(HttpServletRequest req, HttpServletResponse resp) {
        //同源操作
        resp.setHeader("Access-Control-Allow-Origin", "*");
    }
    //输出操作
    public void printHtml(HttpServletResponse resp, String Context) throws IOException {
        PrintWriter writer = resp.getWriter();
        writer.print(Context);
        writer.close();

    }

}

先完成我们的findAll.do操作

FindAllController

package com.abcdef.controller;

import com.abcdef.dao.EmployeesDao;
import com.abcdef.pojo.Employees;
import com.abcdef.service.EmployeesService;
import com.alibaba.fastjson.JSONArray;
import lombok.SneakyThrows;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * @program: qimozuoye
 * @description:接收FindAll.do请求
 * @author: 
 * @create: 2022-05-26 15:16
 * @version:1.0
 **/
@Controller
@WebServlet("/findAll.do")
public class FindAllController extends BaseController {
   @Autowired
    EmployeesService employeesService;
    @SneakyThrows
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("接受到了FindAll.do请求");
        defaultSet(req,resp);
        //设置同源
        List<Employees> list= employeesService.findAll();
        printHtml(resp, JSONArray.toJSONString(list));
    }

    @Override
    public void init(ServletConfig config) throws ServletException {
        WebApplicationContext wac=
                WebApplicationContextUtils.getWebApplicationContext(config.getServletContext());
        employeesService=wac.getBean(EmployeesService.class);
    }
}

EmployeesService

package com.abcdef.service;

import com.abcdef.dao.EmployeesDao;
import com.abcdef.pojo.Employees;

import java.util.List;

/**
 * @program: qimozuoye
 * @description:业务层
 * @author: 
 * @create: 2022-05-26 15:00
 * @version:1.0
 **/

public class EmployeesService {
    private EmployeesDao employeesDao=new EmployeesDao();//=new EmployeesDao()

    public List<Employees> findAll() throws Exception {
        return employeesDao.findAll();

    }


    public int delete(String empid) {
        try {
            int id=Integer.parseInt(empid);
            int result=
                    employeesDao.delete(id);
            return result;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return 0;
    }

}

dao类

package com.abcdef.dao;


import com.abcdef.pojo.Employees;
import com.abcdef.utils.DButil;

import org.springframework.stereotype.Repository;


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

/**
 * @program: qimozuoye
 * @description: dao类
 * @author: 
 * @create: 2022-05-26 14:51
 * @version:1.0
 **/
@Repository
public class EmployeesDao {


    public List<Employees> findAll() throws SQLException {

        Connection con= DButil.getConnection();
        List<Employees> list = new ArrayList<>();
        try {
//            Class.forName("com.mysql.jdbc.Driver");
//            Connection con =
//                    DriverManager.getConnection
//                            ("jdbc:mysql://localhost:3306/webdb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai", "root", "123");
            PreparedStatement ps = con.prepareStatement("select * from webdb.employees");
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                Employees employees = Employees.of()
                        .setEmpid(rs.getInt("empid"))
                        .setDeptid(rs.getInt("deptid"))
                        .setManagerid(rs.getInt("managerid"))
                        .setName(rs.getString("name"))
                        .setState(rs.getInt("state"))
                        .setSalary(rs.getBigDecimal("salary"));
                list.add(employees);
                System.out.println(list);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        return list;
    }

    public int delete(Integer empid) throws Exception {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con =
                DriverManager.getConnection
                        ("jdbc:mysql://localhost:3306/webdb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai", "root", "123");
        PreparedStatement ps = con.prepareStatement("delete from webdb.employees  where empid = ?");
        ps.setInt(1, empid);
        int result = ps.executeUpdate();
        if(result<=0){
            System.out.println("修改失败");
        }
        return result;

    }

}

做到这一步时我们后端就基本上做完了

现在我们返回前端default.js

/**
 * @program: qimo
 * @description:
 * @author:
 * @create: 2022-05-26 15:24
 * @version:1.0
 **/
function findAll(box) {
    document.querySelector(box).innerHTML="";
    $.ajax({

        type: "GET",
        // 设置请求地址
        url: "http://localhost:8050/findAll.do",
        // 设置服务端返回数据类型 URL按照tomcat的端口设置
        dataType: "json",
        // 传给后端的数据
        data:{

        },
        // 成功回调函数
        success:function (data) {


            console.log(data);

            // 将获取的数据添加至页面
            for (let i = 0; i < data.length; i++) {
                // 创建节点
                var tr = document.createElement('tr');
                var empid = document.createElement('td');
                var name = document.createElement('td');
                var deptid = document.createElement('td');
                var managerid = document.createElement('td');
                var salary = document.createElement('td');
                var state = document.createElement('td');
                var ply = document.createElement('td');

                // 添加节点中的内容
                empid.innerHTML = data[i].empid;
                name.innerHTML = data[i].name;
                deptid.innerHTML = data[i].deptid;
                // 通过初始数据数组获取值
                managerid.innerHTML = data[i].managerid;
                salary.innerHTML = data[i].salary;
                // 通过三元运算进行值的判断
                state.innerHTML = data[i].state==1?"在职":
                    data[i].stustate==2?"离职":"实习";

                // 给 ply 添加按钮
                ply.innerHTML = '<button class="btn btn-danger"'
                    + 'onclick="del('+data[i].empid+')" >删除</button>';


                tr.appendChild(empid);
                tr.appendChild(name);
                tr.appendChild(deptid);
                tr.appendChild(managerid);
                tr.appendChild(salary);
                tr.appendChild(state);
                tr.appendChild(ply);

                document.querySelector(box).appendChild(tr);
            }
        },

        error:function (jqXHR,textStatus,errorThrown) {
            alert(textStatus);
            console.log(errorThrown)
        }
    });



}
function del(id) {
    // 查看出入的 id 值
    alert(id);
    $.ajax({
        type: "GET",
        url: "http://localhost:8050/del.do",
        dataType: "json",
        data:{
            empid:id
        },
        success:function (data) {
            alert("删除成功");
            document.querySelector(".btn").onclick();


        },
        // 失败回调函数
        error:function (jqXHR,textStatus,errorThrown) {
            alert("异步请求失败！");
        }

    });

}

运行结果如下

 

 

Java 实现树形结构
热门推荐
DriverKing
09-04 1万+
树形结构可以清楚地呈现数据的从属关系，在数据库中我们可以用自关联来保存这样的关系。但是在取出数据的时候，如果采用以往的手段，免不了要进行递归操作。递归在理论上是可以解决树形结构的问题，但是如果数据量够大，目录层次够深，我们递归出层次关系是比较消耗资源的。我们可以从数据结构入手，树
Java构建树形菜单的实例代码(支持多级菜单)
08-29
在Java编程中，构建树形菜单是一项常见的任务，特别是在开发Web应用或图形用户界面时。树形菜单可以方便地组织和展示层次结构的数据，比如网站导航、文件系统或者权限管理等。本文将深入探讨如何使用Java实现一个...
java树形结构
01-14
$(function(){ $.fn.extend({ SimpleTree:function(options){ //初始化参数 var option = $.extend({ click:function(a){ } },options); option.tree=this; /* 在参数对象中添加对当前菜单树的引用，以便在对象中使用该菜单树 */ option._init=function(){ /* * 初始化菜单展开状态，以及分叉节点的样式 */ this.tree.find("ul ul").hide(); /* 隐藏所有子级菜单 */ this.tree.find("ul ul").prev("li").removeClass("open"); /* 移除所有子级菜单父节点的 open 样式 */ this.tree.find("ul ul[show='true']").show(); /* 显示 show 属性为 true 的子级菜单 */ this.tree.find("ul ul[show='true']").prev("li").addClass("open"); /* 添加 show 属性为 true 的子级菜单父节点的 open 样式 */ }/* option._init() End */ /* 设置所有超链接不响应单击事件 */ this.find("a").click(function(){ $(this).parent("li").click(); return false; }); /* 菜单项 接受单击 */ this.find("li").click(function(){ /* * 当单击菜单项 * 1.触发用户自定义的单击事件，将该 标签中的第一个超链接做为参数传递过去 * 2.修改当前菜单项所属的子菜单的显示状态（如果等于 true 将其设置为 false，否则将其设置为 true） * 3.重新初始化菜单 */ option.click($(this).find("a")[0]); /* 触发单击 */ /* * 如果当前节点下面包含子菜单，并且其 show 属性的值为 true，则修改其 show 属性为 false * 否则修改其 show 属性为 true */ /* if($(this).next("ul").attr("show")=="true"){ $(this).next("ul").attr("show","false"); }else{ $(this).next("ul").attr("show","true"); }*/ /* 初始化菜单 */ option._init(); }); /* 设置所有父节点样式 */ this.find("ul").prev("li").addClass("folder"); /* 设置节点“是否包含子节点”属性 */ this.find("li").find("a").attr("hasChild",false); this.find("ul").prev("li").find("a").attr("hasChild",true); /* 初始化菜单 */ option._init(); }/* SimpleTree Function End */ }); });
Java后端递归构建树形结构
彼岸尚有荣光在，应不断记录总结！！！
01-12 9982
记录：在Java后台利用递归思路进行构建树形结构数据，返回给前端，能以下拉菜单等形式进行展示。 简明：为了简化代码，引入Lombok的Jar包，可省略实体类set()、get()方法。 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> ...
java树形结构实现方式
最新发布
weixin_52164992的博客
04-11 412
通过定义节点类，包含子节点的集合（如。
树形结构——JAVA实现
码说芯语的博客
04-26 5078
一文掌握二叉树的结构及写法
java构造树形结构
yuanyuan5201的专栏
11-02 515
区域列表构建树形结构给前端
java动态树形菜单
12-19
通过这些文件，开发者可以学习如何在Java Web环境中构建动态树形菜单，同时也可以根据自己的需求进行定制和扩展。此实例对于初学者和有经验的开发者来说都是一个有价值的参考，帮助他们理解和应用实际项目中的动态...
springboot + vue 实现递归生成多级菜单(实例代码)
08-25
SpringBoot + Vue 实现递归生成多级菜单 知识点一：SpringBoot 框架简介 SpringBoot 是一个基于 Java 语言...然后，我们使用 Vue.js 框架来设计前端界面，对后端 API 进行调用，并使用递归算法生成多级菜单树形结构。
Java创建树形结构算法实例代码
08-31
这种方法有效地解决了从扁平数据源构建树形结构的问题，适用于动态生成多级菜单的情况。 总结起来，Java创建树形结构算法的核心在于使用数据结构（如List和Map）和适当的排序机制来构建层次关系。`MenuExt`类和`...
Java构建树形结构
jicanwei优快云的博客
11-24 713
Java构建树形结构
java生成树型结构
08-14
java生成树型结构,代码调试过，可以直接运行
java树结构，树结构表设计
12-01
前些天面试，发现面试官很喜欢问树的构造问题，我当时回答树设计就是通过一pid来保存父结点的id值来实现，通过递归来生成一棵树，但是面试官说如果树比较大的话这样做的效率太低，网上找好像也都是这种方法，后来发现以前看用友的表结构设计里没有用这种方法，他们采用的是下面的表结构设计。
java构建树形结构的方式
xw的博客
11-21 1198
基于mybatisplus的@TableName里面的resultMap属性，当发生查询时，会根据配置的xml查询SQL进行查询。最后，来一个饭后甜点：java实现 tree结构模糊搜索功能。导入hutool的依赖，请参考hutool官网。
Java 高效构建树形结构
qq_41902662的博客
11-22 5711
Java高效构建树
通过Java构建树形结构
weixin_60382322的博客
10-26 3793
我这里当节点的parentId = ‘-1’ 那么这个节点就是根节点。
java 实现树形结构
new_guaika的博客
10-28 3866
实体父类 @Data public class MenuTreeNode<T> { @ApiModelProperty(value = "节点ID") private String node; @ApiModelProperty(value = "父节点ID") private String parentNode; @ApiModelProperty(value = "子标签") private List<T> children;
树结构与Java实现
weixin_33979745的博客
04-18 710
树结构与Java实现 目录 前言 树的概念 概述 术语 实际应用 实现树 TreeNode TreeNodeIterator 测试 总结 相关链接 作者资源 参考资源 前言 提到『树』这种数据结构，相信很多人首先想到的就是『二叉树』。 的确，二叉树作为一种重要的数据结构，它结合了数组和链表的优点，有很多重要的应用。 我们都知道，数组的特点是查询迅速，根据index可以快...
java树结构
leocat2011的专栏
03-17 512
http://www.cnblogs.com/fredric/archive/2012/03/12/2392612.html http://blog.youkuaiyun.com/wuwenxiang91322/article/details/12231657 http://blog.youkuaiyun.com/jdhanhua/article/details/6600232
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值