基于springmvc、ajax,后台连接数据库的增删改查

  前言

   前段时间在博客园上找了一个springmvc的例子,照着学了一下,算是对springmvc有了一个初步的了解,打一个基础,下面是链接。(我只看了博客,视频太耗时间了)

   博客链接:http://www.cnblogs.com/bigdataZJ/p/springmvc1.html

   视频链接:http://ke.atguigu.com/course/48

   老师前几天让我练习一下用ajax做增删改查,只给了我一张数据库的表,什么都不多说。过程肯定是十分痛苦,因为技术方面只是略知一二,真正做的时候真的是无从下手,老师又什么都不告诉你,顾着自己的事,网上各种百度,找学长帮忙,但是毕竟学长也很忙,所以说学习真的还是要看自己。不过,花了整整四天的时间,终于还是做出来了,功夫不负有心人。虽然做的真的是相当的low,代码方面也还有很多不足的地方。

   最终效果展示页面:

   基于springmvc、ajax,后台连接数据库的增删改查_第1张图片

 

  准备工作

   打开myecipse2014,打开数据库服务,打开navicat,将表导入数据库......等等,我就不多说了。

  配置

   新建maven项目工程

   WEB-INF目录下的web.xml  



    
    
    
        springDispatcherServlet
        org.springframework.web.servlet.DispatcherServlet
        
        
            contextConfigLocation
            classpath:springmvc.xml
        
        1
    
    
    
        springDispatcherServlet
        /
    
    
    
         default
         *.css
    
    
    
         default
         *.gif
    
    
    
        default
        *.jpg
    
    
    
        default
        *.js
    
    
    
        default
        *.html
    
    
    
        SpringEncodingFilter
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            UTF-8
        
        
            forceEncoding
            true
        
    
    
        SpringEncodingFilter
        /*
    
    

   src目录下的springmvc.xml



        
        
        
        
        
        
        
        
        
            
            
        
        
        
             
        
        
        
        
                     
        
        
            
        
        
        
        
        

   WEB-INF目录下的lib jar包

   没弄明白博客园能不能传文件,我把我的jar包截图发上来,不保证所有jar包都是需要的。(我直接复制的老师某个项目的lib文件夹)

   基于springmvc、ajax,后台连接数据库的增删改查_第2张图片

   基于springmvc、ajax,后台连接数据库的增删改查_第3张图片

   基于springmvc、ajax,后台连接数据库的增删改查_第4张图片    

        基于springmvc、ajax,后台连接数据库的增删改查_第5张图片

  java代码

   基于springmvc、ajax,后台连接数据库的增删改查_第6张图片

   OlderController.java

package com.jackie.springmvc.ajax.controller;

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

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSONArray;
import com.jackie.springmvc.ajax.dao.OlderDao;

@Controller
public class OlderController {

    @Autowired
    private OlderDao olderDao;

    //@CrossOrigin(origins="http://192.168.43.158:8080/TestSpringMVC/older", maxAge=3600)
    @ResponseBody
    @RequestMapping("/olders")
    public Map olders(){
        JSONArray dataJson = olderDao.getData("select * from peoplespecialcare");
        Map map =new HashMap();
        map.put("rows",dataJson);
        map.put("total", olderDao.count);
        
        return map;
    }
    
    @RequestMapping(value="/older/delete")
    public String delete(Integer id) {
        olderDao.getData("delete from peoplespecialcare where id = " + id);
        
        return "redirect:/ajaxOperation.jsp";
    }
    
    @ResponseBody
    @RequestMapping("/older/search")
    public Map search(String peoplename){
        JSONArray dataJson = olderDao.getData("select * from peoplespecialcare where peoplename=" + "'" + peoplename + "'");
        Map map =new HashMap();
        map.put("rows",dataJson);
        map.put("total", olderDao.count);
        
        return map;
    }
    
    @RequestMapping(value="/older/add")
    public String add(Integer id, Integer peopleid, String peoplename, Integer servicestatusid,
            Integer feespecialid, Double chargefee, Integer periodicalid,
            Double startdate, Double enddate, Integer isfeeflagid, String remark) {
        String sqlStr =  "insert into peoplespecialcare(id, peopleid, peoplename, servicestatusid, feespecialid, chargefee, periodicalid, startdate, enddate, isfeeflagid, remark)values("+id+", "+peopleid+", '"+peoplename+"', "+servicestatusid+", "+feespecialid+", "+chargefee+", "+periodicalid+", "+startdate+", "+enddate+", "+isfeeflagid+", '"+remark+"')";
        olderDao.getData(sqlStr);
        
        return "redirect:/ajaxOperation.jsp";
    }
    
    @RequestMapping(value="/older/update")
    public String update(Integer id, Integer peopleid, String peoplename, Integer servicestatusid,
            Integer feespecialid, Double chargefee, Integer periodicalid,
            Double startdate, Double enddate, Integer isfeeflagid, String remark) {
        String sqlStr =  "update peoplespecialcare set peopleid="+peopleid+", peoplename='"+peoplename+"', servicestatusid="+servicestatusid+", feespecialid="+feespecialid+", chargefee="+chargefee+", periodicalid="+periodicalid+", startdate="+startdate+", enddate="+enddate+", isfeeflagid="+isfeeflagid+", remark='"+remark+"' WHERE id="+id+"";
        olderDao.getData(sqlStr);
        
        return "redirect:/ajaxOperation.jsp";
    }
    
}

   OlderDao.java

package com.jackie.springmvc.ajax.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import org.springframework.stereotype.Repository;

import com.alibaba.fastjson.JSONArray;
import com.jackie.springmvc.ajax.entities.Older;

@Repository
public class OlderDao {
    public int count = 0;
    public JSONArray getData(String sql) {
        String driver = "com.mysql.jdbc.Driver";
        String username = "root";
        String password = "zhao1110";
        String url = "jdbc:mysql://localhost:3306/fhsystem?user="
                + username + "&password=" + password + "&useUnicode=true&characterEncoding=UTF-8";
        JSONArray array = new JSONArray();
        String sql1 = sql.substring(0, 6);
        try {
            Class.forName(driver);
            Connection con = DriverManager.getConnection(url);
            Statement stet = con.createStatement();
            if(sql1.equals("select")) {
                ResultSet rs = stet.executeQuery(sql);
                
                while(rs.next()){
                    int id = rs.getInt("id");
                    int peopleid = rs.getInt("peopleid");
                    String peoplename = rs.getString("peoplename");
                    int servicestatusid = rs.getInt("servicestatusid");
                    int feespecialid = rs.getInt("feespecialid");
                    double chargefee = rs.getDouble("chargefee");
                    int periodicalid = rs.getInt("periodicalid");
                    double startdate = rs.getDouble("startdate");
                    double enddate = rs.getDouble("enddate");
                    int isfeeflagid = rs.getInt("isfeeflagid");
                    String remark = rs.getString("remark");
                    double optime = rs.getDouble("optime");
                    int opuserid = rs.getInt("opuserid");
                    String opip = rs.getString("opip");
                    String r1 = rs.getString("r1");
                    String r2 = rs.getString("r2");
                    String r3 = rs.getString("r3");
                    String r4 = rs.getString("r4");
                    String r5 = rs.getString("r5");
                    count = rs.getRow();
                    Older older = new Older(id, peopleid, peoplename, servicestatusid,
                            feespecialid, chargefee, periodicalid, startdate, enddate,
                            isfeeflagid, remark, optime, opuserid, opip, r1, r2, r3, r4, r5);
                    array.add(older);
                    /*System.out.println(" " + id + " " + peopleid + " " + peoplename
                            + " " + servicestatusid + " " + feespecialid + " " + chargefee
                             + " " + periodicalid + " " + startdate + " " + enddate
                             + " " + isfeeflagid + " " + remark + " " + optime
                             + " " + opuserid + " " + opip + " " + r1 + " " + r2
                             + " " + r3 + " " + r4); */
                }
                
                    //System.out.println("转换JSON数据:");  
                    //System.out.println(array.toString());  
                    rs.close();
                    stet.close();
                    con.close();
                } else {
                    stet.executeUpdate(sql);
                    stet.close();
                    con.close();
                    /*sql="insert into peoplespecialcare(id, peopleid, peoplename, servicestatusid,
                            feespecialid, chargefee, periodicalid, startdate, enddate,
                            isfeeflagid)values('"+id+"', '"+peopleid+"', '"+peoplename+"', '"+servicestatusid+"', '"+feespecialid+"'
                                    , '"+chargefee+"', '"+periodicalid+"', '"+startdate+"', '"+enddate+"', '"+isfeeflagid"')";
                     */
                }
            } catch(java.lang.ClassNotFoundException e) { 
                //加载JDBC错误,所要用的驱动没有找到 
                System.err.print("ClassNotFoundException"); 
                //其他错误 
                System.err.println(e.getMessage()); 
                } catch (SQLException ex) { 
                //显示数据库连接错误或查询错误 
                System.err.println("SQLException: " + ex.getMessage()); 
            } 
            
            return array;
        }
}

   Older.java

