day03-功能实现02

功能实现02

后端：https://github.com/liyuelian/furniture-back-end.git
前端：https://github.com/liyuelian/furniture-front-end.git

3.功能03-添加家居信息

3.1需求分析

浏览器页面点击添加按钮，弹出提示框，填写家居信息，点击确定，可以把数据添加到数据库中。
3.2思路分析

• 完成后台代码 dao->service->controller，并对每层代码进行测试，到controller层使用postman发送http post请求完成测试
  
• 完成前端代码，使用axios 发送ajax请求（json数据）给后台，实现添加家居信息
  

3.3代码实现

后端项目使用的是 ssm 框架，src 下分为 bean，dao，service，controller，utils层，其中 controller 层由springmvc 接管，service 层由 spring 接管，dao 层由 mybatis 接管。
相比于传统的 Javaweb 项目，它的三层结构并没有发生根本变化，仅仅是框架化了，各组件由框架接管。原本的 jsp 则页面变成了 vue 前端项目。
3.3.1后端代码

由于使用了逆向工程，bean 层、dao 层以及dao层接口对应的mapper映射文件已经生成，因此暂时不必在这两层编写代码了。
（1）Service层，创建对应的接口和实现类
FurnService.java（接口）

1. package com.li.furn.service;
3. import com.li.furn.bean.Furn;
5. /**
6. * @author 李
7. * @version 1.0
8. */
9. public interface FurnService {
10.     //添加
11.     public void save(Furn furn);
12. }

复制代码

FurnServiceImpl.java（实现类）

1. package com.li.furn.service.impl;
3. import com.li.furn.bean.Furn;
4. import com.li.furn.dao.FurnMapper;
5. import com.li.furn.service.FurnService;
6. import org.springframework.stereotype.Service;
8. import javax.annotation.Resource;
10. /**
11. * @author 李
12. * @version 1.0
13. */
14. @Service //注入spring容器
15. public class FurnServiceImpl implements FurnService {
16.     //自动装配 FurnMapper接口对象（代理对象）
17.     @Resource
18.     private FurnMapper furnMapper;
20.     //已经在spring配置文件中开启事务
21.     @Override
22.     public void save(Furn furn) {
23.         furnMapper.insertSelective(furn);
24.     }
25. }

复制代码

测试代码：

1. package com.li.furn.test.service;
3. import com.li.furn.bean.Furn;
4. import com.li.furn.service.FurnService;
5. import org.junit.Before;
6. import org.junit.Test;
7. import org.springframework.context.ApplicationContext;
8. import org.springframework.context.support.ClassPathXmlApplicationContext;
10. import java.math.BigDecimal;
12. /**
13. * @author 李
14. * @version 1.0
15. */
16. public class FurnServiceTest {
17.     //spring容器
18.     private ApplicationContext ioc;
19.     //从spring容器中获取的是FurnService接口的代理对象
20.     private FurnService furnService;
22.     @Before
23.     public void init() {
24.         ioc = new ClassPathXmlApplicationContext("applicationContext.xml");
25.         //通过FurnService.class类型获取FurnService接口对象的代理对象
26.         furnService = ioc.getBean(FurnService.class);
27.     }
29.     @Test
30.     public void FurnServiceTest() {
31.         //添加数据
32.         Furn furn = new Furn(null, "复古沙发", "森林之家",
33.                 new BigDecimal(1088), 12, 28,
34.                 "/assets/images/product-image/7.jpg");
35.         furnService.save(furn);
36.         System.out.println("添加成功");
37.         //关闭sqlSession的动作底层会自动释放
38.     }
39. }

复制代码

测试成功：
（2）关于家居图片路径
给新增的家居增加一个默认图片的路径值，修改Furn.java（部分代码）：

1. //默认图片路径
2. private String imgPath = "assets/images/product-image/1.jpg";
4. public Furn(Integer id, String name, String maker, BigDecimal price,
5.             Integer sales, Integer stock, String imgPath) {
6.     this.id = id;
7.     this.name = name;
8.     this.maker = maker;
9.     this.price = price;
10.     this.sales = sales;
11.     this.stock = stock;
12.     //如果新的家具信息的图片不为空，或者不为空串时，就设置，否则为默认值
13.     //imgPath != null && !imgPath.equals("")
14.     // =>使用StringUtils.hasText()代替，该方法要求传入的字符串不是null，并且不是""，并且不能全为空格
15.     if (StringUtils.hasText(imgPath)) {
16.         this.imgPath = imgPath;
17.     }
18. }

复制代码

（3）bean层创建Msg.java，用来返回给前端 Json 数据的通用类，本质就是一个”协议“

