115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】_百度小程序

您的位置：上海毫米网络优化公司 > 小程序 > 百度小程序 >

SpringBoot+Vue前后端分离

(一)、环境介绍
(二)、Vscode部分

1.静态资源
2.配置route路由和axios异步
3.配置跨域支持
(三)、IDEA部分

1.创建SpringBoot项目
2.创建两个实体类
3.创建控制层
4.配置后端响应的端口
(四)、Vue和SpringBoot交互

1.同时运行IDEA和Vscode

2.访问登入界面

(一)、环境介绍

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

(二)、Vscode部分

1.静态资源

1.App.vue

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

2.src/pages/Login.vue

将前端数据传递给后端，后端并响应的操作

3.src/pages/Index.vue

页面假如登入成功，那么我们就跳转到这个页面

2.配置route路由和axios异步

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

npm install  vue-router@3

115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】,在这里插入图片描述,第1张

2.安装axios: 在vscode的控制台下输入:

 npm add axios

115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】,在这里插入图片描述,第2张

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依赖。

115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】,在这里插入图片描述,第3张

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);
        }
    }
}