EasyUI（bootstrap主题）——信息系统

利用easyUI编写一个具有增删改查的信息系统

要点

• 要熟知各种控件参数的参数格式
• easyUI form表单的提交
• form的submit方法返回的数据为json字符串而不是json对象，需要转换成json对象

success:function (data) {
                   data=JSON.parse(data);
                   $.messager.alert('message',data.msg,'info');
               } 

• Datagrid 数据网格往回台传的数据有page和rows，其中page是表示当前页数，rows是表示每页的数据条数。后台数据库查询时要用到这2个参数，否则无分页效果

  int start=Integer.parseInt(request.getParameter("page"));
  int size=Integer.parseInt(request.getParameter("rows"));

• Datagrid 数据网格数据回显需要的数据为一个json对象包括这些数据量，total和rows。total表示数据库当前查询结果数（实际当前页面有的数据，因为并不是每页都是满数据），rows表示对象列表

  int count;
      if(sqlpart.length()>0){
          count=studentDao.count("select count(*) from stu_info where"+sqlpart);
      }else{
          count=studentDao.count("select count(*) from stu_info");
      }
      sql+=sqlpart;
       List<Student> list=studentDao.getStudents(sql,(start-1)*size,size);
       map.put("total",count);
       map.put("students",list);

具体代码

mod层

树形菜单node

package com.yandan.model;

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

public class Node {
    private int id;
    private String text;
    private String state;
    private boolean checked;
    private String iconCls;
    private Map<String,Object> attributes=new HashMap<String,Object>();
    private List<Node> children;
    private  int pid;
    
    public Node(int id, String text, String state, boolean checked, String iconCls, Map<String, Object> attributes, List<Node> children,int pid) {
        this.id = id;
        this.text = text;
        this.state = state;
        this.checked = checked;
        this.iconCls = iconCls;
        this.attributes = attributes;
        this.children = children;
        this.pid=pid;
    }
    public Node(){}

    public int getId() {
        return id;
    }

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

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
    }

    public String getIconCls() {
        return iconCls;
    }

    public void setIconCls(String iconCls) {
        this.iconCls = iconCls;
    }

    public Map<String, Object> getAttributes() {
        return attributes;
    }

    public void setAttributes(Map<String, Object> attributes) {
        this.attributes = attributes;
    }

    public List<Node> getChildren() {
        return children;
    }

    public void setChildren(List<Node> children) {
        this.children = children;
    }
    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }
}

Datagrid 数据网格回显数据对象类pageStu

package com.yandan.model;

import java.util.List;

public class PageStu {
   private int total;
   private List<Student> rows;

   public PageStu(int total, List<Student> rows) {
       this.total = total;
       this.rows = rows;
   }

   public PageStu() {
   }

   public int getTotal() {
       return total;
   }

   public void setTotal(int total) {
       this.total = total;
   }

   public List<Student> getRows() {
       return rows;
   }

   public void setRows(List<Student> rows) {
       this.rows = rows;
   }
}

信息对象类Student

package com.yandan.model;

public class Student {
    private int id;
    private  String name;
    private String sex;
    private String stuID;

    public Student(int id, String name, String sex, String stuID) {
        this.id = id;
        this.name = name;
        this.sex = sex;
        this.stuID = stuID;
    }

    public Student() {
    }

    public int getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getStuID() {
        return stuID;
    }

    public void setStuID(String stuID) {
        this.stuID = stuID;
    }
}

dao层

NodeDao

package com.yandan.dao;

import com.yandan.model.Node;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

@Repository
public class NodeDao {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    private final RowMapper<Node> rowMapper=new RowMapper<Node>() {
        @Override
        public Node mapRow(ResultSet resultSet, int i) throws SQLException {
            Node node=new Node();
            node.setId(resultSet.getInt("id"));
            node.setText(resultSet.getString("text"));
            node.getAttributes().put("href",resultSet.getString("href"));
            node.setPid(resultSet.getInt("pid"));
            return node;
        }
    };
    public List<Node> getNodes(@PathVariable("pid") int pid){
        return jdbcTemplate.query("select * from node where pid=?",rowMapper,pid);
    }
    public List<Node> getAll(){
        return jdbcTemplate.query("select * from node",rowMapper);
    }
}

PageStuDao

package com.yandan.dao;

import com.yandan.model.PageStu;
import com.yandan.model.Student;
import com.yandan.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.Map;

@Repository
public class PageStuDao {
    @Autowired
    private StudentService studentService;

    public PageStu getPage(HttpServletRequest request) throws UnsupportedEncodingException {
        Map<String,Object> map=studentService.getPage(request);
        PageStu pageStu=new PageStu();
        pageStu.setRows((List<Student>) map.get("students"));
        pageStu.setTotal((int)map.get("total"));
        return pageStu;
    }
}

