Maven 配置以及笔记 以及简单的Maven ssm + layui 的增删查改邮箱发送 分页模糊查

什么是Maven
Maven 翻译为"专家"、“内行”，是 Apache 下的一个纯 Java 开发的开源项目。基于项目对象模型（缩写：POM）概念，Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。
Maven特点
项目设置遵循统一的规则。

任意工程中共享。

依赖管理包括自动更新。

一个庞大且不断增长的库。

可扩展，能够轻松编写 Java 或脚本语言的插件。

只需很少或不需要额外配置即可即时访问新功能。
安装配置Maven
下载安装
http://maven.apache.org/download.cgi（地址）
配置环境变量

控制台输出 mvn -v(出现这个为成功)

Maven 仓库
在Maven 的术语中，仓库是一个位置
Maven 仓库是项目中依赖的第三方库，这个库所在的位置叫做仓库
在Maven中，任何一个依赖，插件或者项目建构的输出，都可以称之为构件
Maven 仓库有三种类型
本地(local)
中央(central)
远程(remote)
本地仓库
Maven 的本地仓库在安装 Maven 后并不会创建，它是在第一次执行 maven 命令的时候才被创建。
每个用户在自己的用户目录下都有一个路径名为 .m2/respository/ 的仓库目录。
Maven 本地仓库默认被创建在 %USER_HOME% 目录下。要修改默认位置，在 %M2_HOME%\conf 目录中的 Maven 的 settings.xml 文件中定义另一个路径。
中央仓库：在互联网上的一个仓库，该链接是一个国外的网站，包含了项目使用的所有jar。因是国外网站访问失败情况较多

远程仓库：局域网仓库或者称为私服。会从中央仓库获取jar形成备份，项目所需jar包通过本地仓库从远程仓库备份中获取，如果备份中没有再从中央仓库获取到远程仓库。
因为从外网的中央仓库获取jar包可能会失败，所以使用阿里巴巴提供的jar镜像
新建项目 idea

点next



如果写Java 的话



放资源文件的
配置tomcat

点加号


加项目


选这个

看到Hello World!! 表示ok 了
简单的ssm 小练习
目录

先导入依赖 pom.xml

<?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>org.example</groupId>
  <artifactId>untitled2</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>untitled2 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.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--mybatis-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.2</version>
    </dependency>
    <!--mybatis-spring-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>2.0.2</version>
    </dependency>
    <!--*****************************mybatis部分********************************-->
    <!--*****************************数据库驱动部分********************************-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.45</version>
    </dependency>
    <!--*****************************数据库驱动部分********************************-->

    <!--*****************************连接池********************************-->
    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.5.4</version>
    </dependency>

    <!--*****************************连接池********************************-->

    <!--*****************************日志********************************-->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.11</version>
    </dependency>
    <!--*****************************日志********************************-->

    <!--*****************************jackson********************************-->
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-mapper-asl</artifactId>
      <version>1.9.9</version>
    </dependency>
    <!--*****************************jackson********************************-->

    <!--*****************************jsp-api********************************-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <!--*****************************jsp-api********************************-->

    <!--*****************************jstl********************************-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!--*****************************jstl********************************-->

    <!--*****************************cglib********************************-->
    <dependency>
      <groupId>cglib</groupId>
      <artifactId>cglib</artifactId>
      <version>3.3.0</version>
    </dependency>
    <!--*****************************cglib********************************-->

    <!--*****************************aspectj********************************-->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjrt</artifactId>
      <version>1.9.4</version>
    </dependency>
    <!--*****************************aspectj********************************-->

    <!--*****************************spring部分********************************-->
    <!--spring-core-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-context-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-context-support-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>

    <!--spring-tx-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-orm-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-oxm-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-oxm</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>

    <!--spring-web-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-test-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-webmvc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--spring-aspects-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.1.2.RELEASE</version>
    </dependency>
    <!--aop联盟-->
    <dependency>
      <groupId>aopalliance</groupId>
      <artifactId>aopalliance</artifactId>
      <version>1.0</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>untitled2</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>
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
      </resource>
      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
      </resource>
    </resources>
  </build>
