2. 程式人生 > >bootstrap+Ajax+SSM(maven搭建)實現增刪改查

bootstrap+Ajax+SSM(maven搭建)實現增刪改查

阿新 • • 發佈：2019-01-01

 

https://www.jianshu.com/p/d76316b48e3e

功能點：

  • 分頁
  • 資料校驗
  • ajax
  • Rest風格的URI：使用HTTP協議請求方式的動詞，來表示對資源的操作（GET（查詢），POST（新增），PUT（修改），DELETE（刪除））

技術點

  • 基礎框架-ssm
  • 資料庫mysql
  • 前端框架-bootstrap
  • 專案依賴 -Maven
  • 分頁 -pagehelper
  • 逆向工程-Mybatis Generator

實現效果

 
  新增按鈕彈出模態框
 
編輯按鈕彈出模態框
  刪除

基礎環境搭建

1）新建一個maven工程

 
 
 

  生成後的樣子
 

 

如果發現沒有自動生成，在下圖maven Project點選重新整理按鈕  

在main下新建一個java資料夾，並且右鍵make as source root


 

2）引入專案依賴的jar包

  • springMVC
    開啟http://mvnrepository.com/
    搜尋Spring Web MVC

     
    選擇了4.3.12.RELEASE
     
    複製裡面的內容到pom.xml
     

     

  • jdbc


     
      選擇同樣的版本
     

    -Spring面向切面


     
      同樣的版本

  • mybtatis


     
      任意一個版本

  • mybatis整合spring的適配包


     
     
     

  • 資料庫連線池，驅動包


      c3p0要注意不能選錯
     

  • mysql驅動


     
     
     

  • jstl


      注意要選對
     

  • servlet API


     
     

    整個pom.xml如下：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.crud</groupId> <artifactId>crud</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>crud Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!--引入專案依賴的jar包 --> <!--SpringMVC、Spring --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--spring jdbc --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--spring面向切面 spring aspect --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--Mybatis --> <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.5</version> </dependency> <!--mybatis和spring整合包 --> <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.0</version> </dependency> <!--c3p0資料庫連線池--> <!-- https://mvnrepository.com/artifact/c3p0/c3p0 --> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <!--mysql驅動 --> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>6.0.6</version> </dependency> <!--JSTL --> <!-- https://mvnrepository.com/artifact/jstl/jstl --> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> </dependencies> <build> <finalName>crud</finalName> </build> </project>

3.引入bootstrap

http://v3.bootcss.com/getting-started/#download

  選擇最左邊的如圖所示下載
將下載的內容複製到專案中：
  圖片.png
將jquery引入專案
 
在index.html檔案中引入樣式

 

<html>
<head>
    <!--引入jquery -->
    <script src="static/js/jquery-3.2.1.min.js"></script> <!-- 引入樣式--> <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <h2>Hello World!</h2> </body> </html>

4.SSM整合部分的配置檔案（與02節相同稍作修改即可）

  專案架構

1）mybatis
sqlMapConfig.xml

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!-- 全域性setting，根據配置新增--> <!--配置別名--> <typeAliases> <!-- 批量掃描的別名--> <package name="com.chinglee.ssm.pojo"/> </typeAliases> </configuration>

2)spring
applicationContext-dao.xml

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 載入db.properties檔案中的內容，db.properties檔案中key命名要有一定的特殊規則 --> <context:property-placeholder location="classpath:db.properties" /> <!-- 配置資料來源 ，dhcp--> <!-- <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"> <property name="driverClassName" value="${jdbc.driver}" /> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> <property name="maxActive" value="30" /> <property name="maxIdle" value="5" /> </bean> --> <!-- 這裡使用c3p0資料來源--> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close"> <property name="driverClass" value="${jdbc.driver}" /> <property name="jdbcUrl" value="${jdbc.url}" /> <property name="user" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> </bean> <!-- sqlSessionFactory --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 資料庫連線池 --> <property name="dataSource" ref="dataSource" /> <!-- 載入mybatis的全域性配置檔案 --> <property name="configLocation" value="classpath:mybatis/sqlMapConfig.xml" /> </bean> <!-- mapper掃描器 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 掃描包路徑，如果需要掃描多個包，中間使用半形逗號隔開 --> <property name="basePackage" value="com.chinglee.ssm.mapper"></property> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" /> </bean> </beans>

applicationContext-service.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 使用者的service--> <!--<bean id="userService" class="com.chinglee.ssm.serviceImpl.UserServiceImpl"/>--> </beans>

