跨域访问
什么是跨域访问:
跨域 就是跨域名来访问的数据
哪些属于跨域访问:
不同ip地址:
域名: www.baidu.com(ip 192.168.0.1) www.taobao.com(ip 192.168.0.2)
同ip不同端口:
localhost:8080 — >localhost:80
二级域名:
www.wenku.baidu.com www.tieba.baidu.com
跨域不一定存在跨域问题
跨域问题:浏览器针对ajax请求,如果是不同服务,则存跨域
浏览器机制:同源策略拦截跨域行为
怎么解决跨域问题
1.jsonp方式–json变种
跨域问题链接
localhost/department/list
jsonp转化后的链接:
缺点:
需要服务支持 只能发起Get请求
2.nginx反向代理
缺点:需要安装nginx才能使用
3.cors
同源 ----相同协议,相同域名,相同端口
什么是cors:
cors: 一个w3c标准 跨域资源共享"(Cross-origin resource sharing)
要求:
只要同时满足以下两大条件,就属于简单请求。:
(1) 请求方法是以下三种方法之一:
- HEAD
- GET
- POST
(2)HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
服务器怎么允许这些 / get/post/delete/put/options /patch
解决方案:
(1)写一个配置类
(2)spring通过注解支持
CrossOrigin 注意: 4.2版本以后支持
前后端分离–CRUD
1.添加
<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>
//显示新增界面
handleAdd: function () {
this.addFormVisible = true;
//清空表单
this.addForm = {
name: ''
};
}
//新增
addSubmit: function () {
//提交之前的验证工作
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.addLoading = true;
//addForm={name:''} 新增form表单 para = {name:''}
let para = Object.assign({}, this.addForm);
//发送保存请求
// addUser(para).then((res) => {
this.$http.put("/department/save",para).then(res=>{
this.addLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
//重置表单
this.$refs['addForm'].resetFields();
//关闭新增对话框
this.addFormVisible = false;
this.getDepartments();
});
});
}
});
},
2.修改
html
<!--编辑界面-->
<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>
js:
//显示编辑界面
handleEdit: function (index, row) {
//弹出修改表单
this.editFormVisible = true;
//回显 row id name
this.editForm = Object.assign({}, row);
},
editSubmit: function () {
//验证是否正确
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.editLoading = true;
console.log(this.editForm);
let para = Object.assign({}, this.editForm);
this.$http.post("/department/update",para).then(res=>{
this.editLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getDepartments();
});
});
}
});
}
3.删除
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
//删除代码
this.listLoading = true;
//获取id值
this.$http.delete('/department/delete/'+row.id).then(res=>{
// removeUser(para).then((res) => {
this.listLoading = false;
//NProgress.done(); resultAjax
let {isSuccess,msg} = res.data;
if(isSuccess) {
this.$message({
message: '删除成功',
type: 'success'
});
}else{
this.$message({
message: msg,
type: 'error'
});
}
this.getDepartments();
});
}).catch(() => {
});
}
4.查询
getDepartments() {
//分页 过滤
let para = {
page: this.page,
name: this.filters.name
};
this.listLoading = true;
//发送请求 到后台去查询数据
this.$http.patch("/department/list",para).then(res=>{
this.departments = res.data;
this.listLoading = false;
});
}
SVN
SVN是一个代码管理工具
以后我们开发一个项目都是团队开发,在开发中我们合并代码不是用u盘拷贝,而是使用svn管理控制
svn的缺点:服务器一旦挂了,所有客户端都不能使用
学习代码管理工具的意义:
1.多人开发的代码合并问题
2.有效的解决代码冲突问题
3.svn可以回退到指定版本进行上线
处理冲突
什么情况 会存在冲突?
多个人在去修改同一个文件的,如果修改的版本号不一致 就可以出现