1. package com.li.furn.bean;
3. import java.util.HashMap;
4. import java.util.Map;
6. /**
7. * @author 李
8. * @version 1.0
9. * 用来返回给前端Json数据的通用类
10. */
11. public class Msg {
12.     //状态码 200-成功 , 400-失败
13.     private int code;
14.     //信息-对返回的数据的说明
15.     private String msg;
16.     //返回给浏览器的数据-Map集合
17.     private Map<String, Object> extend = new HashMap<>();
19.     //几个常用的方法-封装好msg
21.     //返回一个success的 msg说明
22.     public static Msg success() {
23.         Msg msg = new Msg();
24.         msg.setCode(200);
25.         msg.setMsg("success");
26.         return msg;
27.     }
29.     //返回一个fail的 msg说明
30.     public static Msg fail() {
31.         Msg msg = new Msg();
32.         msg.setCode(400);
33.         msg.setMsg("fail");
34.         return msg;
35.     }
37.     //给返回的msg设置数据
38.     public Msg add(String key, Object value) {
39.         extend.put(key, value);
40.         return this;//返回的是当前Msg对象
41.     }
43.     //省略setter，getter方法
44. }

复制代码

（4）创建FurnController.java，处理添加家居请求

1. package com.li.furn.controller;
3. import com.li.furn.bean.Furn;
4. import com.li.furn.bean.Msg;
5. import com.li.furn.service.FurnService;
6. import org.springframework.stereotype.Controller;
7. import org.springframework.web.bind.annotation.PostMapping;
8. import org.springframework.web.bind.annotation.RequestBody;
9. import org.springframework.web.bind.annotation.ResponseBody;
11. import javax.annotation.Resource;
13. /**
14. * @author 李
15. * @version 1.0
16. */
17. @Controller//由springmvc来处理
18. public class FurnController {
19.     @Resource
20.     private FurnService furnService;
22.     /**
23.      * 1.响应客户端添加家居的请求
24.      * 2.@RequestBody 注解将客户端提交的json数据封装成 Javabean 对象。
25.      * 3.@ResponseBody 服务器返回的数据是按照json来返回的（底层是按照 http协议进行协商）
26.      *
27.      * @param furn
28.      * @return
29.      */
30.     @ResponseBody
31.     @PostMapping("/save")
32.     public Msg save(@RequestBody Furn furn) {
33.         furnService.save(furn);
34.         //如果没有出现异常，就返回成功
35.         Msg success = Msg.success();
36.         return success;
37.     }
38. }

复制代码

（5）Postman对Controller层进行测试

使用postman测试时，因为我们前台发送的是json数据，被服务器接收到后，转成Javabean数据，因此pom.xml需要引入jackson，处理json数据，否则后台会报错。

1. <dependency>
2. <groupId>com.fasterxml.jackson.core</groupId>
3. <artifactId>jackson-databind</artifactId>
4. <version>2.12.4</version>
5. </dependency>

复制代码

请求结果：

3.3.2前端代码

（1）修改HomeView.vue页面，代码略。

1. <template>
2.   
3.    
4.    
5.       <el-button type="primary" @click="add">新增</el-button>
6.       <el-button>其他</el-button>
7.    
8.    
9.       <el-input v-model="search"  placeholder="请输入关键字"/>
10.       <el-button  type="primary">查找</el-button>
11.    
13.    
14.       ...
16.    
17.     <el-dialog title="提示" v-model="dialogVisible" width="40%">
18.       <el-form :model="form" label-width="120px">
19.         <el-form-item label="家居名">
20.           <el-input v-model="form.name" ></el-input>
21.             ...
22.             ...
23.       </el-form>
24.       <template #footer>
25.         
26.           <el-button @click="dialogVisible=false">取 消</el-button>
27.           <el-button type="primary" @click="save">确 定</el-button>
28.         
29.       </template>
30.     </el-dialog>
31.   
32. </template>

复制代码

效果如下：
（2）安装axios，用于发送ajax请求给后台
（3）在前端项目的src目录下创建utlis目录，utils目录下创建工具文件request.js，用于创建axios request对象，发送ajax请求。

1. //引入axios包
2. import axios from "axios";
3. //通过axios创建request对象,用于发送请求到后端
4. const request = axios.create({
5.     timeout: 5000
6. })
8. //request拦截器的处理，它可以对请求做统一的处理
9. //1.可以对请求做统一的处理
10. //2.比如统一地加入token,Content-Type
11. request.interceptors.request.use(config => {
12.     config.headers['Content-Type'] = 'application/json;charset=utf-8';
13.     return config;
14. }, error => {
15.     return Promise.reject(error)
16. })
18. //导出request对象，在其他文件引入即可使用
19. export default request;

