1. 程式人生 > >簡單使用Idea創建三層架構項目和數據庫連接(使用原生ajax進行訪問+ajax)

簡單使用Idea創建三層架構項目和數據庫連接(使用原生ajax進行訪問+ajax)

報錯 傳參 mic ext serve 三層架構 方式 spa logs

Idea創建三層架構項目

首先創建一個Web項目model

技術分享圖片

創建Web完成後進行創建entity、dao、service

技術分享圖片

技術分享圖片

技術分享圖片

特別註意

技術分享圖片

根據上面的步驟進行創建即可得到

技術分享圖片

創建完成

我們首先創建數據庫

create database therr_layer
go
use therr_layer
go
create table test(
tid int identity(1,1),
tname varchar(20) 
)
go
insert into test values
(dao),
(entity),
(service)
go
select * from test

技術分享圖片

現在我們進行在實體層(entity)創建類

技術分享圖片

創建完成後,進行創建字段和方法

技術分享圖片

package com.wbg;

public class test {
    int tid;
    String tname;

    public test() {
    }

    public int getTid() {
        return tid;
    }

    @Override
    public String toString() {
        return "test{" +
                "tid=" + tid +
                ", tname=‘" + tname + ‘\‘‘ +
                ‘}‘;
    }

    
public void setTid(int tid) { this.tid = tid; } public String getTname() { return tname; } public void setTname(String tname) { this.tname = tname; } public test(int tid, String tname) { this.tid = tid; this.tname = tname; } }

創建完成後,現在先配置依賴關系

數據訪問(dao)模塊需要依賴實體層(entity)

服務(service)模塊需要依賴數據訪問層(dao)

model需要依賴服務層(service)

右鍵->F4->Modules

如圖進行配置

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

現在進行配置數據庫驅動

技術分享圖片

配置後進行創建數據訪問層(dao)

技術分享圖片

package com.wbg;

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

public class testDao {
    public static void main(String[] args) {
        testDao d=new testDao();
        List<test> list=d.select();
        for(test t:list){
            System.out.println(t);
        }
    }

