用java来编写web界面

一、ssm框架整体目录架构

二、编写后端代码

1、编写实体层代码    实体层代码就是你的对象

entity

package com.cv.entity;public class Apple {private Integer id;private String name;private Integer quantity;private Integer price;private Integer categoryId;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getQuantity() {return quantity;}public void setQuantity(Integer quantity) {this.quantity = quantity;}public Integer getPrice() {return price;}public void setPrice(Integer price) {this.price = price;}public Integer getCategoryId() {return categoryId;}public void setCategoryId(Integer categoryId) {this.categoryId = categoryId;}@Overridepublic String toString() {return "Product{" +"id=" + id +", name='" + name + '\'' +", quantity=" + quantity +", price=" + price +", categoryId=" + categoryId +'}';}
}

2、编写service，服务层是你的业务代码

package com.cv.service;import com.cv.entity.Apple;import java.util.Map;public interface AppleService{void insert(Apple apple);Object[] query(Map map);void delete(Apple apple);void update(Apple apple);}

3、编写业务层的实现代码

package com.cv.service;import com.cv.dao.AppleMapper;
import com.cv.entity.Apple;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import java.util.List;
import java.util.Map;@Service
public class AppleServiceImpl implements AppleService {@AutowiredAppleMapper appleMapper;@Override@Transactionalpublic void insert(Apple apple) {appleMapper.insert(apple);}@Overridepublic Object[] query(Map map) {Integer pageNo = 1;if(map != null) {pageNo = (Integer) map.get("pageNo");}Page page = PageHelper.startPage(pageNo, 5);PageHelper.orderBy("id asc");List<Apple> products = appleMapper.query(map);Object[] result = new Object[2];result[0] = products;result[1] = page.getPages();return result;}@Overridepublic void delete(Apple apple) {appleMapper.delete(apple);}@Overridepublic void update(Apple apple) {appleMapper.update(apple);}}

4、dao 层  编写连写数据库层代码，对数据库进行操作

package com.cv.dao;import com.cv.entity.Apple;import java.util.List;
import java.util.Map;public interface AppleMapper {void insert (Apple apple);void delete(Apple apple);void update(Apple apple);List<Apple> query(Map map);
}

