使用SSM+Vue前后端分离开发实现增删改查（超详细）_ssm+vue增删改查代码

最新推荐文章于 2024-06-18 15:59:34 发布

2401_84447149

最新推荐文章于 2024-06-18 15:59:34 发布

阅读量586

点赞数 3

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84447149/article/details/138606128

版权

程序员专栏收录该内容

156 篇文章 0 订阅

订阅专栏

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

}

public void setProductName(String productName) {
    this.productName = productName;
}

public Integer getNums() {
    return nums;
}

public void setNums(Integer nums) {
    this.nums = nums;
}

@Override
public String toString() {
    final StringBuffer sb = new StringBuffer("Product{");
    sb.append("id=").append(id);
    sb.append(", productName='").append(productName).append('\'');
    sb.append(", nums=").append(nums);
    sb.append('}');
    return sb.toString();
}

}


注意：数据库里商品名称为 `productname` ，而实体类里字段为 `productName` ，所以后面操作要额外注意，这里写不同，方便各位小伙伴有个区别。


###### 编写 `ProductController.java`


完整代码：

package com.shaonaiyi.minimall.controller;

import com.shaonaiyi.minimall.entity.Product;
import com.shaonaiyi.minimall.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
* @Auther: shaonaiyi@163.com
* @Date: 2021/8/17 14:10
* @Description: 商品控制器
*/
@Controller
@RequestMapping(“/product”)
@CrossOrigin
public class ProductController {

@Autowired
private IProductService iProductService;

@RequestMapping("/list")
@ResponseBody
public List<Product> list() {
    return iProductService.list();
}

@RequestMapping(value = "/add",method = RequestMethod.POST)
@ResponseBody
public boolean add(@RequestBody Product product) {
    return iProductService.add(product);
}

@RequestMapping(value = "/update",method = RequestMethod.POST)
@ResponseBody
public boolean update(@RequestBody Product product) {
    return iProductService.update(product);
}

@RequestMapping(value = "/delete",method = RequestMethod.POST)
@ResponseBody
public boolean delete(@RequestBody Product product) {
    return iProductService.delete(product);
}

@RequestMapping(value = "/add-test",method = RequestMethod.POST)
@ResponseBody
public boolean addTest(String productName,Integer nums) {
    Product product = new Product();
    product.setProductName(productName);
    product.setNums(nums);
    return iProductService.add(product);
}

@RequestMapping(value = "/delete-test",method = RequestMethod.POST)
@ResponseBody
public boolean deleteTest(int id) {
    Product product = new Product();
    product.setId(id);
    return iProductService.delete(product);
}

}


说明：  
 1、这里提供多了两个接口： `/add-test` 、 `/delete-test` ，方便大家对比学习，两种方式的接受参数的方式不一样， `Content-Type` 一个是 `JSON` ，一个是 `application/x-www-form-urlencoded` ，方式不同，如果不对应上，会报400错误，后面有测试用例，可以看后面内容。  
 2、目前的开发模式一般都是前后端分离开发，所以用 `JSON` 格式进行交互是最常见的；如果想按照自己的风格，没有前后端分离的话，可以使用另外一种。初学者比较容易对这里的内容有误解，可以查阅相关资料。


###### 编写 `IProductService.java`


完整代码：

package com.shaonaiyi.minimall.service;

import com.shaonaiyi.minimall.entity.Product;

import java.util.List;

/**
* @Auther: shaonaiyi@163.com
* @Date: 2021/8/17 14:13
* @Description: 商品逻辑接口
*/
public interface IProductService {

List<Product> list();

boolean add(Product product);

boolean update(Product product);

boolean delete(Product product);

}


###### 编写 `ProductServiceImpl.java`


完整代码：

package com.shaonaiyi.minimall.service.impl;

import com.shaonaiyi.minimall.dao.ProductDao;
import com.shaonaiyi.minimall.entity.Product;
import com.shaonaiyi.minimall.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
* @Auther: shaonaiyi@163.com
* @Date: 2021/8/17 14:13
* @Description: 商品逻辑实现
*/
@Service
public class ProductServiceImpl implements IProductService {

@Autowired
private ProductDao productDao;

@Override
public List<Product> list() {
    return productDao.list();
}

@Override
public boolean add(Product product) {
    int result = productDao.add(product);
    return result > 0;
}

@Override
public boolean update(Product product) {
    int result = productDao.update(product);
    return result > 0;
}

@Override
public boolean delete(Product product) {
    int result = productDao.delete(product.getId());
    return result > 0;
}

}


###### 编写 `ProductDao.java`


完整代码：