StudentDao

package com.yandan.dao;

import com.yandan.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

@Repository
public class StudentDao {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    private final RowMapper<Student> rowMapper=new RowMapper<Student>() {
        @Override
        public Student mapRow(ResultSet resultSet, int i) throws SQLException {
            Student student=new Student();
            student.setId(resultSet.getInt("id"));
            student.setName(resultSet.getString("name"));
            student.setSex(resultSet.getString("sex"));
            student.setStuID(resultSet.getString("stuID"));
            return student;
        }
    };
    public List<Student> getStudents(String sql) {

        return jdbcTemplate.query( sql,rowMapper);
    }
    public List<Student> getStudents(String sql,int start,int size) {

        return jdbcTemplate.query(sql+" limit ?,?", rowMapper,start,size);
    }
    public int delete(String stuIDs){
        String sql="delete from stu_info where stuID in ("+stuIDs+")";
       int result= jdbcTemplate.update(sql);
        return result;
    }

    public int insert(String stuID,String sex,String name){
       if(  jdbcTemplate.query("select * from stu_info where stuID=?",rowMapper,stuID).size()>0){
           return 0;
       }
        return jdbcTemplate.update("insert into stu_info set name=?,sex=?,stuID=?",name,sex,stuID);
    }
    public int count(String sql){
        return jdbcTemplate.queryForObject(sql,Integer.class);
    }
    public int update(String stuID,String sex,String name){
        return jdbcTemplate.update("update stu_info set name=?,sex=? where stuID=?",name,sex,stuID);
    }
    public Student getStudent(String stuID){
        return jdbcTemplate.queryForObject("select * from stu_info where stuID=?",rowMapper,stuID);
    }
}

service层

StudentService

package com.yandan.service;

import com.yandan.dao.StudentDao;
import com.yandan.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class StudentService {
    @Autowired
    private StudentDao studentDao;
    public Map<String,Object> getPage(HttpServletRequest request) throws UnsupportedEncodingException {
    //根据查询条件生成sql语句
        Map<String,Object> map=new HashMap<String,Object>();
        int page;
        String sql;
        String name=null;
        String sex=null;
        String stuID=null;
        int start=Integer.parseInt(request.getParameter("page"));
        int size=Integer.parseInt(request.getParameter("rows"));
        name=request.getParameter("name");
        stuID=request.getParameter("stuID");
        sex=request.getParameter("sex");
        if(("undefined".equals(name)&&"undefined".equals(sex)&&"undefined".equals(stuID))||"".equals(name)&&"".equals(sex)&&"".equals(stuID)){
            sql="select * from stu_info";
        }else{
            sql="select * from stu_info where ";
        }
        String sqlpart="";
        sqlpart+="undefined".equals(name)||"".equals(name)? "":"and name like \"%"+name+"%\" ";
        sqlpart+="undefined".equals(sex)||"".equals(sex)? "":"and sex =\""+sex+"\" ";
        sqlpart+="undefined".equals(stuID)||"".equals(stuID)? "":"and stuID like \"%"+stuID+"%\" ";
       if(sqlpart.length()>0){
           sqlpart=sqlpart.substring(3,sqlpart.length());
       }
        int count;
       if(sqlpart.length()>0){
           count=studentDao.count("select count(*) from stu_info where"+sqlpart);
       }else{
           count=studentDao.count("select count(*) from stu_info");
       }
       sql+=sqlpart;
        List<Student> list=studentDao.getStudents(sql,(start-1)*size,size);
        map.put("total",count);
        map.put("students",list);
        return map;
    }
    @Transactional(propagation = Propagation.REQUIRED)
    public int insert(HttpServletRequest request){
        String stuID=request.getParameter("stuID");
        String name=request.getParameter("name");
        String sex=request.getParameter("sex");
        return studentDao.insert(stuID,sex,name);
    }
    @Transactional(propagation = Propagation.REQUIRED)
    public int delete(String stuID){

        return studentDao.delete(stuID);
    }
    @Transactional(propagation = Propagation.REQUIRED)
    public int update(HttpServletRequest request){
        String stuID=request.getParameter("stuID");
        String sex=request.getParameter("sex");
        String name=request.getParameter("name");
        return studentDao.update(stuID,sex,name);
    }
    public  Student getStudent(String stuID){
        return  studentDao.getStudent(stuID);
    }
}

JSP
UI.jsp
树形菜单和标签页进行分页显示不同的页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>easyUI</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
    <h1>信息管理系统(陈敏)</h1>