复制代码

如果启动前端项目，提示找不到axios，需要把光标放在import axios from ‘axios’ 的提示上，会有一个修复提示，点击导入axios即可。
（4）修改HomeView.vue，在methods编写save方法，并测试。

1. ...
2. save() {//将填写的表单数据发送给后端
3.   //第一个参数为url，第二个参数是请求携带的数据
4.   request.post('http://localhost:8080/save', this.form).then(res => {
5.     console.log("res-", res)
6.     this.dialogVisible = false;//隐藏表单
7.   })
8. }
9. ...

复制代码

测试向后端项目发送请求，因为前后端的服务ip不一致，会出现跨域问题，浏览器会阻止访问：
（5）在项目目录下的vue.config.js，解决跨域问题

1. ...
2. module.exports = {
3.     devServer: {
4.         port: 10001,//启动端口
5.         proxy: {//设置代理，必须填
6.             '/api': {//设置拦截器  拦截器格式
7.                 target: 'http://localhost:8080/',//代理的目标地址，就是/api代替的地址
8.                 changeOrigin: true,//是否设置同源，如果为true，就允许跨域
9.                 pathRewrite: {//路径重写
10.                     '/api': ''//选择忽略拦截器里面的单词
11.                 }
12.             }
13.         }
14.     }
15. }

复制代码

因为修改了配置文件，npm serve 需要重启，否则不能识别。
再次测试，成功发送数据：
3.4注意事项和细节

• 一定要确定request.post("/api/save")被代理后的url是项目后台服务对应提供的api接口url，否则报404
  
• postman测试时，要指定content-type，否则会出错（415错误）
  
• 如果后端需要将json提交的数据封装到对应的Javabean中，需要配置@RequestBody，否则会报错500
  
• 如果后端需要返回json数据，需要在方法上配置@ResponseBody，否则会报错404
  

4.功能04-显示家居信息

4.1需求分析

在页面中展示数据库的家居信息。
4.2思路分析

• 完成后台代码从dao-service-controller，并对每层代码进行测试
  
• 完成前台代码，使用axios发送http请求，返回所有家居数据，将数据绑定展示
  

4.3代码实现

4.3.1后端代码

分层完成，由于使用了逆向工程，bean 层、dao 层以及dao层接口对应的mapper映射文件已经生成，因此暂时不必在这两层编写代码了。
（1）service层，修改FurnService.java和FurnServiceImpl.java，增加findAll()方法。（展示不考虑分页问题）
FurnService.java：

1. //查询所有的家居信息
2. public List<Furn> findAll();

复制代码

FurnServiceImpl.java：

1. @Override
2. public List<Furn> findAll() {
3.     //如果传入为null表示返回所有的家居信息
4.     return furnMapper.selectByExample(null);
5. }

复制代码

（2）controller层，FurnController.java 处理现实家居的请求

1. @RequestMapping("/furns")
2. @ResponseBody
3. public Msg listFurns() {
4.     List<Furn> furnList = furnService.findAll();
5.     //将数据封装到 Meg对象中返回
6.     Msg msg = Msg.success();
7.     msg.add("furnList", furnList);
8.     return msg;
9. }

复制代码

（3）postman测试成功
4.3.2前端代码

（1）修改src/utils/request.js，增加response拦截器，统一处理响应后的结果

1. //response拦截器,可以在调用接口响应后，统一的处理返回结果
2. request.interceptors.response.use(
3.     response => {
4.         let res = response.data;
5.         //如果返回的是文件
6.         if (response.config.responseType === 'blob') {
7.             return res;
8.         }
9.         //如果返回的是string，就转成json对象
10.         if (typeof res === 'string') {
11.             //如果不为空，就转成json对象
12.             res = res ? JSON.parse(res) : res;
13.         }
14.         return res;
15.     }, error => {
16.         //如果失败
17.         console.log("err=", error);
18.         return Promise.reject(error);
19.     })

复制代码

（2）修改HomeView.vue，当现实页面之前就发出请求，然后将接收的数据显示到页面上

1. <template>
2.   
3.       ...
5.    
6.     <el-table :data="tableData" stripe >
7.       <el-table-column prop="id" label="ID" sortable></el-table-column>
8.       <el-table-column prop="name" label="家居名"></el-table-column>
9.         ...
10.         ...
11.       <el-table-column fixed="right" label="操作" width="100">
12.         <template #default="scope">
13.           <el-button link type="primary" size="small"
14.                      @click="handleEdit(scope.row)">编辑
15.           </el-button>
16.           <el-button link type="primary" size="small">删除</el-button>
17.         </template>
18.       </el-table-column>
19.     </el-table>
21.         ...
23.   
24. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！