springboot框架VUE3学院网站系统开发mysql数据库设计java编程计算机网页源码maven项目


博主介绍:专注于Java vue  .net  php phython  小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作

☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人

一、源码特点
springboot VUE3 学院网站系统是一套完善的完整信息管理类型系统,结合springboot框架和VUE完成本系统,对理解vue java编程开发语言有帮助系统采用springboot框架(MVC模式开发),系统具有完整的源代码和数据库,系统主要采用B/S模式开发。
前段主要技术 vue3 
后端主要技术 ssm java
数据库 mysql
开发工具 IDEA  JDK1.8 

202409231501


环境需要

1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以 不建议。

2.IDE环境:推荐IDEA;

3.硬件环境:windows 7/8/10 1G内存以上;;

5.数据库:mysql8.0 需要修改数据连接配置,以及maven中的mysql 驱动包;

6.是Maven项目;查看源码目录中是否包含pom.xml;

使用说明

1. 使用Navicat或者其它工具,在mysql中创建对应sql文件名称的数据库,并导入项目的sql文件 数据库字符集utf-8;

2. 使用IDEA导入项目;

3. 将项目中src\main\resources下的application.yml 配置文件中的数据库配置改为自己的配置;

4.vue 项目启动   
vue 版本 2.6.6
node 版本 16.14.2

后端服务端口 8080
后端管理系统端口是8081
前端功能端口是 8082

二、功能介绍

前台功能:
首页浏览
系部信息浏览
教学科研管理
教师风采信息浏览
技能竞赛浏览
党建工作浏览
招生就业信息浏览
制度信息浏览
用户注册、登录

后台功能:
管理员登录、个人信息修改
教学信息管理
招生信息管理
就业信息管理
新闻资讯信息管理
科研信息管理
教师风采管理
制度信息管理
系部信息管理
党建工作管理
我的收藏夹
党竞信息管理
轮播图管理

系统数据库设计

表名:config

功能:配置文件

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

name

varchar

100

配置参数名称

value

varchar

100

配置参数值

表名:token

功能:token表

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

userid

bigint

用户id

username

varchar

100

用户名

tablename

varchar

100

表名

role

varchar

100

角色

token

varchar

200

密码

addtime

timestamp

新增时间

CURRENT_TIMESTAMP

expiratedtime

timestamp

过期时间

CURRENT_TIMESTAMP

表名:menu

功能:菜单

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

menujson

longtext

4294967295

菜单

表名:jinengjingsai

功能:技能竞赛

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

jingsaimingcheng

varchar

200

竞赛名称

jingsaitupian

longtext

4294967295

竞赛图片

jingsairenshu

varchar

200

竞赛人数

jingsaiguize

longtext

4294967295

竞赛规则

jingsaishijian

datetime

竞赛时间

jingsaixiangqing

longtext

4294967295

竞赛详情

storeupnum

int

收藏数量

表名:zhaoshengxinxi

功能:招生信息

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

xuexiaomingcheng

varchar

200

学校名称

zhaoshengjihua

longtext

4294967295

招生计划

zhaoshengzhuanye

varchar

200

招生专业

zhaoshengduixiang

varchar

200

招生对象

baomingfangshi

varchar

200

报名方式

baomingshijian

date

报名时间

xuefeibiaozhun

varchar

200

学费标准

lianxidianhua

varchar

200

联系电话

zhaoshengjianzhang

longtext

4294967295

招生简章

表名:jiaoshifengcai

功能:教师风采

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

biaoti

varchar

200

标题

zhaopian

longtext

4294967295

照片

xibumingcheng

varchar

200

系部名称

jiaoshixingming

varchar

200

教师姓名

huoderongyu

longtext

4294967295

获得荣誉

huojiangxiangqing

longtext

4294967295

获奖详情

表名:xibugaikuang

功能:系部概况

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

xibumingcheng

varchar

200

系部名称

tupian

longtext

4294967295

图片

xibuxiangqing

longtext

4294967295

系部详情

zhuanyejianjie

varchar

200

专业简介

jibenqingkuang

varchar

200

基本情况

peiyangmubiao

varchar

200

培养目标

表名:dangjiangongzuo

功能:党建工作

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

zuzhimingcheng

varchar

200

组织名称

tupian

longtext

4294967295

图片

biaoti

varchar

200

标题

dangjiangongzuo

longtext

4294967295

党建工作

jilushijian

datetime

记录时间

表名:zhiduxinxi

功能:制度信息

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

zhidubiaoti

varchar

200

制度标题

fengmian

longtext

4294967295

封面

zhidujianjie

longtext

4294967295

制度简介

zhiduneirong

longtext

4294967295

制度内容

faburiqi

date

发布日期

表名:storeup

功能:我的收藏

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

refid

bigint

refid

tablename

