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

  1. <mapper namespace="cn.itsource.crm.mapper.DepartmentMapper">
  2. <select id="findAll" resultType="Department">
  3. select * from t_department
  4. </select>
  5. <select id="findOne" parameterType="long" resultType="Department">
  6. select * from t_department where id=#{id}
  7. </select>
  8. <insert id="save" parameterType="Department">
  9. insert into t_department(name) values(#{name})
  10. </insert>
  11. <update id="update" parameterType="Department">
  12. update t_department set name=#{name} where id=#{id}
  13. </update>
  14. <delete id="delete" parameterType="long">
  15. delete from t_department where id=#{id}
  16. </delete>
  17. </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) 列表展示(一定要挂载)

  1. /获取部门列表
  2. getDepartments() {
  3. this.listLoading = true;
  4. //NProgress.start();
  5. this.$http.patch("/department/list").then((res) => {
  6. // this.total = res.data.total;
  7. this.departments = res.data;
  8. this.listLoading = false;
  9. });
  10. }

挂载代码:

  1. mounted() {
  2. this.getDepartments();
  3. }

(2) 新增

  1. //显示新增界面
  2. handleAdd() {
  3. this.addFormVisible = true;
  4. this.addForm = {
  5. name: ''
  6. };
  7. },
  8. //新增
  9. addSubmit() {
  10. this.$refs.addForm.validate((valid) => {
  11. if (valid) {
  12. this.$confirm('确认提交吗?', '提示', {}).then(() => {
  13. //加载
  14. this.addLoading = true;
  15. //拷贝 this.addForm这个对象 para = {name:'xxx'}
  16. let para = Object.assign({}, this.addForm);
  17. this.$http.put("/department",para).then((res) => {
  18. this.addLoading = false;
  19. this.$message({
  20. message: '提交成功',
  21. type: 'success'
  22. });
  23. //验证的重置
  24. this.$refs['addForm'].resetFields();
  25. //关闭新增对话框
  26. this.addFormVisible = false;
  27. this.getDepartments();
  28. });
  29. });
  30. }
  31. });
  32. }

(3) 编辑修改

  1. //显示编辑界面
  2. handleEdit(index, row) {
  3. this.editFormVisible = true;
  4. this.editForm = Object.assign({}, row);
  5. },
  6. //编辑
  7. editSubmit() {
  8. this.$refs.editForm.validate((valid) => {
  9. if (valid) {
  10. this.$confirm('确认提交吗?', '提示', {}).then(() => {
  11. this.editLoading = true;
  12. //NProgress.start();
  13. let para = Object.assign({}, this.editForm);
  14. this.$http.post("/department",para).then((res) => {
  15. this.editLoading = false;
  16. //NProgress.done();
  17. this.$message({
  18. message: '提交成功',
  19. type: 'success'
  20. });
  21. this.$refs['editForm'].resetFields();
  22. this.editFormVisible = false;
  23. this.getDepartments();
  24. });
  25. });
  26. }
  27. });
  28. }

(4) 删除

  1. //删除
  2. handleDel(index, row) {
  3. this.$confirm('确认删除该记录吗?', '提示', {
  4. type: 'warning'
  5. }).then(() => {
  6. this.listLoading = true;
  7. this.$http.delete("/department/" + row.id).then((res) => {
  8. this.listLoading = false;
  9. this.$message({
  10. message: '删除成功',
  11. type: 'success'
  12. });
  13. this.getDepartments();
  14. });
  15. }).catch(() => {
  16.  
  17. });
  18. }

前后端分离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. 2019-9-12:渗透测试,基础学习,Linux下用户管理笔记

    linus用户管理/etc/passwd 保存用户信息/etc/shadow 保存密码信息,第二部分 !表示密码没有设置 cat /etc/passwd | grep xxx:查看特定账户信息 use ...

  2. Asp.Net Core下使用swagger生成api文档

    目录 一.前期准备 二.配置Swagger 三.参考 .Net Core中有两个集成NSwag的包,分别为Swashbuckle和NSwag.两者的配置大同小异.这里以NSwag为例. 一.前期准备 ...

  3. js对象的直接赋值、浅拷贝与深拷贝

    最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...

  4. Theano教程

    让我们开始一个交互式会话(例如使用python或ipython)并导入Theano. from theano import * 你需要使用Theano的tensor子包中的几个符号.让我们以一个方便的 ...

  5. HTML,CSS,Javascript,PHP在网站结构中扮演的“角色”

    ①HTML   在网站结构中使用来,展示网页内容的: ②CSS   在网站结构中使用来,美化页面,如字体颜色大小等: ③Javascript(JS)   在网站结构中使用来,让页面动起来,提高浏览体验 ...

  6. 解决WebUploader 上传按钮按F12 才行的问题

    遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了 ...

  7. 同步工具类 CountDownLatch 和 CyclicBarrier

    在开发中,一些异步操作会明显加快执行速度带来更好的体验,但同时也增加了开发的复杂度,想了用好多线程,就必须从这些方面去了解 线程的 wait() notify() notifyall() 方法 线程异 ...

  8. 程序员的算法课(16)-B+树在数据库索引中的作用

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...

  9. AJAX与Django

    AJAX 什么是AJAX? AJAX不是JavaScript的规范,它的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求.提交任务之 ...

  10. 源码安装php7.2

    `# 安装依赖包 yum install -y gcc gcc-c++ make zlib zlib-devel pcre pcre-devel \ libjpeg libjpeg-devel lib ...