Vue前后端分离项目 【实战篇】

最新推荐文章于 2024-05-02 14:37:18 发布
最新推荐文章于 2024-05-02 14:37:18 发布
阅读量1.6k 收藏 11
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77444674/article/details/131664851
版权

一、shiro中session的共享问题🍉

在这里插入图片描述

1.演示问题🥝

(1)启动shiro-springboot的集群项目🍓

在这里插入图片描述

(2)修改nginx的配置🍓

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

(3)测试🍓

使用swagger测试需要在过滤器中放行

//测试路径
http://localhost:8080/doc.html

在这里插入图片描述
在这里插入图片描述

登录成功后访问某些资源时，出现了未登录的json提示

在这里插入图片描述

2.如何解决session共享问题🥝

默认session存储再各自服务的内存中，可以让session统一存储再redis中。

疯狂的蛋糕的依赖。—提供了redis存储session的类。

修改shiro的配置类。

在这里插入图片描述

package com.lzq.config;


import at.pollux.thymeleaf.shiro.dialect.ShiroDialect;
import com.lzq.filter.LoginFilter;
import com.lzq.filter.MyWebSessionManagerextends;
import com.lzq.realm.MyRealm;
import org.apache.shiro.authc.credential.HashedCredentialsMatcher;
import org.apache.shiro.session.mgt.SessionManager;
import org.apache.shiro.session.mgt.eis.SessionDAO;
import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
import org.apache.shiro.web.mgt.DefaultWebSecurityManager;


import org.crazycake.shiro.RedisCacheManager;
import org.crazycake.shiro.RedisManager;

import org.crazycake.shiro.RedisSessionDAO;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.DelegatingFilterProxy;
import org.apache.shiro.web.session.mgt.DefaultWebSessionManager;


import javax.servlet.Filter;
import java.util.HashMap;
import java.util.Map;


@Configuration
public class ShiroConfig {
    @Bean
    public DefaultWebSecurityManager securityManager(){
        DefaultWebSecurityManager securityManager=new DefaultWebSecurityManager();
        securityManager.setRealm(myRealm());
        //设置session管理器
        securityManager.setSessionManager(sessionManager());
        securityManager.setCacheManager(redisCacheManager());
        return securityManager;
    }
    @Bean
    public SessionManager sessionManager(){
        MyWebSessionManagerextends sessionManager = new MyWebSessionManagerextends();
        //SessionDao用于操作session对象，在容器中对session对象进行CRUD操作
        sessionManager.setSessionDAO(sessionDAO());
        return sessionManager;
    }
    @Bean
    public SessionDAO sessionDAO(){
        //该类会对session对象进行crud操作
        RedisSessionDAO sessionDAO = new RedisSessionDAO();
        sessionDAO.setRedisManager(redisManager());
        return sessionDAO;
    }

    /**
     * RedisSessionDAO shiro sessionDao层的实现 通过redis
     * 使用的是shiro-redis开源插件
     */


    @Bean
    public MyRealm myRealm(){
        MyRealm myRealm=new MyRealm();
        //设置密码加密器
        myRealm.setCredentialsMatcher(credentialsMatcher());
        return myRealm;
    }
    @Value("${shiro.hashAlgorithmName}")
    private String hashAlgorithmName;
    @Value("${shiro.hashIterations}")
    private int hashIterations;
    @Bean
    public HashedCredentialsMatcher credentialsMatcher(){
        HashedCredentialsMatcher credentialsMatcher=new HashedCredentialsMatcher();
        credentialsMatcher.setHashAlgorithmName(hashAlgorithmName);
        credentialsMatcher.setHashIterations(hashIterations);
        return credentialsMatcher;
    }


    @Bean(name = "shiroFilter")
    public ShiroFilterFactoryBean factoryBean(){
        ShiroFilterFactoryBean shiroFilterFactoryBean=new ShiroFilterFactoryBean();
        shiroFilterFactoryBean.setSecurityManager(securityManager());
        shiroFilterFactoryBean.setLoginUrl("/login.html");
        //设置过滤规则
        Map<String,String> map=new HashMap<>();
        map.put("/login","anon");
        map.put("/doc.html","anon");
        map.put("/webjars/**","anon");
        map.put("/swagger-resources/**","anon");
        map.put("/v2/**","anon");
        map.put("/**","authc");
        shiroFilterFactoryBean.setFilterChainDefinitionMap(map);

        Map<String,Filter> filterMap=new HashMap<>();
        filterMap.put("authc",new LoginFilter());
        shiroFilterFactoryBean.setFilters(filterMap);
        return shiroFilterFactoryBean;
    }

