基于Springboot+Vue的电子博物馆系统

基于Springboot+Vue的电子博物馆系统

前言：随着信息技术的不断发展，传统博物馆的参观方式逐渐向数字化、在线化转型。电子博物馆作为这一转型的重要组成部分，能够通过信息化手段为用户提供更丰富、更便捷的博物馆参观体验。本文基于Spring Boot和Vue.js框架，设计并实现了一个简单的电子博物馆系统，旨在展示数字化博物馆建设的技术架构及开发过程。

前言

项目功能及技术

用户端主要有首页、文创展示、浏览记录、网站公告、我的收藏、个人中心等模块。
管理端主要有用户管理、博物馆管理、文创管理、公告管理，博物馆视频管理。

vue.js+layui+html+js：用户端界面。
SpringBoot框架+Java程序语言：用户端及后台管理系统API的实现。
Layui前端框架：web后台管理界面样式及数据渲染框架。
MySQL数据库：数据存储。

用户端

管理端

API

SpringBoot框架搭建

1.创建maven project，先创建一个名为SpringBootDemo的项目，选择【New Project】

然后在弹出的下图窗口中，选择左侧菜单的【New Project】

在project下创建module，点击右键选择【new】—【Module…】

左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】

Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】，此时，一个Springboot项目已经搭建完成，可开发后续功能

实体映射创建Mapper

创建一个entity实体类文件夹，并在该文件夹下创建项目用到的实体类

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;

@Data
public class User {
   
    @TableId(type = IdType.AUTO)
    private Long id;

    private String account;

    private String pwd;

    private String userDesc;

    private String userHead;

    private LocalDateTime createTime;

    private Long role;

    private String nickname;

    private String email;

    private String tags;
}

接口封装

由于我们使用mybatis-plus，所以简单的增删改查不用自己写，框架自带了，只需要实现或者继承他的Mapper、Service

创建控制器Controller

整合Swagger

添加依赖

先导入spring boot的web包

<!--swagger依赖-->
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>

配置Swagger

创建一个swagger的配置类，命名为SwaggerConfig.java

/*
     *用于定义API主界面的信息，比如可以声明所有的API的总标题、描述、版本
     */
    private ApiInfo apiDemo() {
        return new ApiInfoBuilder()
                //用来自定义API的标题
                .title("SpringBoot项目SwaggerAPIAPI标题测试")
                //用来描述整体的API
                .description("SpringBoot项目SwaggerAPI描述测试")
                //创建人信息
                .contact(new Contact("测试员张三","http://localhost:8080/springboot/swagger-ui.html","xxxxxxxx@163.com"))
                //用于定义服务的域名
                //.termsOfServiceUrl("")
                .version("1.0") //可以用来定义版本
                .build();
    }

接口测试

运行Spring Boot项目，默认端口8080，通过地址栏访问url

接口组定义

根据不同的业务区分不同的接口组，使用@API来划分

@Api(tags = "用户管理") //  tags：组名称
@RestController
public class RoleController {
}

接口定义

使用@ApiModel来标注实体类，同时在接口中定义入参为实体类作为参数。

• @ApiModel：用来标类

• 常用配置项：value：实体类简称；description：实体类说明

• @ApiModelProperty：用来描述类的字段的含义。

常用字段类型

参考代码块

    <script type="text/javascript">
			layui.use(['laydate', 'form'], function() {
     
				var laydate = layui.laydate;
				var form = layui.form;
				// 监听全选
			});
			//轻量级框架
			var dataInfo = new Vue({
     
				el: "#content-page",
				//Vue的数据对象
				data: {
     
					timeSort: 'next', //发布时间排序
					viewVolumeSort: 'next', //浏览量排序
					arrayList: [], //数据列表
					title: null,
					dynasty: null,
					typeId: null,
					areaList: [],
					appointment: {
     },
					swiperSrc: '',
					indexSwiper: [
						'https://photo.16pic.com/00/53/26/16pic_5326792_b.jpg',
						'https://img95.699pic.com/desgin_photo/40113/1735_list.jpg',
						'https://file3.renrendoc.com/fileroot_temp3/2022-5/20/f16ee02b-429f-46ad-806f-f453cfb33b80/f16ee02b-429f-46ad-806f-f453cfb33b801.gif',
					],
					swiperIndexl: 0,
					
					bwgArray:[
					],
				}, //数据对象结束
				//方法
				methods: {
     
					GetAll: function(desc, desc1) {
     
						var me = this;
						me.swiperSrc = me.indexSwiper[0];
						let list = me.indexSwiper;
						var swiperIndexl = me.swiperIndexl;
						me.swiperSrc = list[swiperIndexl];
						setInterval(function() {
     
							me.swiperSrc = list[swiperIndexl];
							swiperIndexl = (swiperIndexl + 1) % list.length;
						}, 3000);
						if (sessionStorage.getItem('user') == null || sessionStorage.getItem('user') == undefined ||
							sessionStorage.getItem('user') == '') {
     
							location.href = "login/login.html"
						}
						
						
						$.ajax({
     
							url: "http://127.0.0.1:8085/exhibition/list",
							async: false,
							type: "POST",
							contentType: 'application/json',
							dataType: 'json',
							data: JSON.stringify({
     
							}),
							success: function(json) {
     
								me.bwgArray = json.data;
							}
						});
						

					},
					gobwgDetail(e) {
     
						sessionStorage.setItem("exhibition", JSON.stringify(e));
						window.location.href = "museumDetail.html";
					},
					
					goAreaDetail(item) {
     
						//console.log(id)
						sessionStorage.setItem("area", JSON.stringify(item));
						window.location.href = "areaDetail.html";
					},

				}, //方法结束
				created: function() {
     
					var vm = this;
					vm.GetAll('desc', 'desc');
				}