1.创建数据库

2.创建工程，目录，导入jquery类库，并导入pom依赖

<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target><spring-version>4.3.7.RELEASE</spring-version><jackson.version>2.5.4</jackson.version></properties><dependencies><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.21</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.4.1</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>1.3.1</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-web</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>${spring-version}</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.1</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>${jackson.version}</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>${jackson.version}</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>4.1.6</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version><scope>provided</scope></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version><scope>test</scope></dependency></dependencies>

3.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/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0">
<filter><filter-name>filter</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>filter</filter-name><url-pattern>/*</url-pattern></filter-mapping><servlet><servlet-name>mvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>mvc</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping>
</web-app>

4.applicationContext.xml

<?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"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.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"><!-- 1.扫描包 --><context:component-scan base-package="cn" /><!-- 2.配置两个driven,使事务的注解有效 --><tx:annotation-driven transaction-manager="txManager" /><!-- 3.使mvc的注解有效 --><mvc:annotation-driven><mvc:message-converters><bean class="org.springframework.http.converter.StringHttpMessageConverter"><property name="supportedMediaTypes"><list><value>application/json;charset=UTF-8</value>
<!--                        解决ajax中文乱码--></list></property></bean></mvc:message-converters></mvc:annotation-driven>
<!--    写这两个更稳定 提高性能  需要的时候开不需要的时候关 -->
<!--    init-method="init"是指bean被初始化时执行的方法，
当bean实例化后,执行init-method用于初始化数据库连接池。-->
<!--    destroy-method="close" 是指bean被销毁时执行的方法  Spring容器关闭时调用该方法即调用close()将连接关闭。--><!-- 4.配置数据源 --><bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"><property name="driverClassName" value="com.mysql.jdbc.Driver" />
<!--        以上 连接MySQL得话，我们就需要mysql连接驱动包--><property name="url" value="jdbc:mysql://localhost:3306/db_book?characterEncoding=utf8&amp;useSSL=false&amp;serverTimezone=UTC&amp;rewriteBatchedStatements=true" /><property name="username" value="root" /><property name="password" value="zjj" /></bean><!-- 5.配置SqlSessionFactoryBean --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--        插件写在里面 就不要配mybatis-config了--><property name="dataSource" ref="dataSource" /><property name="plugins"><bean class="com.github.pagehelper.PageHelper"><property name="properties"><value>dialect=mysqlreasonable=true</value>
<!--dialect=mysql 是为了防止多数据源的时候，会识别不出来 ，
现在没关系只有一个  绝对匹配某个数据源--></property></bean></property></bean><!-- 6.配置事务 --><bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource" /></bean><!-- 7.配置数据映射器,扫描mapper --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="cn.kgc.mapper" /></bean><!-- 8.视图解析器 --><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/" /><property name="suffix" value=".html" /></bean>
</beans>

5.实体类Book.java

package cn.kgc.entity;
import lombok.Data;
import java.io.Serializable;@Data
public class Book implements Serializable {private Integer id;private String name;private String author;private String publish;private String publishdate;private Integer page;private Integer price;private String content;
}

6.接口BookMapper

package cn.kgc.mapper;
import cn.kgc.entity.Book;
import org.apache.ibatis.annotations.Param;
import java.util.List;
import java.util.Map;public interface BookMapper {//无分页版List<Map<String,Object>> findAll();//带分页版+模糊查询List<Map<String,Object>> findAllByPage(@Param("book") Book book);//添加 这边不用map 用对象更好Integer addBook(Book book);//详情Map<String,Object> findById(Integer id);//修改Integer updateBook(Book book);//删除Integer delById(Integer id);
}

7.映射类BookMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.kgc.mapper.BookMapper"><select id="findAll" resultType="java.util.Map">select * from book</select><select id="findAllByPage" resultType="java.util.Map">select * from book where 1 = 1<if test="book.name != null and book.name != '' ">and `name` like concat('%',#{book.name},'%')</if></select><insert id="addBook" parameterType="cn.kgc.entity.Book">insert into book(`name`,author,publish,publishdate,page,price,content)values (#{name},#{author},#{publish},#{publishdate},#{page},#{price},#{content})</insert><select id="findById" parameterType="java.lang.Integer" resultType="java.util.Map">select * from book where id = #{id}</select><update id="updateBook" parameterType="cn.kgc.entity.Book">update bookset `name` = #{name},author = #{author},publish = #{publish},publishdate = #{publishdate},page = #{page},price = #{price},content = #{content}where id = #{id}</update><delete id="delById" parameterType="java.lang.Integer">delete from book where id = #{id}</delete>
</mapper>

8.service接口BookService.java

package cn.kgc.service;import cn.kgc.entity.Book;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.annotations.Param;import java.util.List;
import java.util.Map;public interface BookService {List<Map<String,Object>> findAll();//带分页版+模糊查询PageInfo<Map<String,Object>> findAllByPage(Book book,Integer pageNo);//添加 这边不用map 用对象更好Integer addBook(Book book);//详情Map<String,Object> findById(Integer id);//修改Integer updateBook(Book book);//删除Integer delById(Integer id);
}

9.serviceImpl接口BookServiceImpl.java

package cn.kgc.service;import cn.kgc.entity.Book;
import cn.kgc.mapper.BookMapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
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
@Transactional
public class BookServiceImpl implements BookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic List<Map<String, Object>> findAll() {return bookMapper.findAll();}@Overridepublic PageInfo<Map<String, Object>> findAllByPage(Book book, Integer pageNo) {PageHelper.startPage(pageNo,4);return new PageInfo<>(bookMapper.findAllByPage(book));}@Overridepublic Integer addBook(Book book) {return bookMapper.addBook(book);}@Overridepublic Map<String, Object> findById(Integer id) {return bookMapper.findById(id);}@Overridepublic Integer updateBook(Book book) {return bookMapper.updateBook(book);}@Overridepublic Integer delById(Integer id) {return bookMapper.delById(id);}
}

10.BookController

package cn.kgc.controller;import cn.kgc.entity.Book;
import cn.kgc.service.BookService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;
import java.util.Map;
@Controller
public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/findAll.do")@ResponseBody//json的方式public List<Map<String,Object>> findAll(){//直接传数据 不用stringList<Map<String, Object>> list = bookService.findAll();return list;}@RequestMapping("/findAllByPage.do")@ResponseBody//返回数据 不加就是返回页面public PageInfo<Map<String,Object>>findAllByPage(@RequestParam(defaultValue = "1",required = false) Integer pageNo,@RequestParam(defaultValue = "",required = false) String name){//        false表示可以不传参数 即是空的Book book = new Book();book.setName(name);return bookService.findAllByPage(book,pageNo);}@RequestMapping("/add.do")@ResponseBodypublic String add(Book book){//        Integer flag = bookService.addBook(book);bookService.addBook(book);
//        if (flag > 0){return "ok";
//        }else { return "error"; }}@RequestMapping("/delById.do")@ResponseBody//返回的时候以json的格式  @RequestBody请求的时候以json的格式 如果没有结果那就再加个@RequestParam(value = "id") 可能是编译的问题public String delById(@RequestBody @RequestParam(value = "id") Integer id){bookService.delById(id);return "ok";}@RequestMapping("/findById.do")@ResponseBody//map会被 ResponseBody解析成json格式public Map<String,Object> findById(Integer id){return bookService.findById(id);}@RequestMapping("/update.do")@ResponseBodypublic String update(Book book){bookService.updateBook(book);return "ok";}
}

说明：
在Spring MVC 中使用 @RequestMapping 来映射请求，
也就是通过它来指定控制器可以处理哪些URL请求。

11.findAll.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function () {showData();// 展示数据});function showData() {$.ajax({url: "http://localhost:8080/findAll.do",// 前后端分离最好是写全了地址type: "post",data: { },dataType: "json",async: false,success:function (data) {var str = "";$.each(data,function (i) {str +="<tr>";str +="    <td>"+data[i].name+"</td>";str +="    <td>"+data[i].author+"</td>";str +="    <td>"+data[i].publish+"</td>";str +="    <td>"+data[i].publishdate+"</td>";str +="    <td>"+data[i].page+"</td>";str +="    <td>"+data[i].price+"</td>";str +="    <td>"+data[i].content+"</td>";str +="    <td></td>";str +="</tr>";/*** 上面这段话，可以先在下面写了，然后复制进去* alt键 快速选中多个 鼠标向下移* 复制的时候也是用alt键选中 然后在cv 在进行alt 不要直接选中* 有map   上诉的属性和数据库的相对应 不是实体类 */});$("table").append(str);},error:function () {}});}</script>
</head>
<body><table border="1px solid"><tr><th colspan="8">查询列表页面</th></tr><tr><td>书名</td><td>作者</td><td>出版社</td><td>发布日期</td><td>总页数</td><td>价格</td><td>内容</td><td>操作</td></tr></table>
</body>
</html>