    //springboot如何注册web三大组件。
    @Bean
    public FilterRegistrationBean<Filter> filterRegistrationBean(){
        FilterRegistrationBean<Filter> filterRegistrationBean=new FilterRegistrationBean<>();
        filterRegistrationBean.setFilter(new DelegatingFilterProxy());
        filterRegistrationBean.setName("shiroFilter");
        filterRegistrationBean.addUrlPatterns("/*");
        return filterRegistrationBean;
    }
    /**
     * 这里是为了能在html页面引用shiro标签，
     */
    @Bean(name = "shiroDialect")
    public ShiroDialect shiroDialect() {
        return new ShiroDialect();
    }

    @Bean
    public RedisCacheManager redisCacheManager(){
        RedisCacheManager redisCacheManager = new RedisCacheManager();
        redisCacheManager.setRedisManager(redisManager());
        return redisCacheManager;
    }

    @Bean
    public RedisManager redisManager(){
        RedisManager redisManager = new RedisManager();
        redisManager.setHost("192.168.179.129");
        redisManager.setDatabase(1);
        return redisManager;
    }
}

在这里插入图片描述

二、解决前端不支持cookie的效果🍉

在这里插入图片描述

原因: 默认DefaultWebSessionManager它只接受Cookie中存储的JsessionId. 查询发现再redis中不存在对应的key.

客户发送请求时，再请求头中携带sessionId, 然后重写DefaultWebSessionManager中getSessionId()的方法。

思考:1. 如何把sessionId放入请求头。

​ 2. 重写getSessionId方法如何获取请求头的sessionID。

1.如何把sessionId放入请求头🥝

修改登录的接口

在这里插入图片描述

 @PostMapping("/login")
    @ResponseBody
    public Result login(@RequestBody LoginVo loginVo){
        Subject subject = SecurityUtils.getSubject();
        //判斷当前用户是否登陆过
        if (subject.isAuthenticated()){
            return new Result(200,"登陸成功",subject.getSession().getId());
        }
        UsernamePasswordToken token = new UsernamePasswordToken(loginVo.getUsername(),loginVo.getPassword());
        try {
            subject.login(token);
            System.out.println("登录成功");
            return new Result(200,"登录成功",subject.getSession().getId());
        }catch (Exception e){
            e.printStackTrace();
            System.out.println("登录失败");
            return new Result(500,"登陆失败",null);
        }

修改前端登录方法

在这里插入图片描述

 lzq(){
                this.$http.post("http://localhost:8080/login",this.formLabelAlign).then(requs=>{
                    console.log(requs)
                    if (requs.data.code==200){
                        this.$message.success("登陆成功")
                        sessionStorage.setItem("token",requs.data.data)
                        this.$router.push("/aaa")
                    }else {
                        this.$message.error("账户密码错误")
                    }
                })
            },

修改main.js文件

设置axios请求拦截器 进行拦截请求 将后端传过来的session id 赋值给 sessionStorage中 赋给请求头中

在这里插入图片描述

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from "axios"
import it from "element-ui/src/locale/lang/it";

router.beforeEach(((to, from, next) =>{
  //to:到哪去 from:从哪来  next:下一站
  var path = to.path;
  if (path=="/login"){
    return next();
  }
  //设置变量token  用来存储session id
  var  token = sessionStorage.getItem("token");
  if (token){
    return  next();
  }
  return next("/login");
} ))
//设置axios的请求拦截器
axios.interceptors.request.use(config=>{
  //从sessionStorage中获取token  token存储的session id
  var item=sessionStorage.getItem("token");
  if (item){
    config.headers.token=item;
  }
  return config;
})

Vue.prototype.$http=axios

Vue.config.productionTip = false


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2.重写DefaultWebSessionManager的方法🥝

在这里插入图片描述

package com.lzq.filter;

import org.apache.shiro.web.servlet.ShiroHttpServletRequest;
import org.apache.shiro.web.session.mgt.DefaultWebSessionManager;
import org.apache.shiro.web.util.WebUtils;
import org.springframework.util.StringUtils;

import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import java.io.Serializable;

public class MyWebSessionManagerextends extends DefaultWebSessionManager {
        private static final String AUTHORIZATION = "token";
        private static final String REFERENCED_SESSION_ID_SOURCE = "Stateless request";
        protected Serializable getSessionId(ServletRequest request, ServletResponse response) {
            //获取请求头中名称为token的内容
            String id = WebUtils.toHttp(request).getHeader("token");
            if (!StringUtils.isEmpty(id)) { //如果存在该token
                request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID_SOURCE, "Stateless request");
                request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID, id);
                request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID_IS_VALID, Boolean.TRUE);
                return id;
            } else {
                //从cookie中获取sessionId.
                return super.getSessionId(request, response);
            }
        }
    }

