115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】

这篇具有很好参考价值的文章主要介绍了115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)、环境介绍

在SpringBoot+Vue的整合项目中我们使用的编译软件分别有: Vscode来编写Vue脚手架和IDEA来编写SpringBoot。vue脚手架是3.0以上的。

(二)、Vscode部分

1.静态资源

1.App.vue
这里的router-view一定要写出来,因为我们最终呈现到App.vue这个组件中去的

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name:'App',
}
</script>

<style>

</style>

2.src/pages/Login.vue
将前端数据传递给后端,后端并响应的操作

<template>
    <div>
        用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
        <br>
        <br>
        密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        <br><br>
        <button v-on:click="login">登录</button>
    </div>
</template>

<script>
export default {
    name:'Login',
    data(){
        return{
            loginForm:{
                username:'',
                password:''
            },
            responseResult: []
        }
   },
   methods:{
       login(){
            this.$axios
           .post('/login',{  // 传递给后端路径为/login的组件中去
                username: this.loginForm.username,
                password: this.loginForm.password
            })
            .then(successResponse => {
                if(successResponse.data.code ===200){  // 假如说后端传递过来的状态码是200,那么就成功登入。
                    console.log(111111)
                    this.$router.replace({path:'/index'})
                }
            })
            .catch(failResponse => {

            })
       }
    
   }
    
}
</script>

<style scoped>


</style>

3.src/pages/Index.vue
页面假如登入成功,那么我们就跳转到这个页面

<template>
    <div>
        <h2>HelloWorld</h2>
    </div>
</template>

<script>
export default {
    name:'Index'
}
</script>

<style scoped>

</style>

2.配置route路由和axios异步

1.安装路由:在vscode的控制台下输入:

npm install  vue-router@3

vscode和idea联合使用,vue.js,spring boot,intellij-idea
2.安装axios: 在vscode的控制台下输入:

 npm add axios

vscode和idea联合使用,vue.js,spring boot,intellij-idea
3.配置路由: src/router/index.js

// TODO: 该文件是Vue路由器文件,路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件

// TODO:引入我们需要的组件
import Login from '../pages/Login.vue'
import Index from '../pages/Index.vue'
Vue.use(VueRouter) // 使用路由

// 创建一个路由器,管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
    {
        path: '/login',
        component: Login
      },
      {
        path: '/index',
        component: Index
      }
    ],
})
// 抛出我们创建的路由器
export default router

4.注册axios和route路由: src/main.js
设置反向代理和全局注册axios,这里路径末尾的api目的是为了和后端开头的api是连接的桥梁。

import Vue from 'vue'  // 引入阉割版本的vue
import App from './App.vue' // 引入App.vue组件

//引入我们刚才编写的router配置
import router from './router/index'   


//设置反向代理,前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
//全局注册,之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios= axios


Vue.config.productionTip = false;
const vm=new Vue({
    router: router, // 传入路由
    render: h => h(App)
}).$mount('#app');
console.log('vm',vm)

3.配置跨域支持

vue.config.js
配置这个跨域支持是为了让后端能够访问到前端的资源。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,// 关闭语法检查
    // 配置跨域支持
    devServer:{
      proxy: {
        '/api':{
          target:'http://localhost:8443',//跨域支持的端口
          changeOrihin: true,
          pathRewrite:{
            '^/api':''
          }
        }
      },
    }
},
)

(三)、IDEA部分

1.创建SpringBoot项目

创建SpringBoot并引入web依赖。
vscode和idea联合使用,vue.js,spring boot,intellij-idea

2.创建两个实体类

1.com/jsxs/pojo/User.java
用于用户的认证

package com.jsxs.pojo;

/**
 * @Author Jsxs
 * @Date 2023/5/13 19:51
 * @PackageName:com.jsxs.pojo
 * @ClassName: User
 * @Description: TODO
 * @Version 1.0
 */
public class User {
    int id;
    String username;
    String password;

    public int getId(){
        return id;
    }

    public void setId(int id){
        this.id = id;
    }

    public String getUsername(){
        return username;
    }

    public void setUsername(String username){
        this.username = username;
    }

    public String getPassword(){
        return password;
    }

    public void setPassword(String password){
        this.password = password;
    }
}


2.com/jsxs/pojo/Result.java
用于返回状态码

package com.jsxs.result;

/**
 * @Author Jsxs
 * @Date 2023/5/13 19:53
 * @PackageName:com.jsxs.result
 * @ClassName: Result
 * @Description: TODO
 * @Version 1.0
 */
public class Result {
    //响应码
    private int code;

    public Result(int code){
        this.code = code;
    }

    public int getCode(){
        return code;
    }

    public void setCode(int code){
        this.code = code;
    }
}

3.创建控制层

controller/LoginController.java

package com.jsxs.controller;

import com.jsxs.pojo.User;
import com.jsxs.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

import java.util.Objects;

/**
 * @Author Jsxs
 * @Date 2023/5/13 19:53
 * @PackageName:com.jsxs.controller
 * @ClassName: LoginController
 * @Description: TODO
 * @Version 1.0
 */
@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser){
        //对html 标签进行转义,防止XSS攻击
        //分别与接收到的User类的username和password进行比较,根据结果的不停Result(不同的响应码)
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if(!Objects.equals("1",username) || !Objects.equals("1",requestUser.getPassword())){
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        }else{
            System.out.println("成功!!");
            return new Result(200);
        }
    }
}

4.配置后端响应的端口

server.port=8443

(四)、Vue和SpringBoot交互

