SSM整合项目（添加家居）

03-11 1104阅读

文章目录

1.需求分析
2.设计结构
3.编写Service层

1.创建文件夹
2.FurnService.java
3.FurnServiceImpl.java
4.单元测试 FurnServiceTest.java
5.指定默认图片位置

1.Furn.java 为imgPath设置默认值
2.Furn.java 的全参构造器内判断imgPath是否为空
4.返回json数据的通用类com/sun/furn/bean/Msg.java
5.编写Controller层

com/sun/furn/controller/FurnController.java
6.使用postman测试

1.后端引入处理json数据的依赖jackson
2.pom.xml
3.设置Content-Type
4.进行测试
7.点击新增，前端显示添加表单

1.HomeView.vue在div结束之前添加提示框显示表单
2.为新增按钮绑定一个点击事件
3.设置数据池
4.结果展示，点击新增
5.解决bug，当点击取消之后再次点击新增数据仍然存在
8.创建Axios Request对象发送请求给后台

1.前端项目安装Axios

1.在IDEA的命令行，的前端项目文件夹输入 `npm i axios -S`
2.无法识别nodejs，直接使用命令行到前端项目文件夹执行命令
2.创建工具文件封装axios request对象

1.创建一个js工具文件src/utils/request.js
2.编写工具文件，封装axios request对象设置Content-Type为json
3.跨域问题

1.修改HomeView.vue在methods中编写save方法将表单数据提交到后端
2.出现跨域问题
3.跨域问题分析
4.解决跨域问题

1.修改vue.config.js，设置代理，解决跨域问题
2.修改HomeView.vue
5.成功返回数据
9.添加家居注意事项

1.在使用postman测试的时候需要指定Content-Type否则会报错415
2.表单数据的名字需要与后端对象的属性名一致
3.点击弹出提示框时记得清除提示框的数据，防止第二次填写的时候数据仍然存在
4.如果需要将json请求自动封装到javabean中需要指定@RequestBody否则会报错500

5.如果后端需要返回json数据需要在方法上配置@ReponseBody否则会报错404

1.需求分析

2.设计结构

3.编写Service层

1.创建文件夹

2.FurnService.java

package com.sun.furn.service;
import com.sun.furn.bean.Furn;
/**
 * @author 孙显圣
 * @version 1.0
 */
public interface FurnService {
    //增加一条记录
    public void save(Furn furn);
}

3.FurnServiceImpl.java

package com.sun.furn.service.impl;
import com.sun.furn.bean.Furn;
import com.sun.furn.dao.FurnMapper;
import com.sun.furn.service.FurnService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
/**
 * @author 孙显圣
 * @version 1.0
 */
@Service
public class FurnServiceImpl implements FurnService {
    //注入一个FurnMapper的代理对象
    @Resource
    private FurnMapper furnMapper;
    @Override
    public void save(Furn furn) {
        furnMapper.insertSelective(furn);
    }
}

4.单元测试 FurnServiceTest.java

package com.sun.furn.service;
import com.sun.furn.bean.Furn;
import org.junit.Before;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import java.math.BigDecimal;
/**
 * @author 孙显圣
 * @version 1.0
 */
public class FurnServiceTest {
    //获取ioc容器
    private ApplicationContext ioc;
    //获取针对FurnService接口的代理对象
    private FurnService furnService;
    //初始化方法，在所有测试方法之前执行
    @Before
    public void init() {
        //读取sping配置文件，获取ioc容器，此时所有的单例bean已经被反射创建bean对象，依赖注入，初始化完毕
        ioc = new ClassPathXmlApplicationContext("applicationContext.xml");
        //获取针对FurnService接口的代理对象
        furnService = ioc.getBean(FurnService.class);
    }
    @Test
    public void save() {
        Furn furn = new Furn(null, "桌子", "熊猫家居", new BigDecimal(12.3), 21, 11, "assets/images/product-image/14.jpg");
        furnService.save(furn);
    }
}

5.指定默认图片位置

1.Furn.java 为imgPath设置默认值

2.Furn.java 的全参构造器内判断imgPath是否为空

4.返回json数据的通用类com/sun/furn/bean/Msg.java

package com.sun.furn.bean;
import java.util.HashMap;
import java.util.Map;
/**
 * 返回数据到前端的通用类
 * @author 孙显圣
 * @version 1.0
 */
