SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】

這篇具有很好參考價(jià)值的文章主要介紹了SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

SSM–功能實(shí)現(xiàn)

實(shí)現(xiàn)功能04-添加家居信息

需求分析/圖解

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

思路分析

完成后臺(tái)代碼從dao -> serivce -> controller , 并對(duì)每層代碼進(jìn)行測(cè)試, 到controller 這一層，使用Postman 發(fā)送http post 請(qǐng)求完成測(cè)試
完成前端代碼, 使用axios 發(fā)送ajax(json 數(shù)據(jù))給后臺(tái), 實(shí)現(xiàn)添加家居信息

代碼實(shí)現(xiàn)

創(chuàng)建src\main\java\com\nlc\furns\service\FurnService.java 和src\main\java\com\nlc\furns\service\FurnServiceImpl.java, 增加添加方法

public interface FurnService {
	public void save(Furn furn);
}

@Service
public class FurnServiceImpl implements FurnService {

    //注入/裝配FurnMapper接口對(duì)象(代理對(duì)象)
    @Resource
    private FurnMapper furnMapper;

    @Override
    public void save(Furn furn) {
        //解讀
        //1. 使用insertSelective
        //2. 因?yàn)槲覀兊膄urn表的id是自增的,就使用insertSelective
        furnMapper.insertSelective(furn);
    }

修改Furn.java , 當(dāng)創(chuàng)建Furn 對(duì)象imgPath 為null 時(shí), imgPath 給默認(rèn)值

private String imgPath = "assets/images/product-image/1.jpg";
public Furn(Integer id, String name, String maker, BigDecimal price,Integer sales, Integer stock, String imgPath) {
    this.id = id;
    this.name = name;
    this.maker = maker;
    this.price = price;
    this.sales = sales;
    this.stock = stock;
    if(!(imgPath == null || imgPath.equals("")) ){
    this.imgPath = imgPath;
}

創(chuàng)建ssm_vue\ssm\ssm\src\test\java\com\nlc\furns\service\FurnServiceTest.java ，測(cè)試方法

public class FurnServiceTest {
    //屬性
    private ApplicationContext ioc;
    //從spring容器中,獲取的是FurnService接口對(duì)象/代理對(duì)象
    private FurnService furnService;

    @Before
    public void init() {
        ioc = new ClassPathXmlApplicationContext("applicationContext.xml");
        //說明
        //1. 通過FurnService.class 類型獲取 FurnService接口對(duì)象/代理對(duì)象
        furnService = ioc.getBean(FurnService.class);
        //com.sun.proxy.$Proxy21
        System.out.println("furnService-" + furnService.getClass());
    }

    @Test
    public void save() {

        Furn furn =
                new Furn(null, "小風(fēng)扇", "順平家居", new BigDecimal(180), 10,
                        70, "assets/images/product-image/1.jpg");

        furnService.save(furn);

        System.out.println("添加成功~");
    }

創(chuàng)建ssm_vue\ssm\ssm\src\main\java\com\nlc\furns\bean\Msg.java用來返回json 的數(shù)據(jù)的通用類

// Msg: 后端程序返回給前端的json數(shù)據(jù)的Msg對(duì)象=》本質(zhì)就是數(shù)據(jù)規(guī)則
public class Msg {

    //狀態(tài)碼 200-成功 400-失敗
    private int code;
    //信息-說明
    private String msg;
    //返回給客戶端/瀏覽器的數(shù)據(jù)-Map集合
    private Map<String, Object> extend =
            new HashMap<>();

    //編寫幾個(gè)常用的方法-封裝好msg
    //返回success對(duì)應(yīng)的msg
    public static Msg success() {
        Msg msg = new Msg();
        msg.setCode(200);
        msg.setMsg("success");
        return msg;
    }

    //返回fail對(duì)應(yīng)的msg
    public static Msg fail() {
        Msg msg = new Msg();
        msg.setCode(400);
        msg.setMsg("fail");
        return msg;
    }

    //給返回的msg設(shè)置數(shù)據(jù)-不難應(yīng)該可以看懂
    public Msg add(String key, Object value) {
        extend.put(key, value);
        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<String, Object> getExtend() {
        return extend;
    }

    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }
}

4.創(chuàng)建FurnController.java , 處理添加請(qǐng)求

@Controller
public class FurnController {

    //注入配置FurnService
    @Resource
    private FurnService furnService;

    /**
     * 解讀
     * 1、響應(yīng)客戶端的添加請(qǐng)求
     * 2、@RequestBody: 使用 SpringMVC 的 @RequestBody 將客戶端提交的 json 數(shù)據(jù)，封裝成 JavaBean 對(duì)象
     * 3、@ResponseBody: 服務(wù)器返回的數(shù)據(jù)格式是按照 json 來返回的(底層是按照http協(xié)議進(jìn)行協(xié)商)
     */
    @PostMapping("/save")
    @ResponseBody
    public Msg save(@Validated @RequestBody Furn furn, Errors errors) {

        Map<String, Object> map = new HashMap<>();

        List<FieldError> fieldErrors = errors.getFieldErrors();
        for (FieldError fieldError : fieldErrors) {
            map.put(fieldError.getField(), fieldError.getDefaultMessage());
        }

        if (map.isEmpty()) {//說明后端校驗(yàn)通過,因?yàn)闆]有發(fā)現(xiàn)校驗(yàn)錯(cuò)誤
            furnService.save(furn);
            //返回成功msg
            return Msg.success();
        } else {
            //校驗(yàn)失敗，把校驗(yàn)錯(cuò)誤信息封裝到Msg對(duì)象，并返回
            return Msg.fail().add("errorMsg", map);
        }

    }

使用Postman 來完成Controller 層的測(cè)試, 通過Postman 添加Furn 數(shù)據(jù)

使用Postman 測(cè)試時(shí)，因?yàn)槲覀兦芭_(tái)是發(fā)送的json 數(shù)據(jù)，被服務(wù)器接收到后，轉(zhuǎn)成javabean 數(shù)據(jù)，因此pom.xml 需要引入jackson,處理json 數(shù)據(jù), 否則后臺(tái)會(huì)報(bào)錯(cuò).

//報(bào)錯(cuò)
Content type 'application/json;charset=UTF-8' not supported

  <!-- 引入jackson,處理json數(shù)據(jù) -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.4</version>
        </dependency>

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

點(diǎn)擊添加按鈕，可以出現(xiàn)添加家居的對(duì)話框, 修改C:\Users\Administrator\Desktop\desktop\d\SSM-Vue 整合項(xiàng)目-temp\ssm_vue\src\views\HomeView.vue , 說明el-dialog 從Dialog 對(duì)話框獲取, 表單代碼從Form 表單獲取，組合一下并調(diào)整一下即可

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

  <!-- 添加家居的彈窗
      說明:
      1. el-dialog ：v-model="dialogVisible" 表示對(duì)話框, 和dialogVisible 變量雙向綁定,控制是否顯示對(duì)話框
      2. el-form :model="form" 表示表單 ,數(shù)據(jù)和 form數(shù)據(jù)變量雙向綁定
      3. el-input v-model="form.name" 表示表單的input控件，名字為name 需要和后臺(tái)Javabean[Furn] 屬性一致
      4. 在前端中, 對(duì)象的屬性是可以動(dòng)態(tài)生成的 , 這個(gè)知識(shí)點(diǎn)，我們?cè)谥v前端技術(shù)棧講過
    -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
          <el-input v-model="form.name" style="width: 50%"></el-input>
          {{serverValidErrors.name}}
        </el-form-item>
        <el-form-item label="廠商" prop="maker">
          <el-input v-model="form.maker" style="width: 50%"></el-input>
          {{serverValidErrors.maker}}
        </el-form-item>
        <el-form-item label="價(jià)格" prop="price">
          <el-input v-model="form.price" style="width: 50%"></el-input>
          {{serverValidErrors.price}}
        </el-form-item>
        <el-form-item label="銷量" prop="sales">
          <el-input v-model="form.sales" style="width: 50%"></el-input>
          {{serverValidErrors.sales}}
        </el-form-item>
        <el-form-item label="庫(kù)存" prop="stock">
          <el-input v-model="form.stock" style="width: 50%"></el-input>
          {{serverValidErrors.stock}}
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">確 定</el-button>
          </span>
      </template>
    </el-dialog>

//增加數(shù)據(jù), 一定要, 否則你會(huì)發(fā)現(xiàn),在后面彈出的表單不能輸入數(shù)據(jù)
    data() {
        return {
            form: {},
            //增加方法
            methods: {
                add() {
                    this.dialogVisible = true
                    this.form = {}
    			}
			}
		}
	}
//增加點(diǎn)擊新增的按鈕事件
<div style="margin: 10px 0">
    <el-button type="primary" @click="add">新增</el-button>
    <el-button>其它</el-button>
</div>

完成測(cè)試: 看看點(diǎn)擊新增按鈕，能否正常的彈窗添加家居的對(duì)話框(含有表單)

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

項(xiàng)目前端安裝axios，用于發(fā)送Ajax 請(qǐng)求給后臺(tái)，一定要注意

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

創(chuàng)建工具文件ssm_vue\src\utils\request.js , 用于創(chuàng)建axios request 對(duì)象

//引入axios
import axios from "axios";
//通過axios創(chuàng)建對(duì)象-request對(duì)象,用于發(fā)送請(qǐng)求到后端
const request = axios.create({
    timeout: 5000
})

//request攔截器的處理
//1. 可以對(duì)請(qǐng)求做統(tǒng)一的處理
//2. 比如統(tǒng)一的加入token, Content-Type等
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8'
    return config
}, error => {
    return Promise.reject(error)
})