package com.jackie.springmvc.ajax.entities;

public class Older {
    private Integer id;
    private Integer peopleid;
    private String peoplename;
    private Integer servicestatusid;
    private Integer feespecialid;
    private double chargefee;
    private Integer periodicalid;
    private double startdate;
    private double enddate;
    private Integer isfeeflagid;
    private String remark;
    private double optime;
    private Integer opuserid;
    private String opip;
    private String r1;
    private String r2;
    private String r3;
    private String r4;
    private String r5;
    
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public Integer getPeopleid() {
        return peopleid;
    }
    public void setPeopleid(Integer peopleid) {
        this.peopleid = peopleid;
    }
    public String getPeoplename() {
        return peoplename;
    }
    public void setPeoplename(String peoplename) {
        this.peoplename = peoplename;
    }
    public Integer getServicestatusid() {
        return servicestatusid;
    }
    public void setServicestatusid(Integer servicestatusid) {
        this.servicestatusid = servicestatusid;
    }
    public Integer getFeespecialid() {
        return feespecialid;
    }
    public void setFeespecialid(Integer feespecialid) {
        this.feespecialid = feespecialid;
    }
    public double getChargefee() {
        return chargefee;
    }
    public void setChargefee(double chargefee) {
        this.chargefee = chargefee;
    }
    public Integer getPeriodicalid() {
        return periodicalid;
    }
    public void setPeriodicalid(Integer periodicalid) {
        this.periodicalid = periodicalid;
    }
    public double getStartdate() {
        return startdate;
    }
    public void setStartdate(double startdate) {
        this.startdate = startdate;
    }
    public double getEnddate() {
        return enddate;
    }
    public void setEnddate(double enddate) {
        this.enddate = enddate;
    }
    public Integer getIsfeeflagid() {
        return isfeeflagid;
    }
    public void setIsfeeflagid(Integer isfeeflagid) {
        this.isfeeflagid = isfeeflagid;
    }
    public String getRemark() {
        return remark;
    }
    public void setRemark(String remark) {
        this.remark = remark;
    }
    public double getOptime() {
        return optime;
    }
    public void setOptime(double optime) {
        this.optime = optime;
    }
    public Integer getOpuserid() {
        return opuserid;
    }
    public void setOpuserid(Integer opuserid) {
        this.opuserid = opuserid;
    }
    public String getOpip() {
        return opip;
    }
    public void setOpip(String opip) {
        this.opip = opip;
    }
    public String getR1() {
        return r1;
    }
    public void setR1(String r1) {
        this.r1 = r1;
    }
    public String getR2() {
        return r2;
    }
    public void setR2(String r2) {
        this.r2 = r2;
    }
    public String getR3() {
        return r3;
    }
    public void setR3(String r3) {
        this.r3 = r3;
    }
    public String getR4() {
        return r4;
    }
    public void setR4(String r4) {
        this.r4 = r4;
    }
    public String getR5() {
        return r5;
    }
    public void setR5(String r5) {
        this.r5 = r5;
    }
    