重写DefaultWebSessionManager的方法是为了获取前端传过来的session id
重写后需要将配置文件交给ioc容器进行管理
在这里插入图片描述

 @Bean(name = "shiroFilter")
    public ShiroFilterFactoryBean factoryBean(){
        ShiroFilterFactoryBean shiroFilterFactoryBean=new ShiroFilterFactoryBean();
        shiroFilterFactoryBean.setSecurityManager(securityManager());
        shiroFilterFactoryBean.setLoginUrl("/login.html");
        //设置过滤规则
        Map<String,String> map=new HashMap<>();
        map.put("/login","anon");
        map.put("/doc.html","anon");
        map.put("/webjars/**","anon");
        map.put("/swagger-resources/**","anon");
        map.put("/v2/**","anon");
        map.put("/**","authc");
        shiroFilterFactoryBean.setFilterChainDefinitionMap(map);

        Map<String,Filter> filterMap=new HashMap<>();
        filterMap.put("authc",new LoginFilter());
        shiroFilterFactoryBean.setFilters(filterMap);
        return shiroFilterFactoryBean;
    }

修改shiro配置类

在这里插入图片描述

  @Bean
    public SessionManager sessionManager(){
        MyWebSessionManagerextends sessionManager = new MyWebSessionManagerextends();
        //SessionDao用于操作session对象，在容器中对session对象进行CRUD操作
        sessionManager.setSessionDAO(sessionDAO());
        return sessionManager;
    }

修改shiroFilter过滤器

我们发现跨域请求，会发送两个请求：第一个OPTIONS请求，第二个请求是真实的请求。

OPTIONS请求：先头部队。

所以我们对OPTIONS请求都要放行。

在这里插入图片描述
在这里插入图片描述

package com.lzq.filter;


import com.alibaba.fastjson.JSON;
import com.lzq.vo.Result;
import org.apache.shiro.web.filter.authc.FormAuthenticationFilter;

import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.PrintWriter;


public class LoginFilter extends FormAuthenticationFilter {
    //当未登录账号访问接口时，会触发该方法。
    //默认内容是重定向到登录页面---重写改为返回json数据
    @Override
    protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {
        //解决响应数据的中文乱码问题
        response.setContentType("application/json;charset=utf-8");
        //通过io流的方式将响应返还给前端
        PrintWriter writer = response.getWriter();
        Result result = new Result(401, "请先登录", null);
        //把java对象转换为json字符串  ----JSON java封装的工具类
        String jsonstring = JSON.toJSONString(result);
        writer.print(jsonstring);
        //刷新io流
        writer.flush();
        //关闭io流资源
        writer.close();
        return false;
    }

    @Override
    protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
        //将请求转换格式  获取其中内容
        HttpServletRequest request1 = (HttpServletRequest) request;
        //获取请求方式
        String method = request1.getMethod();
        //判断将options访问类型进行放行
        if ("OPTIONS".equals(method)){
            return true;
        }
        return super.isAccessAllowed(request, response, mappedValue);
    }
}

三、设置前端前置路由守卫🍉

在这里插入图片描述