    public List<test> select() {
        Connection con=null;
        List<test> list=new ArrayList<test>();
        test te=null;
        //加載驅動
        try {
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
            con= DriverManager.getConnection("jdbc:sqlserver://localhost:1433;databasename=therr_layer","sa","123456");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        String sql="select * from test";
        Statement stat=null;
        ResultSet rs=null;
        try {
           stat=  con.createStatement();
           rs=stat.executeQuery(sql);
            while (rs.next()){
                te=new test(rs.getInt("tid"),rs.getString("tname"));
                list.add(te);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            try {
                if(!rs.isClosed())
                rs.close();
                if(!con.isClosed())
                con.close();
                if(!stat.isClosed())
                stat.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return list;
    }
}

測試完成,現在創建服務層

技術分享圖片

package com.wbg;

import java.util.List;

public class testService {

    public String select(){
        String data="{\"data\":[";
        String fh="";
        testDao d=new testDao();
        List<test> list=d.select();
        for(test t:list){
            data+=fh+"{\"tid\":\""+t.getTid()+"\",\"tname\":\"\"+t.getTname()+\"\"}";
            fh=",";
        }
        data+="]}";
        return data;
    }

    public static void main(String[] args) {
        testService t=new testService();
        System.out.println(t.select());
    }
}

測試完成,現在進入我們的項目model層創建後臺Servlet

技術分享圖片

創建完成後發現報錯,原因沒有引入

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

已經解決

如果根據上面的圖沒有解決,看下Intellij idea創建(包、文件)javaWeb以及Servlet簡單實現(Tomcat):https://www.cnblogs.com/weibanggang/p/9439938.html

進行寫註釋@Webservlet

技術分享圖片

package com.wbg;

import javax.servlet.annotation.WebServlet;
import java.io.IOException;
@WebServlet("/testservlet")
public class testservlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        testService t=new testService();
        response.getWriter().print(t.select());;
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
    doPost(request,response);
    }
}

現在使用Tomect進行啟動

如果不知道Tomect,看下Intellij idea創建(包、文件)javaWeb以及Servlet簡單實現(Tomcat):https://www.cnblogs.com/weibanggang/p/9439938.html

技術分享圖片

jsp代碼

<%--
  Created by IntelliJ IDEA.
  User: 邦杠
  Date: 2018/8/11
  Time: 20:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
   <style>
     table ,th,td{border:1px solid red;border-collapse:collapse}
   table{margin: auto;margin-bottom: 20px;}
   </style>
  </head>
  <body>
  <input type="button" value="get查看" onclick="getsele()"/>
  <input type="button" value="post查看" onclick="postselect()"/>
  <input type="button" value="ajax查看" onclick="ajaxsele()"/>
  <table id="tab1">
    <caption>get</caption>
    <th>tid</th><th>tname</th>
  </table>
  <table id="tab2">
    <caption>post</caption>
    <th>tid</th><th>tname</th>
  </table>
  <table id="tab3">
    <caption>ajax</caption>
    <th>tid</th><th>tname</th>
  </table>
  <script src="js/jquery.js"></script>
  <script>
    function getsele(){
        console.log("進入了getsele");
          //創建對象XMLHttpRequest
          var ajax=new XMLHttpRequest();
          //創建http請求,設置請求地址
          ajax.open("get","testservlet.do");
          //發送請求 (get為null post為參數)
          ajax.send(null);
          //給ajax設置事件(這裏最多感知4[1-4]個狀態)
        ajax.onreadystatechange = function(){
            //5.獲取響應
            //responseText        以字符串的形式接收服務器返回的信息
            //console.log(ajax.readyState);
            if(ajax.readyState == 4 && ajax.status == 200){
                //使用JSON.parse方法將json字符串解析稱為json對象
                var data = JSON.parse(ajax.responseText);
                //使用eval方法將json字符串解析成為json對象
                //var data=eval("("+ajax.responseText+")");
                var tab=document.getElementById("tab1");
                  for(var i=0;i<data.data.length;i++){
                      var tr=document.createElement("tr");
                      var tdtid=document.createElement("td");
                      var tdtname=document.createElement("td");
                      var tid=document.createTextNode(data.data[i].tid);
                      var tname=document.createTextNode(data.data[i].tname);
                      tdtid.appendChild(tid);
                      tdtname.appendChild(tname);
                      tr.appendChild(tdtid);
                      tr.appendChild(tdtname);
                      tab.append(tr);
                  }
            }
        }

    }
    function postselect(){
        console.log("進入了postselect");
        //創建對象
        var ajax=new XMLHttpRequest();
        //創建請求路徑
        ajax.open("post","testservlet.do");
        //post方式傳遞數據是模仿form表單傳遞給服務器的,要設置header頭協議
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //post在這裏傳參數 這裏我們沒有參數
        ajax.send("null");
        //給ajax設置事件(這裏最多感知4[1-4]個狀態)
        ajax.onreadystatechange = function() {
            //5.獲取響應
            //responseText        以字符串的形式接收服務器返回的信息
            //console.log(ajax.readyState);
            if (ajax.readyState == 4 && ajax.status == 200) {
                //使用JSON.parse方法將json字符串解析稱為json對象
                var data = JSON.parse(ajax.responseText);
                //使用eval方法將json字符串解析成為json對象
                //var data=eval("("+ajax.responseText+")");
                var tab = document.getElementById("tab2");
                for (var i = 0; i < data.data.length; i++) {
                    var tr = document.createElement("tr");
                    var tdtid = document.createElement("td");
                    var tdtname = document.createElement("td");
                    var tid = document.createTextNode(data.data[i].tid);
                    var tname = document.createTextNode(data.data[i].tname);
                    tdtid.appendChild(tid);
                    tdtname.appendChild(tname);
                    tr.appendChild(tdtid);
                    tr.appendChild(tdtname);
                    tab.append(tr);
                }
            }
        }
    }

    function ajaxsele(){
        //使用jq中的ajax進行請求
        console.log("進入了ajax");
        $.ajax({
            type:"get",
            url:"testservlet.do",
            dataType:"json",
            success:function (data) {
               var tab= $("#tab3");
                $.each(data.data,function (index,da) {
                        var tr=$("<tr/>");
                        var td1=$("<td/>").html(da.tid).appendTo(tr);
                        var td2=$("<td/>").html(da.tname).appendTo(tr);
                        tab.append(tr);
                })
            }
        })
          var tab=$("tab3");

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

運行結果:

技術分享圖片

項目地址:https://github.com/weibanggang/Three_layer

簡單使用Idea創建三層架構項目和數據庫連接(使用原生ajax進行訪問+ajax)