1. 程式人生 > >SSM框架的搭建及專案開發的步驟

SSM框架的搭建及專案開發的步驟

第一階段:

1、用PowerDesign建資料模型,並匯出SQL檔案;

2、將SQL檔案匯入到MySQL客戶端,建立表格;

  MySQL資料遠端訪問:GRANT ALL PRIVILEGES ON . TO ‘root’@’%’IDENTIFIED BY ‘mypassword’ WITH GRANT OPTION;

如果是固定IP:grant all privileges on . to ‘root’@’192.168.41.100’identified by ‘123456’ with grant option;

//推送設定到記憶體或重啟伺服器也行
mysql>FLUSH PRIVILEGES

3、使用MyBatis框架,搭建DAO層:——————————-Mybatis—————————————

  1)資料庫連線的資訊:驅動類、連線地址、使用者名稱、密碼

  2)targetPackage=”com.softjx.model”

  3)把表名與類名對應

  4)執行GeneratorSqlmap.java生成dao和model

第二階段:

1、在MyEclipse上新建一個Web專案,並匯入ssm所需的jar包,放在WEB-INF/lib目錄下;

2、將第一階段通過Mybatis框架生成的model和dao複製到當前專案;—————–Dao層—————-

3、搭建Service層:建com.softjx.service與com.softjx,service,impl包;————-spring層—————

4、將需要相關的配置檔案
(mybatisconfig.xml,dbconfig.properties,applicationContext.xml,log4j.properties)放到src目錄下;

  1)修改dbconfig.properties檔案,ip,資料庫,使用者名稱,密碼

  2)修改applicationContext.xml中的包名,目錄名

5、在com.softjx.service包中寫介面,在com.softjx.service.impl寫介面的實現。
  注意:com.softjx.service.impl寫介面的實現,
  @Service(“studentService”)
  @Transactional

  
  類中注入
  @Autowired
  private StudentMapper studentMapper;

7.單元測試:
  要注意mysql資料庫中主鍵要自增,這一步要我們去mysql中設定。
  studentService = (StudentService) context.getBean(“studentService”);
  這個”studentService”是從@Service(“studentService”)

第三階段:

1、修改WebRoot目錄下的web.xml如下:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.5" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 7   <display-name></display-name>
 8   
 9   