public class Msg {
    //状态码
    private int code;
    //成功或失败的信息
    private String msg;
    //要返回的信息（一个map就是一个json对象）
    private Map extend = new HashMap();
    //静态方法，获取成功的Msg对象
    public static Msg success() {
        Msg success = new Msg();
        //设置状态码和成功的信息
        success.setMsg("success");
        success.setCode(200);
        return success;
    }
    //静态方法，获取失败的Msg对象
    public static Msg fail() {
        Msg fail = new Msg();
        fail.setCode(400);
        fail.setMsg("fail");
        return fail;
    }
    //添加要返回的信息到Msg,并且返回这个对象
    public Msg add(String key, Object value) {
        extend.put(key, value);
        //在使用这个add之前一定是要有一个这个Msg类型的对象
        //当这个对象调用这个实例方法时，为这个对象的属性添加一个值，然后直接返回this就是当前对象
        return this;
    }
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Map getExtend() {
        return extend;
    }
    public void setExtend(Map extend) {
        this.extend = extend;
    }
}

5.编写Controller层

com/sun/furn/controller/FurnController.java

package com.sun.furn.controller;
import com.sun.furn.bean.Furn;
import com.sun.furn.bean.Msg;
import com.sun.furn.service.FurnService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
/**
 * @author 孙显圣
 * @version 1.0
 */
@Controller //单例bean注入容器
public class FurnController {
    @Resource //依赖注入，指向针对FurnService接口的代理对象
    private FurnService furnService;
    @ResponseBody //将结果转换成json字符串返回
    @PostMapping("/save")
    public Msg save(@RequestBody Furn furn) { //将接受到的json字符串转换成Furn对象
        furnService.save(furn);
        //如果没有报错，则返回成功的Msg对象
        return Msg.success();
    }
}

6.使用postman测试

1.后端引入处理json数据的依赖jackson

2.pom.xml

  
    
      com.fasterxml.jackson.core
      jackson-databind
      2.12.4

3.设置Content-Type

4.进行测试

7.点击新增，前端显示添加表单

1.HomeView.vue在div结束之前添加提示框显示表单

注意：表单属性的名字必须与Furn的属性名一致
```
    
    
      
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
      
      
        
        取 消
        确 定
        
      
    
```
2.为新增按钮绑定一个点击事件



3.设置数据池
- 注意：这里的表单对象不需要设置属性，因为在使用表单名.属性的时候就会自动设置属性值
- 这里虽然是单向绑定，但是效果确跟双向绑定类似
  
  
  4.结果展示，点击新增
  
  
  
  5.解决bug，当点击取消之后再次点击新增数据仍然存在
  
  
  
  8.创建Axios Request对象发送请求给后台
  
  1.前端项目安装Axios
  
  1.在IDEA的命令行，的前端项目文件夹输入 npm i axios -S
  
  2.无法识别nodejs，直接使用命令行到前端项目文件夹执行命令
  
  
  
  2.创建工具文件封装axios request对象
  
  1.创建一个js工具文件src/utils/request.js
  
  2.编写工具文件，封装axios request对象设置Content-Type为json
```
//引入axios
import axios from "axios";
//通过axios创建request对象
const request = axios.create({
    timeout: 5000 //设置超时时长为5秒
})
//创建request的拦截器，在请求之前做统一的处理，这里是设置Content-Type
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8'
    return config
}, error => {
    //如果出错则不继续执行
    return Promise.reject(error)
})
//导出
export default request
```
  3.跨域问题
  
  1.修改HomeView.vue在methods中编写save方法将表单数据提交到后端
  
  
  
  2.出现跨域问题
  
  
  
  3.跨域问题分析
  - localhost:9999去请求localhost:8080
  - 是浏览器阻止了localhost:9999的请求而不是localhost:8080拒绝了请求
    4.解决跨域问题
    
    1.修改vue.config.js，设置代理，解决跨域问题
    - 这里的target就是要请求的后端网址的一部分，至少要包括http://localhost:8080
```
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true
})
module.exports = {
    devServer: {
        port: 9999, //启动端口
        //设置代理，解决跨域问题
        proxy: {
            '/api': {
                target: 'http://localhost:8080/ssm', //这样设置/api就代表了http://localhost:8080/ssm
                changeOrigin: true, //是否设置同源，这样浏览器就允许跨域访问
                pathRewrite: { //路径重写
                    '/api': '' //选择忽略拦截器里面的单词
                }
            }
        }
    }
}
```
      2.修改HomeView.vue
      
      5.成功返回数据
      
      
      
      9.添加家居注意事项
      
      1.在使用postman测试的时候需要指定Content-Type否则会报错415
      
      2.表单数据的名字需要与后端对象的属性名一致
      
      3.点击弹出提示框时记得清除提示框的数据，防止第二次填写的时候数据仍然存在
      
      4.如果需要将json请求自动封装到javabean中需要指定@RequestBody否则会报错500
      
      5.如果后端需要返回json数据需要在方法上配置@ReponseBody否则会报错404
      - 因为如果不写这个注解，他会认为你返回的一个数据是要找一个页面