MVC(javaBean,JSP,Servlet)与MySQL结合例子

一、MVC介绍

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码。

MVC指MVC模式的某种框架,它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。

Model(模型)是应用程序中用于处理应用程序数据逻辑的部分,通常模型对象负责在数据库中存取数据。
  MVC(javaBean,JSP,Servlet)与MySQL结合例子_第1张图片
  
View(视图)是应用程序中处理数据显示的部分,通常视图是依据模型数据创建的。

MVC(javaBean,JSP,Servlet)与MySQL结合例子_第2张图片

Controller(控制器)是应用程序中处理用户交互的部分,通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

MVC(javaBean,JSP,Servlet)与MySQL结合例子_第3张图片

MVC加上数据库的整体流程以及总体架构如下:

MVC(javaBean,JSP,Servlet)与MySQL结合例子_第4张图片

MVC(javaBean,JSP,Servlet)与MySQL结合例子_第5张图片

总结起来,整个过程如下:

MVC(javaBean,JSP,Servlet)与MySQL结合例子_第6张图片

二、相关程序安装

1、JDK(jdk-8u121-windows-x64.exe)
2、Tomcat(Tomcat8.0.20)
3、Eclipse for j2ee(eclipse-jee-oxygen-R-win32-x86_64)
4、Mysql数据库(mysql-installer-community-5.7.16.0.msi)
5、Navicat数据库可视化工具(navicat112_premium_cs_x64)

所有安装包和安装流程可以自行在网上找到,我用的版本已经在括号中说明。

三、入门例子

问题描述:

做一个模糊查询的界面,在其中的文本框中,输入一个城市的名字,能够查出这个的详细资料(城市名字,所在国家,所在州,人口)。

问题解决:

  1. 建立数据库world,在world中创建表city,存储相应的信息。
  2. 编写前端界面queryForm.jsp,其中包含文本输入框,把输入值post到queryServlet.java(自己创建的一个Servlet文件)中
  3. 在queryServlet.java中完成三件工作:
    (1)接收queryForm.jsp文本框传过来的值
    (2)调用studentDao.java(自己建立的一个javaBean文件),完成数据库的初始化和查询工作
    (3)跳转到另一个显示界面queryResult.jsp,并把查询的结果传递过去
  4. 编写studentDao.java的代码,主要完成数据库的init和close,以及根据名字进行查询的相关函数
  5. 编写queryResult.jsp的代码,主要接收queryServlet.java(见3第3步)传过来的查询结果。

四、操作流程:

(一) 打开Eclipse,New->Dynamic Web Project, 名字mvcTest,在Target runtime中点newRuntime按钮,并选择自己安装的Tomcat的目录(我的是E:\java\Tomcat8.0)


MVC(javaBean,JSP,Servlet)与MySQL结合例子_第7张图片


MVC(javaBean,JSP,Servlet)与MySQL结合例子_第8张图片


MVC(javaBean,JSP,Servlet)与MySQL结合例子_第9张图片


MVC(javaBean,JSP,Servlet)与MySQL结合例子_第10张图片

(二)在Java Resources->src 目录下建立三个package,命名为dao,po,servlet,在dao包中建立一个class,名为cityDao(主要完成数据库初始化和查询工作),po包中建立一个class,名为City(主要存储city的信息),这两个cityDao.java和City.java相当于javaBean。 在servlet包中,建立一个servlet文件,名为queryServlet(主要完成Servlet的工作)。
MVC(javaBean,JSP,Servlet)与MySQL结合例子_第11张图片

(三)编写上面三个java文件的代码:

City.java

package po;

public class City {
    private String stuname;
    private String stucountrycode;
    private String studistrict;
    private String stupopulation;

    public String getStuname() {
        return stuname;
    }
    public void setStuname(String stuname) {
        this.stuname = stuname;
    }
    public String getStucountrycode() {
        return stucountrycode;
    }
    public void setStucountrycode(String stucountrycode) {
        this.stucountrycode = stucountrycode;
    }
    public String getStudistrict() {
        return studistrict;
    }
    public void setStudistrict(String studistrict) {
        this.studistrict = studistrict;
    }
    public String getStupopulation() {
        return stupopulation;
    }
    public void setStupopulation(String stupopulation) {
        this.stupopulation = stupopulation;
    }
}

cityDao.java

package dao;

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

import po.City;

public class cityDao {

       private Connection connect = null ;

       public void initConnection(){
           try {
                  Class.forName("com.mysql.jdbc.Driver");     //加载MYSQL JDBC驱动程序   
                  //Class.forName("org.gjt.mm.mysql.Driver");
                 System.out.println("Success loading Mysql Driver!");
           }
           catch (Exception e) {
                  System.out.print("Error loading Mysql Driver!");
                  e.printStackTrace();
            }

            try {
                   connect = DriverManager.getConnection( "jdbc:mysql://127.0.0.1:3306/world","root","root");
                       //连接URL为   jdbc:mysql//服务器地址/数据库名  ,后面的2个参数分别是登陆用户名和密码
                  System.out.println("Success connect Mysql server!");

             }
             catch (Exception e) {
                  System.out.print("get data error!");
                  e.printStackTrace();
             }
       }

