编写 ProductDao.xml
完整代码：
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.shaonaiyi.minimall.dao.ProductDao"> <resultMap id="Product" type="com.shaonaiyi.minimall.entity.Product"> <id property="id" column="id"></id> <result property="productName" column="productName"/> <result property="nums" column="nums"/> </resultMap> <select id="list" resultMap="Product"> select * from product; </select> <insert id="add"> insert into product (productname,nums) values(#{productName},#{nums}) </insert> <update id="update" parameterType="com.shaonaiyi.minimall.entity.Product"> update product set productname = #{productName}, nums = #{nums} where id = #{id} </update> <delete id="delete" parameterType="int"> delete from product where id = #{id} </delete> </mapper>
注意：到底是写 productname 还是 productName ，需要分清。写好之后，你就可以进行部署运行和测试了。
4、部署Tomcat
此步骤比较简单，可以自行搜一下资料，灵感参考如下：
5、编写测试用例
随便新建个文件夹，然后新建一个以 http 后缀结尾的文件，然后写测试用例即可：
完整的测试用例
### 1、获取商品列表 GET http://localhost:8080/product/list ### 2、添加商品 POST http://localhost:8080/product/add Content-Type: application/json { "productName": "裙子", "nums": 150 } ### 3、更新商品 POST http://localhost:8080/product/update Content-Type: application/json { "id":1, "productName": "皮靴", "nums": 88 } ### 4、删除商品 POST http://localhost:8080/product/delete Content-Type: application/json { "id":30 } ### 5、添加商品（非JSON方式） POST http://localhost:8080/product/add-test Content-Type: application/x-www-form-urlencoded productName=裙子&nums=150 ### 6、删除商品（非JSON方式） POST http://localhost:8080/product/delete-test Content-Type: application/x-www-form-urlencoded id=29 ###
写好测试用例后，左边会有个运行按钮，当你的 Tomcat 启动后，点击绿色小三角按钮就可以测试了：
下面会有返回的结果。所以，直接使用 IDEA 进行测试是非常方便的。
测试小技巧：
在 http 文件中，直接打 gtr 、 gtrp 、 ptr 、 ptrg 可以生成相应的代码，只需要写必要的参数就可以了，自己可以多试试。
00x2 前端代码实现
步骤总览
1、编写未对接数据库的前端代码
2、对接查询商品列表接口
3、SSM后台代码实现
4、部署Tomcat
5、编写测试用例
步骤实现
1、编写未对接数据库的前端代码
参考教程：：Vue2.x案例之商品增删改查的实现。
在项目中新建一个 web 文件夹，然后新建 index.html 文件，因为代码比较简单，所以这里我使用传统的开发模式，方便大家入门：
然后就可以把教程中的代码粘贴进去了，用浏览器打开 index.html 文件，其实就可以实现增删改查了，只不过，页面都是没有对接数据库的，所以刷新页面的时候，页面会恢复原样，这当然不是我们所想要实现的效果！
2、对接查询商品列表接口
目前的商品数据是直接写死的：
var data = { products: [ { id: 1, productName: '袜子', nums: 15}, { id: 2, productName: '羊毛衫', nums: 20}, { id: 3, productName: '雪纺衫', nums: 24}, { id: 4, productName: '高跟鞋', nums: 30} ], product4Add: { id: 0, productName: '', nums: '0'}, product4Update: { id: 0, productName: '', nums: '0'} };
并且绑定到了Vue里面的data：
var vue = new Vue({ el: '#app', data: data, ...
而我们应该做的是从后台的接口里获取到数据。
步骤如下：
我们将会引入 axios ，方便我们请求后台接口，然后写 list 方法对接后台的接口，查询到商品列表信息，你可以给出一个按钮，然后再执行list方法，但一般列表应该是一加载页面就去查询的。所以，我们可以使用Vue中的 mounted 钩子函数来达到这个目的。
1、引入axios
添加AJAX
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
2、编写list方法对接后台接口
list() { let _this = this; axios.get("http://localhost:8080/product/list").then( (response) => { console.log("查询用户列表结果：", response); _this.products = response.data; } ) },
3、添加 mounted 钩子函数
mounted: function () { let _this = this; _this.list(); },
4、删除初始化的商品数据
var data = { products: [], ... };
目前的完整代码如下：
<html> <head> <meta charset="utf-8"/> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> ...省略部分未变代码 <script type="text/javascript"> $("#div4Update").hide(); //Model var data = { products: [], product4Add: {id: 0, productName: '', nums: '0'}, product4Update: {id: 0, productName: '', nums: '0'} }; ...省略部分未变代码 //ViewModel var vue = new Vue({ el: '#app', data: data, mounted: function () { let _this = this; _this.list(); }, methods: { list() { let _this = this; axios.get("http://localhost:8080/product/list").then( (response) => { console.log("查询用户列表结果：", response); _this.products = response.data; } ) }, add: function (event) { ...省略以下未变代码
代码比较多，其实没改几个地方，放出来代码，方便大家查阅。
3、对接删除商品接口
因为我们目前的 id 不是从后台获取的，所以，你可以把 id 获取到，然后显示出来，当然你也可以隐藏掉。隐藏掉操作如下，只需要加一句话就可以：
<td hidden>{{product.id}}</td>
但是你不获取，其实也可以，目前我们没有涉及到，所以不操作上面的步骤。
我们可以先把这段代码删掉，因为没有意义了：
var maxId = 5; for (var i = 0; i < data.products.length; i++) { if (data.products[i].id > maxId) maxId = this.products[i].id;1 }
然后将删除方法的代码修改为：
deleteProduct: function (id) { let _this = this; axios.post("http://localhost:8080/product/delete", { id: id } ).then( (response) => { if (response.data) { console.log("删除商品成功！"); _this.list(); } } ) },
说明：这里传参数，需要传 JSON 格式，否则无法跟后台接口对应上！（教程后面有完整代码）
4、对接增加商品接口
增加接口与删除接口类似，把数据 post 给后端就可以了。
修改 product4Add ，删除初始值：
var data = { products: [], product4Add: {}, product4Update: {id: 0, productName: '', nums: '0'} };
注意：
1、这里是大括号 {} ，不是中括号 [] ，不然不行！
2、[] 表示一个数组， {} 表示一个对象。
修改 add 方法：
add: function (product) { let _this = this; axios.post("http://localhost:8080/product/add", product).then( (response) => { if (response.data) { console.log("添加商品成功！"); _this.product4Add = {}; _this.list(); } } ) },
跟删除的方法非常相似，只不过这里是直接就传了一个 product 对象而已，与 JSON 格式是匹配的。
注意，此时，在点击 增加 按钮的时候，需要传一个 product 参数进来，所以需要加上：
<button type="button" v-on:click="add(product4Add)">增加</button>
5、对接修改商品接口
修改接口与增加接口类似，修改 product4Update ，删除初始值：
var data = { products: [], product4Add: {}, product4Update: {} };
修改 edit 和 update 方法
edit: function (product) { $("#productListTable").hide(); $("#div4Update").show(); let _this = this; _this.product4Update = product; }, update: function (product) { let _this = this; axios.post("http://localhost:8080/product/update", product).then( (response) => { if (response.data) { console.log("修改商品成功！"); _this.product4Add = {}; $("#productListTable").show(); $("#div4Update").hide(); } } ) },
需要传一个 product 参数进来，所以需要加上：
<button type="button" v-on:click="update(product4Update)">修改</button>
说明：虽然更新页面里没有要求输入 id ，但是当你点击 编辑 按钮之后，其实是有带了 id 进去的。
那么到这里，然后修改功能就实现了！
老规矩，下面给出完整的代码！
6、index.html 完整代码
<html> <head> <meta charset="utf-8"/> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> <style type="text/css"> td { border: 1px solid #000; } </style> </head> <body> <div id="app"> <table id="productListTable"> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="product in products"> <td>{{product.productName}}</td> <td>{{product.nums}}</td> <td> <a href="#nowhere" @click="edit(product)">编辑</a> <a href="#nowhere" @click="deleteProduct(product.id)">删除</a> </td> </tr> <tr> <td colspan="3"> 商品名称: <input type="text" v-model="product4Add.productName"/> <br> 数量： <input type="number" v-model="product4Add.nums"/> <br> <button type="button" v-on:click="add(product4Add)">增加</button> </td> </tr> </tbody> </table> <div id="div4Update"> 商品名称: <input type="text" v-model="product4Update.productName"/> <br> 数量： <input type="number" v-model="product4Update.nums"/> <input type="hidden" v-model="product4Update.id"/> <br> <button type="button" v-on:click="update(product4Update)">修改</button> <button type="button" v-on:click="cancel">取消</button> </div> </div> <script type="text/javascript"> $("#div4Update").hide(); //Model var data = { products: [], product4Add: {}, product4Update: {} }; //ViewModel var vue = new Vue({ el: '#app', data: data, mounted: function () { let _this = this; _this.list(); }, methods: { list() { let _this = this; axios.get("http://localhost:8080/product/list").then( (response) => { console.log("查询用户列表结果：", response); _this.products = response.data; } ) }, add: function (product) { let _this = this; axios.post("http://localhost:8080/product/add", product).then( (response) => { if (response.data) { console.log("添加商品成功！"); _this.product4Add = {}; _this.list(); } } ) }, deleteProduct: function (id) { let _this = this; console.log("id" + id); axios.post("http://localhost:8080/product/delete", { id: id } ).then( (response) => { if (response.data) { console.log("删除商品成功！"); _this.list(); } } ) }, edit: function (product) { $("#productListTable").hide(); $("#div4Update").show(); let _this = this; _this.product4Update = product; }, update: function (product) { let _this = this; axios.post("http://localhost:8080/product/update", product).then( (response) => { if (response.data) { console.log("修改商品成功！"); _this.product4Add = {}; $("#productListTable").show(); $("#div4Update").hide(); } } ) }, cancel: function () { //恢复显示 $("#productListTable").show(); $("#div4Update").hide(); } } }); </script> </body> </html>
当然，代码还是有可以优化的地方的，但毕竟不想改那么多，如果你觉得不服，你可以从屏幕里出来打我！
这篇文章断断续续写了快一个月才完成，好累啊！将近3w字！！！
我决定把这篇文章把公众号里也发一下！原本不想发公众号，是因为公众号修改起来麻烦，那我发到公众号后，基本是不会再改的了，老铁们可以多提点建议，支持支持！
0xFF 总结
这篇文章使用SSM技术实现了后端，并且通过IDEA实现了测试，完全不依赖前端操作。然后随便建了文件夹就可以把前端给实现了，让有点前端基础的人也能轻松实现我们这一次的操作。完全打工前后端分离开发的流程！
请关注本博客，本博客很多文章都是在原博客上迭代写的，提供多种解决方案，有利于小伙伴们不迷路，感谢支持！
小伙伴们肯定觉得这个样式太难看了吧！本博客里有一篇配套的调整样式的文章，请参考：Bootstrap全局css样式的使用，效果是这样子滴，希望大家学得开心：