applicationContext-transaction.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 事務管理器 對mybatis操作資料庫控制，spring使用jdbc的事務控制類 --> <bean id="TransactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <!-- 資料來源--> <property name="dataSource" ref="dataSource"/> </bean> <!-- 通知--> <tx:advice id="txAdvice" transaction-manager="TransactionManager"> <tx:attributes> <tx:method name="save" propagation="REQUIRED"/> <tx:method name="delete" propagation="REQUIRED"/> <tx:method name="insert" propagation="REQUIRED"/> <tx:method name="update" propagation="REQUIRED"/> <tx:method name="find" propagation="SUPPORTS" read-only="true"/> </tx:attributes> </tx:advice> <!--aop配置 --> <aop:config> <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.changqing.ssm.serviceImpl.*.*(..) )"/> </aop:config> </beans>

springmvc.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!--元件掃描 --> <context:component-scan base-package="com.changqing.ssm.controller"/> <!-- mvc註解驅動--> <mvc:annotation-driven></mvc:annotation-driven> <!--檢視解析器 解析jsp，預設使用jstl標籤，classpath下的需要有jstl包 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!--配置jsp路徑的字首 --> <property name="prefix" value="/WEB-INF/jsp/"/> <!--配置jsp路徑的字尾 --> <property name="suffix" value=".jsp"/> </bean> <!--將springMVC不能處理的請求交給tomcat --> <mvc:default-servlet-handler/> </beans>

db.properties

jdbc.driver=com.mysql.jdbc.Driver
//換成自己的資料庫
jdbc.url=jdbc:mysql://localhost:3306/new_schema
jdbc.username=root
jdbc.password=19940905

log4j.properties

# Global logging configuration
#\u5728\u5f00\u53d1\u73af\u5883\u4e0b\u65e5\u5fd7\u7ea7\u522b\u8981\u8bbe\u7f6e\u6210DEBUG\uff0c\u751f\u4ea7\u73af\u5883\u8bbe\u7f6e\u6210info\u6216error
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <display-name>Archetype Created Web Application</display-name> <!-- 載入spring容器 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/classes/spring/applicationContext-*.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!--springmvc配置前端控制器--> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--contextConfigLocation配置springmvc 配置springmvc載入的配置檔案（配置處理器對映器、介面卡等等） --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/springmvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <!-- 第一種：*.action訪問以action結尾由DispatcherServlet進行解析 第二種：/，所有訪問由DispatcherServlet進行解析，對於靜態檔案的解析需要配置不讓DispatcherServlet進行解析 --> <url-pattern>*.action</url-pattern> </servlet-mapping> <!--配置字元編碼過濾器 ,一定放在所有編碼之前--> <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> <!-- 使用REST風格的URI，將頁面普通的post請求轉為指定的delete或者put請求--> <filter> <filter-name>HiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>HiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>

相關推薦

bootstrap+Ajax+SSM(maven搭建)實現增刪改查

  https://www.jianshu.com/p/d76316b48e3e 原始碼： https://github.com/Ching-Lee/crud 功能點： 分頁

bootstrap+Ajax+SSM(maven搭建)表單增刪改查

shee mapping oda 順序 images 子集 update -- common 前後端分離，前端利用ajax調用後端API接收json數據,進行表單的增刪改查 軟件架構 IDE：IDEA 數據庫：mysql jdk:1.8 tomcat:9 後端：spr

ssm框架搭建+easyui增刪改查實現

原始碼下載頁面（一個完整的專案）：http://download.csdn.net/detail/jinwufeiyang/9648208 資料庫檔案下載：http://download.csdn.net/detail/jinwufeiyang/9700588

SSM框架整合實現增刪改查（簡單的實現）

SSM框架整合實現增刪改查 檔案結構 POM檔案 <packaging>war</packaging> <!-- 處理亂碼 --> <properties> <!-- 設定專案字符集 -->

IDEA搭建SSM專案實現增刪改查

首先開啟IDEA，File—>New—>Project建立專案 選擇左側導航欄裡的Maven，勾上勾，選擇webapp 按如下圖進行填寫 建立完成後進入專案，右下角彈出的提示點選右邊的Enable Auto-Import，自動配置 連線

SSM框架搭建（Spring+SpringMVC+MyBatis）與easyui整合並實現增刪改查實現

一、用myEclipse初始化Web專案        新建一個web project: 二、建立包 controller        //控制類 service//服務介面 service.impl//服務實現類 dao  //data access object