package com.shaonaiyi.minimall.dao;
import com.shaonaiyi.minimall.entity.Product;
import java.util.List;

/**
* @Auther: shaonaiyi@163.com
* @Date: 2021/8/17 14:18
* @Description: 商品Dao接口
*/
public interface ProductDao {

List<Product> list();
int add(Product product);
int update(Product product);
int delete(int id);

}


###### 编写 `ProductDao.xml`


完整代码：

<?xml version="1.0" encoding="UTF-8"?>

<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>


注意：到底是写 `productname` 还是 `productName` ，需要分清。写好之后，你就可以进行部署运行和测试了。


###### 4、部署Tomcat


此步骤比较简单，可以自行搜一下资料，灵感参考如下：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f29aeb1061804d1abb4127effc7b9077.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YK15aWI5LiA,size_20,color_FFFFFF,t_70,g_se,x_16)


###### 5、编写测试用例


随便新建个文件夹，然后新建一个以 `http` 后缀结尾的文件，然后写测试用例即可：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/02287a82567d4200841777c8f6fb2a6c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YK15aWI5LiA,size_20,color_FFFFFF,t_70,g_se,x_16)  
 完整的测试用例

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` 启动后，点击绿色小三角按钮就可以测试了：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/42954c5673724fd28e0f3aefc00cc106.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YK15aWI5LiA,size_20,color_FFFFFF,t_70,g_se,x_16)  
 下面会有返回的结果。所以，直接使用 `IDEA` 进行测试是非常方便的。


**测试小技巧：**


在 `http` 文件中，直接打 `gtr` 、 `gtrp` 、 `ptr` 、 `ptrg` 可以生成相应的代码，只需要写必要的参数就可以了，自己可以多试试。


## 00x2 前端代码实现


#### 步骤总览


1、编写未对接数据库的前端代码  
 2、对接查询商品列表接口  
 3、SSM后台代码实现  
 4、部署Tomcat  
 5、编写测试用例


#### 步骤实现


###### 1、编写未对接数据库的前端代码


参考教程：：[Vue2.x案例之商品增删改查的实现](https://bbs.csdn.net/topics/618166371)。


在项目中新建一个 `web` 文件夹，然后新建 `index.html` 文件，因为代码比较简单，所以这里我使用传统的开发模式，方便大家入门：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1851e72491d84770947bf56ae83175b7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YK15aWI5LiA,size_20,color_FFFFFF,t_70,g_se,x_16)  
 然后就可以把教程中的代码粘贴进去了，用浏览器打开 `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


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: [],
…
};


目前的完整代码如下：

…省略部分未变代码

商品名称	数量	操作
{{product.productName}}	{{product.nums}}

商品名称:
数量：
修改取消


当然，代码还是有可以优化的地方的，但毕竟不想改那么多，如果你觉得不服，你可以从屏幕里出来打我！  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7d4fe02872744e368f18ada869b8d121.png#pic_center)  
 这篇文章断断续续写了快一个月才完成，好累啊！将近3w字！！！


我决定把这篇文章把公众号里也发一下！原本不想发公众号，是因为公众号修改起来麻烦，那我发到公众号后，基本是不会再改的了，老铁们可以多提点建议，支持支持！


## 0xFF 总结


1. 这篇文章使用SSM技术实现了后端，并且通过IDEA实现了测试，完全不依赖前端操作。然后随便建了文件夹就可以把前端给实现了，让有点前端基础的人也能轻松实现我们这一次的操作。完全打工前后端分离开发的流程！
2. 请关注本博客，本博客很多文章都是在原博客上迭代写的，提供多种解决方案，有利于小伙伴们不迷路，感谢支持！
3. 小伙伴们肯定觉得这个样式太难看了吧！本博客里有一篇配套的调整样式的文章，请参考：[Bootstrap全局css样式的使用](https://bbs.csdn.net/topics/618166371)，效果是这样子滴，希望大家学得开心：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d2fae21d032e4d53a06d5633bd3c9bd0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YK15aWI5LiA,size_20,color_FFFFFF,t_70,g_se,x_16)



> 
> **邵奈一** 原创不易，如转载请标明出处，教育是一生的事业。
> 
> 
> 




---




下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

![HTML、CSS部分截图](https://img-blog.csdnimg.cn/img_convert/2bb6b442a4432372fe5b9ccea2ad93d0.png)

### 进阶阶段



进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。



我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。



**1、JavaScript 和 ES6**



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。



![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)



**2、前端框架**

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

以 Vue 为例，我整理了如下的面试题。



![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)

2401_84447149

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用SSM+Vue前后端分离开发实现增删改查（超详细）_ssm+vue增删改查代码

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
复制链接

扫一扫