將之前前端寫的表格內(nèi)容,與數(shù)據(jù)庫新建的表進(jìn)行對應(yīng)

啟動項(xiàng)目

把寫死的TableDa數(shù)據(jù)刪掉.因?yàn)樽罱K要從后臺讀取

完善新增接口

<el-button type="primary" @click="add">新增</el-button>

定義add()方法,可以用來定義打開新的彈窗

add() {},

再新增按鈕處加上一個彈窗,通常情況下新增數(shù)據(jù)的時候都是在一個新窗口下進(jìn)行的;

前往Element官網(wǎng)查看

https://element-plus.gitee.io/zh-CN/component/dialog.html

利用Dialog 對話框 組件

<el-dialog v-model="dialogVisible" title="Tips" width="30%"><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></span></template></el-dialog>

放在最外層的 <div> 處

并定義一下dialogVisible的默認(rèn)值為false

Diolog對話框要想彈出內(nèi)容帶有表格的話可以參考

在add方法里面定義窗口彈窗是打開的

this.dialogVisible = true

其余的地址,性別,年齡等表單的屬性就可以仿照用戶名來寫,直接復(fù)制然后稍作修改就可以

<el-form-item label="用戶名"><el-input v-model="form.username" style="width: 80%"></el-input></el-form-item><el-form-item label="昵稱"><el-input v-model="form.nickName" style="width: 80%"></el-input></el-form-item><el-form-item label="年齡"><el-input v-model="form.age" style="width: 80%"></el-input></el-form-item><el-form-item label="性別"><el-radio v-model="form.sex" label="男" size="large">男</el-radio><el-radio v-model="form.sex" label="女" size="large">女</el-radio><el-input v-model="form.sex" style="width: 80%"></el-input></el-form-item><el-form-item label="地址"><el-input type="textarea" v-model="form.address" style="width: 80%"></el-input></el-form-item>

這里性別做了單項(xiàng)選擇, 地址設(shè)置了文本域;

最后新增用戶信息的時候要設(shè)置一下清空表單域

this.form={}

目的是清除之前輸入的數(shù)據(jù)

最后需要設(shè)置一下將前臺輸入的數(shù)據(jù)傳入到后臺里面,

在窗口確認(rèn)處作設(shè)置

<el-button type="primary" @click="save">確認(rèn)</el-button>

編寫save()方法

主要利用工具axios 來完成前后端數(shù)據(jù)的交互

在Vue工程下面新建工具類utils與request.js文件

request.js是用來封裝 axios 數(shù)據(jù)訪問的插件

首先需要引入axios 組件

npm i axios -s

request.js引入axios用來請求數(shù)據(jù)，封裝的代碼如下：

import axios from 'axios'const request = axios.create({baseURL: '/api', // 注意！！ 這里是全局統(tǒng)一加上了 '/api' 前綴，也就是說所有接口都會加上'/api'前綴在，頁面里面寫接口的時候就不要加 '/api'了，否則會出現(xiàn)2個'/api'，類似 '/api/api/user'這樣的報錯，切記！！！timeout: 5000 })// request 攔截器 // 可以自請求發(fā)送前對請求做一些處理 // 比如統(tǒng)一加token，對請求參數(shù)統(tǒng)一加密 request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 設(shè)置請求頭return config }, error => {return Promise.reject(error) });// response 攔截器 // 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果 request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù)if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)} )export default request

配置好之后接著來完善 save() 方法

save(){request.post("/user",this.form).then(res =>{console.log(res)})},

若此時前后端不能正常的交互需要配置一下跨域

// 跨域配置 module.exports = {devServer: { //記住，別寫錯了devServer//設(shè)置本地默認(rèn)端口 選填port: 9876,proxy: { //設(shè)置代理，必須填'/api': { //設(shè)置攔截器 攔截器格式 斜杠+攔截器名字，名字可以自己定target: 'http://localhost:9090', //代理的目標(biāo)地址changeOrigin: true, //是否設(shè)置同源，輸入是的pathRewrite: { //路徑重寫'/api': '' //選擇忽略攔截器里面的內(nèi)容}}}} }

在vue項(xiàng)目工程下創(chuàng)建
vue.config.js

測試一下新增接口

在新增接口處下斷點(diǎn)

有信息傳了進(jìn)來

下一步要做的就是把數(shù)據(jù)從后臺傳到前端進(jìn)行展示渲染

總結(jié)

以上是生活随笔為你收集整理的从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。