day79_淘淘商城專案_12_購物車流程 + 商城購物車系統的搭建 + 商城購物車系統的實現分析 + 購物車實現增刪改查_匠心筆記

課程計劃 1、購物車的流程 2、購物車的實現 a) 登入狀態下的購物車實現 b) 未登入狀態下的購物車實現 1、購物車流程 1.1、以前的購物車流程 使用者將商品新增到購物車時，判斷使用者是否登入，如果已經登入將購物車放入se

初次詳細搭建SpringBoot+Mybatis+mysql+swagger+Lombok實現增刪改查的功能DOM

話不多說直接進入正題，就是這麼果斷與風騷。 下載安裝外掛 在搭建專案前需要準備些前提工作，方便咱們後續搭建專案。需要下載安裝和配置gradle及swagger所需要的檔案。 下載配置環境變數gradle 安裝JDK8(必須是JDK或JRE7以上,使用java

使用Bootstrap模態框實現增刪改查功能

模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。 本文實現的是使用模態框實現簡單的增刪改查的功能。主要思想是 使用一個模態框，使用jquery呼叫一個控制器方法返回一個分部視圖表單，載入到這個模態框中。然後

MyEclipse搭建SSH並實現增刪改查

一、            新建一個web專案命名為ssh完成之後目錄結構二、            為工程加上Struts2的支援然後是選擇struts的包，根據需要將struts的包新增進來，一般需要新增的包如下Struts Core librariesStruts必須包

day79_淘淘商城專案_12_購物車流程 + 商城購物車系統的搭建 + 商城購物車系統的實現分析(cookie+redis方案) + 購物車實現增刪改查_匠心筆記

淘淘商城專案_12 1、購物車流程 1.1、以前的購物車流程 1.2、現在的購物車流程 2、商城購物車系統的搭建 2.1、購物車系統的架構 2.2、服務層工程搭建

Spring+SpringMVC+Mybatis實現增刪改查--（六）SSM刪除、批量刪除員工的實現

Spring+SpringMVC+Mybatis實現增刪改查--（六）SSM刪除、批量刪除員工的實現單個刪除： 批量刪除  刪除邏輯1.單個刪除URI:/emp/{id} DELETE（1）給刪除按鈕繫結上員工的ID號（2）單個刪除按鈕的點選事件（3）員工刪除的方法2.全選複

SSM框架實現增刪改查(CRUD)

2:步驟說明 2.1:StudentService新增相應的方法public interface StudentService { List<Student> list(); int total(); List<Student> list(Pag

AJAX面試題：一個頁面實現增刪改查(ASP.NET實現)

【下載】 很多asp.net程式設計師面試的時候都遇到過用ajax效果實現一個頁面的增刪改查。這幾個例子分別用純JS,JQUERY及JSON實現。希望對大家有些幫助。 這裡面的例子表格內容的重新整理是直接返回GridView的HTML程式碼，其實這樣做並不是很好，但是程式碼

修改Haproxy文件配置，實現增刪改查

文件配置 str data bin 都是 [1] local def onf Haproxy 源文件 global log 127.0.0.1 local2 daemon maxconn 256 log 12

[python] 用pickle模塊實現“增刪改查”的簡易功能

python pyckle模塊 #!/usr/bin/env python2 #coding:utf-8 """ pickle的作用： 1：pickle.dump(dict,file)把字典轉為二進制存入文件. 2：pickle.load(file)把文件二進制內容轉為字典. """ im

.NET EF 框架-實現增刪改查

ont int string dbcontext 增刪 base set cts cti 聲明一個EF上下文對象 Model dbContext=new Model(); 添加操作（向表中插入一條數據） //聲明一個表的實體 Contact contact =new Con

作業員工信息表實現增刪改查操作

nbsp 手機號 add bre mark 作業 ket split 格式不正確 有以下員工信息表 當然此表你在文件存儲時可以這樣表示 1 1,Alex Li,22,13651054608,IT,2013-04-01 現需要對這個員工

python操作mysql數據庫實現增刪改查

mysqldb參考http://www.cnpythoner.com/wiki/string.htmlhttp://395469372.blog.51cto.com/1150982/1748120http://www.jianshu.com/p/1d09d14976d7http://ju.outofmemor

ztree--插件實現增刪改查demo（完整版）

mes add treenode pan tno btn tin 異步 als ztree--插件實現增刪改查demo（完整版） var setting = { async: { enabl