</div>
<div data-options="region:'west',title:'导航栏',split:true" style="width:100px;">
    <ul id="mytree" class="easyui-tree">
    </ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    <div id="tabs" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">
    </div>
</div>
</body>
<script>
    $(function () {

           $('#mytree').tree({
               url:'tree/node/0',
               onClick:function (node) {
                    //加载子节点
                   $.get('tree/node/'+node.id,{},function (data) {

                            var children=$('#mytree').tree('getChildren',node.target);
                            if(children!=null&&children.length>0){
                                for(var i=0;i<children.length;i++){
                                    $('#mytree').tree('remove',children[i].target);
                                }
                            }
                            $('#mytree').tree('append',{
                                parent:node.target,
                                data:data
                       });
                            var href=node.attributes.href;
                            if(href!=null&&href.length>0){
                                if($('#tabs').tabs('exists',node.text)){
                                    $('#tabs').tabs('select',node.text);
                                }else{
                                    $('#tabs').tabs('add',{
                                        title:node.text,
                                        select:true,
                                        closable:true,
                                        href:'<%=request.getContextPath()%>'+href
                                    });
                                }
                            }
                   },'json');
               }

           });

    });

</script>
</html>

student.jsp
通过弹窗显示增加，修改，删除页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title >students</title >
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<table align="center">
    <td>学号</td><td><input name="stuID" id="stuID" type="text"></td>
    <td>姓名</td><td><input name="name"  id="name" type="text"></td>
    <td>性别</td><td><select id="sex">
    <option value="">请选择</option>
    <option value="男"> 男</option>
    <option value="女">女</option>
</select></td>
    <td><button οnclick="search()">查找</button></td>
</table>
<table  id="stutable" class="easyui-datagrid" style="width:400px;height:250px">

</table>
<div id="mytb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit-yandan' ,plain:true"  οnclick="update()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove-yandan', plain:true" οnclick="deleteRows()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add-yandan', plain:true" οnclick="insert()"></a>
</div>
<div id="mydialog"></div>
<div id="bb">
    <a href="#" class="easyui-linkbutton" οnclick="submit()">Save</a>
    <a href="#" class="easyui-linkbutton" οnclick="mclose()">Close</a>
</div>
<script>
    var flag;
    $(function () {
        reload();

    });
    function search() {

        reload();
    };
    function insert() {
        flag=true;
        $('#mydialog').dialog({
            title:'添加学生',
            href: 'student_add.jsp',
            width:300,
            height:200,
            resizable:true,
            buttons:$('#bb'),
            closed:true
        });
        $('#mydialog').dialog('open');

    }
function submit() {
        //true: insert;  false: update
        if(flag){
            $('#stuForm').form('submit',{
               url: 'student/insert',
               success:function (data) {
                   data=JSON.parse(data);
                   $.messager.alert('message',data.msg,'info');
               }

            });
        }else{
            $('#stuForm').form('submit',{
                url: 'student/update',
                success:function (data) {
                    data=JSON.parse(data);
                    $.messager.alert('message',data.msg,'info');
                }

            });
        }
        reload();
}
 function mclose() {
        $('#stuForm').form('clear');
        $('#mydialog').dialog('close');
 }
   function deleteRows() {
      if($('#stutable').datagrid('getChecked').length>0){
          var rows= $('#stutable').datagrid('getChecked');
          var ids='';
          for(var i=0;i<rows.length;i++){
              var stu=rows[i];
              ids+=',\''+stu.stuID+'\'';
          }
          ids=ids.substring(1,ids.length);
          $.get('student/delete',{
              stuID:ids
          },function (data) {
              $.messager.alert('message',data.msg,'info');
          },'json');
          reload();
      }
   }

   function reload() {
       $('#stutable').datagrid({
           url:'student/get',
           queryParams:{
               name:$('#name').val(),
               stuID:$('#stuID').val(),
               sex:$('#sex').val()
           },
           toolbar:'#mytb',
           contentType:'charset=utf-8',
           pagination:true,
           pagePosition: 'top',
           fitColumns:true,
           fit:true,
           striped:true,
           selectOnCheck:false,
           singleSelect:true,
           columns:[[
               {field:'ck' ,checkbox: true},//复选框
               {field:'id',title:'序号',width:100,align:'center'},
               {field:'stuID',title:'学号',width:100,align:'center'},
               {field:'name',title:'姓名',width:100,align:'center'},
               {field:'sex',title:'性别',width:100,align:'center'}
           ]]

       });
   }
   function update() {
        flag=false;
            if($('#stutable').datagrid('getSelected')==null){
                $.messager.alert('警告','请选择一条数据','warning');
            }else if($('#stutable').datagrid('getChecked').length>1){
                $.messager.alert('警告','不能选择多条数据','warning');
            }else{

                $('#mydialog').dialog({
                    title:'修改信息',
                    href: 'student_update.jsp',
                    width:300,
                    height:200,
                    resizable:true,
                    buttons:$('#bb'),
                    closed:true
                });
                $('#mydialog').dialog('open');
                $.get('student/get/'+$('#stutable').datagrid('getSelected').stuID,{},function (data) {
                    $('#stuForm').form('load',data);
                },'json');

            }
   }