//response攔截器
//可以在調(diào)用接口響應(yīng)后，統(tǒng)一的處理返回結(jié)果
request.interceptors.response.use(
    response => {
        let res = response.data
        //如果返回的是文件,就返回
        if (response.config.responseType === 'blob') {
            return res
        }
        //如果是string, 就轉(zhuǎn)成json對(duì)象
        if (typeof res === 'string') {
            //如果res 不為null, 就進(jìn)行轉(zhuǎn)換成json對(duì)象
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log("err", error)
        return Promise.reject(error);
    }
)

//導(dǎo)出request對(duì)象, 在其它文件就可以使用
export default request

修改HomeView.vue , 在methods 編寫save 方法, 并測(cè)試會(huì)出現(xiàn)跨域問題

 //1. 將form 表單提交給/api/save 的接口
//2. /api/save 等價(jià)http∶//locaLhost∶10001/save
//3. 如果成功，就進(jìn)入then 方法
//4.res 就是返回的信息
//5.查看mysql 看看數(shù)據(jù)是否保存
save() {
    // =======說明====...
    request.post("/api/save", this.form).then(res => {
        console.log(res)
        this.dialogVisible = false
    })
}

11.這里容易出現(xiàn)的問題

一定要確定request.post(“/api/save”) 被代理后的url , 是項(xiàng)目后臺(tái)服務(wù)對(duì)應(yīng)提供的API接口url, 否則報(bào)404。
當(dāng)跨域執(zhí)行時(shí)請(qǐng)求，瀏覽器還是提示http://localhost:5927/api/xxx , 所以不要認(rèn)為是api沒有替換你的配置.

注意事項(xiàng)和細(xì)節(jié)

Postman 測(cè)試時(shí), 要指定content-type ,否則會(huì)報(bào)錯(cuò)415

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

如果需要將提交的json 數(shù)據(jù), 封裝到對(duì)應(yīng)的Javabean, 需要配置@RequestBody , 否則會(huì)報(bào)錯(cuò)500
如果需要返回json 數(shù)據(jù), 需要在方法上, 配置@ResponseBody , 否則會(huì)報(bào)錯(cuò)404

實(shí)現(xiàn)功能05-顯示家居信息

需求分析/圖解

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

思路分析

完成后臺(tái)代碼從dao -> serivce -> controller , 并對(duì)每層代碼進(jìn)行測(cè)試
完成前臺(tái)代碼, 使用axios 發(fā)送http 請(qǐng)求，返回所有家居數(shù)據(jù), 將數(shù)據(jù)綁定顯示

代碼實(shí)現(xiàn)

修改FurnService.java 和FurnServiceImpl.java, 增加findAll 方法

//FurnService
public List<Furn> findAll();

//FurnServiceImpl
//返回所有家居數(shù)據(jù)，傳入null 即可
@Override
public List<Furn> findAll() {
	return furnMapper.selectByExample(null);
}

修改FurnServiceTest.java ，測(cè)試findAll.

@Test
public void findAll() {
 	 List<Furn> furnList = furnService.findAll();
     for (Furn furn : furnList) {
   		System.out.println(furn);
     }
}

修改FurnController.java , 處理顯示請(qǐng)求, 并使用Postman 完成測(cè)試

@ResponseBody
@RequestMapping("/furns")
public Msg listFurns() {
    List<Furn> furnList = furnService.findAll();
    return Msg.success().add("furnsList", furnList);
}

修改HomeView.vue , 編寫list 方法

//修改一下el-table
<el-table : data="tableData" stripe style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        sortable
    >
    </el-table-column>
    <el-table-column
        prop="name"
        label="家居名"
    >
    </el-table-column>
    <el-table-column
        prop="maker"
        label="廠家">
    </el-table-column>
    <el-table-column
        prop="price"
        label="價(jià)格">
    </el-table-column>
    <el-table-column
        prop="sales"
        label="銷量">
    </el-table-column>
    <el-table-column
        prop="stock"
        label="庫(kù)存">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
            <el-button @click="handleEdit(scope.row)" type="text">編輯</el-button>
        <el-button type="text">刪除</el-button>
    </template>
</el-table-column>
</el - table >
    //修改一下tableData: []
    data() {
    return {
        form: {},
        dialogVisible: false,
        search: '',
        tableData: []
    }
}
//在created() 調(diào)用list() 完成頁(yè)面數(shù)據(jù)獲取
created() {
    this.list()
}
//編寫list() method
list() { //請(qǐng)求顯示家居列表-帶檢索
    request.get("/api/furns").then(res => {
        //綁定tableData, 顯示在表格
        this.tableData = res.data.extend.furnsList
    })
}
//在save() 調(diào)用后，調(diào)用list() 刷新頁(yè)面
save() {
    // =======說明====...
    request.post("/api/save", this.form).then(res => {
        console.log(res)
        this.dialogVisible = false
        this.list()
    })
}

完成測(cè)試，看看是否可以顯示家居列表信息.

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis

修改src\utils\request.js 增加response 攔截器，統(tǒng)一處理響應(yīng)后結(jié)果

//引入axios
import axios from "axios";
//通過axios創(chuàng)建對(duì)象-request對(duì)象,用于發(fā)送請(qǐng)求到后端
const request = axios.create({
    timeout: 5000
})
 
//request攔截器的處理
//1. 可以對(duì)請(qǐng)求做統(tǒng)一的處理
//2. 比如統(tǒng)一的加入token, Content-Type等
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8'
    return config
}, error => {
    return Promise.reject(error)
})
 
 
//response攔截器
//可以在調(diào)用接口響應(yīng)后，統(tǒng)一的處理返回結(jié)果
request.interceptors.response.use(
    response => {
        let res = response.data
        //如果返回的是文件,就返回
        if (response.config.responseType === 'blob') {
            return res
        }
        //如果是string, 就轉(zhuǎn)成json對(duì)象
        if (typeof res === 'string') {
            //如果res 不為null, 就進(jìn)行轉(zhuǎn)換成json對(duì)象
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log("err", error)
        return Promise.reject(error);
    }
)
 
//導(dǎo)出request對(duì)象, 在其它文件就可以使用
export default request

修改Home.vue , 簡(jiǎn)化返回處理
1. 完成測(cè)試.

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】,SSM,java,maven,mybatis 文章來源地址http://www.zghlxwxcb.cn/news/detail-632031.html

到了這里，關(guān)于SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--具體功能實(shí)現(xiàn)【三】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！