5、编写数据库层配置文件AppleDao.xml，与数据库进行交互，并与dao层交互后，与实体类进行交互

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace：命名空间，用于隔离sql，还有一个很重要的作用，后面会讲 -->
<mapper namespace="com.cv.dao.AppleMapper"><insert id="insert" parameterType="com.cv.entity.Apple">insert into product(`name`,`quantity`,`price`,`categoryId`) values(#{name}, #{quantity}, #{price}, #{categoryId})</insert><select id="query" parameterType="java.util.Map" resultType="com.cv.entity.Apple">select * from product<where><if test="name != null and name != ''">name like #{name}</if></where></select><delete id="delete" parameterType="com.cv.entity.Apple">delete from product<where><if test="id != null">id = #{id}</if><if test="name != null and name != ''">and name = #{name}</if></where></delete><update id="update" parameterType="com.cv.entity.Apple">update product set name=#{name}, quantity=#{quantity}, price=#{price}, categoryId=#{categoryId}  where id = #{id}</update></mapper>

6、指定扫描mybatis包，以及连接数据库所使用的配置文件，并创建连接池，并指出扫描的数据库接口类

<?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:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"><!-- 加载配置文件 --><context:property-placeholder location="classpath:db.properties" /><!-- 创建连接池  配置连接池的属性值 --><bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"><property name="driverClass" value="${jdbc.driver}"></property><property name="jdbcUrl" value="${jdbc.url}"></property><property name="user" value="${jdbc.username}"></property><property name="password" value="${jdbc.password}"></property></bean><!-- 配置SqlSessionFactory --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><!-- 配置mybatis核心配置文件<property name="configLocation" value="classpath:SqlMapConfig.xml" />--><!-- 配置数据源 --><property name="dataSource" ref="dataSource" /><property name="mapperLocations" value="classpath*:mybatis/*.xml" /><property name="plugins"><array><bean class="com.github.pagehelper.PageHelper"><property name="properties"><value>dialect=mysql</value></property></bean></array></property></bean><!-- mapper接口的扫描器 --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="com.cv.dao"/></bean><!--事务管理器--><bean id="transactionManager"class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource" /></bean><tx:annotation-driven /></beans>

7、编写数据库配置文件

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/big?characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456

8、编写连接池配置文件

# fatal > error > warn > info > debug
log4j.rootLogger = info,console,filelog4j.appender.console = org.apache.log4j.ConsoleAppender
log4j.appender.console.layout = org.apache.log4j.PatternLayout
log4j.appender.console.layout.ConversionPattern = %d %-5p [%t] %-17c - %m%n# D://logs/debug.log
log4j.appender.file = org.apache.log4j.DailyRollingFileAppender
log4j.appender.file.DatePattern = '.'yyyy-MM-dd
log4j.appender.file.File = D://debug.log
log4j.appender.file.Encoding = UTF-8
log4j.appender.file.layout = org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern = %d %-5p [%t] %-17c - %m%nlog4j.logger.org.apache.ibatis=debug, console

9、配置空制器层配置文件，负责和前端交互，以及进行视图解析

<?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:p="http://www.springframework.org/schema/p"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-4.0.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd"><!--springmvc注解驱动--><mvc:annotation-driven /><context:component-scan base-package="com.cv.comtroller" /><!--定义视图解析器--><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/"></property><property name="suffix" value=".jsp"></property></bean><!-- 多部分文件上传解析器 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="104857600" /><property name="maxInMemorySize" value="4096" /><property name="defaultEncoding" value="UTF-8"></property></bean><mvc:default-servlet-handler/><mvc:resources location="/css/" mapping="/css/**" /><mvc:resources location="/image/" mapping="/image/**" /><mvc:resources location="/plugins/" mapping="/plugins/**" /></beans>

10、编写控制器层代码，负责和前后端交互

package com.cv.comtroller;import com.cv.entity.Apple;
import com.cv.service.AppleService;
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 java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/product")
public class AppleController {@AutowiredAppleService appleService;@RequestMapping("/insert")@ResponseBodypublic void insert(Apple apple) {appleService.insert(apple);}@RequestMapping("/query")@ResponseBodypublic Object[] query(String keywords, Integer pageNo) {Map map = new HashMap();if(keywords != null) {map.put("name", "%" + keywords +"%");}if(pageNo != null) {map.put("pageNo", pageNo);} else {map.put("pageNo", 1);}return appleService.query(map);}@RequestMapping("/delete")@ResponseBodypublic void delete(Apple apple) {appleService.delete(apple);}@RequestMapping("/update")@ResponseBodypublic void update(Apple apple) {appleService.update(apple);}
}

三、编写前端代码，负责和后端交互

1、使用ajax去调用后端代码，并指定所使用的css代码，并用html编写相应web界面

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/8/17Time: 13:26To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>商品列表</title><link rel="stylesheet" type="text/css" href="${request.contextPath}/css/bootstrap.css"><script type="text/javascript" src="${request.contextPath}/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="${request.contextPath}/js/bootstrap.js"></script><script type="text/javascript" src="${request.contextPath}/js/jquery.validate.js"></script><script type="text/javascript" src="${request.contextPath}/js/messages_zh.js"></script><script>$(document).ready(function() {var pageNo = 1; // 全局变量，当前页码var pageCount = 0; // 总页数function query(keywords) {$("#products").empty();$.ajax({url: "${request.contextPath}/product/query.action",type: "get",data: {"pageNo":pageNo,"keywords":keywords},success: function(result) {var products = result[0];pageCount = result[1];refreshPage(); // 更新分页链接状态for(var index=0;index<products.length;index++) {var product = products[index];$("#products").append("<tr>"+"<td><input type='checkbox' name='check' value='" + product.id + "'></td>"+"<td>" + product.id + "</td>" +"<td><span id='label_name_" + product.id + "'>" + product.name +"</span>" + "<input type='text' style='display:none' id='name_" + product.id +"' value='" + product.name + "'></td>" +"<td><span id='label_quantity_" + product.id + "'>" + product.quantity + "</span>" + "<input type='text' style='display:none' id='quantity_" + product.id +"' value='" + product.quantity + "'></td>"+"<td><span id='label_price_" + product.id + "'>" + product.price  + "</span>" + "<input type='text' style='display:none' id='price_" + product.id +"' value='" + product.price + "'></td>"+"<td><span id='label_categoryId_" + product.id + "'>" + product.categoryId  + "</span>" + "<input type='text' style='display:none' id='categoryId_" + product.id +"' value='" + product.categoryId + "'></td>"+"<td>"+"<button id='delete_" + product.id + "'><span class='text-danger glyphicon glyphicon-minus'></span></button>"+"<button  id='edit_" + product.id + "'><span class='text-warning glyphicon glyphicon-pencil'></span></button>"+"<button style='display:none' id='save_" + product.id + "'><span class='text-info glyphicon glyphicon-floppy-disk'></span></button>"+"</td></tr>");$("#delete_" + product.id).click(function() {if(confirm("确定删除吗？")) {var id = $(this).attr("id");remove(id.substr(id.indexOf("_")+1));}});$("#edit_" + product.id).click(function() {var id = $(this).attr("id");$("#label_name_" + id.substr(id.indexOf("_")+1)).hide();$("#label_quantity_" + id.substr(id.indexOf("_")+1)).hide();$("#label_price_" + id.substr(id.indexOf("_")+1)).hide();$("#label_categoryId_" + id.substr(id.indexOf("_")+1)).hide();$("#name_" + id.substr(id.indexOf("_")+1)).show();$("#quantity_" + id.substr(id.indexOf("_")+1)).show();$("#price_" + id.substr(id.indexOf("_")+1)).show();$("#categoryId_" + id.substr(id.indexOf("_")+1)).show();$(this).hide();$("#save_" + id.substr(id.indexOf("_")+1)).show();});$("#save_" + product.id).click(function() {var id = $(this).attr("id");update(id.substr(id.indexOf("_")+1)); // 从按钮的ID值截取商品id$("#label_name_" + id.substr(id.indexOf("_")+1)).show();$("#label_quantity_" + id.substr(id.indexOf("_")+1)).show();$("#label_price_" + id.substr(id.indexOf("_")+1)).show();$("#label_categoryId_" + id.substr(id.indexOf("_")+1)).show();$("#name_" + id.substr(id.indexOf("_")+1)).hide();$("#quantity_" + id.substr(id.indexOf("_")+1)).hide();$("#price_" + id.substr(id.indexOf("_")+1)).hide();$("#categoryId_" + id.substr(id.indexOf("_")+1)).hide();$(this).hide();$("#edit_" + id.substr(id.indexOf("_")+1)).show();});}}});}function update(id) {$.ajax({url: "${request.contextPath}/product/update.action",type: "get",data: {"id":id, "name": $("#name_" + id).val(),"quantity": $("#quantity_" +id).val(), "price": $("#price_" + id).val(),"categoryId": $("#categoryId_" + id).val()},success: function(result) {alert("更新成功！");query();}});}function insert() {$.ajax({url: "${request.contextPath}/product/insert.action",type: "get",data: {"name": $("#name").val(),"quantity": $("#quantity").val(), "price": $("#price").val(),"categoryId": $("#categoryId").val()},success: function(result) {alert("增加成功！");query();}});}function remove(id){$.ajax({url: "${request.contextPath}/product/delete.action",type: "get",data: {"id":id},success: function(result) {query();}});}/*** pageNo发生变化时需要更新分页链接状态*/function refreshPage() {if(pageNo == 1) {$("#first").addClass("disabled");$("#pre").addClass("disabled");} else {$("#first").removeClass("disabled");$("#pre").removeClass("disabled");}if(pageNo == pageCount) {$("#last").addClass("disabled");$("#next").addClass("disabled");} else {$("#last").removeClass("disabled");$("#next").removeClass("disabled");}}query(); // 初始化时查询第一页数据$("#first").click(function() {if(pageNo > 1) {pageNo = 1;query();}});$("#pre").click(function() {if(pageNo > 1) {pageNo = pageNo - 1;query();}});$("#next").click(function() {if(pageNo < pageCount) {pageNo = pageNo + 1;query();}});$("#last").click(function() {if(pageNo < pageCount) {pageNo = pageCount;query();}});$("#add").click(function() {$("#products").append("<tr><td>&nbsp;</td><td>#</td>" +"<td><input type='text' id='name'></td>" +"<td><input type='text' id='quantity'></td>"+"<td><input type='text' id='price'></td>"+"<td><input type='text' id='categoryId'></td>"+"<td>&nbsp;</td></tr>");$(this).hide();$("#save").show();});$("#save").click(function() {insert();$(this).hide();$("#add").show();});$("#search").click(function() {pageNo = 1;// 搜索后显示第一页数据query($("#keywords").val())});$("#delete").click(function(){var checks = $("[name='check']:checked");for(var index=0;index<checks.length;index++) {var productId = $(checks[index]).val();remove(productId);}});})</script>
</head>
<body>
<div class="container"><div class="row"><ul class="pagination"><li id="first"><a href="javascript:void(0)">第一页</a></li><li id="pre"><a href="javascript:void(0)">上一页</a></li><li id="next"><a href="javascript:void(0)">下一页</a></li><li id="last"><a href="javascript:void(0)">最后页</a></li></ul><table class="table table-bordered table-striped table-hover"><caption>商品列表<div class="input-group col-md-4"><input id="keywords" type="text" class="form-control"><span id="search" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span></div><!-- /input-group --></caption><thead><th><input type="checkbox" id="all" >全选</th><th>ID</th><th>名称</th><th>数量</th><th>价格</th><th>类别</th><th>操作<button id='add'><span class='text-info glyphicon glyphicon-plus'></span></button><button id='save' style="display:none"><span class='text-info glyphicon glyphicon-floppy-disk'></span></button><button id='delete'><span class='text-info glyphicon glyphicon-minus'></span></button></th></thead><tbody id="products"></tbody></table><ul class="pagination"><li id="first2"><a href="javascript:void(0)">第一页</a></li><li id="pre2"><a href="javascript:void(0)">上一页</a></li><li id="next2"><a href="javascript:void(0)">下一页</a></li><li id="last2"><a href="javascript:void(0)">最后页</a></li></ul></div>
</div>
</body>
</html>

2、编写前端解析器配置文案间web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1"metadata-complete="true"><context-param><param-name>contextConfigLocation</param-name><param-value>classpath*:applicationContext*.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 解决中文乱码问题 --><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></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- 前端控制器 --><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springMvc.xml</param-value></init-param></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>*.action</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app>

四、至此ssm框架的web界面配置完成，web界面如图所示