php跨域curd,SpringBoot+Vue前后端分离(CURD)Demo
我发现我好久没有更新了,写一篇证明我还活着。
既然是前后端分离的话,肯定是要有前端和后端的。
这里前端我使用的Vue+ElementUI,后端采用的是SpringBoot+Mybatis+Swagger2。
下面的话,我就做一个简单的Demo吧。
写的不好,请大家各位大佬们指点
1、后端
后端的话,我是使用之前基础上面改的。EasyCode(代码神器)
1.1 pom.xml
io.springfox
springfox-swagger2
2.5.0
com.github.xiaoymin
swagger-bootstrap-ui
1.9.3
1.2 添加Swagger配置类
image.png
/**
* Swagger2
* 该项目访问地址:http://127.0.0.1:8089/doc.html
* @author wangxl
* @date 2019/8/16 20:19
*/
@Configuration
public class Swagger2 {
@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.vue.demo"))
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("Vue接口测试")
.description("简单优雅的restful风格")
.termsOfServiceUrl("www.wangxianlin@icloud.com")
.version("1.0")
.build();
}
}
1.3 添加注解
image.png
在启动类中,需要添加一个注解
image.png
1.4 然后启动项目
image.png
测试完,所有的接口没有问题了,现在我们就来编写前端的界面。
2、前端
前端,我使用的是Vue+ElementUi写的,界面简洁美观。
2.1 新建一个Vue项目
2.2 前端目录:
前端目录.png
前端界面,我是用的是element-ui,感觉界面看起来很舒服。
官网教程:Vue中安装element-ui
2.3 页面与配置
2.3.1 配置
1.config/index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// modeify
proxyTable: {
//modify
'/api/**': {
target: 'http://127.0.0.1:8089',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,//這裡true表示实现跨域
pathRewrite: {
'^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
},
2.src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.use(ElementUI)
axios.defaults.baseURL = 'http://localhost:8089/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
2.3.2 页面 table.vue
用户信息列表
@click="editUser(scope.$index, scope.row)">编辑
type="danger"
@click="deleteUser(scope.$index, scope.row)" icon="el-icon-delete">删除
添加
v-model="form.birthday"
type="date"
placeholder="请选择你的生日">
取 消
确 定
v-model="editform.birthday"
type="date"
placeholder="请选择你的生日">
取 消
确 定
export default {
data () {
return {
activeIndex: '1',
// 表格内容
tableData: [],
centerDialogVisible: false,
editformDialogVisible: false,
//添加表单
form: {
name: '',
sex: '',
address: '',
password: '',
birthday:''
},
//修改表单
editform: {
id:'',
name: '',
sex: '',
address: '',
password: '',
birthday:''
},
formLabelWidth: '80px'
}
},
methods: {
//添加用户
addUser () {
var _this = this
_this.centerDialogVisible = false
if (_this.form.name == '') {
alert('姓名不能为空')
return
}
if (_this.form.sex == '') {
alert('请选择你的性别')
return
}
if (_this.form.birthday == '') {
alert('请选择你的生日')
return
}
if (_this.form.address == '') {
alert('请填写你的家庭住址')
return
}
if (_this.form.password == '') {
alert('密码不能为空')
return
}
let user = JSON.stringify({
username: _this.form.name,
sex: _this.form.sex,
address: _this.form.address,
password: _this.form.password,
birthday:_this.form.birthday
})
_this.$axios.post('/api/user/insertUser', user, {
headers: {
'Content-Type': 'application/json;charset=utf-8' //头部信息
}
}).then(res => {
if (res.data == 1) {
_this.$message({
message: '添加成功',
type: 'success'
})
//刷新页面
this.getData()
}
}
).catch(error => {
_this.$message.error('添加失败,服务其内部错误')
})
},
//修改用户弹窗 赋值操作
editUser (index, row) {
var _this = this;
_this.editformDialogVisible=true;
_this.editform.id = row.id;
_this.editform.name = row.username;
_this.editform.sex = row.sex;
_this.editform.address = row.address;
_this.editform.password = row.password;
_this.editform.birthday = row.birthday;
},
//修改用户
updateUser(){
var _this = this;
_this.editformDialogVisible=false;
if (_this.editform.name == '') {
alert('姓名不能为空')
return
}
if (_this.editform.sex == '') {
alert('请选择你的性别')
return
}
if (_this.editform.birthday == '') {
alert('请选择你的生日')
return
}
if (_this.editform.address == '') {
alert('请填写你的家庭住址')
return
}
if (_this.editform.password == '') {
alert('密码不能为空')
return
}
let user = JSON.stringify({
id:_this.editform.id,
username: _this.editform.name,
sex: _this.editform.sex,
address: _this.editform.address,
password: _this.editform.password,
birthday:_this.editform.birthday
})
_this.$axios.post('/user/updateUser', user, {
headers: {
'Content-Type': 'application/json;charset=utf-8' //头部信息
}
}).then(res => {
if (res.data == 1) {
_this.$message({
message: '修改成功',
type: 'success'
})
//刷新页面
this.getData()
}
}
).catch(error => {
_this.$message.error('修改失败,服务其内部错误')
console.log(error)
})
},
//删除用户
deleteUser (index, row) {
// index 表示当前所在行的行号
// row 表示当前所在行的数据
this.$confirm('是否删除该用户?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var _this = this
_this.$axios.get('/user/deleteUserById', {
params: {
id: row.id
}
}).then(res => {
if (res.data == 1) {
_this.$message({
message: '删除成功',
type: 'success'
})
//刷新页面
this.getData()
}
}
).catch(error => {
_this.$message.error('删除失败,服务其内部错误')
console.log(error)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
getData () {
var _this = this
_this.$axios.get('/user/quertUser', {
params: {
offset: 0,
limit: 10
}
}
).then(res => {
this.tableData = res.data
}
).catch(error => {
console.log(error)
})
}
},
mounted () { //mounted:渲染HTML成功后调 用getData方法读取商品数据,getBrandsData读取品牌数据
this.getData()
}
}
3、测试
用户列表
用户列表展示.png
添加用户.
添加用户.png
修改用户.
修改用户.png
删除用户
删除用户.png
删除成功
删除成功.png
php跨域curd,SpringBoot+Vue前后端分离(CURD)Demo相关推荐
- 适合新手拿来练习的springboot+vue前后端分离小Demo
前言: 作者:神的孩子在歌唱 大家好,我叫智 练习springboot+vue前后端分离的Demo 一. 设计数据库 二 . springboot项目创建 2.1 基本配置 2.2 创建dao层 三. ...
- SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包 第二步:然后去写配置文件: 第 ...
- SpringBoot+Vue前后端分离
文章目录 前言 一.vue项目创建 二.SpringBoot项目创建 使用IDEA创建一个简单的SpringBoot项目,这里随便百度,参考很多 三.前后端整合 1.vue配置跨域跳转 2.sprin ...
- SpringBoot + Vue 前后端分离(用户信息更新头像上传Markdown图片上传)
文章目录 前言 用户信息更新 前端发送 后端接口 修改用户头像 前端 前端图片显示 图片上传 完整 代码 后端代码 图片存储 图片上传工具类 图片工具类的配置 工具类实现 效果 Markdown 图片 ...
- 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
- 基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目 赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
- 网上书城 springboot vue前后端分离
网上书城 springboot vue前后端分离 文章目录 网上书城 springboot vue前后端分离 前言 一.运行截图 二.pom文件 1.引入库 总结 前言 基于springboot vu ...
- 大二期末作孽(SpringBoot+Vue前后端分离博客社区(重构White Hole))
文章目录 前言 目录 效果演示 前言 由于时间关系,完成度确实不高,而且不签只是完成了客户端,当然目前这样也是已经可以正常使用了,当然有点勉强.不过后续还是会不断的去更新维护的,不过大体的架构是这样的 ...
- SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 前后端分离开发中的异常处理 统一结果封 ...
最新文章
- 数据库索引是什么?新华字典来帮你!
- 档案盒正面标签制作_包材工艺丨浅述模内标签印刷及材料的选择
- 相声演员侯耀文突发疾病去世享年59岁 深切怀念
- php使用curl库进行ssl双向认证
- web工程中spring+ibatis的单元测试--转载
- 电信信息日志使用mapreduce统计的两种方式
- web前端【补充】CSS补充
- 状态机复合状态 怎么写代码_状态不属于代码
- git学习心得之从远程仓库克隆
- 5s突然一直信号无服务器,手机突然没信号了怎么回事?
- ACM-ICPC 2018 徐州赛区网络预赛G (单调队列)
- Java企业面试算法新得体会之链表问题20问
- (转)PJAX的实现与应用
- (四)将容器部署到Azure上的Kubernetes
- 一个查询语句各个部分的执行顺序
- PyTorch-07 卷积神经网络(什么是卷积、卷积神经网络、池化层、Batch normalization、经典卷积网络、深度残差网络 ResNet、nn.Module、数据增强)
- 高等数学(第七版)同济大学 习题1-4 个人解答
- windows server2003/R2 安装IIS6(asp.net)
- JspStudy套件部署j2ee maven项目网址问题
- 单片机是嵌入式的子类
热门文章
- Linux oralce数据库更改字符集
- Oozie的简单使用
- 年薪20W的自动化测试工程师教你用Postman做接口测试
- Spell Boost
- exception in thread “main” org.apache.hadoop.hadooplllcgalargumentException:Ha is not enabled for
- Python实现三维切片mat文件保存某一张切片的图片
- 云端存储数据的5大不安全因素,主要有哪些?
- 华为鲲鹏处理器安装conda
- lightgbm java_LightGBM模型java部署
- 武汉理工大学计算机学院教授,饶文碧:武汉理工大学计算机科学与技术学院教授...