</script>
</body>
</html>

student_add.jsp
利用easyUI的form和input样式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>insert</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<form id="stuForm" method="post" style="align-content: center; text-align: center">
    <div>
        <label for="stuID">学号</label>
        <input type="text" class="easyui-numberbox"  id="stuID" name="stuID"  data-options="min:0,precision:0">
    </div>
    <p></p>
    <div>
        <label for="name">姓名</label>
        <input class="easyui-validatebox" type="text" name="name" id="name"   height="28px"/>
    </div>
    <p></p>
    <div style="margin-bottom:20px">
        <label for="sex">性别</label>
            <input  id="sex" class="easyui-radiobutton" name="sex" value="男" label="男"  labelPosition="after" labelWidth="60px">
            <input class="easyui-radiobutton" name="sex" value="女" label="女" labelPosition="after" labelWidth="60px">
    </div>
    <p></p>
</form>

<script>

</script>
</body>
</html>

student_delete.jsp

<%--
  Created by IntelliJ IDEA.
  User: YanDan
  Date: 2020/4/24
  Time: 22:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>delete</title>
    <script src="js/jquery-1.9.1.js"></script>
</head>
<body>
<table align="center">
    <td>学号</td><td><input id="stuID" type="text"></td><td><button id="detete" οnclick="delete_a()" value="删除">删除</button> </td>
</table>
<table id="stutable"  align="center" border="1px"></table>
<script>
    function delete_a() {
        $.get('student/delete',{stuID:$('#stuID').val},function(data){
            $('#stutable').empty();
            $('#stutable').append(getTableHeadHtml());
            $('#stutable').append(getTableBodyHtml(data));
        },'json');
    }
    function getTableHeadHtml(){
        var html="<td>序号</td> <td>学号</td> <td>姓名</td> <td>性别</td>";
        return html;
    }
    function getTableBodyHtml(data) {
        var html='';

        for (var i=0;i<data.length;i++){
            html=html+'<tr>';
            html=html+'<td>'
                +data[i].id+'</td><td>'
                +data[i].stu_id+'</td><td>'
                +data[i].name+'</td><td>'
                +data[i].sex+'</td>';
            html=html+'</tr>';
        }
        return html;
    }
</script>
</body>
</html>

student_update.jsp

<%--
  Created by IntelliJ IDEA.
  User: YanDan
  Date: 2020/5/1
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>update</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<form id="stuForm" method="post" style="align-content: center; text-align: center">
    <div>
        <label for="stuID">学号</label>
        <input class="easyui-validatebox" type="text" name="stuID" id="stuID"   height="28px" readonly="true"/>
    </div>
    <p></p>
    <div>
        <label for="name">姓名</label>
        <input class="easyui-validatebox" type="text" name="name" id="name"   height="28px"/>
    </div>
    <p></p>
    <div style="margin-bottom:20px">
        <label for="sex">性别</label>
        <input  id="sex" class="easyui-radiobutton" name="sex" value="男" label="男"  labelPosition="after" labelWidth="60px">
        <input class="easyui-radiobutton" name="sex" value="女" label="女" labelPosition="after" labelWidth="60px">
    </div>
    <p></p>
</form>
</body>
</html>

配置

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
         xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <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>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <url-pattern>*</url-pattern>
    </filter-mapping>
    <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:SpringMVC-servlet.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>SpringMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

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 https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--自动扫描注解-->
   <context:component-scan base-package="com.yandan.controller"/>

   <mvc:annotation-driven/>
<!-- 增加静态文件加载-->
   <mvc:resources location="/image/" mapping="/image/**"/>
   <mvc:resources location="/js/" mapping="/js/**"/>
   <mvc:resources location="/css/" mapping="/css/**"/>
   <mvc:resources location="/jquery-easyui-1.7.0/" mapping="/jquery-easyui-1.7.0/**"/>
</beans>

applicationContext.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
        https://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.yandan"/>
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${driver}"/>
        <property name="url" value="${url}"/>
        <property name="username" value="${user}"/>
        <property name="password" value="${password}"/>
    </bean>
    <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
        <property name="dataSource"  ref="dataSource"/>
    </bean>
</beans>