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