(1)mapper.xml 写 select insert update delete(也就是crud)
(2)在controller一层写上crud方法
(3)postman测试一下可以的话就可以开始做前端的工作了
前端就用直接用创建一个department.vue
然后配置路由
main.js 引入axios
注释掉模拟数据
修改Department.vue这里面界面
当修改完之后 会出现跨域问题 因为我后端是80端口 前端是8080端口
去网上查了一下解决方案 就升了web和webmvc的版本 升到了4.2.5 然后在controller那一层加上@CrossOrigin就解决了跨域问题了
搜到的跨域问题解决方法 记一下
跨域问题怎么解决
(1)jsonp–很早的
动态的构造的 标签
缺陷:
get请求/服务支持
(2)通过nginx (部署) – 解决跨域问题 – 反向代理机制
类似 中间商 ,把访问后台的请求 转换访问自己, 让那个nginx去访问后台,把结果那会,在转给前台
缺点:
部署服务,做配置
(3) CORS机制: 跨域资源共享"(Cross-origin resource sharing) "
解决 跨域问题 (浏览器有同源策略,(相同域名,相同的端口,相同协议),如果不是同源,存在跨域问题)
发送请求: 普通请求 发送一次,后台服务需要运行访问 …
特殊请求 发送二次, 第一次是预检请求, 服务器也要运行预检, 前台发现预检通过,在发送真实请求
真实请求也需要服务器允许
解决:都需要服务允许
注解: 版本 spring版本 4.2.5 以后才支持注解
@CrossOrigin
前端的代码发一份算了 就写了一个字段测试了一下
下面是department.vue的代码
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getDepartments">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="departments" highlight-current-row v-loading="loading" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column label="操作" width="150">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
filters: {
name: ''
},
loading: false,
departments: [
],
editFormVisible: false,//编辑界面是否显示
editLoading: false,
editFormRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
//编辑界面数据
editForm: {
id: 0,
name: '',
sex: -1,
age: 0,
birth: '',
addr: ''
},
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
//新增界面数据
addForm: {
name: '',
}
}
},
methods: {
//获取用户列表
getDepartments: function () {
this.loading = true;
/*这儿提供了数据*/
this.$http.patch("/department").then((res) => {
console.debug(res);
this.departments = res.data;
this.loading = false;
//NProgress.done();
});
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = { id: row.id };
/*删除的方式居然这样 我还以为para有用*/
this.$http.delete("/department/"+row.id).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getDepartments();
});
}).catch(() => {
});
},
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
name: ''
};
},
addSubmit: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.addLoading = true;
//NProgress.start();
let para = Object.assign({}, this.addForm);
this.$http.put("/department",para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getDepartments();
});
});
}
});
},
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.editLoading = true;
let para = Object.assign({}, this.editForm);
this.$http.post("/department",para).then((res) => {
this.editLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getDepartments();
});
});
}
});
},
//显示编辑界面
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
}
},
mounted() {
this.getDepartments();
}
};
</script>
<style scoped>
</style>
接下来就是挂到路由上面 然后再main.js里面
import babelpolyfill from 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//import './assets/theme/theme-green/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
import routes from './routes'
//引用axios
import axios from 'axios'
//axios访问的位置钱要加上这个
axios.defaults.baseURL='http://localhost/'
// import Mock from './mock'
// Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'
//axios可以用$http这种格式进行访问
Vue.prototype.$http = axios
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)
//NProgress.configure({ showSpinner: false });
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
//NProgress.start();
if (to.path == '/login') {
sessionStorage.removeItem('user');
}
let user = JSON.parse(sessionStorage.getItem('user'));
if (!user && to.path != '/login') {
next({ path: '/login' })
} else {
next()
}
})
//router.afterEach(transition => {
//NProgress.done();
//});
new Vue({
//el: '#app',
//template: '<App/>',
router,
store,
//components: { App }
render: h => h(App)
}).$mount('#app')
```java
import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import Main from './views/Main.vue'
import Table from './views/nav1/Table.vue'
import Form from './views/nav1/Form.vue'
import user from './views/nav1/user.vue'
import Page4 from './views/nav2/Page4.vue'
import Page5 from './views/nav2/Page5.vue'
import Page6 from './views/nav3/Page6.vue'
import echarts from './views/charts/echarts.vue'
import Department from './views/department/department'
let routes = [
{
path: '/login',
component: Login,
name: '',
hidden: true
},
{
path: '/404',
component: NotFound,
name: '',
hidden: true
},
//{ path: '/main', component: Main },
{
path: '/',
component: Home,
name: '导航一',
iconCls: 'el-icon-message',//图标样式class
children: [
{ path: '/main', component: Main, name: '主页', hidden: true },
{ path: '/table', component: Table, name: 'Table' },
{ path: '/form', component: Form, name: 'Form' },
{ path: '/user', component: user, name: '列表' },
{ path:'/department',component : Department, name:"部门管理"}
]
},
{
path: '/',
component: Home,
name: '导航二',
iconCls: 'fa fa-id-card-o',
children: [
{ path: '/page4', component: Page4, name: '页面4' },
{ path: '/page5', component: Page5, name: '页面5' }
]
},
{
path: '/',
component: Home,
name: '',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{ path: '/page6', component: Page6, name: '导航三' }
]
},
{
path: '/',
component: Home,
name: 'Charts',
iconCls: 'fa fa-bar-chart',
children: [
{ path: '/echarts', component: echarts, name: 'echarts' }
]
},
{
path: '*',
hidden: true,
redirect: { path: '/404' }
}
];
export default routes;