varchar

200

表名

name

varchar

200

名称

picture

longtext

4294967295

图片

type

varchar

200

类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)

inteltype

varchar

200

推荐类型

remark

varchar

200

备注

userid

bigint

用户id

表名:news

功能:系部信息

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

title

varchar

200

标题

introduction

longtext

4294967295

简介

picture

longtext

4294967295

图片

content

longtext

4294967295

内容

表名:keyanxinxi

功能:科研信息

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

xiangmubianhao

varchar

200

项目编号

xiangmuzhonglei

varchar

200

项目种类

tupian

longtext

4294967295

图片

xiangmumingcheng

varchar

200

项目名称

xiangmufujian

longtext

4294967295

项目附件

keyanchengguo

longtext

4294967295

科研成果

xiangmuxiangqing

longtext

4294967295

项目详情

faburiqi

datetime

发布日期

表名:jiuyexinxi

功能:就业信息

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

gongsimingcheng

varchar

200

公司名称

gangweimingcheng

varchar

200

岗位名称

fengmian

longtext

4294967295

封面

zhaopinrenshu

varchar

200

招聘人数

xueliyaoqiu

varchar

200

学历要求

xinzidaiyu

varchar

200

薪资待遇

gongzuoshijian

varchar

200

工作时间

gangweixiangqing

longtext

4294967295

岗位详情

lianxidianhua

varchar

200

联系电话

storeupnum

int

收藏数量

表名:jiaoxuexinxi

功能:教学信息

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

biaoti

varchar

200

标题

fengmian

longtext

4294967295

封面

jianjie

longtext

4294967295

简介

neirong

longtext

4294967295

内容

faburiqi

date

发布日期

表名:users

功能:管理员

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

主键

  主键

addtime

timestamp

创建时间

CURRENT_TIMESTAMP

username

varchar

200

用户名

password

varchar

200

密码

role

varchar

200

角色

