项目使用Vue + SpringBoot搭建的前后端分离项目，后端存储用户登录信息和Token。现在的需求是，多端只可以有一个用户登录，当一个用户关闭浏览器或者关闭标签页时，向后端发送请求删除该用户的登录信息，以此来解决用户及时下线的目的。
VuePress是一个纯静态网站生成器,也就是它是无后端,纯前端的,那想要在VuePress中,发送ajax请求,请求一些第三方接口,有时想要达到自己一些目的
由于浏览器的同源策略，当我们请求网络资源时，所在页面的url中的协议，端口，域名其中一个与请求资源的url不同，都会出现跨域的问题。但是浏览器不能没有这个策略，这样会很危险，像csrf，xss攻击等**。那么这里有个容易理解错误的地方，跨域并不是说服务器没法返回资源给浏览器，而是浏览器没办法正确拿到，这不是服务器的问题。**但是也不是所有的请求都是这样的，像表单提交就不存在什么跨域问题，因为表单不需要服务器返回数据给它，它只负责提交就好了。
补充说明： 目前各大UI库都有upload上传文件的组件，内置方法就含有file对象,拿到后传入即可。
把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内
在传统的Web应用中个，每个URL对应网站中的一个页面；但在SPA（单页面应用中），由于只有一个页面，如果要实现不同URL在相同页面显示不同的路由，就需要根据URL来跟换Web组件，这需要额外的路由技术来实现。
login #0 GitHub https://github.com/Coxhuang/iView-login #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1", "view-design": "^4.0.0" // iView-UI 组件 iView – UI组件 axios – 发送http请求 localStorage – 存储TOKEN #2 实现功能 登录 获取TOKEN
service-core 中 UserInfoController添加令牌校验接口
好久不见，今天想写的是前段时间碰到的一个小问题。其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据，说是跨域了。
说明我们的前端代码构建成功。 现在我们在浏览器中打开上面的地址，就可以得到页面如下：
步骤1：npm install qs --save-dev // 安装qs模块 步骤2：import qs from 'qs' 步骤3：使用qs
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。
一个项目一开始总是出于还不错愿景，但做着做着，就越来越乱了。万丈高楼平地起，有些基础的问题解决好，后面改需求就不会那么痛苦了。
本项目使用vue全家桶，axios和cube-ui cube-ui文档地址：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start
在众多的B端应用中,简单如小型企业的管理后台,还是大型的CMS,CRM系统,权限管理都是一个重中之重的需求,过往的web应用大多采取服务端模板+服务端路由的模式,权限管理自然也由服务端进行控制和过滤.但是在前后端分离的大潮下,如果采用单页应用开发模式的话,前端也无可避免要配合服务端共同进行权限管理,接下来会以vuejs开发单页应用为例,给出一些尝试方案,希望也能给大家提供一些思路.注意采用nodejs作为中间层的前后端分离不在此文讨论范围.
注意之前有个bug，我们加上token校验时候会赛user信息，格式为 {'status': True, 'data': {'username': 'lyl', 'exp': 1654618788}, 'error': None} 所以取username改下下面的方式。
打开 src目录下的main.js，该文件是项目的入口文件，所以在这里导入，其他组件均可使用，不用再导入。
嗯。又来了，又说到跨域了，这是一个老生常谈的话题，以前我觉得这种基础文章没有什么好写的，会想着你去了解底层啊，不是很简单吗。但是最近在开发一个 「vscode 插件」 发现，当你刚入门一样东西的时候，你不会想这么多，因为你对他不熟悉，当你遇到不会的东西，你就是想先找到解决方案，然后通过这个解决方案再去深入理解。就比如跨域，新人或者刚接触的人对它并不是那么熟悉，所以说列出一些自己积累的方案，以及一些常用的场景来给他人带来一些解决问题的思路，这件事是有意义的。（写完之后还发现真香。以后忘了还能回来看看）
嗯。又来了，又说到跨域了，这是一个老生常谈的话题，以前我觉得这种基础文章没有什么好写的，会想着你去了解底层啊，不是很简单吗。但是最近在开发一个 vscode 插件 发现，当你刚入门一样东西的时候，你不会想这么多，因为你对他不熟悉，当你遇到不会的东西，你就是想先找到解决方案，然后通过这个解决方案再去深入理解。就比如跨域，新人或者刚接触的人对它并不是那么熟悉，所以说列出一些自己积累的方案，以及一些常用的场景来给他人带来一些解决问题的思路，这件事是有意义的。（写完之后还发现真香。以后忘了还能回来看看）
文章出自https://www.jianshu.com/p/d771bbc61dab
前端：vue入门 vue开发小程序 等 后端： java入门 springboot入门等 服务器：mysql入门 服务器简单指令 云服务器运行项目 python：推荐不温卜火 一定要看哦 一些插件的使用等
这是一个老生常谈的话题，以前我觉得这种基础文章没有什么好写的，最近为了线上问题深入了解底层，确实有点东西，下面汇总成10种方案。
由于我们会有很多请求，都需要验证 token 的有效性，那么把这部分逻辑抽象出来就是最好的选择了。我这里大概想到了以下两种验证的方法
由于自己在线教育网站距离上线的日子越来越近了，之前专注研究的都是有关如何用k8s部署相关的东西，没有太关注一些页面的东西。临近上线前，要把一些功能完善出来，于是乎就有了今天这篇文章。
送人玫瑰，手有余香，你是什么，你的世界就是什么💡 前言 网络上与axios相关的教程、以及源码解析有很多，还有健全的官方文档，本篇文章面向于初学axios库的开发者，目标是快速上手，如果觉得本篇文章帮助到了你，也就达到了这篇文章的目的😊 安装依赖 本文中使用的是Vue CLI3.0,安装依赖使用vue add命令进行 axios安装 vue add axios # yarn | npm安装 yarn add axios | npm install axios 引用插件执行add命令后
Axios 相信对Vue熟悉的铁汁对它不会感到陌生了（当然不熟悉Vue你也可以认识它），这简直就是前端近年来的一大杀器，自从Vue2开始之后，官方推荐使用axios来进行网络请求，后面基本大部分Vue项目都能瞧见它的身影。
在我们最近的工作中，构建网站使用的架构是带有 Django REST Framework（DRF）后端的 React 前端。它们是通过在前端使用 axios（前端库）调用后端 API 来交互的。我们还使用了 Redux（前端库）来存储全局的应用程序状态（存在浏览器端）。这是我们首选，因为它允许前后端完全分离。只要我们提前定义好请求的资源列表（后面单个都简称：endpoint）和返回的数据格式，前端和后端就可以并行的进行开发。这也使我们可以轻松的为未来的任何项目创建移动端 App，因为它们仍然可以复用后端 A
上面有一个ReflectedController(UserController()).routes,就是把UserController里面的接口反射出来，添加到routes列表里面，然后add到Jaguar()里面，ok，我们来启动一下服务器试试吧! 请求http://localhost:8080/api/user/login 登陆用户
使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。
前面的文章已经把后台登录接口准备完毕，接下来就是前端页面的编写以及前后端交互了，这里前后端交互我们用的是axios。axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。既然底层仍然是ajax通过异步请求与后台交互，就自然会遇到跨域的问题，这篇文章后面也会提及如何解决跨域问题。
a.在服务器上设置一个处理登录请求的接口（比如/login），并使用POST方法接收用户名和密码参数；
写在前面，本文阅读需要一定Nodejs的相关知识，因为会扩展webpack的相关功能，并且实现需要遵守一定约定和Ajax封装。
DocumentRoot “D:\website\VueThink\php\public”
1.下载项目vuethink，本例将项目放置website文件下。 2.后台搭建 本地建站–》以phpstudy为例 1) 新建站点域名 <VirtualHost*:80> DocumentRoot “D:\website\VueThink\php\public” ServerName www.vuethink.com ServerAlias <Directory “D:\website\VueThink\php\public”> Options FollowSymLinks ExecCGI AllowOverride All Order allow,deny Allow from all Require all granted </Directory> </VirtualHost> 2) win+R运行drivers 在etc/hosts文件添加本地ip域名 127.0.0.1www.vuethink.com 3. 前台搭建 1) 运行cmd 进入frontend文件 2) npm install 本项目提示npm WARN package.json xxx@0.0.0 No repository field. 参考地址 ：http://hao.jser.com/archive/5381/ 修改：在package.json添加（也可以忽略，不修改） “private”:true, “repository”: { “type”:”git”, “url”:”http://github.com/yourname/repositoryname.git” }, 3) npm run dev 4. 检查php版本 首先thinkphp5.0要求php为5.4以上，所以请先检查php版本。 5. 用户名：admin，密码 ：123456 6. 修改文件 1) 修改数据库配置文件Vuethink/php/config/database.php ‘type’ => ‘mysql’, ‘hostname’ => ‘127.0.0.1’, ‘database’ => ‘install’, ‘username’ => ‘root’, ‘password’ => ‘root’, 2) 旧版压缩包，数据表menu url字段开头带有/ 修改前端src/router.js文件 将所有children path 路径前加/ ,再次登录跳转显示正常 新版压缩包，数据表menuurl字段开头不带/ 此处不用修改 3) 修改application\admin\controller\Base.php文件，看到最后： // miss 路由：处理没有匹配到的路由规则 public function miss() { return ; } 将return; 修改为 return “router_error”; （此处修改方便提示） 4) 前后端分离，修改main.js文件 将axios.defaults.baseURL = HOST改为 axios.defaults.baseURL = ‘http://www.vuethink.com/index.php/’ vuethink采用axios请求后端程序，而且此处设置就是让axios每次请求都自动加上baseURL。 window.HOST = HOST改为 window.HOST = ‘http://www.vuethink.com/index.php/’ 这里的意义还没弄明白，后面再补充。
一、打通前后端之间的联系，为接下来的开发打下基础 二、登录页面的开发（无数据库情况下）
vuejs、eggjs、mqtt全栈式开发简单设备管理系统 业余时间用eggjs、vuejs开发了一个设备管理系统，通过mqtt协议上传设备数据至web端实时展现，包含设备参数分析、发送设备报警等模块。收获还是挺多的，特别是vue的学习，这里简单记录一下： 源码地址：https://github.com/caiya/vuejs-admin，写文不易，有帮助的话麻烦给个star，感谢！ 技术栈 前端：vue、vuex、vue-router、element-ui、axios、mqttjs 后端：eggjs、m
追踪到getCourseListAPI()内部，发现内容的res也是undefined
前后端分离开发是当今开发的主流。本篇文章从零开始，一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能，以及登录之后对用户的管理功能。通过这个例子，可以快速入门SpringBoot+Vue前后端分离的开发。
axios是一个基于Promise的HTTP请求库，它可以在浏览器和Node.js中使用。axios的功能非常请打，支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。
平时使用vue开发的时候，大多会使用vue-cli搭建项目，在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。 第一步设置公共url
这里选择了 vue-element-admin 这个项目骨架，它采用的技术与我们之前学过的较为契合
过滤器是实现对请求资源（jsp、servlet、html）的过滤功能，是一个运行在服务器的程序，优先于请求资源（jsp、servlet、html）之前执行。
vue工程项目，npm run build webpack方式打包，每次打包后如果需要更改后台接口地址（项目中，接口地址设置成变量，存放在js文件中，需要用到的地方导入），都需要重新打包，比较麻烦，所以，想给项目增加个配置文件，打包后如果要更改接口地址，修改该文件即可。
从0打造通用的后台管理系统，系列的第2篇博客，开发环境Node+Yarn+Vite的开发环境，这是记录的学习笔记，这篇主要分享环境配置、封装(路由、axios、storage)等内容。
Django和Django REST framework（后简称DRF）提供了海量的全局配置、局部配置，来实现上述思想，但配置项太多了，有时人们往往不知道该如何利用。
1.前端将用户名和密码调用接口传给后端。 2.后端收到请求，验证用户名和密码是否正确，验证成功，返回一个token。 3.前端拿到token后，存储到localStorage和vuex中，并进行页面跳转。 4.前端每次跳转路由，都要判断localStroage有无token，没有则跳转登录页，有则跳转至对应路由页。 5.每次调用后端接口，都要在请求头中携带token。 6.后端判断请求头中有无token并验证，验证成功则返回数据，验证失败或没有token则返回401。 7.如果前端拿到401的状态码，则清空token信息并跳转登录页。
14天阅读挑战赛 努力是为了不平庸~ 目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 1.4 测试 2 创建登录页面 2.1 创建登录组件 2.2 引入css（css.txt） 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求： 3.2.3 发
关于前端是否需要数据层，有许多需要探讨的部分，从客户端或者后端转前端的同学刚开始肯定也会有这个疑问，直接在使用返回内容真的好吗？
vue-admin-template这套脚手架程序，是整合了Vue全家桶相关技术。对于Vue零基础的读者，如果在此基础上来做开发，可能会有一定的难度。因此，你至少需要了解学习一下axios,vuex,vue-router等相关的内容。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