router.beforeEach(((to, from, next) =>{
  //to:到哪去 from:从哪来  next:下一站
  var path = to.path;
  if (path=="/login"){
    return next();
  }
  //设置变量token  用来存储session id
  var  token = sessionStorage.getItem("token");
  if (token){
    return  next();
  }
  return next("/login");
} ))

四、如何防止恶意重复登录🍉

在这里插入图片描述

package com.lzq.controller;

import com.lzq.vo.LoginVo;
import com.lzq.vo.Result;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.UsernamePasswordToken;
import org.apache.shiro.subject.Subject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
//@CrossOrigin//origins:允许那些跨域访问该接口  allowedHeaders: 允许携带那些头信息的请求访问  methods:  允许那些请求跨域请求该接口
public class LoginController {
    @PostMapping("/login")
    @ResponseBody
    public Result login(@RequestBody LoginVo loginVo){
        Subject subject = SecurityUtils.getSubject();
        //判斷当前用户是否登陆过
        if (subject.isAuthenticated()){
            return new Result(200,"登陸成功",subject.getSession().getId());
        }
        UsernamePasswordToken token = new UsernamePasswordToken(loginVo.getUsername(),loginVo.getPassword());
        try {
            subject.login(token);
            System.out.println("登录成功");
            return new Result(200,"登录成功",subject.getSession().getId());
        }catch (Exception e){
            e.printStackTrace();
            System.out.println("登录失败");
            return new Result(500,"登陆失败",null);
        }

    }
    @PostMapping("/logout")
    @ResponseBody
    public Result logout(){
        Subject subject = SecurityUtils.getSubject();
        //清空redis
        subject.logout();
        return new Result(200,"退出成功",null);
    }
    @GetMapping("/unlogin")
    @ResponseBody
    public Result unlogin(){
        return new Result(401,"请先登录",null);
    }

}

五、退出功能🍉

编辑退出接口🥝

在这里插入图片描述

  @PostMapping("/logout")
    @ResponseBody
    public Result logout(){
        Subject subject = SecurityUtils.getSubject();
        //清空redis
        subject.logout();
        return new Result(200,"退出成功",null);
    }

编辑前端退出按钮🥝

在这里插入图片描述

<template>
    <div>
        <el-button type="primary" @click="logout">退出</el-button>
        <el-button @click="info" type="primary">获取用户信息</el-button>
        <el-button @click="query" type="primary">查询</el-button>
        <el-button @click="daochu" type="primary">导出</el-button>
        <span v-text="userinfo.username"></span>
    </div>
</template>

<script>
    export default {
        name: "Aaa",
        data(){
            return{
                userinfo:{}
            }
        },
        created() {
        },
        methods: {
            logout() {
                this.$http.post("http://localhost:8080/logout").then(requs=>{
                    if (requs.data.code==200){
                        this.$message.success("退出成功")
                        sessionStorage.clear()
                        this.$router.push("/login")
                    }
                })
            },
            info(){
                this.$http.get("http://localhost:8080/user/info").then(requs=>{
                    this.userinfo=requs.data.data;
                })

            },
            query(){
                this.$http.get("http://localhost:8080/user/query").then(requs=>{
                    if (requs.data.code==200){
                        this.$message.success("查询成功")

                    }
                })
            },
            daochu(){

            }

        }
    }

</script>

<style scoped>

</style>

六、获取当前登录用户的信息🍉

在这里插入图片描述

package com.lzq.controller;

import com.lzq.vo.Result;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {

    @GetMapping("/info")
    public Result inf(){

        Object principal = SecurityUtils.getSubject().getPrincipal();
        return new Result(200,"查询成功",principal);
    }

    @GetMapping("/query")
    @ResponseBody
//    @RequiresPermissions(value = {"user:query","user:delete"},logical = Logical.OR)
    @RequiresPermissions(value = "user:query")
    public Result query(){

        return new Result(200,"查詢成功",null);
    }

    @GetMapping("/update")
    @RequiresPermissions(value = "user:update")
    public String update(){
        return "user:update------------------------";
    }

    @GetMapping("/delete")
    @RequiresPermissions(value = "user:delete")
    public String delete(){
        return "user:delete------------------------";
    }

    @GetMapping("/insert")
    @RequiresPermissions(value = "user:insert")
    public String insert(){
        return "user:insert------------------------";
    }

    @GetMapping("/export")
    @RequiresPermissions(value = "user:export") //该注解不能别识别
    public String export(){
        return "user:export------------------------";
    }
}