系统后端代码实现



    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,JinengjingsaiEntity jinengjingsai,
		HttpServletRequest request){
        EntityWrapper<JinengjingsaiEntity> ew = new EntityWrapper<JinengjingsaiEntity>();

		PageUtils page = jinengjingsaiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jinengjingsai), params), params));

        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,JinengjingsaiEntity jinengjingsai, 
		HttpServletRequest request){
        EntityWrapper<JinengjingsaiEntity> ew = new EntityWrapper<JinengjingsaiEntity>();

		PageUtils page = jinengjingsaiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jinengjingsai), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( JinengjingsaiEntity jinengjingsai){
       	EntityWrapper<JinengjingsaiEntity> ew = new EntityWrapper<JinengjingsaiEntity>();
      	ew.allEq(MPUtil.allEQMapPre( jinengjingsai, "jinengjingsai")); 
        return R.ok().put("data", jinengjingsaiService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(JinengjingsaiEntity jinengjingsai){
        EntityWrapper< JinengjingsaiEntity> ew = new EntityWrapper< JinengjingsaiEntity>();
 		ew.allEq(MPUtil.allEQMapPre( jinengjingsai, "jinengjingsai")); 
		JinengjingsaiView jinengjingsaiView =  jinengjingsaiService.selectView(ew);
		return R.ok("查询技能竞赛成功").put("data", jinengjingsaiView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        JinengjingsaiEntity jinengjingsai = jinengjingsaiService.selectById(id);
		jinengjingsai = jinengjingsaiService.selectView(new EntityWrapper<JinengjingsaiEntity>().eq("id", id));
        return R.ok().put("data", jinengjingsai);
    }

    /**
     * 前端详情
     */
	@IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        JinengjingsaiEntity jinengjingsai = jinengjingsaiService.selectById(id);
		jinengjingsai = jinengjingsaiService.selectView(new EntityWrapper<JinengjingsaiEntity>().eq("id", id));
        return R.ok().put("data", jinengjingsai);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody JinengjingsaiEntity jinengjingsai, HttpServletRequest request){
    	jinengjingsai.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(jinengjingsai);
        jinengjingsaiService.insert(jinengjingsai);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody JinengjingsaiEntity jinengjingsai, HttpServletRequest request){
    	jinengjingsai.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(jinengjingsai);
        jinengjingsaiService.insert(jinengjingsai);
        return R.ok();
    }



    /**
     * 修改
     */
    @RequestMapping("/update")
    @Transactional
    public R update(@RequestBody JinengjingsaiEntity jinengjingsai, HttpServletRequest request){
        //ValidatorUtils.validateEntity(jinengjingsai);
        jinengjingsaiService.updateById(jinengjingsai);//全部更新
        return R.ok();
    }



    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        jinengjingsaiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
	

前端vue实现


<template>
	<div>
		<div class="app-contain">
			<div class="list_search_view">
				<el-form :model="searchQuery" class="search_form" >
					<div class="search_view">
						<div class="search_label">
							竞赛名称:
						</div>
						<div class="search_box">
							<el-input class="search_inp" v-model="searchQuery.jingsaimingcheng" placeholder="竞赛名称"
								clearable>
							</el-input>
						</div>
					</div>
					<div class="search_btn_view">
						<el-button class="search_btn" type="primary" @click="searchClick()" size="small">搜索</el-button>
					</div>
				</el-form>
				<br>
				<div class="btn_view">
					<el-button type="success" @click="addClick" v-if="btnAuth('jinengjingsai','新增')">新增</el-button>
					<el-button  v-if=" btnAuth('jinengjingsai','查看')" type="info"  :disabled="selRows.length==1?false:true" @click="infoClick(null)">详情</el-button>
					<el-button type="primary" :disabled="selRows.length==1?false:true" @click="editClick" v-if=" btnAuth('jinengjingsai','修改')">修改</el-button>
					<el-button type="danger" :disabled="selRows.length?false:true" @click="delClick(null)"  v-if="btnAuth('jinengjingsai','删除')">删除</el-button>
				</div>
			</div>
			<br>
			<el-table
				v-loading="listLoading"
				border 
				:stripe='true'
				@selection-change="handleSelectionChange" 
				ref="table"
				v-if="btnAuth('jinengjingsai','查看')"
				:data="list"
				@row-click="listChange">
				<el-table-column :resizable='true' align="left" header-align="left" type="selection" width="55" />
				<el-table-column label="序号" width="70" :resizable='true' :sortable='true' align="left" header-align="left">
					<template #default="scope">{{ scope.$index + 1}}</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="left"
					 prop="jingsaimingcheng"
					label="竞赛名称">
					<template #default="scope">
						{{scope.row.jingsaimingcheng}}
					</template>
				</el-table-column>
				<el-table-column label="竞赛图片" width="120" :resizable='true' :sortable='true' align="left" header-align="left">
					<template #default="scope">
						<div v-if="scope.row.jingsaitupian">
							<el-image v-if="scope.row.jingsaitupian.substring(0,4)=='http'" preview-teleported
								:preview-src-list="[scope.row.jingsaitupian.split(',')[0]]"
								:src="scope.row.jingsaitupian.split(',')[0]" style="width:100px;height:100px"></el-image>
							<el-image v-else preview-teleported
								:preview-src-list="[$config.url+scope.row.jingsaitupian.split(',')[0]]"
								:src="$config.url+scope.row.jingsaitupian.split(',')[0]" style="width:100px;height:100px">
							</el-image>
						</div>
						<div v-else>无图片</div>
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="left"
					 prop="jingsairenshu"
					label="竞赛人数">
					<template #default="scope">
						{{scope.row.jingsairenshu}}
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="left"
					 prop="jingsaishijian"
					label="竞赛时间">
					<template #default="scope">
						{{scope.row.jingsaishijian}}
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="left"
					 prop="storeupnum"
					label="收藏数量">
					<template #default="scope">
						{{scope.row.storeupnum}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300" :resizable='true' :sortable='true' align="left" header-align="left">
					<template #default="scope">
						<el-button type="info" v-if=" btnAuth('jinengjingsai','查看')" @click="infoClick(scope.row.id)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination 
				background
				:layout="layouts.join(',')"
				:total="total" 
				:page-size="listQuery.limit"
				prev-text="Prev"
				next-text="Next"
				:hide-on-single-page="false"
				:style='{"padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","textAlign":"center","width":"100%","fontWeight":"500"}'
				@size-change="sizeChange"
				@current-change="currentChange" 
				@prev-click="prevClick"
				@next-click="nextClick"  />
		</div>
		<formModel ref="formRef" @formModelChange="formModelChange"></formModel>
	</div>
</template>
<script setup>
	import axios from 'axios'
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
		watch,
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessageBox
	} from 'element-plus'
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	import formModel from './formModel.vue'
	
	//基础信息
	const tableName = 'jinengjingsai'
	const formName = '技能竞赛'
	const route = useRoute()
	//基础信息
	onMounted(()=>{
	})
	//列表数据
	const list = ref(null)
	const table = ref(null)
	const listQuery = ref({
		page: 1,
		limit: 20,
		sort: 'id',
		order: 'desc'
	})
	const searchQuery = ref({})
	const selRows = ref([])
	const listLoading = ref(false)
	const listChange = (row) =>{
		nextTick(()=>{
			table.value.clearSelection()
			table.value.toggleRowSelection(row)
		})
	}
	//列表
	const getList = () => {
		listLoading.value = true
		let params = JSON.parse(JSON.stringify(listQuery.value))
		params['sort'] = 'id'
		params['order'] = 'desc'
		if(searchQuery.value.jingsaimingcheng&&searchQuery.value.jingsaimingcheng!=''){
			params['jingsaimingcheng'] = '%' + searchQuery.value.jingsaimingcheng + '%'
		}
		context?.$http({
			url: `${tableName}/page`,
			method: 'get',
			params: params
		}).then(res => {
			listLoading.value = false
			list.value = res.data.data.list
			total.value = Number(res.data.data.total)
		})
	}
	//删
	const delClick = (id) => {
		let ids = ref([])
		if (id) {
			ids.value = [id]
		} else {
			if (selRows.value.length) {
				for (let x in selRows.value) {
					ids.value.push(selRows.value[x].id)
				}
			} else {
				return false
			}
		}
		ElMessageBox.confirm(`是否删除选中${formName}`, '提示', {
			confirmButtonText: '是',
			cancelButtonText: '否',
			type: 'warning',
		}).then(() => {
			context?.$http({
				url: `${tableName}/delete`,
				method: 'post',
				data: ids.value
			}).then(res => {
				context?.$toolUtil.message('删除成功', 'success',()=>{
					getList()
				})
			})
		})
	}
	//多选
	const handleSelectionChange = (e) => {
		selRows.value = e
	}
	//列表数据
	//分页
	const total = ref(0)
	const layouts = ref(["prev","pager","next"])
	const sizeChange = (size) => {
		listQuery.value.limit = size
		getList()
	}
	const currentChange = (page) => {
		listQuery.value.page = page
		getList()
	}
	const prevClick = () => {
		listQuery.value.page = listQuery.value.page - 1
		getList()
	}
	const nextClick = () => {
		listQuery.value.page = listQuery.value.page + 1
		getList()
	}
	//分页
	//权限验证
	const btnAuth = (e,a)=>{
		return context?.$toolUtil.isAuth(e,a)
	}
	//搜索
	const searchClick = () => {
		listQuery.value.page = 1
		getList()
	}
	//表单
	const formRef = ref(null)
	const formModelChange=()=>{
		searchClick()
	}
	const addClick = ()=>{
		formRef.value.init()
	}
	const editClick = ()=>{
		if(selRows.value.length){
			formRef.value.init(selRows.value[0].id,'edit')
		}
	}
	
	const infoClick = (id=null)=>{
		if(id){
			formRef.value.init(id,'info')
		}
		else if(selRows.value.length){
			formRef.value.init(selRows.value[0].id,'info')
		}
	}
	// 表单
	// 预览文件
	const preClick = (file) =>{
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		window.open(context?.$config.url + file)
		// const a = document.createElement('a');
		// a.style.display = 'none';
		// a.setAttribute('target', '_blank');
		// file && a.setAttribute('download', file);
		// a.href = context?.$config.url + file;
		// document.body.appendChild(a);
		// a.click();
		// document.body.removeChild(a);
	}
	// 下载文件
	const download = (file) => {
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		let arr = file.replace(new RegExp('file/', "g"), "")
		axios.get((location.href.split(context?.$config.name).length>1 ? location.href.split(context?.$config.name)[0] :'') + context?.$config.name + '/file/download?fileName=' + arr, {
			headers: {
				token: context?.$toolUtil.storageGet('Token')
			},
			responseType: "blob"
		}).then(({
			data
		}) => {
			const binaryData = [];
			binaryData.push(data);
			const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
				type: 'application/pdf;chartset=UTF-8'
			}))
			const a = document.createElement('a')
			a.href = objectUrl
			a.download = arr
			// a.click()
			// 下面这个写法兼容火狐
			a.dispatchEvent(new MouseEvent('click', {
				bubbles: true,
				cancelable: true,
				view: window
			}))
			window.URL.revokeObjectURL(data)
		})
	}


	//初始化
	const init = () => {
		getList()
	}
	init()
