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(跨域问题)讲解的更多相关文章

  1. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  2. React:快速上手(8)——前后端分离的跨域访问与会话保持

    React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...

  3. php前后端分离项目跨域问题解决办法

    由于之前一直没有做过前后端分离项目,导致走了不少弯路,而且还采用了一种及其不优雅的方法 (在第一次请求的时候把服务器返回的session id保存起来,后续请求的时候把该session id作为参数传 ...

  4. 【js】【跨域问题】前后端分离的跨域问题

    最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...

  5. 前后端分离之 跨域和JWT

    书接上回:https://www.cnblogs.com/yangyuanhu/p/12081525.html 前后端分离案例 现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表 ...

  6. spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据

    1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...

  7. 基于Java服务的前后端分离解决跨域问题

    导语:解决跨域问题,前后端都增加相应的允许跨域的代码段即可. 一.后端增加允许跨域的代码,可以在具体controler层加,最好是在filter中添加,这样添加一次就够了,不用在每个controler ...

  8. 【笔记】总结Springboot和Vue前后端分离的跨域问题

    跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...

  9. SpringBoot 实现前后端分离的跨域访问(CORS)

    序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...

  10. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

随机推荐

  1. Spring中的事务回滚机制

    初学者笔记 问题:在Java项目汇中,添加@Transactional注解,报错之后,事务回滚未生效,数据仍插入数据库中.经查看报错位置位于新增成功之后.空指针异常. 一.特性 先了解一下@Trans ...

  2. 2019-9-26:渗透测试,基础学习,nmap扫描kali虚拟机服务

    初识Nmap 1, 首先确定kali的ip地址,输入命令ifconfig 2, 开启所需要扫描的服务, 开启ssh:service ssh start, 确认ssh服务是否开启service ssh ...

  3. 了解HTTP协议,这一篇就够了

    ​HTTP(Hyper Text Transfer Protocol:超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接的 ...

  4. wake on lan定时开机部署

    在Linux下通过Wake On LAN实现网络唤醒远程开机 我们经常有这样的场景或需求,人在外面,需要将家里的机器或公司的机器开启,进行远程控制操作. 有几种方式可以实现远程开机,一是通过主板的来电 ...

  5. SpringBoot:带你认认真真梳理一遍自动装配原理

    前言 Spring翻译为中文是“春天”,的确,在某段时间内,它给Java开发人员带来过春天,但是随着我们项目规模的扩大,Spring需要配置的地方就越来越多,夸张点说,“配置两小时,Coding五分钟 ...

  6. 原创001 | 搭上SpringBoot自动注入源码分析专车

    前言 如果这是你第二次看到师长的文章,说明你在觊觎我的美色!O(∩_∩)O哈哈~ 点赞+关注再看,养成习惯 没别的意思,就是需要你的窥屏^_^ 本系列为SpringBoot深度源码专车系列,第一篇发车 ...

  7. 物缘科技主导IEEE可信物联网数据管理工作组启动会召开

    2019年10月15日,由物缘科技主导的IEEE标准协会P2144 可信物联网数据管理工作组启动会在香港召开.物联网.区块链技术领域的企业代表和技术专家出席,共同就物联网数据管理.基于区块链的可信数据 ...

  8. uglify-js 和uglify-es

    uglify-js 它不支持压缩 es6,参考github的issue It seems like uglify-js does not support es6? uglify-js在压缩代码时,遇到 ...

  9. base64编码的字符串与图片相互转换

    #region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...

  10. HTTP报文(首部字段)

    HTTP报文 请求报文/响应报文 结构: 报文首部 + (可选)报文主体(两者通过空行CR + LF来划分) 使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用的语言.认证信息等内容 HTTP ...