基于Springboot+Vue的前后端分离的简单Demo案例(三)

已于 2024-04-06 16:32:56 修改
阅读量373 收藏 7
点赞数 5
分类专栏： 前后端分离 后端开发 前端开发 文章标签： spring boot 前端框架 后端 vue
于 2024-03-24 17:40:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiao_Ya__/article/details/136942688
版权

前端搭建

Nav.vue

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>导航一</template
            >
            <el-menu-item-group>
              <!-- <template slot="title">分组一</template> -->
              <el-menu-item index="1-1" @click="find()">
                图书信息
              </el-menu-item>
              <el-menu-item index="1-2" @click="update()">
                编辑图书
              </el-menu-item>
              <el-menu-item index="1-3" @click="insert()">
                添加图书
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <el-menu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <!-- <template slot="title">分组一</template> -->
              <el-menu-item index="2-1"
                ><router-link to="/nav2/pageThree"
                  >页面3</router-link
                ></el-menu-item
              >
              <el-menu-item index="2-2"
                ><router-link to="/nav2/pageFour"
                  >页面4</router-link
                ></el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <el-menu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i>导航三</template
            >
            <el-menu-item-group>
              <!-- <template slot="title">分组一</template> -->
              <el-menu-item index="3-1">页面5</el-menu-item>
              <el-menu-item index="3-2">页面6</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="find()"> 查看</el-dropdown-item>
              <el-dropdown-item
                ><router-link to="/nav1/pageTwo"
                  >新增</router-link
                ></el-dropdown-item
              >
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        <!-- 内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Nav",
  methods: {
    find() {
      this.$router.push("/nav1/book").catch((err) => err);
    },
    update() {
      this.$router.push("/nav1/PageOne").catch((err) => err);
    },
    insert() {
      this.$router.push("/nav1/PageTwo").catch((err) => err);
    },
  },
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

Book.vue

<template>
  <div>
    <template>
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="id" prop="bookID"> </el-table-column>
        <el-table-column label="书名" prop="bookName"> </el-table-column>
        <el-table-column label="书本数量" prop="bookCounts"> </el-table-column>
        <el-table-column label="心灵鸡汤" prop="detail"> </el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
            <!-- <el-button size="mini" type="primary" icon="el-icon-search"
              >搜索</el-button
            > -->
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return {
      total: null,
      tableData: [],
    };
  },
  created() {
    this.axios.get("http://localhost:8081/book/findAll/1/3").then((res) => {
      this.tableData = res.data.list;
      this.total = res.data.total;
      console.log(res.data);
    });
  },
  methods: {
    page(currentpage) {
      this.axios
        .get("http://localhost:8081/book/findAll/" + currentpage + "/3")
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.bookID = this.tableData.bookID;
          this.bookName = this.tableData.bookName;
          this.bookCounts = this.tableData.bookCounts;
          this.detail = this.tableData.detail;
          console.log(this.tableData);
        });
    },
  },
};
</script>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Book from '../views/Book.vue'
import PageOne from '@/views/PageOne.vue'
import PageTwo from '@/views/PageTwo.vue'
import PageThree from '@/views/PageThree.vue'
import PageFour from '@/views/PageFour.vue'
import Nav from '@/views/Nav.vue'
import APP from '../App'
Vue.use(VueRouter)

