从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应
启动项目
把写死的TableDa数据删掉.因为最终要从后台读取
完善新增接口
<el-button type="primary" @click="add">新增</el-button>
定义add()方法,可以用来定义打开新的弹窗
add() {},
再新增按钮处加上一个弹窗,通常情况下新增数据的时候都是在一个新窗口下进行的;
前往Element官网查看
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的默认值为false
Diolog对话框要想弹出内容带有表格的话可以参考
在add方法里面定义窗口弹窗是打开的
this.dialogVisible = true
其余的地址,性别,年龄等表单的属性就可以仿照用户名来写,直接复制然后稍作修改就可以
<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>
这里性别做了单项选择, 地址设置了文本域;
最后新增用户信息的时候要设置一下清空表单域
this.form={}
目的是清除之前输入的数据
最后需要设置一下将前台输入的数据传入到后台里面,
在窗口确认处作设置
<el-button type="primary" @click="save">确认</el-button>
编写save()方法
主要利用工具axios 来完成前后端数据的交互
在Vue工程下面新建工具类utils与request.js文件
request.js是用来封装 axios 数据访问的插件
首先需要引入axios 组件
npm i axios -s
request.js引入axios用来请求数据,封装的代码如下:
import axios from 'axios'const request = axios.create({baseURL: '/api', // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 设置请求头return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据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//设置本地默认端口 选填port: 9876,proxy: { //设置代理,必须填'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定target: 'http://localhost:9090', //代理的目标地址changeOrigin: true, //是否设置同源,输入是的pathRewrite: { //路径重写'/api': '' //选择忽略拦截器里面的内容}}}}
}
在vue项目工程下创建
vue.config.js
测试一下新增接口
在新增接口处下断点
有信息传了进来
下一步要做的就是把数据从后台传到前端进行展示渲染
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口相关推荐
- 从0搭建一个Springboot+vue前后端分离项目(八)把数据从后台传到前端进行展示渲染,完善增删改查
首先引入hutool工具类 Hutool是一个Java工具包类库,对文件.流.加密解密.转码.正则.线程.XML等JDK方法进行封装,组成各种Util工具类 Hutool是一个小而全的Java工具类库 ...
- 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
- 从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏
https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分 选定menu菜单,选择竖型样式的 复制一下 <el-menudefau ...
- 从0搭建一个Springboot+vue前后端分离项目(五)创建后台Springboot工程
前往Springboot官网 https://start.spring.io/ 选择版本和依赖 SpringWeb: 可以实现接口的开发; MysqlDriver:连接数据库; Lombok简化jav ...
- 从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架
因为搭建一个后台管理系统,如果要手写CSS样式很繁琐,这里使用ELement框架 安装Element npm install element-plus --save 引入Element import ...
- 从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建
把(一)里面创建好的项目文件夹拖入到IDEA里面 进行完上步操作后就可以快捷的启动项目了 这里稍微修改一下可以让我们启动项目后,自动地打开页面 页面搭建和改造 对此项目文件进行改造,改造成最终我们需要 ...
- 从0搭建一个Springboot+vue前后端分离项目(六)后台编写配置类与接口
新建一个包,里面放入一些常用的配置类 引入mybatis-plus包与插件 引入包 前往官网查看 https://baomidou.com/pages/226c21/#%E5%88%9D%E5%A7% ...
- 阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目 最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
- 超详细!4小时开发一个SpringBoot+vue前后端分离博客项目!!
小Hub领读: 前后端分离的博客项目终于出来啦,真是花了好多心思录制咧.文末直接进入B站看视频哈! 作者:吕一明 项目代码:https://github.com/MarkerHub/vueblog 项 ...
最新文章
- 使用U-Nets和深度学习进行自动缺陷检查
- Golang + vscode 开发环境配置
- bzoj1854 [Scoi2010]游戏——匈牙利算法
- 反射获取成员方法并运行
- 开源评论:QQ真的会“开放”和“共享”吗?
- Presenter层如何高度的复用
- 树——一种数据结构(二)
- mysql 数据库乱码的解决办法_数据库 MySQL中文乱码解决办法总结
- linux方舟部落日志显示攻击者,r7800日志显示被攻击
- 树的存储_ 双亲表示法 及 双亲孩子表示法
- 金融用计算机,CFA考试指定计算器使用攻略
- 2019年互联网寒冬,带你走进真实的面试杀出重围
- pulseaudio,gmediarender
- 使用Elasticsearch搭建一个文件搜索系统(带界面)
- linux什么系统以dd镜像写入,linux下使用dd命令写入镜像文件到u盘
- Tensorflow项目中--FLAGS=tf.flags.FLAGS
- 如何将域名指向本地服务器
- soundwire修改服务器,SoundWire Server,电脑声音实时同步到移动手机
- Java String.contains()方法
- 玫瑰花瓣 c4d_在玫瑰周围打花瓣
热门文章
- 基于Spring boot + Mybatis +Netty 实现前后端分离的聊天App,部署到阿里云线上服务器...
- Redis入门基础详解
- 如何正确使用Java8的Optional机制
- Solr集群搭建,zookeeper集群搭建,Solr分片管理,Solr集群下的DataImport,分词配置。...
- 《代码整洁之道:程序员的职业素养》一一1.5 参考文献
- Kubernetes v1.6开始支持RBAC
- 【solr5.5环境搭建】在tomcat8里面部署solr5.5
- PHPExcel 常用方法
- [CareerCup] 14.4 Templates Java模板
- Eucalyptus系统部署