在线考试系统

项目搭建

后端springboot，选不了更低的版本，更改pom文件就好了.
前端，创建vue3版本的，选vue vuex,依赖 jquery,bootstrap.

如何实现前后端通信

import $ from 'jquery';
import {ref} from 'vue';
export default{
    name:"App",
    setup:()=>{
        let test = ref("");
        $.ajax({
            url:"http://127.0.0.1:3000/index/",
            type:"get",
            success(resp){
                console.log(resp);
            }

        })
        return {
            test,
        }
    }

后端配置
在SpringBoot中解决跨域问题
添加配置类：CorsConfig

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}

controller 层

@RestController
public class test {
    @GetMapping("/index/")
    public String getIndex(){
        return "test case";
    }

}

编写路由 index.js

表示把’/’的名字叫home，自动跳转到某个页面

 {
    path:'/',
    name:'home',
    redirect:"/problem/"
  },

抓住其他非法输入，跳转到404

 {
    path:"/:catchAll(.*)",
    redirect:"/404/"
  }

前端，创建导航栏

App.vue相当于一个公共的东西，先展示app.vue,再展示其他部分
所以就先得再app.vue编写导航栏
导航栏可以看作一个组件
app.vue直接导入进来就行
添加依赖@popperjs/core

NavBar.vue 动态计算路由

import { useRoute } from 'vue-router'
import { computed } from 'vue'

export default {
    setup() {
        const route = useRoute();
        let route_name = computed(() => route.name)
        return {
            route_name
        }
    }
}

<li class="nav-item">
    <router-link :class="route_name == 'exam_index' ? 'nav-link active' : 'nav-link'"
        :to="{ name: 'exam_index' }">试卷</router-link>
</li>

App.vue导入组件

<template>
    <NavBar />
    <router-view></router-view>
</template>

<script>
import NavBar from './components/NavBar.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap"

export default {
    components: {
        NavBar
    }
}
</script>

<style>
body {
    background-image: url("./assets/images/background.jpeg");
    background-size: cover;
}
</style>