</project>

Springxml的 ，虽然他原来规范应该叫applicationContext.xml ，我觉得太麻烦就起名是Spring.xml 了

<?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
       http://www.springframework.org/schema/context/spring-context.xsd">

    <!--加载properties文件-->
    <context:property-placeholder location="classpath:db.properties"/>

    <!--使用c3p0连接池配置数据源-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <!--下面还可以配置连接数量等-->
    </bean>

    <!--配置SqlSessionFactory-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--注入数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--加载mybatis的SqlMapConfig.xml文件-->
        <property name="configLocation" value="classpath:mybatis/SqlMapConfig.xml"/>
    </bean>

    <!--启用mapper扫描器-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--按包进行扫描-->
        <property name="basePackage" value="com.jj.mapper"/>
        <!--加载上面配置的数据源-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>
    <context:component-scan base-package="com.jj.service"></context:component-scan>
</beans>

SpringMvc 的xml

<?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"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 可以扫描controller、service、...
        这里让扫描controller，指定controller的包
         -->
    <context:component-scan base-package="com.jj.controller">

    </context:component-scan>

    <!--注解映射器 -->
    <!--注解适配器 -->
    <!--在这里加入我们自定义的参数绑定组件，告诉适配器-->
    <!--注入校验器validator-->



    <!-- 视图解析器
    解析jsp解析，默认使用jstl标签，classpath下的得有jstl的包
     -->
<!--    <bean-->
<!--            class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->

<!--        <property name="prefix" value="/WEB-INF/jsp/"/>-->

<!--        <property name="suffix" value=".jsp"/>-->
<!--    </bean>-->

    <!--自定义参数绑定-->

</beans>

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">
  <!--配置springMVC前端控制器-->

  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:Spring/Springmvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
  <!--加载spring配置文件，使用通配符方式-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:Spring/Spring.xml</param-value>
  </context-param>
  <!--配置监听器-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!--解决post提交乱码问题-->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

Sqlconfig.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!-- 扫描包 -->
<typeAliases>
<package name="com.jj.pojo"/>
</typeAliases>
<mappers>
<!-- 扫描mapper -->
<package name="com.jj.mapper"/>
</mappers>
</configuration>

写Usermapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jj.mapper.Userdao">
<!--    全查-->
    <select id="login" resultType="SuperAdmin" parameterType="SuperAdmin">

       SELECT * from superadmin where super_id=#{super_id} and super_name=#{super_name}
    </select>

</mapper>

