摘要
本系统采用Java Spring Boot作为后端框架，前端使用Vue.js构建用户界面，旨在为校园新闻论坛提供一个高效、易用且功能全面的管理平台。通过整合SpringBoot的快速开发优势与Vue的响应式设计，实现了一个包含用户注册登录、新闻发布审核、评论互动、分类浏览及权限管理等核心功能的综合性论坛系统。该系统不仅提升了校园信息交流的效率，还增强了用户体验和内容管理的灵活性，是现代高校信息化建设中不可或缺的一部分。
功能介绍
管理员和学生两种用户角色；
管理员：个人中心、管理员管理、基础数据管理、论坛交流管理、公告信息管理、新闻管理、用户管理、轮播图管理等；
学生：个人中心、首页、论坛交流、新闻信息、公告信息等。
技术介绍
后端：Java语言的Spring Boot框架、MySQL数据库、Maven依赖管理等；
前端：Vue、element-ui、axios等。
部分代码展示
<template>
<div>
<div class="container">
<div class="login-form">
<h1 class="h1" style="color:#000;fontSize:28px;">校园新闻管理系统注册</h1>
<el-form class="rgs-form">
<el-form-item label="账号" class="input">
<el-input v-model="ruleForm.username" autocomplete="off" placeholder="账号" />
</el-form-item>
<el-form-item label="密码" class="input">
<el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password/>
</el-form-item>
<el-form-item label="重复密码" class="input">
<el-input type="passwo rd" v-model="ruleForm.repetitionPassword" autocomplete="off" show-password/>
</el-form-item>
<!--
<el-form-item label="用户编号" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.yonghuUuidNumber" autocomplete="off" placeholder="用户编号" />
</el-form-item>
-->
<el-form-item label="用户姓名" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.yonghuName" autocomplete="off" placeholder="用户姓名" />
</el-form-item>
<el-form-item label="用户手机号" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.yonghuPhone" autocomplete="off" placeholder="用户手机号" />
</el-form-item>
<el-form-item label="用户身份证号" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.yonghuIdNumber" autocomplete="off" placeholder="用户身份证号" />
</el-form-item>
<!--
<el-form-item v-if="yonghuPhotoFlag">
</el-form-item>
<el-form-item label="用户头像" class="input" v-if="tableName=='yonghu'">
<file-upload
tip="点击上传用户头像"
action="file/upload"
:limit="1"
:multiple="true"
:fileUrls="ruleForm.yonghuPhoto?$base.url+ruleForm.yonghuPhoto:''"
@change="yonghuPhotoUploadChange"
></file-upload>
</el-form-item>
-->
<el-form-item label="用户邮箱" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.yonghuEmail" autocomplete="off" placeholder="用户邮箱" />
</el-form-item>
<!--<el-form-item class="input" label="账户状态">
<el-select style="width: 399px;height: 40px;" v-model="ruleForm.jinyongTypes" placeholder="请选择账户状态">
<el-option
v-for="(item,index) in jinyongTypesOptions"
v-bind:key="item.codeIndex"
:label="item.indexName"
:value="item.codeIndex">
</el-option>
</el-select>
</el-form-item>-->
<!--
<el-form-item label="创建时间" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.createTime" autocomplete="off" placeholder="创建时间" />
</el-form-item>
-->
<div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
<el-button class="btn" type="primary" @click="login()">注册</el-button>
<el-button class="btn close" type="primary" @click="close()">取消</el-button>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
},
tableName:"",
rules: {},
sexTypesOptions : [],
yonghuPhotoFlag:false,//用于刷新文件上传
};
},
mounted(){
let table = this.$storage.get("loginTable");
this.tableName = table;
//级联表的下拉框查询
},
methods: {
// 获取uuid
getUUID () {
return new Date().getTime();
},
yonghuPhotoUploadChange(fileUrls) {
this.ruleForm.yonghuPhoto = fileUrls;
if(this.yonghuPhotoFlag){
this.yonghuPhotoFlag=false;
}else{
this.yonghuPhotoFlag=true;
}
},
close(){
this.$router.push({ path: "/login" });
},
// 注册
login() {
if((!this.ruleForm.username)){
this.$message.error('账号不能为空');
return
}
if((!this.ruleForm.password)){
this.$message.error('密码不能为空');
return
}
if((!this.ruleForm.repetitionPassword)){
this.$message.error('重复密码不能为空');
return
}
if(this.ruleForm.repetitionPassword != this.ruleForm.password){
this.$message.error('密码和重复密码不一致');
return
}
// yonghu 中的 用户编号 判空处理
// if('yonghu' == this.tableName && (this.ruleForm.yonghuUuidNumber== null ||this.ruleForm.yonghuUuidNumber== "")){
// this.$message.error("用户编号不能为空");
// return
// }
if((!this.ruleForm.yonghuName)&& 'yonghu'==this.tableName){
this.$message.error('用户姓名不能为空');
return
}
if('yonghu' == this.tableName && this.ruleForm.yonghuPhone&&(!this.$validate.isMobile(this.ruleForm.yonghuPhone))){
this.$message.error('手机应输入手机格式');
return
}
if((!this.ruleForm.yonghuIdNumber)&& 'yonghu'==this.tableName){
this.$message.error('用户身份证号不能为空');
return
}
// yonghu 中的 用户头像 判空处理
// if('yonghu' == this.tableName && (this.ruleForm.yonghuPhoto== null ||this.ruleForm.yonghuPhoto== "")){
// this.$message.error("用户头像不能为空");
// return
// }
if('yonghu' == this.tableName && this.ruleForm.yonghuEmail&&(!this.$validate.isEmail(this.ruleForm.yonghuEmail))){
this.$message.error("邮箱应输入邮件格式");
return
}
// yonghu 中的 账户状态 判空处理
// if('yonghu' == this.tableName && (this.ruleForm.jinyongTypes== null ||this.ruleForm.jinyongTypes== "")){
// this.$message.error("账户状态不能为空");
// return
// }
// yonghu 中的 创建时间 判空处理
// if('yonghu' == this.tableName && (this.ruleForm.createTime== null ||this.ruleForm.createTime== "")){
// this.$message.error("创建时间不能为空");
// return
// }
this.$http({
url: `${this.tableName}/register`,
method: "post",
data:this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "注册成功,请登录后在个人中心页面补充个人数据",
type: "success",
duration: 1500,
onClose: () => {
this.$router.replace({ path: "/login" });
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>演示视频展示
基于Java SpringBoot和Vue校园新闻论坛管理
![[含文档+PPT+源码等]精品基于springboot实现的原生Andriod心理健康辅导平台](https://img-blog.csdnimg.cn/img_convert/89ca37b5f3da055bb6b588723bece066.jpeg)