</script>
<style lang="scss" scoped>
	
	// 操作盒子
	.list_search_view {
		margin: 0 0 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// 搜索盒子
		.search_form {
			display: flex;
			align-items: center;
			order: 2;
			// 子盒子
			.search_view {
				margin: 0 10px 0 0;
				display: flex;
				align-items: center;
				// 搜索label
				.search_label {
					margin: 0 10px 0 0;
					color: #fff;
					background: none;
					font-weight: 500;
					display: inline-block;
					width: auto;
					font-size: 14px;
					line-height: 40px;
					text-align: right;
					min-width: 100px;
					height: 40px;
				}
				// 搜索item
				.search_box {
					display: inline-block;
					width: auto;
					// 输入框
					:deep(.search_inp) {
						border: 1px solid rgba(0, 0, 0, 0.1);
						border-radius: 4px;
						padding: 0 10px;
						color: #fff;
						background: rgba(0, 0, 0, 0.1);
						width: auto;
						line-height: 34px;
						box-sizing: border-box;
						//去掉默认样式
						.el-input__wrapper{
							border: none;
							box-shadow: none;
							background: none;
							border-radius: 0;
							height: 100%;
							padding: 0;
						}
						.is-focus {
							box-shadow: none !important;
						}
					}
				}
			}
			// 搜索按钮盒子
			.search_btn_view {
				width: 20%;
				display: flex;
				padding: 0 20px;
				// 搜索按钮
				.search_btn {
					border: 1px solid #357ebd;
					cursor: pointer;
					border-radius: 4px;
					padding: 0 24px;
					color: #fff;
					background: rgba(66, 139, 202, 0.45);
					width: auto;
					font-size: 14px;
					height: 36px;
				}
				// 搜索按钮-悬浮
				.search_btn:hover {
					border: 1px solid #357ebd;
					background: rgba(66, 139, 202, 0.45);
				}
			}
		}
		//头部按钮盒子
		.btn_view {
			margin: 0;
			display: flex;
			// 其他
			:deep(.el-button--default){
				border: 1px solid #ccc;
				cursor: pointer;
				border-radius: 3px;
				padding: 0 24px;
				margin: 0 10px 0 0;
				outline: none;
				color: #fff;
				background: rgba(222, 222, 222, 0.55);
				width: auto;
				font-size: 14px;
				height: 36px;
			}
			// 其他-悬浮
			:deep(.el-button--default:hover){
				background: rgba(222, 222, 222, 0.45);
			}
			// 新增
			:deep(.el-button--success){
				border: 1px solid #357ebd;
				cursor: pointer;
				border-radius: 3px;
				padding: 0 24px;
				margin: 0 10px 0 0;
				outline: none;
				color: #fff;
				background: rgba(66, 139, 202, 0.45);
				width: auto;
				font-size: 14px;
				height: 36px;
			}
			// 新增-悬浮
			:deep(.el-button--success:hover){
				background: rgba(66, 139, 202, 0.35);
			}
			// 修改
			:deep(.el-button--primary){
				border: 1px solid #4cae4c;
				cursor: pointer;
				border-radius: 3px;
				padding: 0 24px;
				margin: 0 10px 0 0;
				outline: none;
				color: #fff;
				background: rgba(92, 184, 92, 0.55);
				width: auto;
				font-size: 14px;
				height: 36px;
			}
			// 修改-悬浮
			:deep(.el-button--primary:hover){
				background: rgba(92, 184, 92, 0.45);
			}
			// 详情
			:deep(.el-button--info){
				border: 1px solid #46b8da;
				cursor: pointer;
				border-radius: 3px;
				padding: 0 24px;
				margin: 0 10px 0 0;
				outline: none;
				color: #fff;
				background: rgba(91, 192, 222, 0.45);
				width: auto;
				font-size: 14px;
				height: 36px;
			}
			// 详情-悬浮
			:deep(.el-button--info:hover){
				background: rgba(91, 192, 222, 0.35);
			}
			// 删除
			:deep(.el-button--danger){
				border: 1px solid #d43f3a;
				cursor: pointer;
				border-radius: 3px;
				padding: 0 24px;
				margin: 0 10px 0 0;
				outline: none;
				color: #fff;
				background: rgba(217, 83, 79, 0.55);
				width: auto;
				font-size: 14px;
				height: 36px;
			}
			// 删除-悬浮
			:deep(.el-button--danger:hover){
				background: rgba(217, 83, 79, 0.45);
			}
			// 统计
			:deep(.el-button--warning){
				border: 1px solid #eea236;
				cursor: pointer;
				border-radius: 3px;
				padding: 0 24px;
				margin: 0 10px 0 0;
				outline: none;
				color: #fff;
				background: rgba(240, 173, 78, 0.55);
				width: auto;
				font-size: 14px;
				height: 36px;
			}
			// 统计-悬浮
			:deep(.el-button--warning:hover){
				background: rgba(240, 173, 78, 0.45);
			}
		}
	}
	// 表格样式
	.el-table {
		border-radius: 0px;
		padding: 0;
		background: rgba(0, 0, 0, 0.25);
		width: 100%;
		border-color: rgba(254, 182, 203, 0.5);
		border-width: 1px 0 0 1px;
		border-style: solid;
		:deep(.el-table__header-wrapper) {
			thead {
				color: #fff;
				font-weight: 500;
				width: 100%;
				tr {
					background: rgba(0, 0, 0, 0.1);
					th {
						padding: 4px 0;
						background: none;
						border-color: rgba(254, 182, 203, 0.5);
						border-width: 0 0px 1px 0;
						border-style: solid;
						text-align: left;
						.cell {
							padding: 0 10px;
							word-wrap: normal;
							word-break: break-all;
							white-space: normal;
							font-weight: bold;
							display: inline-block;
							vertical-align: middle;
							width: 100%;
							line-height: 24px;
							position: relative;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		:deep(.el-table__body-wrapper) {
			tbody {
				width: 100%;
				tr {
					background: none;
					td {
						padding: 6px 0;
						color: #eee;
						background: none;
						border-color: #d2d2d2;
						border-width: 0 0px 0px 0;
						border-style: solid;
						text-align: left;
						.cell {
							padding: 0 10px;
							overflow: hidden;
							word-break: break-all;
							white-space: normal;
							line-height: 24px;
							text-overflow: ellipsis;
							// 编辑
							.el-button--primary {
								border: 1px solid #d58512;
								cursor: pointer;
								border-radius: 4px;
								padding: 5px 10px;
								margin: 0 6px 6px 0;
								color: #fff;
								background: rgba(240, 173, 78, 0.45);
								width: auto;
								font-size: 12px;
								height: auto;
							}
							// 编辑-悬浮
							.el-button--primary:hover {
							}
							// 详情
							.el-button--info {
								border: 1px solid #357ebd;
								cursor: pointer;
								border-radius: 3px;
								padding: 5px 10px;
								margin: 0 6px 6px 0;
								color: #fff;
								background: rgba(66, 139, 202, 0.55);
								width: auto;
								font-size: 12px;
								height: auto;
							}
							// 详情-悬浮
							.el-button--info:hover {
							}
							// 删除
							.el-button--danger {
								border: 1px solid #ac2925;
								cursor: pointer;
								border-radius: 3px;
								padding: 5px 10px;
								margin: 0 6px 6px 0;
								color: #fff;
								background: rgba(217, 83, 79, 0.45);
								width: auto;
								font-size: 12px;
								height: auto;
							}
							// 删除-悬浮
							.el-button--danger:hover {
							}
							// 跨表
							.el-button--success {
								border: 1px solid #ccc;
								cursor: pointer;
								border-radius: 3px;
								padding: 5px 10px;
								margin: 0 6px 6px 0;
								color: #fff;
								background: rgba(222, 222, 222, 0.55);
								width: auto;
								font-size: 12px;
								height: 24px;
							}
							// 跨表-悬浮
							.el-button--success:hover {
							}
							// 操作
							.el-button--warning {
								border: 1px solid #4cae4c;
								cursor: pointer;
								border-radius: 3px;
								padding: 5px 10px;
								margin: 0 6px 6px 0;
								color: #fff;
								background: rgba(92, 184, 92, 0.55);
								width: auto;
								font-size: 12px;
								height: auto;
							}
							// 操作-悬浮
							.el-button--warning:hover {
							}
						}
					}
				}
				tr.el-table__row--striped {
					td {
						background: rgba(0, 0, 0, 0.10);
					}
				}
				tr:hover {
					td {
						padding: 6px 0;
						color: #fff;
						background: rgba(0, 0, 0, 0.10);
						border-color: #d2d2d2;
						border-width: 0 0px 0px 0;
						border-style: solid;
						text-align: left;
					}
				}
			}
		}
	}
	// 分页器
	.el-pagination {
		// 总页码
		:deep(.el-pagination__total) {
			margin: 0 10px 0 0;
			color: #666;
			font-weight: 400;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 上一页
		:deep(.btn-prev) {
			border: none;
			border-radius: 0px;
			padding: 0 5px;
			margin: 0 5px;
			color: #fff;
			background: none;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 26px;
			min-width: 35px;
			height: 26px;
		}
		// 下一页
		:deep(.btn-next) {
			border: none;
			border-radius: 0px;
			padding: 0 5px;
			margin: 0 5px;
			color: #fff;
			background: none;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 26px;
			min-width: 35px;
			height: 26px;
		}
		// 上一页禁用
		:deep(.btn-prev:disabled) {
			border: none;
			cursor: not-allowed;
			border-radius: 0px;
			padding: 0 5px;
			margin: 0 5px;
			color: #fff;
			background: none;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 26px;
			height: 26px;
		}
		// 下一页禁用
		:deep(.btn-next:disabled) {
			border: none;
			cursor: not-allowed;
			border-radius: 0px;
			padding: 0 5px;
			margin: 0 5px;
			color: #fff;
			background: none;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 26px;
			height: 26px;
		}
		// 页码
		:deep(.el-pager) {
			padding: 0;
			margin: 0;
			display: inline-block;
			vertical-align: top;
			// 数字
			.number {
				cursor: pointer;
				border: 1px solid rgba(255, 255, 255, 0.3);
				padding: 0 4px;
				margin: 0 5px;
				color: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 26px;
				border-radius: 0px;
				background: none;
				text-align: center;
				min-width: 30px;
				height: 26px;
			}
			// 数字悬浮
			.number:hover {
				cursor: pointer;
				border: 1px solid rgba(0, 0, 0, 0.05);
				padding: 0 4px;
				margin: 0 5px;
				color: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 26px;
				border-radius: 0px;
				background: rgba(0, 0, 0, 0.25);
				text-align: center;
				min-width: 30px;
				height: 26px;
			}
			// 选中
			.number.is-active {
				cursor: default;
				border: 1px solid rgba(0, 0, 0, 0.05);
				padding: 0 4px;
				margin: 0 5px;
				color: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 26px;
				border-radius: 0px;
				background: rgba(0, 0, 0, 0.25);
				text-align: center;
				min-width: 30px;
				height: 26px;
			}
		}
		// sizes
		:deep(.el-pagination__sizes) {
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
			.el-select {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0;
				color: #606266;
				display: inline-block;
				font-size: 13px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
			}
		}
		// 跳页
		:deep(.el-pagination__jump) {
			margin: 0 0 0 24px;
			color: #606266;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
			// 输入框
			.el-input {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0 3px;
				color: #606266;
				display: inline-block;
				font-size: 14px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
				//去掉默认样式
				.el-input__wrapper{
					border: none;
					box-shadow: none;
					background: none;
					border-radius: 0;
					height: 100%;
					padding: 0;
				}
				.is-focus {
					box-shadow: none !important;
				}
			}
		}
	}
</style>

三、注意事项
1、管理员账号:admin密码:admin 数据库配置文件\src\main\resources\application.properties
2、开发环境为IDEA开发,数据库为mysql,使用java语言开发。
3、数据库文件名是javassmtg.sql 
4
前台地址:
http://localhost:8081
123,123

后台地址:
http://localhost:8082


admin,admin

四 系统实现效果

大家点赞、收藏、关注、评论啦  其他的定制服务  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/882185.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python 识别省市、区县并组建三级信息数据库

一、网址&#xff1a; 全国行政区划信息查询平台 二、分析并搭建框架 检查网页源码&#xff1a; 检查网页源码可以发现&#xff1a; 所有省级信息全部在javaScript下的json中&#xff0c;会在页面加载时加载json数据&#xff0c;填充到页面的option中。 1、第一步&#xff1a…

探秘 Web Bluetooth API:连接蓝牙设备的新利器

引言 随着物联网技术的快速发展&#xff0c;蓝牙设备在日常生活中扮演着越来越重要的角色。而在 Web 开发领域&#xff0c;Web Bluetooth API 的出现为我们提供了一种全新的方式来连接和控制蓝牙设备。本文将深入探讨 Web Bluetooth API 的使用方法和原理&#xff0c;帮助开发…

浅显易懂的Git教程

Git概述 SVN与Git的对比 SVN&#xff08;Subversion&#xff09; 类型&#xff1a;集中式版本控制系统 工作流程&#xff1a; 从中央服务器下载最新版本到本地。在本地进行开发。提交更改回中央服务器。 优点&#xff1a; 简单易用&#xff0c;适合小型团队。版本历史清…

vs2022快捷键异常不起作用解决办法

安装了新版本的vs2022&#xff0c;安装成功后&#xff0c;发现快捷键发生异常&#xff0c;之前常用的快捷键要么发生改变&#xff0c;要么无法使用&#xff0c;比如原来注释代码的快捷键是ctrlec&#xff0c;最新安装版本变成了ctrlkc&#xff0c;以前编译代码的快捷键是F6或者…

初始MYSQL数据库(6)—— 事务

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; MYSQL 目录 事务的概念 事务的ACID特性 使用事务 查看支持事务的存储引擎 事务的语法 保存点 自动/手动提交事务 事务的隔离性和…

Python模拟鼠标轨迹[Python]

一.鼠标轨迹模拟简介 传统的鼠标轨迹模拟依赖于简单的数学模型&#xff0c;如直线或曲线路径。然而&#xff0c;这种方法难以捕捉到人类操作的复杂性和多样性。AI大模型的出现&#xff0c;能够通过深度学习技术&#xff0c;学习并模拟更自然的鼠标移动行为。 二.鼠标轨迹算法实…

【原创】java+swing+mysql仓库管理系统设计与实现

个人主页&#xff1a;程序员杨工 个人简介&#xff1a;从事软件开发多年&#xff0c;前后端均有涉猎&#xff0c;具有丰富的开发经验 博客内容&#xff1a;全栈开发&#xff0c;分享Java、Python、Php、小程序、前后端、数据库经验和实战 文末有本人名片&#xff0c;希望和大家…

Qt开发技巧(四)“tr“使用,时间类使用,Qt容器取值,类对象的删除,QPainter画家类,QString的转换,用好 QVariant类型

继续讲一些Qt技巧操作 1.非必要不用"tr" 如果程序运行场景确定是某一固定语言&#xff0c;就不需要用tr,"tr"之主要针对多语种翻译的&#xff0c;因为tr的本意是包含英文&#xff0c;然后翻译到其他语言比如中文&#xff0c;不要滥用tr&#xff0c;如果没有…

‌内网穿透技术‌总结

内网穿透是一种网络技术&#xff0c;通过它可以使外部网络用户访问内部网络中的设备和服务。一般情况下&#xff0c;内网是无法直接访问的&#xff0c;因为它位于一个封闭的局域网中&#xff0c;无法从外部访问。而通过内网穿透&#xff0c;可以将内部网络中的设备和服务暴露在…

底盘四轮转向运动学解析(含代码)

目录 写在前面的话四轮转向运动学解析四轮转向理论图解robot_control.py 完整代码关键参数完整代码 公式解析&#xff08;根据代码&#xff09;反相--模式1详细图解 正相--模式2轴心--模式3 写在前面的话 网上找了很多资料&#xff0c;对于四轮转向运动学描述的很少&#xff0…

爬虫过程 | 蜘蛛程序爬取数据流程(初学者适用)

蜘蛛程序&#xff08;也称网络爬虫&#xff0c;是搜索引擎的重要组成部分&#xff09; 主要功能&#xff1a;遍历互联网&#xff0c;抓取网站信息并建立索引&#xff0c;便于用户在搜索引擎中检索到最新的网页内容工作原理&#xff1a;从初始网站页面的URL开始&#xff0c;发送…

最适配达梦、人大金仓的sql工具是什么?

SQLynx是一款功能强大的数据库管理工具&#xff0c;它不仅支持Oracle、MySQL等国际主流数据库&#xff0c;还很好地支持了武汉达梦、人大金仓等国产数据库。这款工具具有以下几个特点&#xff1a; 1.广泛支持&#xff1a;SQLynx支持多种数据库系统&#xff0c;包括PostgreSQL、…

MySQL学习笔记(持续更新中)

1、Mysql概述 1.1 数据库相关概念 三个概念&#xff1a;数据库、数据库管理系统、SQL 名称全称简称数据库存储数据的仓库&#xff0c;数据是有组织的进行存储DataBase&#xff08;DB&#xff09;数据库管理系统操纵和管理数据库的大型软件DataBase Mangement System&#xf…

电子看板实时监控数据可视化助力工厂精细化管理

在当今竞争激烈的制造业领域&#xff0c;工厂的精细化管理成为提高竞争力的关键。而电子看板实时监控数据可视化作为一种先进的管理工具&#xff0c;正为工厂的精细化管理带来巨大的助力。 一、工厂精细化管理的挑战 随着市场需求的不断变化和客户对产品质量要求的日益提高&am…

Qt 模型视图(三):视图类QAbstractItemView

文章目录 Qt 模型视图(三):视图类QAbstractItemView1.基本概念1.1.使用现有视图1.2.使用模型1.3.使用模型的多个视图1.4.在视图之间共享选择 Qt 模型视图(三):视图类QAbstractItemView ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据&#xff0c;视…

Ubuntu22.04关闭631端口的方法

何为631端口&#xff1f; 631端口主要用于访问和控制网络打印服务&#xff0c;是linux下CUPS&#xff08;Common UNIX Printing System&#xff0c;通用UNIX打印系统&#xff09;服务的端口。Linux中的CUPS&#xff08;Common UNIX Printing System&#xff0c;通用UNIX打印系…

VisualStudio的“应用代码更改“按钮功能

无意发现这个按钮&#xff0c;因为开发这么多年也没专门尝试这个按钮&#xff0c;于是好奇它的功能。 光标放在按钮上面提示了“应用代码更改”&#xff0c;于是猜想应该是在调试不断开的情况下支持热应用更改。 经过验证&#xff0c;功能确实如同猜想的一样&#xff0c;具体验…

【Elasticsearch系列廿一】ES7 SQL 新特性

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

基于c++实现的简易shell

代码逻辑 核心思想 解析命令行&#xff0c;拆解命令及其选项创建子进程&#xff0c;在子进程中执行命令如果是前台执行命令&#xff0c;则父进程就阻塞等待子进程中命令执行结束后回收子进程的资源如果是后台执行命令&#xff0c;则父进程不进行阻塞等待&#xff0c;可继续向下…

【ArcGIS微课1000例】0123:数据库中要素类批量转为shapefile

除了ArcGIS之外的其他GIS平台,想要打开ArcGIS数据库,可能无法直接打开,为了便于使用shp,建议直接将数据库中要素类批量转为shapefile。 文章目录 一、连接至数据库二、要素批量转shp一、连接至数据库 打开ArcMap,或者打开ArcCatalog,找到数据库连接,如下图: 数据库为个…