Admin.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.jj.mapper.Admindao">



    <select id="adminshow1" resultType="admin">

         select * from admin
         <where>
             <if test="admin_name !=null and admin_name!=''" >
                 and admin_name like CONCAT(CONCAT('%',#{admin_name,jdbcType=VARCHAR},'%'))
             </if>

         </where>



    </select>
<!--    更新-->
    <update id="adminupdate" parameterType="admin">

        UPDATE admin SET admin_profession=#{admin_profession} where admin_name=#{admin_name}
    </update>
<!--    添加-->
    <insert id="admininsert" parameterType="admin">
        insert INTO admin (admin_name,admin_profession) values(#{admin_name},#{admin_profession})
    </insert>
<!--    删除-->
    <delete id="admin" parameterType="String">
DELETE FROM admin WHERE admin_name=#{admin_name}
    </delete>

<!--    条数-->
    <select id="page1" resultType="int">
       select count(*) from admin
    </select>
</mapper>

对应的usermapper(接口)
id 要和方法名保持一致，接口名要和xml 名字一样，类路径要写对

写service 这个接口的方法要和Usermapper 接口的一样

package com.jj.mapper;

import com.jj.pojo.Admin;
import org.apache.ibatis.annotations.Param;

import java.util.List;
import java.util.Map;

public interface Admindao {
    
    


//条数
    int page1()throws Exception;
    List<Admin>adminshow1(String admin_name);
    //    更新
     int adminupdate(Admin admin) throws Exception;
    //添加
    int admininsert(Admin admin) throws Exception;
    //    删除
    int admin(String admin_name) throws Exception;

}

service 层的

package com.jj.service;

import com.jj.pojo.Admin;
import org.apache.ibatis.annotations.Param;

import java.util.List;
import java.util.Map;

public interface Admindaoservice {
    
    

    List<Admin>adminshow1(Integer page, Integer limit,String admin_name);
    //    更新
    int adminupdate(Admin admin) throws Exception;
    //添加
    int admininsert(Admin admin) throws Exception;
    //    删除
    int admin(String admin_name) throws Exception;

}

写service impl 实现类

package com.jj.service;

import com.github.pagehelper.PageHelper;
import com.jj.mapper.Admindao;
import com.jj.pojo.Admin;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

//加入service 层的注解
@Service
public class Admindaoserviceimpl implements Admindaoservice{
    
    
//    注入dao 层
   @Autowired
    private Admindao admindao;


    @Override
    public List<Admin> adminshow1(Integer page, Integer limit,String admin_name) {
    
    
        PageHelper.startPage(page, limit);
        return admindao.adminshow1(admin_name);
    }

    @Override
    public int adminupdate(Admin admin) throws Exception {
    
    
        return admindao.adminupdate(admin);
    }

    @Override
    public int admininsert(Admin admin) throws Exception {
    
    
        return admindao.admininsert(admin);
    }

    @Override
    public int admin(String admin_name) throws Exception {
    
    
        return admindao.admin(admin_name);
    }

}

记得加入注解
service 层的注解
写控制层

package com.jj.controller;

import com.github.pagehelper.PageInfo;
import com.jj.pojo.Admin;
import com.jj.pojo.SuperAdmin;
import com.jj.service.Admindaoserviceimpl;
import com.jj.service.Userdaoserviceimpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import javax.mail.internet.MimeMessage;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
//开启类注解

public class Usercontroller {
    
    
//    注入
    @Autowired
    private Userdaoserviceimpl userdaoserviceimpl;
    @Autowired
    private Admindaoserviceimpl admindaoserviceimpl;
    @Autowired
    private JavaMailSender javaMailSender;//在spring中配置的邮件发送的bean
//    登录
    @RequestMapping("/login")
    public ModelAndView login(int super_id, String super_name) throws Exception {
    
    

        ModelAndView mv = new ModelAndView();
//        //   调用 工具类

        //        获取实体类
        SuperAdmin superAdmin1 = new SuperAdmin();
        superAdmin1.setSuper_name(super_name);
        superAdmin1.setSuper_id(super_id);
//        调用方法
        SuperAdmin login = userdaoserviceimpl.login(superAdmin1);
//        // 获取参数

        if (login!=null){
    
    
            mv.setViewName("super后台");

//                // TODO Auto-generated catch block

//            }
        }

//        设置session 会话
        mv.addObject("super_name",super_name);

        return mv;
    }

    /**
     * 分页查询方法
     * @param page
     * @param limit
     * @return
     */
    @ResponseBody //自动返回json格式的数据
    @RequestMapping(value="/show")
    public Map<String, Object> getPage(@RequestParam("page")Integer page,
                                       @RequestParam("limit")Integer limit,String admin_name){
    
    //page、limit参数都是layui的table组件默认自动传递的，我们只需接收即可
        Map<String, Object> map = new HashMap<String, Object>();

        List<Admin> list = admindaoserviceimpl.adminshow1(page,limit,admin_name);
        System.out.println("list = " + list);
        System.out.println("admin_name = " + admin_name);
        //执行分页查询的方法
        PageInfo<Admin> userPageInfo = new PageInfo<Admin>(list);

        map.put("code", 0);
        map.put("msg", "操作成功");

        map.put("admin_name", admin_name);

        map.put("count", userPageInfo.getTotal());
        map.put("data", userPageInfo.getList());//最最最关键的代码，layui的table会自动获取并显示该数据集
        return map;
    }
//    更新

    @RequestMapping("/update")
    @ResponseBody
    public Map update(Admin admin) throws Exception {
    
    
        System.out.println("我是修改的");
//        调用方法
//        获取实体类
        admin.getAdmin_name();
        System.out.println(admin.getAdmin_name());
        admin.getAdmin_profession();
        int i = admindaoserviceimpl.adminupdate(admin);
       Map map = new HashMap<>();
    if (i>0){
    
    
    //        添加
    map.put("code", 0);
    map.put("msg", "修改成功");
        return map;

}
    else {
    
    
        map.put("code", 400);
        map.put("msg", "修改失败,检查网络再来一次");
        return map;
    }
    }
    // 删除订单  根据 主键 id 删除
    @RequestMapping("/deleteById")
    @ResponseBody
    public Map deleteById(@RequestParam(value ="admin_name") String admin_name) throws Exception {
    
    
        Map responseMap = new HashMap();
        System.out.println("我是删除的");
        int i = admindaoserviceimpl.admin(admin_name);
        if (i > 0) {
    
    
            responseMap.put("code", 200);
            responseMap.put("msg", "删除成功");
            return responseMap;
        } else {
    
    
            responseMap.put("code", 400);
            responseMap.put("msg", "删除失败");
            return responseMap;
        }
    }


//    增加

    //增
// 后端订单增加 -- 针对layui的 针对前端传 json序列化的
    @RequestMapping("/insert")
    @ResponseBody
    public Map insert(Admin admin) throws Exception {
    
     // orders 对象传参, 规则: 前端属性要和后台的属性一致!!!
        Map map = new HashMap();
        admin.getAdmin_name();
        admin.getAdmin_profession();
        int i =  admindaoserviceimpl.admininsert(admin);
        if(i>0){
    
    
            map.put("code",200);
            map.put("msg","添加成功");
            return map;
        }else{
    
    
            map.put("code",400);
            map.put("msg","添加失败,检查网络再来一次");
            return map;
        }
    }
//测试邮箱的demo



    @RequestMapping("/send")
    public Object sendMail03(String setto,String text,String Subject) {
    
    
        MimeMessage mMessage = javaMailSender.createMimeMessage();//创建邮件对象
        MimeMessageHelper mMessageHelper;
        System.out.println("setto = " + setto);
        System.out.println("text = " + text);
        System.out.println("Subject = " + Subject);
        try {
    
    

            mMessageHelper = new MimeMessageHelper(mMessage, true);
            mMessageHelper.setFrom("[email protected]");//发件人邮箱
            mMessageHelper.setTo(setto);//收件人邮箱
            mMessageHelper.setSubject(Subject);//邮件的主题
            mMessageHelper.setText(text);//邮件的文本内容，true表示文本以html格式打开

            javaMailSender.send(mMessage);//发送邮件
        } catch (Exception e) {
    
    
            e.printStackTrace();
        }
        return "adminshow";
    }





}

登录的

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--<%@ include file="../common/taglib.jsp"%>--%>
<%@ page import="java.text.SimpleDateFormat,java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎访问</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet"/>
<%--    <link rel="stylesheet" href=" value="${pageContext.request.contextPath}/layui/css/layui.css"/>--%>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html, body {
     
     width: 100%;height: 100%;overflow: hidden}
        body {
     
     background: #009688;}
        body:after {
     
     content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {
     
     width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {
     
     width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {
     
     text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {
     
     color:#009688;font-size:25px;font-weight:bold;}
        .login-form {
     
     background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {
     
     position:relative;}
        .login-form .layui-form-item label {
     
     position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {
     
     padding-left:36px;}
        .captcha {
     
     width:60%;display:inline-block;}
        .captcha-img {
     
     display:inline-block;width:34%;float:right;}
        .captcha-img img {
     
     height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
        #canvas {
     
     
            float: right;
            display: inline-block;
            border: 1px solid #D2D2D2!important;
            border-radius: 5px;
            cursor: pointer;
            width:100%;
        }
    </style>
</head>
<body>
<div class="layui-container layui-anim layui-anim-upbit">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="login">
                <div class="layui-form-item logo-title">
                    <h1>小可爱的demo</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" form="super_id"></label>
                    <input type="text" name="super_id" id="super_id" lay-verify="required|account" placeholder="用户名" autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" form="super_name"></label>
                    <input type="password" name="super_name" id="super_name" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="">
                    <div class="captcha-img">
                        <canvas id="canvas" class="layui-input"></canvas>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

<%--<script src="<c:url value="/plugins/layuimini/lib/jq-module/jquery.particleground.min.js"/>" charset="utf-8"></script>--%>
<script>
    layui.use(['form'], function () {
     
     
        var form = layui.form,
            layer = layui.layer;
        //验证码
        var verification_code = [];
        draw(verification_code);
        $("#canvas").on('click',function(){
     
     
            draw(verification_code);
        });

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) {
     
     
            top.location = self.location;
        }

        // 粒子线条背景
        $(document).ready(function(){
     
     
            $('.layui-container').particleground({
     
     
                dotColor:'#5cbdaa',
                lineColor:'#5cbdaa'
            });
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
     
     
            data = data.field;
            if (data.admin_name == '') {
     
     
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.admin_profession == '') {
     
     
                layer.msg('密码不能为空');
                return false;
            }
            var verificationCode = verification_code.join("");
            if (data.captcha == '') {
     
     
                layer.msg('验证码不能为空');
                return false;
            } else if(data.captcha.toUpperCase() != verificationCode) {
     
     
                layer.msg('验证码输入错误');
                $("#canvas").click()
                return false;
            }

            var param = {
     
     "admin_id" : $("#admin_id").val(), "admin_name" : $("#admin_name").val()};
            jQuery.ajax({
     
     
                type:"post",
                data: JSON.stringify(param),
                async: true,
                dataType: 'json',
                contentType:'application/json',
                url:'login',
                success:function(result){
     
     
                    if(result.success){
     
     
                        layer.msg('登录成功', function () {
     
     
                            location.href = result.data.url;
                        });
                    }else{
     
     
                        layer.msg(result.error);
                    }
                },
                error:function(){
     
     
                    layer.msg("服务器连接失败.");
                }
            });
            return false;
        });
    });

    function draw(verification_code) {
     
     
        var canvas_width = $('#canvas').width();
        var canvas_height = $('#canvas').height();
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = canvas_width;
        canvas.height = canvas_height;

        var randomCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var randomCodeStr = randomCode.split(",");
        var randomCodeLength = randomCodeStr.length;
        for (var i = 0; i <= 3; i++) {
     
      //绘制数字
            var j = Math.floor(Math.random() * randomCodeLength);
            var rotate = Math.random() * 50 * Math.PI / 180;
            var content = randomCodeStr[j];
            verification_code[i] = content.toUpperCase();
            var x = 10 + i * 20;
            var y = 20 + Math.random() * 8;
            context.font = "bold 23px 微软雅黑";
            context.translate(x, y);
            context.rotate(rotate);
            context.fillStyle = randomColor();
            context.fillText(content, 0, 0);
            context.rotate(-rotate);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) {
     
      //绘制线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 60; i++) {
     
      //绘制小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {
     
     //得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>
</body>
</html>

首页的

<%--
  Created by IntelliJ IDEA.
  User: 可爱的小仙女
  Date: 2020/11/11
  Time: 13:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="demoTable">
    搜索名字：
    <div class="layui-inline">
        <input class="layui-input" name="admin_name" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="reload">搜索</button>
</div>
<table id="tabdemo" lay-filter="table1"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add1"><i class="layui-icon">&#xe608;</i>新增</button>

    </div>


</script>
<script type="text/html" id="bardemo">
    <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="update">修改</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除！</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="email1"><i class="layui-icon">&#xe618;</i>发邮箱</button>
</script>
<script type="text/html" id="add">
    <form class="layui-form" action="" lay-filter="update">

        <div class="layui-form-item">
            <label class="layui-form-label">管理员姓名</label>
            <div class="layui-input-block">
                <input type="text" name="admin_name"  placeholder="请输入你的名字" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">管理员职务</label>
            <div class="layui-input-block">
                <input type="text" name="admin_profession"  placeholder="请输入职务" class="layui-input"  >
            </div>
        </div>

        <!--提交按钮的-->
        <div class="layui-form-item">
            <!--formlable-->
            <div class="layui-input-block">

                <button class="layui-btn" lay-submit lay-filter="addadmin">立即提交</button>
                <input type="reset"class="layui-btn" value="重置">
            </div>
        </div>
    </form>
</script>
<!-- 这里是发邮箱的html-->
<script type="text/html" id="email1">
    <form class="layui-form" action="send" lay-filter="email1">
        <div class="layui-form-item">
            <label class="layui-form-label">输入你要发送的邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="setto"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">输入你要发送的主题</label>
            <div class="layui-input-block">
                <input type="text" name="Subject"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">输入你要发送的内容</label>
            <div class="layui-input-block">
                <input type="text" name="text"  class="layui-input">
            </div>
        </div>
        <!--提交按钮的-->
        <div class="layui-form-item">
            <!--formlable-->
            <div class="layui-input-block">

<%--                <button class="layui-btn" lay-submit lay-filter="updatestudent">立即提交</button>--%>
                <input type="submit"class="layui-btn" value="立即提交">
            </div>
        </div>
    </form>

</script>
<%--这是更新的html--%>
<script type="text/html" id="update">
    <form class="layui-form" action="" lay-filter="update">
        <div class="layui-form-item">
            <label class="layui-form-label">管理员id</label>
            <div class="layui-input-block">
                <input type="text" name="admin_id" id="admin_id" class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">管理员姓名</label>
            <div class="layui-input-block">
                <input type="text" name="admin_name"  placeholder="" class="layui-input" id="admin_name" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">管理员职务</label>
            <div class="layui-input-block">
                <input type="text" name="admin_profession"  placeholder="" class="layui-input" id="admin_profession" >
            </div>
        </div>

        <!--提交按钮的-->
        <div class="layui-form-item">
            <!--formlable-->
            <div class="layui-input-block">

                <button class="layui-btn" lay-submit lay-filter="updatestudent">立即提交</button>
                <input type="reset"class="layui-btn" value="重置">
            </div>
        </div>
    </form>
</script>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js" ></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'element', 'layer','jquery','table','upload','util'], function(){
     
     
        var form = layui.form;
        var layedit = layui.layedit;
        var laydate = layui.laydate;
        var element = layui.element;
        var layer = layui.layer;
        var  $ = layui.jquery;
        var  table = layui.table;
        var upload=layui.upload;
        var util=layui.util;
        table.render({
     
     
            elem:'#tabdemo' //默认是table 的id
            ,height:600 //高度
            ,toolbar:'#toolbarDemo'
            ,url:'show' //json 的位置
            ,id:'testReload'
            ,page :true
            ,cols:[[   //数据的列
                //表头
                //sort //排序 title 标题
                ,{
     
     field: 'admin_id', title: '管理员id', width: 145}
                ,{
     
     field: 'admin_name', title: '管理员姓名', width: 145}
                ,{
     
     field: 'admin_profession', title: '管理员职务', width: 145}
  //右侧工具栏的
                ,{
     
     fixed: 'right', width: 300, align:'center', toolbar: '#bardemo'}
            ]]


        })
        var $=layui.$,active={
     
     
            reload:function(){
     
     

                var admin_name=$('#demoReload').val(); //搜索框

                //执行重载
                table.reload('testReload',{
     
     
                    // method:'post',
                    where:{
     
     
                     admin_name:admin_name
                    }
                });
            }
        };
        $('#reload').on('click',function() {
     
     
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

            $('#reload').on('click',function(){
     
     
            var type=$(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听头部的按钮
        table.on('toolbar(table1)', function (obj) {
     
     
            var checkStatus = table.checkStatus(obj.config.id);


            switch(obj.event){
     
     
                case 'add1':
                    layer.open(
                        {
     
     
                            title:"添加学生信息",
                            offset:'10px',
                            type:1,//基本层的类型
                            anim:1,
                            content:$('#add').html(),//content是一个普通的String
                            area:['500px','500px'],
                        }


                    )

                    break;
            }
        })
//获取输入栏的文本
        form.on('submit(addadmin)',function (date) {
     
     
            $.ajax({
     
     
                url:'insert',
                type:'POST',
                dataType:'json',
                data:{
     
     "admin_name":date.field.admin_name,"admin_profession":date.field.admin_profession},
                success:function () {
     
     


                    layer.msg("添加成功！", {
     
     icon: 6});
                    //关闭弹窗
                    layer.closeAll();
                    //重载
                    table.reload("testReload",{
     
     
                        page: {
     
     
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }

            })
            return false;
        })
        table.on('tool(table1)',function(obj){
     
     
            //tool 是工具条的 事件名字 ，table 1 是我table 的
            //获取当前的数据
            var data=obj.data;
            //获取lay-even 对应的值（也可以获取表头的）
            var layevent=obj.event;
            if(layevent==='update'){
     
     
                layer.open({
     
     
                    title:"修改学生信息",
                    type:1,//基本层的类型
                    anim:1,
                    content:$('#update').html(),//content是一个普通的String
                    area:['500px','500px'],
                })
                //将操作的这行数据赋值到弹出层的框里
                showstudent(obj,data);
                //    更新的方法
                updatestudent(obj,data);
            }
            else if(layevent==='delete'){
     
     

                layer.confirm('真的要删除'+data.admin_name+'的信息吗？哭泣泣！！',function(index){
     
     

                    //
                    //
                    alert("删除")
                    $.ajax({
     
     
                        //需要跳转的url
                        url:'deleteById',
                        type:'POST',
                        dataType:'json',
                        data:{
     
     "admin_name":data.admin_name},
                        success:function () {
     
     
                            //如果状态码等于200的h话

                                //删除对应的行
                                obj.del()
                                layer.close(index)
                                //刷新
                                console.log(index)
                            //    友好提示一下用户
                            layer.msg("删除成功了哦！！",{
     
     
                                icon:6

                            })


                        }
                    })
                    layer.close(index)
                })



            }
            else if(layevent==='email1'){
     
     
                layer.open({
     
     
                    title:"发邮箱",
                    offset:'10px',

                    type:1,//基本层的类型
                    anim:1,
                    content:$('#email1').html(),//content是一个普通的String
                    area:['400px','400px'],

                })
                <%--alert("sss")--%>
                <%--$.ajax({
     
     --%>
                <%--    //需要跳转的url--%>
                <%--    // dataType:'json',--%>
                <%--    // type:'POST',--%>
                <%--    url:'${pageContext.request.contextPath}/send',--%>
                <%--    data:{
     
     "setto":data.setto,"Subject":data.Subject,"text":data.text},--%>
                <%--    success:function () {
     
     --%>
                <%--        //如果状态码等于200的h话--%>

                <%--        layer.close(index)--%>
                <%--        //刷新--%>
                <%--        console.log(index)--%>
                <%--        //    友好提示一下用户--%>
                <%--        layer.msg("发送成功了哦！！",{
     
     --%>
                <%--            icon:6--%>

                <%--        })--%>


                <%--    }--%>
                <%--})--%>
            }
        })
        //写回显的代码
        function showstudent(obj,date) {
     
     
            //管理员id
            $("#admin_id").val(date.admin_id)
            //管理员姓名
            $("#admin_name").val(date.admin_name)
            // 管理员职务
            $("#admin_profession").val(date.admin_profession)

        }

        function updatestudent(obj,date) {
     
     
            //监听from 的提交事件
            form.on("submit(updatestudent)",function (da) {
     
     
                // post四个参数，第一个参数 url 的值，第二个参数，你要修改的值
                //    第三个参数 成功后的，第四个参数 成功后的json
                alert("修改的!!!")

                $.post("update",{
     
     "admin_profession":da.field.admin_profession,"admin_name":date.admin_name},function (d) {
     
     
                    if (d.success){
     
     

                        layer.msg("修改成功！！",{
     
     icon:6})
                        setTimeout(function () {
     
     
                            obj.update({
     
     
                                "admin_profession":da.field.admin_profession
                                // "admin_name":date.admin_name
                            })
                            layer.closeAll()//关闭弹出层
                        },1000)

                    }
                },"json")

            })
        }
        return false
    })


</script>
</html>

后台界面

<%--
  Created by IntelliJ IDEA.
  User: 可爱的小仙女
  Date: 2020/11/10
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        .defayt{
     
     
            width: 1140px;
            height: 50px;
            margin-left: 1350px;

        }
        .defayt ul li{
     
     
            float: left;
            margin-left: 10px;

        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">fjj 的 demo</div>


            <!--头部导航右侧-->
            <ul class="layui-nav layui-layout-right">

                <li class="layui-nav-item">
                    <!--layui-badge-dot显示图片-->
                    <a>欢迎${super_name}登录</a>
                    <dl class="layui-nav-child">

                        <dd>
                            <a href="login.jsp">退出</a>
                        </dd>
                    </dl>


                </li>
            </ul>
    </div>
    <!--侧边导航--->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-shrink=all lay-filter="navs">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">公共数据</a>
                    <dl class="layui-nav-child">
                        <!--二级菜单-->
                        <dd>
                            <a href="javascript:;" data-option="{href:'index.jsp',layid:'1'}">你好世界</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-option="{href:'adminshow.jsp',layid:'2'}">信息</a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:;">系统相关</a>
                    <dl class="layui-nav-child">
                        <!--二级菜单-->
                        <dd>
                            <a href="javascript:;" data-option="{href:'bangzhu.html',layid:'9'}">帮助消息</a>
                        </dd>
                        <dd>
                            <a href="login.jsp">退出</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div class="layui-tab" lay-allowClose="true" lay-filter="tabs">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">首页</li>

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <a href="出勤.jsp" target="ifrPage"/>
<%--                    <iframe id="ifrPage" name="ifrPage" src="出勤.jsp" style="width:1500px;height:800px"></iframe>--%>
                </div>
            </div>
        </div>

    </div>

    <!-- 底部固定区域 -->
    <div class="layui-footer">

    </div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['element', 'layer', 'jquery'], function() {
     
     
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        //监听导航
        element.on("nav(navs)", function(ele) {
     
     
            //获取操作连接的文本
            var text = $(this).text();
            //判断当前data属性的值是否为空
            if($(this).data("option")) {
     
     
                var option = eval("(" + $(this).data("option") + ")");
                var href = option.href;
                var layid = option.layid;
                //获取当前的所有选项卡
                var tablist = $(".layui-tab-title li[lay-id='" + layid + "']").length;
                if(tablist <= 0) {
     
     
                    element.tabAdd("tabs", {
     
     
                        title: text,
                        //vh  viewheight  calc只能在样式表里用
                        content: "<iframe scrolling='no' frameborder='no' src='" + href + "'style='width:100%;height:calc(100vh)'></iframe>",
                        id: layid
                    });
                }
                //点击侧边导航切换选择卡
                element.tabChange("tabs", layid);
            }
        });
    });
</script>

</html>

结果
登录界面

登录后

全查

模糊查询

发邮箱