博主介绍：专注于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
四 系统实现效果
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者
![Python模拟鼠标轨迹[Python]](https://i-blog.csdnimg.cn/direct/459723cfb4e24edc80d38f439c6fc822.gif)