       public ArrayList queryStuByName(String sname) {
           ArrayList stus = new ArrayList();
           String sql = "Select Name,CountryCode,District,Population From city where Name LIKE '%" + sname + "%' ";
           try {
               this.initConnection();

               ResultSet rs = connect.createStatement().executeQuery(sql);

               while(rs.next()) {
                   City stu = new City();
                   stu.setStuname(rs.getString("Name"));
                   stu.setStucountrycode(rs.getString("CountryCode"));
                   stu.setStudistrict(rs.getString("District"));
                   stu.setStupopulation(rs.getString("Population"));

                   stus.add(stu);
               }
           }catch(Exception ex) {ex.printStackTrace();}

           finally {
               this.closeConnection();
           }

           return stus;

       }
       public void closeConnection() {
           try {
               if(connect!=null) {
                   connect.close();
                   connect = null;
               }
           }

           catch(Exception e) {e.printStackTrace();}
       }

}

queryServlet.java

package servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.cityDao;

/**
 * Servlet implementation class queryServlet
 */
@WebServlet("/queryServlet")
public class queryServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public queryServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        //1、获取jsp传过来的sname
        String sname = request.getParameter("sname");
        try {
            sname = new String(sname.getBytes("UTF-8"));
        }catch(Exception ex) {ex.printStackTrace();}

        //2、调用javaBean查询数据库

        cityDao studentDao = new cityDao();
        ArrayList stus = studentDao.queryStuByName(sname);
        request.setAttribute("stus", stus);

        //3、跳转到另一个jsp显示结果
        ServletContext application = this.getServletContext();
        RequestDispatcher rd = application.getRequestDispatcher("/queryResult.jsp");
        rd.forward(request,response);


    }

}

(四) 在mvcTest根目录下建立两个jsp文件,分别是queryForm.jsp 和 queryResult.jsp, 它们相当于view。
MVC(javaBean,JSP,Servlet)与MySQL结合例子_第12张图片

(五) 编写上面两个jsp文件的代码

queryForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="gb2312"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
head>
<body>
    查询表单:<br>
            <form action = "queryServlet" method = "post">
        请您输入学生姓名:<input name="sname">
        <input type="submit" value="模糊查询">
body>
html>

queryResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="gb2312"  import="java.util.*" import="po.City" %>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title heretitle>
head>
<body>
显示结果:<br>
    <%                //表示服务端代码

        ArrayList stus =(ArrayList)request.getAttribute("stus");

    %>
    <table bgcolor="#ff80ff"> 
    <tr>
    <td>nametd>
    <td>CountryCodetd>
    <td>Districttd>
    <td>Populationtd>
    tr>

    <%

        for(int i=0;iget(i);
    %>
    <tr>
    <td><%=stu.getStuname() %>td>
    <td><%=stu.getStucountrycode() %>td>
    <td><%=stu.getStudistrict() %>td>
    <td><%=stu.getStupopulation() %>td>
    tr>

    <%
        }   
    %>

    table>

body>
html>

(六) 在Navicat可视化工具中,新建数据库world,并建表city,对应数据在附录说明中给出。
(七) 在queryForm.jsp下点运行按钮,选择Tomcat v8.0本地服务器:
MVC(javaBean,JSP,Servlet)与MySQL结合例子_第13张图片

控制台console会显示服务器连接的信息:
MVC(javaBean,JSP,Servlet)与MySQL结合例子_第14张图片

(八)在浏览器中输入 http://localhost:8080/mvcTest/queryForm.jsp,显示queryForm的界面:
MVC(javaBean,JSP,Servlet)与MySQL结合例子_第15张图片

在文本框中输入Ka,点模糊查询,页面跳转,显示查询的结果如下:
MVC(javaBean,JSP,Servlet)与MySQL结合例子_第16张图片

四、附录说明

  • 本例子基本根据郭克华的j2ee网课教程改写,着眼于MVC的思想,对其中的代码没有做过多分析和介绍,如果想深入了解,请参考 http://study.163.com/course/courseLearn.htm?courseId=1096007#/learn/video?lessonId=1303572&courseId=1096007,观看此视频可了解这些代码是怎么一步步编写出来的(可能收费,但这不是广告,此视频课程在网上也能搜到免费版,下载观看即可)
  • 本例子代码和数据库文件均可下载,链接如下: http://download.csdn.net/download/rzjujflash/10121280

你可能感兴趣的:(Java,Spring框架)