博主介绍:专注于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
四 系统实现效果
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者