const routes = [
  {
    path: "/nav1",
    name: "导航1",
    component: Nav,
    children: [
    {
        path: "/nav1/book",
        name: "Book",
        component: Book
      },
      {
        path: "/nav1/pageOne",
        name: "页面1",
        component: PageOne
      },
      {
        path: "/nav1/pageTwo",
        name: "页面2",
        component: PageTwo
      }
    ]
  },
  {
    path: "/nav2",
    name: "导航2",
    component: Nav,
    children: [
      {
        path: "/nav2/pageThree",
        name: "页面3",
        component: PageThree
      },
      {
        path: "/nav2/pageFour",
        name: "页面4",
        component: PageFour
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

前端页面展示：

增加分页查询

后端使用mybatis插件pagehelper实现分页查询

1.添加pagehelper依赖

<!--mybatis分页插件-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.3.0</version>
</dependency>

2.对findAll查询方法进行修改

BookMapper

package com.example.springbootvue.mapper;

import com.example.springbootvue.entity.Book;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;
@Mapper
public interface BookMapper {
    List <Book> findAll();
    //分页查询
    //PageInfo<Book> findAll(Integer pageNum, Integer pageSize);
}

修改BookService接口方法

PageInfo<Book> findAll(Integer pageNum,Integer pageSize);

修改BookServiceImpl实现类

@Override
public PageInfo<Book> findAll(Integer pageNum,Integer pageSize) {
    PageHelper.startPage(pageNum,pageSize);
    List<Book> books = bookDao.findAll();
    PageInfo<Book> bookPageInfo = new PageInfo<>(books,pageSize);
    return bookPageInfo;
}

修改BookController方法

@RestController
@RequestMapping("book")
@CrossOrigin //允许跨域
public class BookController {
    @Autowired
    private BookService bookService;

    @GetMapping("findAll/{page}/{limit}")
    public PageInfo<Book> findAll(@PathVariable("page") Integer page,@PathVariable("limit") Integer limit){

        PageInfo<Book> books = bookService.findAll(page, limit);

        return books;
    }
}

修改BookMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.springbootvue.mapper.BookMapper">
    <resultMap id="BaseResultMap" type="com.example.springbootvue.entity.Book">
        <result column="bookID" jdbcType="INTEGER" property="bookID"/>
        <result column="bookName" jdbcType="VARCHAR" property="bookName"/>
        <result column="bookCounts" jdbcType="INTEGER" property="bookCounts"/>
        <result column="detail" jdbcType="VARCHAR" property="detail"/>
    </resultMap>
    <select id="findAll" resultMap="BaseResultMap">
        select * from books
    </select>
    <insert id="save">
        insert into books (bookID,bookName,bookCounts,detail) values (#{bookID},#{bookName},#{bookCounts},#{detail});
    </insert>
</mapper>

application.properties

spring.application.name=springboot-vue
server.port=8081
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useSSL=false&userUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#??entity?*mapper.xml
mybatis.type-aliases-package=com.example.springbootvue.entity
mybatis.mapper-locations=classpath:mapper/*.xml

mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#分页
spring.main.allow-circular-references=true

后端——测试结果

前端

1.在methods中编写page方法

methods: {
    page(currentpage) {
      this.axios
        .get("http://localhost:8081/book/findAll/" + currentpage + "/2")
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.bookID = this.tableData.bookID;
          this.bookName = this.tableData.bookName;
          this.bookCounts = this.tableData.bookCounts;
          this.detail = this.tableData.detail;
          console.log(this.tableData);
        });
    },
  },

2.在data()中定义接收参数

data() {
    return {
      total: null,
      tableData: null
    }
}

3.创建created()方法在页面加载前查询显示数据

created() {
    this.axios.get("http://localhost:8081/book/findAll/1/2").then((res) => {
      this.tableData = res.data.list;
      this.total = res.data.total;
      console.log(res.data);
    });
  },

4.在表单中将接收属性改为后台传来的数据值

<el-table
      :data="tableData"
      style="width: 100%"
      max-height="250">
    <el-table-column
        fixed
        prop="bookId"
        label="id"
        width="150">
    </el-table-column>
    <el-table-column
        prop="bookName"
        label="书名"
        width="120">
    </el-table-column>
    <el-table-column
        prop="bookCounts"
        label="书本数量"
        width="120">
    </el-table-column>
    <el-table-column
        prop="detail"
        label="鸡汤"
        width="120">
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作"
        width="120">
      <template slot-scope="scope">
        <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

5.在后面添加分页代码

<el-pagination
               background
               layout="prev, pager, next"
               page-size="4"
               :total="total"
               @current-change="page">
</el-pagination>

6.设置分页代码的total为自己所定义的属性值以及@current-change方法

Book.vue

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" max-height="250">
      <el-table-column fixed prop="bookID" label="id" width="150">
      </el-table-column>
      <el-table-column prop="bookName" label="书名" width="120">
      </el-table-column>
      <el-table-column prop="bookCounts" label="书本数量" width="120">
      </el-table-column>
      <el-table-column prop="detail" label="心灵鸡汤" width="120">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      page-size="3"
      :total="total"
      @current-change="page"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return {
      total: null,
      tableData: [],
    };
  },
  created() {
    this.axios.get("http://localhost:8081/book/findAll/1/3").then((res) => {
      this.tableData = res.data.list;
      this.total = res.data.total;
      console.log(res.data);
    });
  },
  methods: {
    page(currentpage) {
      this.axios
        .get("http://localhost:8081/book/findAll/" + currentpage + "/3")
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.bookID = this.tableData.bookID;
          this.bookName = this.tableData.bookName;
          this.bookCounts = this.tableData.bookCounts;
          this.detail = this.tableData.detail;
          console.log(this.tableData);
        });
    },
  },
};
</script>

前端页面展示

PageTwo.vue

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>添加图书信息</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="returnBack()"
        >取消操作</el-button
      >
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="图书ID" prop="bookID">
        <el-input style="width: 60%" v-model="ruleForm.bookID"></el-input>
      </el-form-item>

      <el-form-item label="图书名称" prop="bookName">
        <el-input style="width: 60%" v-model="ruleForm.bookName"></el-input>
      </el-form-item>

      <el-form-item label="图书数量" prop="bookCounts">
        <el-input style="width: 60%" v-model="ruleForm.bookCounts"></el-input>
      </el-form-item>

      <el-form-item label="图书鸡汤" prop="detail">
        <el-input style="width: 60%" v-model="ruleForm.detail"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      ruleForm: {
        bookID: "",
        bookName: "",
        bookCounts: "",
        detail: "",
      },
      //校验的规则
      rules: {
        bookID: [
          { required: true, message: "图书ID不能为空", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        bookName: [
          { required: true, message: "图书名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        bookCounts: [
          {
            required: true,
            message: "图书数量不能为空(若没有请填写0)",
            trigger: "change",
          },
        ],
        detail: [
          { required: true, message: "图书鸡汤不能为空", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.axios
            .post(
              "http://localhost:8081/book/save",
              qs.stringify(this.ruleForm)
            )
            .then((res) => {
              console.log(res.data);
              if (res.data == "添加成功！") {
                _this.$message({
                  message: "恭喜你，上传成功",
                  type: "success",
                });
                _this.$router.push("book");
              }
            });
        } else {
          return false;
        }
      });
    },
    test() {
      console.log(this.ruleForm);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    returnBack() {
      this.$router.push("book");
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 500px;
  margin-left: 360px;
}
</style>

添加页面展示

 

后端添加数据表

mapper层（BookMapper） 

int save(Book book);

service层（BookService）

    //添加
    String save(Book book);

 service接口层（BookServiceImpl）

@Override
    public String save(Book book)
    {
       int result1=bookMapper.save(book);
       if(result1==1)
       {
           return "添加成功！";
       }
       else
       {
            return "添加失败！";
       }
    }

controller层（BookController）

    //添加
    @RequestMapping("save")
    //由于前段传来的是json对象需要加@RequestBody才能变成java对象
    public String save(Book book){
        return bookService.save(book);
    }

*mapper.xml

 <insert id="save">
        insert into books (bookID,bookName,bookCounts,detail) values (#{bookID},#{bookName},#{bookCounts},#{detail});
 </insert>

后端接口测试

前端添加页面展示

Xiao_Ya__
关注
专栏目录
SpringbootVueDemo:零基础Springboot+Vue 培训项目
05-29
SpringbootVueDemo :woman’s_boot:Springboot+:Christmas_tree:Vue 培训项目 前端技术栈 Vue.js ElementUI axios 后端技术栈 SpringBoot SpringData + JPA MySQL Shiro 学习步骤 maven 环境配置 创建springboot模块 运行BackApplication验证8080端口 编写第一个controller层进行测试 hello word @Controller 注解 @GetMapping("/index") @ResponseBody //将返回的字符串进行解析在前端显示 //@ResponseBody的作用其实是将java对象转为json格式的数据。 @RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用 package com.huihe.back.control
适合新手拿来练习的springboot+vue前后端分离小Demo
智的博客
10-24 6255
神的孩子在歌唱
SpringBoot+Vue的一个小Demo
SuperGorilla1的博客
07-14 1356
SpringBoot+Vue的一个小Demo 一、统一环境 开发工具webstorm+idea nodejs axios elementui router vuex 二、实际的开发步骤 前台代码编写 首先第一步建立一个vue项目 然后在package.json中引入依赖 "dependencies": { "axios": "^0.17.1", "vue": "^2.5.2",...
Springboot+Vue简单Demo教程
愿你拥有大风与烈酒,也能享受孤独与自由
03-07 2625
技术实现 根据 楠哥 项目做得笔记… Springboot + Vue (用的Mybatis) 使用Springboot进行后端应用开发,使用Vue进行前端应用开发 创建Vue工程 cmd命令行创建vue工程 vue ui 如果没有反应 可以查看 vue -h是否有vue ui命令 如果没有说明版本太低进行脚手架的升级 cnpm i -g @vue/cli 选择目录新建项目 创建项目名–关闭初始化git仓库–手动配置项目–Router、Vuex打开以及Linter/Formatter关闭–Use
基于Springboot+Vue的前后端分离的简单Demo案例(一)
Xiao_Ya__的博客
03-22 966
基于Springboot+Vue的前后端分离的简单Demo案例(一)
基于SpringBoot+Vue 前后端分离的RBAC权限管理系统（源码+数据库）
06-16
基于SpringBoot+Vue 前后端分离的RBAC权限管理系统（源码+数据库） ## 项目介绍 **一个基于SpringBoot + Vue + Element UI 开发的权限管理系统** - 角色权限精确到菜单、接口访问 - 前后端通过jwt进行认证状态管理...
基于springboot+vue开发前后端分离的开源开发框架源码.zip
01-09
基于springboot+vue开发前后端分离的开源开发框架源码.zip 基于springboot+vue开发前后端分离的开源开发框架源码.zip 基于springboot+vue开发前后端分离的开源开发框架源码.zip 基于springboot+vue开发前后端分离的...
基于SpringBoot+Vue前后端分离的Java快速开发框架.zip
12-01
基于Spring Boot和Vue前后端分离的Java快速开发框架是一种高效的、可扩展的Web应用程序架构。它结合了Spring Boot的强大功能和Vue的现代化前端框架，使开发人员能够快速构建高质量的Web应用程序。详细介绍参考：...
基于springboot+vue前后端分离的问卷调查系统
06-16
- 技术栈： - 前端：Vue+Element-ui - 后端：Springboot+Hibernate+MySQL - feature： - 基础的用户状态管理和安全管理 - 响应式布局 - Material Design风格
基于springboot+vue前后端分离的音乐网站系统源码+项目说明+数据库.zip
03-06
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设...基于springboot+vue前后端分离的音乐网站系统源码+项目说明+数据库.zip
SpringBoot前后端分离demo,后台工程+前台页面
01-08
包含后台的SpringBoot工程，前端的页面，和nginx-1.13.8的资源包，运行前请先阅读readme.txt。
SpringBoot+Shiro+Jwt+Vue+elementUI实现前后端分离单体系统Demo
蚂蚁舞
04-26 1912
记录一下使用SpringBoot集成Shiro框架和Jwt框架实现前后端分离Web项目的过程，后端使用SpringBoot整合Shiro+Jwt(auth0)，前端使用vue+elementUI框架，前后端的交互使用的是jwt的token，shiro的会话关闭，后端只需要使用Shiro框架根据前端传来的jwt的token信息授权访问相应资源。
Springboot+vue实现基本增查demo,前端小白初学vue
weixin_42476367的博客
09-02 460
Springboot+vue实现基本增查demo,前端小白初学vue 前言 由于本人之前是做后端的，因此本篇后端说明可能较少；主要还是记录下出次学习vue的心得。后端实现springboot+mybatis+mysql;前端vue. 功能介绍：1.报表数据的新增、查询 2.省市区联动 后台搭建 项目结构： pom文件引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/P
vue+springboot 前后端分离demo 回顾
weixin_44405856的博客
09-04 1076
vue+spring boot前提准备前端使用vue cli 搭建项目VUE开发后端 前提准备 文章只是给人提供前后端分离的初步体会，了解前后端分离给我们带来了什么。 前后端分离的大致思路： 前端进行静态页面的开发和实现用户交互 ，之后根据约定好的接口文档，进行相应数据获取和传参，最终将数据显示出来。 后端则是提供接口，让前端可以来获取到指定的数据， 数据库操作，数据处理，以及之后要考虑到的缓存，性能优化等等。 开发环境— 使用 idea 前端 vue+element ui 后端 spring boot
Vue+ElementUI+Springboot实现前后端分离的一个demo
weixin_42032770的博客
07-25 2557
1、前期准备 首先要安装好
springBoot + mybatis + Vue3的前后端分离小demo
洒家
03-17 742
一个java基础项目，java 前后端分离小demo
利用SpringBoot和Vue实现前后端分离（附源码）
最新发布
2301_82242988的博客
05-02 1023
/添加学生信息!!”);//删除学生信息!!”);4. 前台实现环境搭建：添加axios引用ElementUI的组件，引用axios并设置基础的urlimportcommand//引用axios，设置基础的url//绑定到全局new Vue({router,})添加路由routes: [{//前台首页path: ‘/’,},{//后台主页面children:[},{//登录页})访问的默认页面搜索登录学生管理系统。
使用Springboot+Vue完成一个前后端完全分离的案例（已解决跨域问题）
weixin_52015303的博客
12-11 121
SpingBoot+Vue前后端分离
spring boot+mybaties+vue实现一个简单的demo
hx_76的博客
05-12 634
目标： 通过spring boot+mybaties+vue实现将数据库里的内容展示在网页上，实现前后端分离。 准备： 1.idea2020专业版。 2.安装vue.js插件。 3.安装node.js。 实现步骤 一.创建spring boot项目 1. 修改pom文件 <dependencies> <dependency> <groupId>org.springframework.boot</groupId>
基于 springboot + vue 前后端分离的考试系统
05-01
基于 SpringBoot 和 Vue 的前后端分离考试系统是一种基于最新互联网技术开发的在线考试平台，包括前端界面与后端数据处理两个部分。该系统具有优秀的用户体验和高效的数据处理能力，可以实现在线人工考试、自动评分与数据统计等功能。 从前端角度来看，该考试系统使用了 Vue 技术作为前端开发的主要框架，采用了主流的 HTML5 和 CSS3 技术制作。整个系统界面简洁明了，严格遵循响应式设计原则，适用于多种终端设备，并且具有友好的交互方式和良好的用户体验。 从后端角度来看，该考试系统使用了 SpringBoot 技术作为后端开发的主要框架，采用了 MySQL 数据库技术制作。通过使用 SpringBoot 可以实现高效的数据处理和逻辑处理能力，而 MySQL 数据库则可以使系统存储的数据更加方便地进行管理和更新。 总体来说，基于 SpringBoot 和 Vue 的前后端分离考试系统不仅在技术实现上达到了一定的水平，也具有出色的性能表现。它不仅可以极大地提高在线考试的安全性和稳定性，还可以为教育和培训机构提供一种更加高效和便捷的评估和统计方式。因此，对于学校或企业等需要在线考试平台的用户来说，这种全新的在线考试系统是一种非常不错的选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值