    @Override
    public String toString() {
        return "Older [id=" + id + ", peopleid=" + peopleid + ", peoplename="
                + peoplename + ", servicestatusid=" + servicestatusid + ", feespecialid=" 
                + feespecialid + ", chargefee=" + chargefee + ", periodicalid=" + periodicalid
                + ", startdate=" + startdate + ", enddate=" + enddate + ", isfeeflagid=" + isfeeflagid 
                + ", remark=" + remark + ", optime=" + optime + ", opuserid=" + opuserid 
                + ", opip=" + opip + ", r1=" + r1 + ", r2=" + r2 
                + ", r3=" + r3 + ", r4=" + r4 + ", r5=" + r5 + "]";
    }
    
    public Older(Integer id, Integer peopleid, String peoplename, Integer servicestatusid,
            Integer feespecialid, double chargefee, Integer periodicalid, double startdate,
            double enddate, Integer isfeeflagid, String remark, double optime,
            Integer opuserid, String opip, String r1, String r2,
            String r3, String r4, String r5) {
        super();
        this.id = id;
        this.peopleid = peopleid;
        this.peoplename = peoplename;
        this.servicestatusid = servicestatusid;
        this.feespecialid = feespecialid;
        this.chargefee = chargefee;
        this.periodicalid = periodicalid;
        this.startdate = startdate;
        this.enddate = enddate;
        this.isfeeflagid = isfeeflagid;
        this.remark = remark;
        this.optime = optime;
        this.opuserid = opuserid;
        this.opip = opip;
        this.r1 = r1;
        this.r2 = r2;
        this.r3 = r3;
        this.r4 = r4;
        this.r5 = r5;
    }

}

  jsp代码

   WebRoot目录下的三个jsp文件

   主页面:ajaxOperation.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%-- <%  
    response.setHeader("Content-Type","video/x-msvideo");  
    response.setHeader("Content-Disposition", "attachment;filename=aaa.doc");
    response.header("content-type:application:json;charset=utf8");  
    response.header("Access-Control-Allow-Origin:*");  
    response.header("Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE");  
    response.header("Access-Control-Allow-Hefaders:x-requested-with,content-type"); 
