前后端分离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 ...
随机推荐
- 2019-9-12:渗透测试,基础学习,Linux下用户管理笔记
linus用户管理/etc/passwd 保存用户信息/etc/shadow 保存密码信息,第二部分 !表示密码没有设置 cat /etc/passwd | grep xxx:查看特定账户信息 use ...
- Asp.Net Core下使用swagger生成api文档
目录 一.前期准备 二.配置Swagger 三.参考 .Net Core中有两个集成NSwag的包,分别为Swashbuckle和NSwag.两者的配置大同小异.这里以NSwag为例. 一.前期准备 ...
- js对象的直接赋值、浅拷贝与深拷贝
最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...
- Theano教程
让我们开始一个交互式会话(例如使用python或ipython)并导入Theano. from theano import * 你需要使用Theano的tensor子包中的几个符号.让我们以一个方便的 ...
- HTML,CSS,Javascript,PHP在网站结构中扮演的“角色”
①HTML 在网站结构中使用来,展示网页内容的: ②CSS 在网站结构中使用来,美化页面,如字体颜色大小等: ③Javascript(JS) 在网站结构中使用来,让页面动起来,提高浏览体验 ...
- 解决WebUploader 上传按钮按F12 才行的问题
遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了 ...
- 同步工具类 CountDownLatch 和 CyclicBarrier
在开发中,一些异步操作会明显加快执行速度带来更好的体验,但同时也增加了开发的复杂度,想了用好多线程,就必须从这些方面去了解 线程的 wait() notify() notifyall() 方法 线程异 ...
- 程序员的算法课(16)-B+树在数据库索引中的作用
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- AJAX与Django
AJAX 什么是AJAX? AJAX不是JavaScript的规范,它的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求.提交任务之 ...
- 源码安装php7.2
`# 安装依赖包 yum install -y gcc gcc-c++ make zlib zlib-devel pcre pcre-devel \ libjpeg libjpeg-devel lib ...