10   
11     <!-- 配置啟動 Spring IOC 容器的 Listener,啟動spring容器 -->
12     <context-param>
13         <param-name>contextConfigLocation</param-name>
14         <param-value>classpath:applicationContext.xml</param-value>
15     </context-param>
16 
17     <listener>
18         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
19     </listener>
20 
21 
22     <!-- 表單提交controller獲得中文引數後亂碼解決方案 注意: jsp頁面編碼設定為UTF-8 form表單提交方式為必須為post,get方式下面spring編碼過濾器不起效果 -->
23 
24     <filter>
25         <filter-name>characterEncodingFilter</filter-name>
26         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
27         <init-param>
28             <param-name>encoding</param-name>
29             <param-value>UTF-8</param-value>
30         </init-param>
31         <init-param>
32             <param-name>forceEncoding</param-name>
33             <param-value>true</param-value>
34         </init-param>
35     </filter>
36     <filter-mapping>
37         <filter-name>characterEncodingFilter</filter-name>
38         <url-pattern>/*</url-pattern>
39     </filter-mapping>
40 
41 
42     <!-- 可以把 POST 請求轉為 DELETE 或 PUT 請求 -->
43 
44     <filter>
45         <filter-name>HiddenHttpMethodFilter</filter-name>
46         <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
47     </filter>
48 
49     <filter-mapping>
50         <filter-name>HiddenHttpMethodFilter</filter-name>
51         <url-pattern>/*</url-pattern>
52     </filter-mapping>
53 
54 
55 
56     <!-- 配置 DispatcherServlet -->
57     <servlet>
58         <servlet-name>dispatcherServlet</servlet-name>
59         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
60 
61         <init-param>
62             <param-name>contextConfigLocation</param-name>
63             <param-value>classpath:springmvc.xml</param-value>
64         </init-param>
65 
66         <load-on-startup>1</load-on-startup>
67 
68     </servlet>
69 
70     <servlet-mapping>
71         <servlet-name>dispatcherServlet</servlet-name>
72         <url-pattern>/</url-pattern>
73     </servlet-mapping>
74   
75   
76   
77   
78   
79       
80   <welcome-file-list>
81     <welcome-file>index.jsp</welcome-file>
82   </welcome-file-list>
83 </web-app>

2、在src目錄下建立springmvc.xml檔案,檔案內容如下:———-SpringMVC層—————-

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

    <!-- 配置自定掃描的包 -->
    <context:component-scan base-package="com.softjx" use-default-filters="false">
        <context:include-filter type="annotation" 
            expression="org.springframework.stereotype.Controller"/>
        </context:component-scan>


    <!-- 配置檢視解析器: 如何把 handler 方法返回值解析為實際的物理檢視 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>


    <!-- 處理靜態資源 -->
    <mvc:default-servlet-handler/>


    <!-- 預設配置方案。
    並提供了:資料繫結支援,@NumberFormatannotation支援,
    @DateTimeFormat支援,@Valid支援,讀寫XML的支援(JAXB),
    讀寫JSON的支援(Jackson)。
          後面,我們處理響應ajax請求時,就使用到了對json的支援。
     -->
    <mvc:annotation-driven></mvc:annotation-driven>




</beans>

3、在src目錄下新建com.softjx.action包,在包裡建Action類;

注意:1)@Controller
@RequestMapping(“/student”)

  2)每個方法:
@RequestMapping(“/studentAddInput”)

  3) 類中注入
  @Autowired
  private StudentService studentService;//通過studentService呼叫Service裡的方法呼叫Dao層

4、在WEB-INF目錄下建立views檔案,用來放置所有.jsp檔案,這個jsp檔名是作為Action中方法 return的值。;

注意:1)在WEB-INF目錄下的jsp頁面只能通過程式來訪問,外部訪問不到。(安全)

    2)新增頁面的jsp,要注意控制元件的屬性名是javabean的屬性名。 

———————–第四階段—————————
1.dao層(mybatis)
2.service層(spring)
3.單元測試
4.action(springmvc)
5.jsp html,htm (介面)

1)查詢所有資料

2)單條件查詢

3)多條件查詢

4)分頁查詢

5) 單條件分頁查詢

6)多新增分頁查詢

7) 修改(先查詢單個實體)

8)刪除(先查詢單個實體)

———————–第五階段—————————
1)檔案上傳
a.要匯入commons-fileupload-1.2.1.jar,commons-io-2.0.jar這兩個包

b.

<!-- 配置 MultipartResolver 上傳檔案-->        
      <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
        <property name="maxUploadSize" value="10240000"></property> 
      </bean>   

c.在WEB-INF同一層目錄中建一個upload目錄

d.上傳檔案的jsp介面

<form action="student/checkFileUpload" method="POST" enctype="multipart/form-data">
        檔案: <input type="file" name="file"/>
                描述: <input type="text" name="desc"/>
        <input type="submit" value="上傳資料"/>
   </form>

e.編寫上傳檔案的action

2)檔案下載
a.在WEB-INF同一層目錄中建一個upload目錄
b.下載的url:
通過 檔案流 的方式下載檔案hibernate1.jpg
c.編寫下載檔案的action

———————–第六階段—————————
1.把資料庫中資料匯出到excel
1)匯入包poi-3.2-FINAL-20081019.jar
2)在action中寫程式碼
3)注意excel表格中的各種格式

———————–第七階段(兩個表查詢,有關係)—————————
一.根據條件查詢
1).掌握多表查詢


select a.*,b.* from student a,school b where a.t_sid=b.t_id

select a.t_id,a.t_name,a.t_age,a.t_enterdate,b.t_name as t_name1 from student a,school b where a.t_sid=b.t_id

select a.t_id,a.t_name,a.t_age,a.t_enterdate,b.t_name as t_name1 from student a LEFT JOIN school b on a.t_sid=b.t_id

2).設計實體類中要關聯類,在Student類中有School類的引用。

private School school;
    public School getSchool() {
        return school;
    }

    public void setSchool(School school) {
        this.school = school;
    }

3)在StudentMapper.xml編寫sql語句

<!-- 返回多表查詢的欄位名 -->
  <resultMap id="WithSchoolResultMap" type="com.softjx.model.Student" >
    <id column="t_id" property="tId" jdbcType="INTEGER" />
    <result column="t_name" property="tName" jdbcType="VARCHAR" />
    <result column="t_age" property="tAge" jdbcType="INTEGER" />
    <result column="t_enterdate" property="tEnterdate" jdbcType="TIMESTAMP" />
    <result column="t_sid" property="tSid" jdbcType="INTEGER" />
     <!-- 指定聯合查詢出的學校欄位-->
    <association property="school" javaType="com.softjx.model.School">
        <id column="t_id1" property="tId"/>
        <result column="t_name1" property="tName"/>
    </association>
  </resultMap>


  <!-- 多表查詢的欄位名 -->
   <sql id="Student_School_Column_List">
    a.t_id, a.t_name, a.t_age, a.t_enterdate, a.t_sid,b.t_id as t_id1,b.t_name as t_name1
   </sql>


  <!-- 查詢學生同時帶學校資訊 -->
  <select id="selectByExampleWithSchool" resultMap="WithSchoolResultMap">
       select
        <if test="distinct">
          distinct
        </if>
        <include refid="Student_School_Column_List" />
        FROM student a
        left join school b on a.t_sid=b.t_id
        <if test="_parameter != null">
          <include refid="Example_Where_Clause" />
        </if>
        <if test="orderByClause != null">
          order by ${orderByClause}
        </if>
  </select>

4).在dao中編寫一個介面
//多表查詢
List selectByExampleWithSchool(StudentExample example);

5).在service層編寫介面與介面的實現

//多表查詢
     public List<Student> getStudentWithSchool(StudentExample studentExample);

         public List<Student> getStudentWithSchool(StudentExample studentExample) {

        return studentMapper.selectByExampleWithSchool(studentExample);
    }

6)編寫單元測試多表查詢。

二.根據主鍵查詢兩個表
1) .select a.t_id,a.t_name,a.t_age,a.t_enterdate,b.t_name as t_name1 from student a LEFT JOIN school b on a.t_sid=b.t_id where a.t_id=3

2).設計實體類中要關聯類,在Student類中有School類的引用。

 private School school;
    public School getSchool() {
        return school;
    }

    public void setSchool(School school) {
        this.school = school;
    }

3).在StudentMapper.xml編寫sql語句

<!-- 返回多表查詢的欄位名 -->
  <resultMap id="WithSchoolResultMap" type="com.softjx.model.Student" >
    <id column="t_id" property="tId" jdbcType="INTEGER" />
    <result column="t_name" property="tName" jdbcType="VARCHAR" />
    <result column="t_age" property="tAge" jdbcType="INTEGER" />
    <result column="t_enterdate" property="tEnterdate" jdbcType="TIMESTAMP" />
    <result column="t_sid" property="tSid" jdbcType="INTEGER" />
     <!-- 指定聯合查詢出的學校欄位-->
    <association property="school" javaType="com.softjx.model.School">
        <id column="t_id1" property="tId"/>
        <result column="t_name1" property="tName"/>
    </association>
  </resultMap>


  <!-- 多表查詢的欄位名 -->
   <sql id="Student_School_Column_List">
    a.t_id, a.t_name, a.t_age, a.t_enterdate, a.t_sid,b.t_id as t_id1,b.t_name as t_name1
   </sql>


  <!-- 主鍵查詢多表資料 -->
   <select id="selectByPrimaryKeyWithSchool" resultMap="WithSchoolResultMap">
    select 
    <include refid="Student_School_Column_List" />
    FROM student a
        left join school b on a.t_sid=b.t_id
    where a.t_id = #{tId,jdbcType=INTEGER}
  </select>

4).在dao中編寫一個介面
Student selectByPrimaryKeyWithSchool(Integer tId);

5)在service層編寫介面與介面的實現

 public Student selectByPrimaryKeyWithSchool(Integer tId);

    public Student selectByPrimaryKeyWithSchool(Integer tId) {

        return studentMapper.selectByPrimaryKeyWithSchool(tId);
    }

6)編寫單元測試主鍵查詢多個表中的資料。

——————————第八階段springmvc使用攔截器———————
1.編寫一個類繼承HandlerInterceptor介面
在這個方法中實現業務

public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
            Object arg2) throws Exception {
        System.out.println("第一個攔截器中的 preHandle方法被呼叫");

                        //1).從sesion中獲取使用者物件
            //2).用當前使用者所擁有的選單url是否包含當前請求
        }

2.配置springmvc的配置檔案,新增攔截器

 <mvc:interceptors>

         <!--區域性攔截器配置, 配置攔截器不作用的路徑 ,要先配置<mvc:mapping path="/**" /> ,否則報錯,不能少這個-->
        <mvc:interceptor>
        <mvc:mapping path="/**" />  
        <mvc:exclude-mapping path="/login/**"/>
        <bean class="com.softjx.interceptor.ActionMethodInterceptor"></bean>
        </mvc:interceptor>  

3.登入時要儲存當前使用者物件到session

——————–第九階段 mybatis使用三表或者更多表查詢——————–
一.不使用資料庫中的多表查詢(使用使用者多,十萬,百萬,千萬,億)
思想:
1.查詢學生表
2.根據學生所有學校的id,查詢對應學校名稱
3.根據學校的區域id查詢區域名
4.用查詢的資料組裝一個vo(view object)(javabean), 這個javabean只是顯示在介面上的。
5.多個vo組裝ArrayList中
6.顯示ArrayList中的資料

如何做:
1.要把以前寫的兩個表的關聯xml複製到一個地方,使用生成框架,生成後新增方法到dao中和xml中
2.新建一個javabean ,是一個vo
3.在service中編寫一個方法,返回一個vo的集合型別。(這個裡面要仔細看下)
4.測試一下這個方法。

二.使用資料庫中的多表查詢(使用使用者一般幾百,幾千,幾萬)

SELECT  a.*,b.*,c.*  from student a,school b,areatable c where a.t_sid=b.t_id and b.t_area_id=c.t_id

SELECT  a.t_id,a.t_name,a.t_age,a.t_enterdate,b.t_name as t_name1,c.area  from student a,school b,areatable c where a.t_sid=b.t_id and b.t_area_id=c.t_id

思想:
1.使用sql語句
2.在StudentMapper介面中寫方法
3.要在StudentMapper.xml中寫sql語句實現
1)編寫一個
2)編寫介面中方法的實現

  <resultMap id="BaseSqlResultMap" type="com.softjx.vo.StudentSchoolAreaVo" >
    <id column="t_id" property="id" jdbcType="BIGINT" />
    <result column="t_name" property="name" jdbcType="VARCHAR" />
    <result column="t_age" property="age" jdbcType="TINYINT" />
    <result column="t_enterdate" property="enterDate" jdbcType="DATE" />
    <result column="t_name1" property="schoolName" jdbcType="VARCHAR" />
    <result column="area" property="areaName" jdbcType="VARCHAR" />
  </resultMap>


   <select id="getStudentSchoolAreaSqlVo" resultMap="BaseSqlResultMap">
       SELECT  a.t_id,a.t_name,a.t_age,a.t_enterdate,b.t_name as t_name1,c.area  from student a,school b,areatable c 
       where a.t_sid=b.t_id and b.t_area_id=c.t_id
  </select>

4.在service中編寫介面方法與實現。

——————–第十階段 使用jquery中的ajax技術——————–
1.需要一個jquery的類庫.js 放到static目錄下,要注意攔截器放行。
2.jsp中匯入js類庫。

<script type="text/javascript" src="static/js/jquery-1.8.3.js"></script>

jquery的環境搭建完畢。

3.在springmvc中開發一個業務方法。

 @ResponseBody//返回的資料是json資料
  @RequestMapping("/studentName")
public List<Student> getStudentName(Map<String, Object> map, Student student) 
{
StudentExample studentExample = new StudentExample();
Criteria criteria = studentExample.createCriteria();

if (student.gettName() != null && !student.gettName().trim().equals(""))
criteria.andTNameEqualTo(student.gettName());

List<Student> students = studentService.getStudents(studentExample);
return students;
}

注意:1)返回值是物件型別或者是基本型別,2)@ResponseBody//返回的資料是json資料

4.在jsp頁面上控制我們操作的構件,使用jquery的選擇器,選中此物件。

5.編寫ajax程式碼

<script type="text/javascript">

$(document).ready(
function(){

 $("#nameid").blur( 

        function()
        {   

        //真實場景下的ajax呼叫      
        $.ajax(
        {

                  url: "student/studentName1",

                  cache: false,

                  type: "GET",

                  dataType:"json",

                  async: true,

                  data: {tName:$("#nameid").val()},

                  success: function(msg){ 

                     //業務程式碼,改變頁面的資料          
                     //alert(msg);
                     if (msg==true)
                     {

                      $("#namewrongid").text("此使用者名稱存在!");
                      $("#nameid").focus();
                     }

                     else
                     {
                       $("#namewrongid").text("此使用者名稱不存在!");
                       $("#ageid").focus();
                     }


                   },

                  error:function(errordata){
                    alert("wrong!!"+errordata);
                   }

                }

                );


        }

        );          

}

);

</script> 

——————–第十一階段 使用jquery中的ajax技術載入ztree——————–
1.要構建選單類

 private Integer id;
    //定義屬性要注意pId和zTree要一樣   
    private Integer pId;
    private String name;
    private boolean open;
    //定義屬性要注意isParent和zTree要一樣
    private boolean isParent;

     //定義方法要注意getisParent()
    public boolean getisParent() {
        return isParent;
    }

    //定義方法要注意setisParent()
    public void setisParent(boolean isParent) {
        this.isParent = isParent;
    }
    //要注意
    public Integer getpId() {   
               return pId;   
            } 

    //要注意
        public void setpId(Integer pId) {   
               this.pId = pId;   
      }  

2.編寫action方法,返回json
構建選單時注意父子關係

 @ResponseBody//返回的資料是json資料
            @RequestMapping("/ZtreeMenu")
            public List<MenuItem> ztreePageData() {

                List<MenuItem>  menulist=new ArrayList<MenuItem>();

                MenuItem item1=new MenuItem(1,0,"父節點1 - 展開");
                item1.setisParent(true);
                item1.setOpen(true);            

                MenuItem item2=new MenuItem(11,1,"父節點11 - 摺疊");         

                MenuItem item3=new MenuItem(111,11,"葉子節點111");              

                MenuItem item4=new MenuItem(112,11,"葉子節點112");          

                MenuItem item5=new MenuItem(113,11,"葉子節點113");      

                MenuItem item6=new MenuItem(114,11,"葉子節點114");              

                MenuItem item60=new MenuItem(115,11,"葉子節點115");             

                MenuItem item61=new MenuItem(116,11,"葉子節點116");     

                MenuItem item7=new MenuItem(12,1,"父節點12 - 摺疊");             

                MenuItem item8=new MenuItem(121,12,"葉子節點121");              

                MenuItem item9=new MenuItem(122,12,"葉子節點122");

                MenuItem item10=new MenuItem(123,12,"葉子節點123");

                MenuItem item11=new MenuItem(124,12,"葉子節點124");             



            MenuItem item12=new MenuItem(13,1,"父節點13 - 沒有子節點");
                item12.setisParent(true);               

                MenuItem item13=new MenuItem(2,0,"父節點2 - 摺疊");      

                MenuItem item14=new MenuItem(21,2,"父節點21 - 展開");        

                MenuItem item15=new MenuItem(211,21,"葉子節點211");

                MenuItem item16=new MenuItem(212,21,"葉子節點212");

                MenuItem item17=new MenuItem(213,21,"葉子節點213");

                MenuItem item18=new MenuItem(214,21,"葉子節點214"); 

                menulist.add(item1);
                menulist.add(item2);
                menulist.add(item3);
                menulist.add(item4);
                menulist.add(item5);
                menulist.add(item6);
                menulist.add(item7);
                menulist.add(item8);
                menulist.add(item9);
                menulist.add(item10);
                menulist.add(item11);
                menulist.add(item12);
                menulist.add(item13);
                menulist.add(item14);
                menulist.add(item15);               
                menulist.add(item16);
                menulist.add(item17);
                menulist.add(item18);               

                return menulist;
            }

3.編寫ztree頁面,模擬demo

   <link rel="stylesheet" href="css/demo.css" type="text/css">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>


       <SCRIPT type="text/javascript">  

        function bbb()
        {

       var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                onClick: onClick
            }
            };


        function onClick(event, treeId, treeNode, clickFlag) {

            alert(treeNode.name);
            alert(treeNode.id);
            alert(treeNode.pId);

        }

        $.getJSON("login/ZtreeMenu",function(data1){

        var zNodes=data1;
        alert(zNodes);


        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        });


        }


    </SCRIPT>

  </head>

 <body onload="bbb()">

 <div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
 </div>