什么是跨域
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制
- 广义的跨域
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、
<frame>等dom标签，
还有样式中background:url()、
@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
- 跨域不一定存在跨域问题
跨域问题：浏览器针对ajax请求时，如果不同的服务，存在跨域浏览器机制，同源策略拦截跨域的访问
-
如何解决跨域问题
1.jsonp---json变种
localhost/user/list -- > <scprit src="/localhost/user/list">
缺点：
需要服务支持，只能发起GET请求
2.nginx方案
image.png
缺点
必须安装nginx
3.cors
同源
相同协议，相同域名，相同端口
用法
- 写一个配置类
- spring注解 @CrossOrigin（需要spring4.2版本及以上支持）
前端CRUD
新增
<!--新增界面-->
<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-item label="年龄">
<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
</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>
//新增
addSubmit: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addLoading = true;
let para = Object.assign({}, this.addForm);
this.$http.put("/user/save",para).then(res=>{
/* addUser(para).then((res) => {*/
this.addLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getUsers();
});
});
}
});
},
修改
<!--编辑界面-->
<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-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</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>
//编辑
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
//NProgress.start();
let para = Object.assign({}, this.editForm);
this.$http.post("/user/update",para).then(res=>{
/* editUser(para).then((res) => {*/
this.editLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getUsers();
});
});
}
});
},
删除
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
/* let para = { id: row.id };*/
this.$http.delete("/user/delete/"+row.id).then(res=>{
/*removeUser(para).then((res) => {*/
this.listLoading = false;
let {isSuccess,msg} = res.data;
if(isSuccess) {
this.$message({
message: '删除成功',
type: 'success'
});
}else{
this.$message({
message: msg,
type: 'error'
});
}
this.getUsers();
});
}).catch(() => {
});
},
查询列表
//获取用户列表
getUsers() {
let para = {
page: this.page,
name: this.filters.name
};
this.listLoading = true;
this.$http.patch("/user/list",para).then(res=>{
this.users=res.data;
//NProgress.start();
//getUserListPage(para).then((res) => {
//this.total = res.data.total;
//this.users = res.data.users;
this.listLoading = false;
//NProgress.done();
});
},
