前后端分离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 ...
随机推荐
- 【Luogu P1972】HH的项链
Luogu P1972 一开始非常naive随便打了个树状数组统计就交上去了,然后不出意料的爆零了-- 然后删一删改一改过了. 重点:对于区间[1,r]中重复出现的数,我们只需要关心最右边那一个是否在 ...
- Linux job control
Linux 系统中有一个 job control 的概念,本文简单介绍什么是 job,以及常见的 job control 命令.本文中演示部分使用的环境为 ubuntu 18.04. 进程组(job) ...
- django restful framework 一对多方向更新数据库
目录 django restful framework 序列化 一 . 数据模型: models 二. 序列化: serializers 三, 视图: views 四, 路由: urls 五. 测试 ...
- python名称空间和作用域
python名称空间和作用域 名称空间 名称空间:例如a=1000,python解释器会开辟一块新的内存来存贮1000这个变量值,然后会有一个a指向这个1000,那么a存在哪里?其实他和变量值差不多, ...
- C语言|博客作业10
问题 回答 C语言 博客作业10 这个作业要求在哪里 作业要求 我在这个课程的目标是 熟练循环语句的用法 这个作业在哪个具体方面帮助我实现目标 pta作业 参考文献 <C语言程序设计> 1 ...
- IDEA 自定义代码块
使用快捷键(ctrl+alt+s)找到:从idea的菜单File->Settings->Editor->Live Templates 先添加Template Group,然后添加Li ...
- .Net Core3.1下使用Swagger搭建web api项目
前言:微软于前天发布.net core 3.1正式版,并将长期支持3.1.所以我听到这个消息后就急忙下载.net core 3.1的SDK和Runtime,应该是公司最先用3.1的攻城狮了
- jQuery中带有异步Ajax代码的执行顺序
1.问题 在使用jQuery的时候想通过Ajax请求来放所需要的html代码中放值,但是请求回来却是空的,源代码如下: $("a").click(function() { // ...
- 【nodejs原理&源码赏析(4)】深度剖析cluster模块源码与node.js多进程(上)
[摘要] 集群管理模块cluster浅析 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 概述 cluster模块是node.js中用于实现和管理 ...
- 【开发记录】Linux常用命令记录(一)
记录CentOS下,常用的命令.有时候很难记得清楚,同时方便新来的同学查阅.(将不停的追加和完善) 1)查看CPU情况 cat /proc/cpuinfo |grep "model name ...