结果：
http://localhost:8080/findAll.html

12.findAllByPage.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function () {showData(1);//默认为 1});function showData(pageNo) {$.ajax({url: "http://localhost:8080/findAllByPage.do",type: "post",data: {"pageNo":pageNo,"name":$("[name=name]").val()},dataType: "json",async: false,success:function (data) {$(".info").remove();var str = "";$.each(data.list,function (i) {str +="<tr class='info'>";str +="    <td>"+data.list[i].name+"</td>";str +="    <td>"+data.list[i].author+"</td>";str +="    <td>"+data.list[i].publish+"</td>";str +="    <td>"+data.list[i].publishdate+"</td>";str +="    <td>"+data.list[i].page+"</td>";str +="    <td>"+data.list[i].price+"</td>";str +="    <td>"+data.list[i].content+"</td>";str +="    <td>" +"<a href='javascript:void(0)' οnclick='delBook("+data.list[i].id+")'>删除</a>" +"<a href='update.html?id="+data.list[i].id+"'>修改</a></td>";str +="</tr>";});str +="<tr class='info'>";str +="    <td colspan='8'>";str +="        <a href='javascript:void (0)' οnclick='showData(1)'>首页</a>";str +="        <a href='javascript:void (0)' οnclick='showData("+data.prePage+")'>上一页</a>";str +="        <a href='javascript:void (0)' οnclick='showData("+data.nextPage+")'>下一页</a>";str +="        <a href='javascript:void (0)' οnclick='showData("+data.pages+")'>末页</a>";str +="    </td>";str +="</tr>";$("table").append(str);},error:function () {}});}function delBook(id) {// var flag = confirm("确认删除吗?");// if(flag>0){// alert(id);$.ajax({url: "http://localhost:8080/delById.do",type: "post",data: {"id": id},//json格式 对象  如果前面不写RequestBody 浏览器也会自动解析 把Integer id解析dataType: "text",async: false,success: function (data) {// alert("1234");if (data == "ok") {window.location.href = "findAllByPage.html";}},error: function () {}})// }}</script>
</head>
<body><table border="1px solid"><tr><th colspan="8">查询列表页面</th></tr><tr><td colspan="8"><input type="text" name="name" /><input type="button" value="书籍名称查询" onclick="showData(1)"></td></tr><tr><td>书名</td><td>作者</td><td>出版社</td><td>发布日期</td><td>总页数</td><td>价格</td><td>内容</td><td>操作</td></tr>
<!--        拼接所以用单引号  info是为了清空-->
<!--        <tr class='info'>-->
<!--            <td colspan="8">-->
<!--                <a href='javascript:void (0)' οnclick='showData(1)'>首页</a>-->
<!--                <a href='javascript:void (0)' οnclick='showData("+data.prePage+")'>上一页</a>-->
<!--                <a href='javascript:void (0)' οnclick='showData("+data.nextPage+")'>下一页</a>-->
<!--                <a href='javascript:void (0)' οnclick='showData("+data.pages+")'>末页</a>-->
<!--            </td>-->
<!--        </tr>--><!--javascript:void (0)防止乱跳      可以用lastPage 也可以用pages pages被划掉说明有更好的方法--></table>
</body>
</html>

结果：
http://localhost:8080/findAllByPage.html

13.add.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">// 注意点 大写小 要统一 实体类和数据库  用序列化的话 并且用序列化必须写formfunction cc() {$.ajax({url: "http://localhost:8080/add.do",type: "post",data: $("form").serialize(),// serialize 所有的name属性都会封装成对象 后台会直接获取  实体类要序列化//         data: {"name":$("[name=name]").val(),"author":$("[name=author]").val()},XXXXXX,dataType: "text",// 字符串async: false,success: function (data) {if (data == "ok") {window.location.href = "findAllByPage.html"}},error: function () { }})}</script>
</head>
<body><form><table border="1px solid"><tr><td>书名</td><td><input type="text" name="name" /></td></tr><tr><td>作者</td><td><input type="text" name="author" /></td></tr><tr><td>出版社</td><td><input type="text" name="publish" /></td></tr><tr><td>发布日期</td><td><input type="date" name="publishdate" /></td></tr><tr><td>总页数</td><td><input type="text" name="page" /></td></tr><tr><td>价格</td><td><input type="text" name="price" /></td></tr><tr><td>内容</td><td><input type="text" name="content" /></td></tr><tr><td colspan="2" align="right"><input type="button" value="提交" onclick="cc()"></td></tr></table></form>
</body>
</html>

结果：

14.update.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function () {var id = /\d+$/.exec(location.search)[0];// var  reg = /表达式/附加参数  $ 匹配字符串的 结束// \d 匹配一个数字字符，等价于[0 - 9]// exec()  检索字符中是正则表达式的区配，返回找到的值，并确定其位置 返回的是一个数组 所以获取0$.ajax({url: "http://localhost:8080/findById.do",type: "post",data: {"id":id},dataType: "json",async: false,//如果一个里有两个ajax 就必须要这个啊success: function (data) {$("[name=id]").val(data.id);$("[name=name]").val(data.name);$("[name=author]").val(data.author);$("[name=publish]").val(data.publish);$("[name=publishdate]").val(data.publishdate);$("[name=page]").val(data.page);$("[name=price]").val(data.price);$("[name=content]").val(data.content);},error: function () {}})})function update() {$.ajax({url: "http://localhost:8080/update.do",type: "post",data: $("form").serialize(),dataType: "text",async: false,success: function (data) {if (data == "ok"){window.location.href="findAllByPage.html";}},error: function () {}})}</script>
</head>
<body>
<form><table border="1px solid"><input type="hidden" name="id"><tr><td>书名</td><td><input type="text" name="name" /></td></tr><tr><td>作者</td><td><input type="text" name="author" /></td></tr><tr><td>出版社</td><td><input type="text" name="publish" /></td></tr><tr><td>发布日期</td><td><input type="date" name="publishdate" /></td></tr><tr><td>总页数</td><td><input type="text" name="page" /></td></tr><tr><td>价格</td><td><input type="text" name="price" /></td></tr><tr><td>内容</td><td><input type="text" name="content" /></td></tr><tr><td colspan="2" align="right"><input type="button" value="提交" onclick="update()"></td></tr></table>
</form>
</body>
</html>

结果：
http://localhost:8080/findAllByPage.html

上点击书名lj修改就会跳到
http://localhost:8080/update.html?id=4

进行修改就可以了。

15.附注

常见的三种json操作工具：
jackson,gson,fastjson

16.拓展

mybatis 配置中遇到的坑之二_qioutiandeyun的博客-CSDN博客
https://blog.csdn.net/qioutiandeyun/article/details/76747150

pagehelper dialect 支持哪些数据库_百度知道 (baidu.com)
https://zhidao.baidu.com/question/757630544346753444.html

@ResponseBody注解使用（返回字符串并不跳转） - AlexLiuF - 博客园 (cnblogs.com)
https://www.cnblogs.com/alexliuf/p/13967249.html

responseBody注解可以直接返回字符串 && springMVC Controller get请求返回字符串是中文乱码解决 - 戈博折刀 - 博客园 (cnblogs.com)
https://www.cnblogs.com/libin6505/p/9805853.html

@ResponseBody返回4种数据格式的数据_人生几度秋凉-CSDN博客_responsebody返回字符串
https://blog.csdn.net/weixin_42189604/article/details/82179660

----2021.12.18&12.21&12.22

SSM + Ajax相关推荐

ssm 上传图片到mysql_MySQL+SSM+Ajax上传图片问题的分析（图）
本文主要介绍了MySQL+SSM+Ajax上传图片问题.具有很好的参考价值.下面跟着小编一起来看下吧第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是, ...
maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件首先springmvc的配置文件要配置上传文件解析器: 1 < ...
SSM + AJAX + JSON 动态下拉框
前台页面 <%@ page language="java" contentType="text/html; charset=utf-8" page ...
SSM+ajax使用百度AI人脸识别（人脸对比）功能心得
最近做毕业设计,算是自己第一次独立完成一个系统,使用了百度ai的接口,查询了大部分网络上的博客,也来分享一下自己的经验. 1.首先,使用之前先注册一个百度AI开放平台的账号 2.登录之后,创建属于自己 ...
ssm+ajax怎么实现消息标记已读
最近需要实现一个功能,怎么实现消息标记已读. 我的做法:(是我自己想出来的点子,能成功实现,肯定有不足,但是水平有限,在此记录) 在数据库表加个sign字段,初始值为0或者空,整型. 所有消息,一开始 ...
ssm+ajax实现新增和修改(layerui后台系统模板)
最近使用layerui后台模板实现的一个新增和修改,大家looklook..... 一.jsp页面 admin_list.jsp页面,该页面显示数据(代码太多了,我就只写一部分就行了) 添加:οncl ...
《使用MAVEN+SSM+Ajax+shiro+MySql开发在线商场详解（4）》
- 创建Maven项目父项目shopping_parent shopping_action_web前台页面 shopping_action_admin后台项目配置Tomact插件 <bu ...
ssm把后端数据传到前端_前端传数据到后台分别JSON和STRING接收 AJAX SPRINGBOOT ssm
前端时间复习了SSM,前后端传数据接收,做了个例子,分享下 POM org.springframework.boot spring-boot-starter-test test org.springf ...
java基于ssm,jsp开发的卖鞋商城鞋店系统
ssm开发的网上鞋城系统,主要有商品分类,列表,详情,加入购物车,订单,收货地址等功能,单商家登录后台可以发布商品,上下架商品,发货退款等管理订单. 演示视频: https://www.bilibil ...
java基于ssm开发的宠物商城宠物店源码
简介关于宠物的商店,首页,搜索商品,详情页,可选择尺寸,衣服颜色,根据不同规格显示不同的商品价格,加入购物车,立即购买,评价列表展示,商品详情展示,商品评分,分类商品,标签查询,更多分类查询演示视 ...

SSM + Ajax