我发现我好久没有更新了，写一篇证明我还活着。
既然是前后端分离的话，肯定是要有前端和后端的。
这里前端我使用的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
