前后端分离crud(跨域问题)讲解
1 前后端分离
1.1 后端
ssm+maven 多模块
swagger 文档描述(代码拷贝过来,就可以生成了,https://www.cnblogs.com/wings-xh/p/11991511.html 里面的swagger)
postman 测试
请求 put / get / post / patch / delete
1.2 前端
Nodejs:前端服务
npm:管理js库 依赖关系
webpack:对静态资源打包
vuejs:MVVM(model view view
Model 双向绑定)模式的开发js库
ElementUI:前端ui框架
vuecli:vue开发脚手架,能够快速搭建vue项目,里面包含了webpack的打包配置,服务器热启动
2 后端的crud
(1) mapper.xml中写select、insert、update、delete
<mapper namespace="cn.itsource.crm.mapper.DepartmentMapper">
<select id="findAll" resultType="Department">
select * from t_department
</select>
<select id="findOne" parameterType="long" resultType="Department">
select * from t_department where id=#{id}
</select>
<insert id="save" parameterType="Department">
insert into t_department(name) values(#{name})
</insert>
<update id="update" parameterType="Department">
update t_department set name=#{name} where id=#{id}
</update>
<delete id="delete" parameterType="long">
delete from t_department where id=#{id}
</delete>
</mapper>
(2) 在对应的controller写上crud方法
3 前端界面处理
(1) 配置一个xxx.vue页面
(2) 配置路由
(3) main.js引入axios
(4) 注释掉模拟数据
(5) 修改xxx.vue这里面的内容
4 前端访问后端
4.1 哪些情况下会存在跨域
(1) 同一个域名,不同的端口 =》 属于跨域 localhost:8080 --> localhost:80
(2) 不同域名 =》 属于跨域 192.168.0.1 --> 192.168.0.2
(3) 二级域名不同 =》 属于跨域 miaosha.jd.com --> qianggou.jd.com
4.2 跨域问题
浏览器(同源策略)针对ajax请求,如果访问的是不同的域名,或者不同的端口,就会存在跨域问题。
同源策略:只允许相同协议,相同域名,相同的端口
4.3 跨域问题怎么解决
(1) jsonp -- 很早的
动态构造的标签,标签<script> 去访问资源
缺陷:get请求/需要服务支持
(2) 通过nginx(部署)--> 解决跨域问题 --> 反向代理机制
类似中间商,把访问后台的请求转换为访问自己,让nginx去访问后台,把结果拿回再转给前台。
缺点:部署服务,做配置
(3) CORS机制:跨域资源共享"(Cross-origin resource sharing)"
解决跨域问题:浏览器有同源策略(相同协议,相同域名,相同端口),如果不是同源,存在跨域问题,
浏览器会将ajax请求分为两类,其处理方案略有差异:简单请求、特殊请求
简单请求,发送一次,后台服务需要运行访问,
特殊请求,发送两次,第一次是遇见请求,服务器也要运行预检,前台发现预检通过,再发送真实请求,真实请求有需要服务器允许
可以使用注解一键配置:@CrossOrigin
注意:spring版本需要是4.2.5以后才支持注解
5 完成前端的crud
(1) 列表展示(一定要挂载)
/获取部门列表
getDepartments() {
this.listLoading = true;
//NProgress.start();
this.$http.patch("/department/list").then((res) => {
// this.total = res.data.total;
this.departments = res.data;
this.listLoading = false;
});
}
挂载代码:
mounted() {
this.getDepartments();
}
(2) 新增
//显示新增界面
handleAdd() {
this.addFormVisible = true;
this.addForm = {
name: ''
};
},
//新增
addSubmit() {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
//加载
this.addLoading = true;
//拷贝 this.addForm这个对象 para = {name:'xxx'}
let para = Object.assign({}, this.addForm);
this.$http.put("/department",para).then((res) => {
this.addLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
//验证的重置
this.$refs['addForm'].resetFields();
//关闭新增对话框
this.addFormVisible = false;
this.getDepartments();
});
});
}
});
}
(3) 编辑修改
//显示编辑界面
handleEdit(index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
//编辑
editSubmit() {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.editLoading = true;
//NProgress.start();
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();
});
});
}
});
}
(4) 删除
//删除
handleDel(index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
this.$http.delete("/department/" + row.id).then((res) => {
this.listLoading = false;
this.$message({
message: '删除成功',
type: 'success'
});
this.getDepartments();
});
}).catch(() => { });
}
前后端分离crud(跨域问题)讲解的更多相关文章
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- React:快速上手(8)——前后端分离的跨域访问与会话保持
React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...
- php前后端分离项目跨域问题解决办法
由于之前一直没有做过前后端分离项目,导致走了不少弯路,而且还采用了一种及其不优雅的方法 (在第一次请求的时候把服务器返回的session id保存起来,后续请求的时候把该session id作为参数传 ...
- 【js】【跨域问题】前后端分离的跨域问题
最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...
- 前后端分离之 跨域和JWT
书接上回:https://www.cnblogs.com/yangyuanhu/p/12081525.html 前后端分离案例 现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表 ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- 基于Java服务的前后端分离解决跨域问题
导语:解决跨域问题,前后端都增加相应的允许跨域的代码段即可. 一.后端增加允许跨域的代码,可以在具体controler层加,最好是在filter中添加,这样添加一次就够了,不用在每个controler ...
- 【笔记】总结Springboot和Vue前后端分离的跨域问题
跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...
- SpringBoot 实现前后端分离的跨域访问(CORS)
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
随机推荐
- Spring中的事务回滚机制
初学者笔记 问题:在Java项目汇中,添加@Transactional注解,报错之后,事务回滚未生效,数据仍插入数据库中.经查看报错位置位于新增成功之后.空指针异常. 一.特性 先了解一下@Trans ...
- 2019-9-26:渗透测试,基础学习,nmap扫描kali虚拟机服务
初识Nmap 1, 首先确定kali的ip地址,输入命令ifconfig 2, 开启所需要扫描的服务, 开启ssh:service ssh start, 确认ssh服务是否开启service ssh ...
- 了解HTTP协议,这一篇就够了
HTTP(Hyper Text Transfer Protocol:超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接的 ...
- wake on lan定时开机部署
在Linux下通过Wake On LAN实现网络唤醒远程开机 我们经常有这样的场景或需求,人在外面,需要将家里的机器或公司的机器开启,进行远程控制操作. 有几种方式可以实现远程开机,一是通过主板的来电 ...
- SpringBoot:带你认认真真梳理一遍自动装配原理
前言 Spring翻译为中文是“春天”,的确,在某段时间内,它给Java开发人员带来过春天,但是随着我们项目规模的扩大,Spring需要配置的地方就越来越多,夸张点说,“配置两小时,Coding五分钟 ...
- 原创001 | 搭上SpringBoot自动注入源码分析专车
前言 如果这是你第二次看到师长的文章,说明你在觊觎我的美色!O(∩_∩)O哈哈~ 点赞+关注再看,养成习惯 没别的意思,就是需要你的窥屏^_^ 本系列为SpringBoot深度源码专车系列,第一篇发车 ...
- 物缘科技主导IEEE可信物联网数据管理工作组启动会召开
2019年10月15日,由物缘科技主导的IEEE标准协会P2144 可信物联网数据管理工作组启动会在香港召开.物联网.区块链技术领域的企业代表和技术专家出席,共同就物联网数据管理.基于区块链的可信数据 ...
- uglify-js 和uglify-es
uglify-js 它不支持压缩 es6,参考github的issue It seems like uglify-js does not support es6? uglify-js在压缩代码时,遇到 ...
- base64编码的字符串与图片相互转换
#region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...
- HTTP报文(首部字段)
HTTP报文 请求报文/响应报文 结构: 报文首部 + (可选)报文主体(两者通过空行CR + LF来划分) 使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用的语言.认证信息等内容 HTTP ...