1.同时运行IDEA和Vscode

IDEA
vscode和idea联合使用,vue.js,spring boot,intellij-idea
Vscode: npm run serve
vscode和idea联合使用,vue.js,spring boot,intellij-idea

2.访问登入界面

访问: http://localhost:8080/#/login
vscode和idea联合使用,vue.js,spring boot,intellij-idea
密码输入正确后 显示成功。
vscode和idea联合使用,vue.js,spring boot,intellij-idea文章来源地址https://www.toymoban.com/news/detail-520715.html

到了这里,关于115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 超详细Django+vue+vscode前后端分离搭建

    一、Django后端搭建 1.1 创建项目和app 1.2 注册app 1.3 运行项目 1.4 配置mysql数据库 在项目tman项目下的init.py中加入如下代码 1.5 创建数据库类 在tadmin的model.py中加入如下代码 执行如下命令创建数据库 1.6 使用Django后台进行数据管理 在tadmin应用目录下加入如下代码 创建后台管理员

    2024年02月08日
    浏览(41)
  • springboot+vue 前后端交互实现(mysql+springboot+vue)

    编译器:vscode、idea、mysql5.7 技术:springboot+mybatis+mysql+lombok+vue 实现内容:实现前后端数据交互。 实现效果: 因为vue和springboot是前后端分离的,所以在开始交互前首先需要解决跨域问题,可以在前端做也可以在后端加配置类,这里我是在后端加的CORS策略配置类。 还需要在前

    2024年02月17日
    浏览(41)
  • Git学习笔记(第7章):IDEA实现Git操作(VSCode)

    目录 7.1 配置忽略文件 7.2 初始化本地库 7.3 添加暂存区、提交本地库 7.4 修改文件 补充:工具栏简介 问题引入 在版本控制系统中,有些文件或目录是不需要纳入版本管理的,比如编译产生的临时文件、日志文件、缓存文件等。 解决方案 配置 :在项目根目录下,创建一个名

    2024年01月22日
    浏览(41)
  • SpringBoot +Vue3 简单的前后端交互

    前端:Vue3 创建项目: npm create vue@latest cd your-project-name npm install npm run dev 项目结构图如下: 1、查看入口文件内容:main.js 代码如下: 在main.js中,首先引入了Vue组件和APP根组件 2、APP跟组件代码如下: 3、路由文件配置:router/index.js 代码如下: 4、Axios请求公共方法:utils/ax

    2024年02月10日
    浏览(38)
  • 实现vue项目和springboot项目前后端数据交互

    太高版本的win7不支持 这里安装node-v12.16.2-x64.msi,指定安装位置后直接按下一步就可以。 npm是node内置的工具 这里配置npm的镜像cnpm(提高下载速度,以后用到npm的命令都可以用cnpm命令替换)不指定cnpm版本使用如下命令会报错: 错误信息: 检查错误,参照网上的对应版本图,

    2024年04月25日
    浏览(38)
  • 使用IntelliJ IDEA和VSCode搭建datax-web-ui开发环境

    记录 :376 场景 :使用IntelliJ IDEA搭建datax-web-ui开发环境。使用VSCode搭建datax-web-ui开发环境。 版本: node-v14.17.3 npm-6.14.13 datax-web-ui开源地址 :https://github.com/WeiYe-Jing/datax-web-ui 一、使用IntelliJ IDEA搭建datax-web-ui开发环境 1.安装nodejs和npm 1.1下载地址 官网地址:https://nodejs.org/dist

    2024年02月10日
    浏览(54)
  • 一个简单的前后端交互——登录注册页面(升级版)idea代码篇(2:Maven:Javaweb项目)使用MyBatis:Mapper,servlet+Tomcat

    前言:本篇前后端交互实现代码 。详细项目搭建见上篇 先贴一张登录界面和包结构:   1.Mapper 2.pojo 3.util 4.web 5.Login.html 6.CSS 我的企业版过期了,不能演示跳转页面了。但测过没问题。

    2024年02月11日
    浏览(53)
  • Windows 10 系统PowerShell美化 IDEA终端、VsCode终端以及Windows Terminal的PowerShell

    Linux 和 macOS 上的 PowerShell 使用 .NET Core,即 Microsoft Windows 上的完整 .NET Framework 的子集。 这非常重要,因为 PowerShell 提供对基础框架类型和方法的直接访问。 因此,在 Windows 上运行的脚本可能无法在非 Windows 平台上运行,因为框架之间存在差异。 Windows 终端程序是一款新式、

    2024年02月07日
    浏览(64)
  • 零基础如何使用IDEA启动前后端分离中的前端项目(Vue)?

    点击File--Settings--Plugins--搜索vue.js插件进行安装,下面的图中我已经安装好了 安装node.js 可以去官网下载:安装过程就很简单,直接下一步就行  测试是否安装成功:要使用 管理员方式 打开命令行cmd         安装完成之后,打开命令行工具,输入node -v如果出现版本号,则说

    2024年02月11日
    浏览(61)
  • Chatgpt团队研发的idea、vscode免费无需外网的AI插件Bito 保姆级安装教程

    Bito是由chatgpt团队研发的一款ai工具,可以在idea和vscode中直接使用 本文详细介绍在idea、vscode中安装和使用Bito Bito是一款在编程软件中使用的插件,由ChatGPT团队开发的,它是ChatGPT团队为了提高开发效率而开发的一款工具。 官方说明: Bito helps developers dramatically accelerate their

    2024年02月04日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包