%>  --%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>






My JSP 'ajaxOperation.jsp' starting page











    
请输入所查询的老人姓名:  

id peopleid peoplename servicestatusid feespecialid chargefee periodicalid startdate enddate isfeeflagid remark 删除 修改

   基于springmvc、ajax,后台连接数据库的增删改查_第7张图片

   添加页面:addWindow.jsp  

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    添加界面
    
    
    
        
    
    
  
  
  
    
id:
peopleid:
peoplename:
servicestatusid:
feespecialid:
chargefee:
periodicalid:
startdate:
enddate:
isfeeflagid:
remark:

 基于springmvc、ajax,后台连接数据库的增删改查_第8张图片

   修改页面:updateWindow.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    修改界面
    
    
    
        
    
    
    
  
  
  
    
"> peopleid:
peoplename:
servicestatusid:
feespecialid:
chargefee:
periodicalid:
startdate:
enddate:
isfeeflagid:
remark:

   基于springmvc、ajax,后台连接数据库的增删改查_第9张图片

   注意!别忘在WebRoot目录下新建jQuery文件夹,放入jquery.js

   

  另外

   当时捣鼓如何连接数据库的时候建了个DB Brower,不知道用没用上,有时间我会弄明白它。(运行程序的时候,这个是未打开状态。)

   基于springmvc、ajax,后台连接数据库的增删改查_第10张图片

 

   填坑:DB Browser类似于Navicat,但是相对操作要稍麻烦一些,好处是不用根据表写javabean了。

   查询功能效果界面

基于springmvc、ajax,后台连接数据库的增删改查_第11张图片

 

 删除功能效果界面

  基于springmvc、ajax,后台连接数据库的增删改查_第12张图片

基于springmvc、ajax,后台连接数据库的增删改查_第13张图片

      ——2017-08-22

你可能感兴趣的:(ajax,springmvc)