在这里插入图片描述

<template>
    <div>
        <el-button type="primary" @click="logout">退出</el-button>
        <el-button @click="info" type="primary">获取用户信息</el-button>
        <el-button @click="query" type="primary">查询</el-button>
        <el-button @click="daochu" type="primary">导出</el-button>
        <span v-text="userinfo.username"></span>
    </div>
</template>

<script>
    export default {
        name: "Aaa",
        data(){
            return{
                userinfo:{}
            }
        },
        created() {
        },
        methods: {
            logout() {
                this.$http.post("http://localhost:8080/logout").then(requs=>{
                    if (requs.data.code==200){
                        this.$message.success("退出成功")
                        sessionStorage.clear()
                        this.$router.push("/login")
                    }
                })
            },
            info(){
                this.$http.get("http://localhost:8080/user/info").then(requs=>{
                    this.userinfo=requs.data.data;
                })

            },
            query(){
                this.$http.get("http://localhost:8080/user/query").then(requs=>{
                    if (requs.data.code==200){
                        this.$message.success("查询成功")

                    }
                })
            },
            daochu(){

            }

        }
    }

</script>

<style scoped>

</style>

七、设定登录设备的个数🍉

在这里插入图片描述

低调的黑客
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot Vue前后端分离开发实战.pdf
04-21
Spring Boot Vue前后端分离开发实战.pdf 上手简单，文档讲述清晰，实在好用。
2021最详细SpringBoot+Vue前后端分离项目实战-在线智能办公系统项目源码.rar
09-25
2021最详细SpringBoot+Vue前后端分离项目实战-在线智能办公系统-云E办，运用Springboot、Vue全家桶、Spring Security、JWT令牌、Redis完成一个前后端分离项目
利用SpringBoot和Vue实现前后端分离（附源码）
最新发布
2301_82242988的博客
05-02 758
/添加学生信息!!”);//删除学生信息!!”);4. 前台实现环境搭建：添加axios引用ElementUI的组件，引用axios并设置基础的urlimportcommand//引用axios，设置基础的url//绑定到全局new Vue({router,})添加路由routes: [{//前台首页path: ‘/’,},{//后台主页面children:[},{//登录页})访问的默认页面搜索登录学生管理系统。
vue入门--＞前后端分离&vue简介，vue入门，vue生命周期
weixin_73471776的博客
09-18 1676
因此在那个时期，前端人员的重要性并不是那么的大。当然还有项目架构方面的前后端分离，也就是在考虑请求并发，服务器性能，处理请求的效率等因素，从而进行前后端分离，对于初学者的理解来说不是那么友好，因此我们只讨论开发模式上的分离。由于前后端的耦合度过大，导致交流成本过大，前端人员编写的js代码，后端人员不一定能看懂，当项目出现bug的时候，查找问题的根源就变得很困难了。框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码。
Vue 脚手架结合 SpringBoot 构建前后端分离入门项目（实现增删改查）
2301_76348242的博客
04-30 881
面试题文档来啦，内容很多，485页！由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。
梳理总结SpringBoot+Vue前后端分离的简单实现
fuhuitao的博客
10-23 5268
SpringBoot+Vue前后端分离的简单实现
二十分钟秒懂：实现前后端分离开发（vue+element+spring boot+mybatis+MySQL）
小淼淼的博客
05-29 1万+
二十分钟秒懂：实现前后端分离开发（vue+element+spring boot+mybatis+MySQL）
前后端分离web项目
Arela651的博客
04-03 2578
过程 1.构建前端 使用到的工具： 套件工具-用来安装依赖 yarn npm 前端构建工具： webpack vite nuxt.js 前端框架 VUE react 前端语言 typescript javascript 前端渲染框架 semidesign-不支持vue Element ui 步骤： 1.安装yarn，使用yarn构建web项目的前端部分。 在使用yarn时可能会碰到一个问题：无法加载文件 C:\Users\28011\AppData\Roaming\npm\
如何快速搭建一个前后端分离项目
zhangcongyue的博客
05-06 1999
搭建一个前后端分离的项目，以一个博客网站为例1. 项目组成首先肯定需要写一个项目用（前端 + 后端）来展示这些文章相关页面 - 前台系统/博客网站，那么这些被展示的文章相关信息，肯定需要有个后台管理系统（前端 + 后端）来进行信息的发布 - 后台管理系统。那么我们可以得出结论，如果我们后台管理系统采用前后端分离开发模式的话，最终我们需要新建三个项目来完成这个需求：(1). 博客网站前端 - 80(2). 后台管理系统前端 - 8081。
Go+Vue前后端分离项目实战
07-03
后端主要采用go开发，前端采用vue。前后端分离开发。完整项目，包括wechat小程序的项目。 功能完善，稍作修改可以直接使用。对go程序开发的人员有一定的参考价值。
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
SpringBoot+Vue前后端分离
06-29
在现代Web开发中，前后端...总的来说，"SpringBoot+Vue前后端分离"项目展示了如何使用现代技术栈构建一个高效、可扩展的Web应用。通过学习和实践这样的项目，开发者可以提升自己的技能，更好地适应快速变化的开发环境。
如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化（入门详细教程）
热门推荐
小袁同学的博客
01-03 2万+
今天要介绍的是如何实现通过SpringBoot+Vue前后端分离，将数据从数据库传递给前端达到echarts图形的展示 先看看效果图，图形中的数据是数据库中，不是假数据 目录 数据部分 后端 创建一个SpringBoot项目 Application配置 Book类（bean数据层） BookRepository接口类（DAO数据访问层） BookService接口类（业务层） BookServiceImpl实现类（业务层） BookController类（控制层） 跨域请求处理 启
Vue前后端分离
weixin_64742030的博客
01-05 480
在vue.config.js。
前后端分离项目 Vue3+SpringBoot 后台管理系统
wang115t的博客
02-19 1337
Src 文件夹下-新建 test 文件夹以及 resource 文件夹。而且不会添加数据成功，并向客户端返回 1 条自定义异常 JSON 数据。注意：在 Idea 中，设置 CSS 样式，使用双斜杠//注解会报错。注意：test 文件夹下的包路径要与 java 的源代码路径要一致。添加 数据到数据库 成功后-返回自定义 JSON 格式的数据。并启动测试-查看 MyBatis-Plus 是否成功加载。如果在添加过程中，发生了异常，如提交的数据格式不对，后台直接将该异常进行了捕获。提交 JSON 格式的数据。
jsessionid
米二的博客
08-21 1354
jsessionid
SpringBoot 和 Vue 前后端分离教程(附源码)
xmt1139057136的专栏
03-04 1万+
编辑：业余草 来源：https://www.xttblog.com/?p=4851 昨天，一位网友问我要 SpringBoot + Vue 的源码项目。其实网上有很多，我这里分享一个项目...
前后端分离具体流程
qq_63173180的博客
10-20 2186
前后端分离，流程
Spring Boot +Vue中session得不到的问题
qq_44116526的博客
02-24 2878
对于spring boot与Vue的系统使用session。假设session取不到问题 需要在Vue中的main.js添加 axios.defaults.withCredentials = true //携带cookie 设置session @RequestMapping("/login") public ResponseZZ login(String username, String password, HttpServletRequest request) { Syste
vue前后端分离项目实战
10-11
对于前后端分离的项目，通常需要使用不同的技术栈来实现前后端功能。以 Vue 前端和 Node.js 后端为例，具体实现步骤如下： 1. 搭建前端项目 使用 Vue CLI 搭建项目，并通过 Vue Router 和 Axios 实现页面路由和数据请求功能。 2. 搭建后端项目 使用 Express 或 Koa 框架搭建 Node.js 后端，并连接数据库。 3. 实现前后端数据交互 通过 Axios 发送请求，后端通过接口返回数据，前端将数据渲染到页面上。 4. 部署项目 前后端分别打包上线，前端部署在静态资源服务器上，后端部署在动态服务器上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值