[免费]SpringBoot+Vue城市交通管理系统【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的SpringBoot+Vue城市交通管理系统，分享下哈。
项目视频演示
【免费】SpringBoot+Vue城市交通管理系统 Java毕业设计_哔哩哔哩_bilibili
项目介绍
城市交通管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品，体验高科技时代带给人们的方便，同时也能让用户体会到与以往常规产品不同的体验风格。
与安卓，iOS相比较起来，城市交通管理系统在流畅性，续航能力，等方方面面都有着很大的优势。这就意味着城市交通管理系统的设计可以比其他系统更为出色的能力，可以更高效的完成最新的公交路线、公交车信息、站点信息等功能。
此系统设计主要采用的是JAVA语言来进行开发，采用Spring Boot框架技术，框架分为三层，分别是控制层Controller，业务处理层Service，持久层dao，能够采用多层次管理开发，对于各个模块设计制作有一定的安全性；数据库方面主要采用的是MySQL来进行开发，其特点是稳定性好，数据库存储容量大，处理能力快等优势；服务器采用的是Tomcat服务，能够提供稳固的运行平台，确保系统稳定运行。通过城市交通管理系统来提升本课题的各项功能的工作效率，提供了一个多样功能，具有良好实用性的城市交通管理系统。
系统展示
部分代码
package com.controller;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Date;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.TokenEntity;
import com.entity.UsersEntity;
import com.service.TokenService;
import com.service.UsersService;
import com.utils.CommonUtil;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;
/**
* 登录相关
*/
@RequestMapping("users")
@RestController
public class UsersController{
@Autowired
private UsersService userService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
if(user==null || !user.getPassword().equals(password)) {
return R.error("账号或密码不正确");
}
String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
return R.ok().put("token", token);
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
if(user==null) {
return R.error("账号不存在");
}
user.setPassword("123456");
userService.update(user,null);
return R.ok("密码已重置为：123456");
}
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,UsersEntity user){
EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/list")
public R list( UsersEntity user){
EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
ew.allEq(MPUtil.allEQMapPre( user, "user"));
return R.ok().put("data", userService.selectListView(ew));
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
UsersEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Long id = (Long)request.getSession().getAttribute("userId");
UsersEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
UsersEntity u = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername()));
if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
return R.error("用户名已存在。");
}
userService.updateById(user);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
userService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
<template>
<div>
<div class="container" :style='{"minHeight":"100vh","width":"100%","alignItems":"center","background":"url(http://codegen.caihongy.cn/20230202/89a55405b6364919af87c1091a9ad346.jpg) no-repeat center bottom / 100% auto","justifyContent":"center","display":"flex"}'>
<el-form ref="loginForm" :model="loginForm" :style='{"padding":"20px 0 120px","boxShadow":"0 0px 0px rgba(64, 158, 255, .8)","margin":"0 auto","borderRadius":"0","background":"url(http://codegen.caihongy.cn/20230201/56308bda5b3447368c9c40f683cfdf8c.png) no-repeat right top","width":"800px","position":"relative","height":"auto"}' :rules="rules">
<div v-if="false" :style='{"margin":"0 0 10px 0","color":"rgba(64, 158, 255, 1)","textAlign":"center","width":"100%","lineHeight":"44px","fontSize":"20px","textShadow":"4px 4px 2px rgba(64, 158, 255, .5)"}'>USER / LOGIN</div>
<div v-if="true" :style='{"width":"100%","margin":"4px 0 40px","lineHeight":"44px","fontSize":"18px","color":"#fff","textAlign":"center"}'>城市交通管理系统的设计与实现登录</div>
<el-form-item v-if="loginType==1" class="list-item" :style='{"width":"80%","margin":"0 10% 20px"}' prop="username">
<div v-if="false" :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>账号：</div>
<input :style='{"border":"1px solid #eee","padding":"0 10px","boxShadow":"0 0 0px rgba(64, 158, 255, .5)","color":"#333","width":"100%","fontSize":"14px","height":"40px"}' v-model="loginForm.username" placeholder="请输入账户">
</el-form-item>
<el-form-item v-if="loginType==1" class="list-item" :style='{"width":"80%","margin":"0 10% 20px"}' prop="password">
<div v-if="false" :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>密码：</div>
<input :style='{"border":"1px solid #eee","padding":"0 10px","boxShadow":"0 0 0px rgba(64, 158, 255, .5)","color":"#333","width":"100%","fontSize":"14px","height":"40px"}' v-model="loginForm.password" placeholder="请输入密码" type="password">
</el-form-item>
<el-form-item v-if="roles.length>1" class="list-type" :style='{"width":"80%","margin":"20px auto"}' prop="role">
<el-radio v-model="loginForm.tableName" :label="item.tableName" v-for="(item, index) in roles" :key="index" @change.native="getCurrentRow(item)">{{item.roleName}}</el-radio>
</el-form-item>
<el-form-item :style='{"width":"100%","margin":"100px auto 20px","position":"relative"}'>
<el-button v-if="loginType==1" :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 5px","outline":"none","color":"#fff","borderRadius":"0","background":"url(http://codegen.caihongy.cn/20230201/56308bda5b3447368c9c40f683cfdf8c.png) no-repeat left top","width":"100%","fontSize":"16px","lineHeight":"88px","height":"68px"}' @click="submitForm('loginForm')">登录</el-button>
<el-button v-if="loginType==1" :style='{"border":"0","cursor":"pointer","padding":"0 20px","margin":"0 auto","outline":"none","color":"#333","borderRadius":"4px","textAlign":"right","background":"none","width":"100%","fontSize":"14px","height":"44px"}' @click="resetForm('loginForm')">重置</el-button>
<el-upload v-if="loginType==2" :action="baseUrl + 'file/upload'" :show-file-list="false" :on-success="faceLogin">
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 5px","outline":"none","color":"#fff","borderRadius":"0","background":"url(http://codegen.caihongy.cn/20230201/56308bda5b3447368c9c40f683cfdf8c.png) no-repeat left top","width":"100%","fontSize":"16px","lineHeight":"88px","height":"68px"}'>人脸识别登录</el-button>
</el-upload>
</el-form-item>
<div :style='{"margin":"20px auto","left":"10%","flexWrap":"wrap","bottom":"280px","display":"flex","width":"80%","position":"absolute","justifyContent":"center"}'>
<router-link :style='{"cursor":"pointer","margin":"0 10px 10px 0","fontSize":"16px","textDecoration":"none","color":"#333","background":"none"}' :to="{path: '/register', query: {role: item.tableName,pageFlag:'register'}}" v-if="item.hasFrontRegister=='是'" v-for="(item, index) in roles" :key="index">注册{{item.roleName.replace('注册','')}}</router-link>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
//数据集合
data() {
return {
baseUrl: this.$config.baseUrl,
loginType: 1,
roleMenus: [{"backMenu":[{"child":[{"appFrontIcon":"cuIcon-medal","buttons":["新增","查看","修改","删除"],"menu":"用户","menuJump":"列表","tableName":"yonghu"}],"menu":"用户管理"},{"child":[{"appFrontIcon":"cuIcon-skin","buttons":["新增","查看","修改","删除","维护"],"menu":"公交路线","menuJump":"列表","tableName":"gongjiaoluxian"}],"menu":"公交路线管理"},{"child":[{"appFrontIcon":"cuIcon-present","buttons":["新增","查看","修改","删除"],"menu":"公交车信息","menuJump":"列表","tableName":"gongjiaochexinxi"}],"menu":"公交车信息管理"},{"child":[{"appFrontIcon":"cuIcon-newshot","buttons":["新增","查看","修改","删除"],"menu":"站点信息","menuJump":"列表","tableName":"zhandianxinxi"}],"menu":"站点信息管理"},{"child":[{"appFrontIcon":"cuIcon-similar","buttons":["查看","修改","删除"],"menu":"线路维护","menuJump":"列表","tableName":"xianluweihu"}],"menu":"线路维护管理"},{"child":[{"appFrontIcon":"cuIcon-vip","buttons":["查看","修改"],"menu":"系统简介","tableName":"systemintro"},{"appFrontIcon":"cuIcon-time","buttons":["查看","修改"],"menu":"轮播图管理","tableName":"config"},{"appFrontIcon":"cuIcon-news","buttons":["新增","查看","修改","删除"],"menu":"公告信息","tableName":"news"},{"appFrontIcon":"cuIcon-service","buttons":["新增","查看","修改","删除"],"menu":"在线提问","tableName":"chat"},{"appFrontIcon":"cuIcon-album","buttons":["查看","修改"],"menu":"关于我们","tableName":"aboutus"}],"menu":"系统管理"}],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-medal","buttons":["查看"],"menu":"公交路线列表","menuJump":"列表","tableName":"gongjiaoluxian"}],"menu":"公交路线模块"},{"child":[{"appFrontIcon":"cuIcon-newshot","buttons":["查看"],"menu":"公交车信息列表","menuJump":"列表","tableName":"gongjiaochexinxi"}],"menu":"公交车信息模块"},{"child":[{"appFrontIcon":"cuIcon-camera","buttons":["查看"],"menu":"站点信息列表","menuJump":"列表","tableName":"zhandianxinxi"}],"menu":"站点信息模块"},{"child":[{"appFrontIcon":"cuIcon-taxi","buttons":["查看"],"menu":"线路维护列表","menuJump":"列表","tableName":"xianluweihu"}],"menu":"线路维护模块"}],"hasBackLogin":"是","hasBackRegister":"否","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"管理员","tableName":"users"},{"backMenu":[],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-medal","buttons":["查看"],"menu":"公交路线列表","menuJump":"列表","tableName":"gongjiaoluxian"}],"menu":"公交路线模块"},{"child":[{"appFrontIcon":"cuIcon-newshot","buttons":["查看"],"menu":"公交车信息列表","menuJump":"列表","tableName":"gongjiaochexinxi"}],"menu":"公交车信息模块"},{"child":[{"appFrontIcon":"cuIcon-camera","buttons":["查看"],"menu":"站点信息列表","menuJump":"列表","tableName":"zhandianxinxi"}],"menu":"站点信息模块"},{"child":[{"appFrontIcon":"cuIcon-taxi","buttons":["查看"],"menu":"线路维护列表","menuJump":"列表","tableName":"xianluweihu"}],"menu":"线路维护模块"}],"hasBackLogin":"否","hasBackRegister":"否","hasFrontLogin":"是","hasFrontRegister":"是","roleName":"用户","tableName":"yonghu"}],
loginForm: {
username: '',
password: '',
tableName: '',
code: '',
},
role: '',
roles: [],
rules: {
username: [
{ required: true, message: '请输入账户', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
codes: [{
num: 1,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 2,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 3,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 4,
color: '#000',
rotate: '10deg',
size: '16px'
}]
}
},
created() {
for(let item in this.roleMenus) {
if(this.roleMenus[item].hasFrontLogin=='是') {
this.roles.push(this.roleMenus[item]);
}
}
},
mounted() {
},
//方法集合
methods: {
randomString() {
var len = 4;
var chars = [
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2',
'3', '4', '5', '6', '7', '8', '9'
]
var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
var sizes = ['14', '15', '16', '17', '18']
var output = []
for (var i = 0; i < len; i++) {
// 随机验证码
var key = Math.floor(Math.random() * chars.length)
this.codes[i].num = chars[key]
// 随机验证码颜色
var code = '#'
for (var j = 0; j < 6; j++) {
var key = Math.floor(Math.random() * colors.length)
code += colors[key]
}
this.codes[i].color = code
// 随机验证码方向
var rotate = Math.floor(Math.random() * 45)
var plus = Math.floor(Math.random() * 2)
if (plus == 1) rotate = '-' + rotate
this.codes[i].rotate = 'rotate(' + rotate + 'deg)'
// 随机验证码字体大小
var size = Math.floor(Math.random() * sizes.length)
this.codes[i].size = sizes[size] + 'px'
}
},
getCurrentRow(row) {
this.role = row.roleName;
},
submitForm(formName) {
if (this.roles.length!=1) {
if (!this.role) {
this.$message.error("请选择登录用户类型");
return false;
}
} else {
this.role = this.roles[0].roleName;
this.loginForm.tableName = this.roles[0].tableName;
}
this.$refs[formName].validate((valid) => {
if (valid) {
this.$http.get(`${this.loginForm.tableName}/login`, {params: this.loginForm}).then(res => {
if (res.data.code === 0) {
localStorage.setItem('Token', res.data.token);
localStorage.setItem('UserTableName', this.loginForm.tableName);
localStorage.setItem('username', this.loginForm.username);
localStorage.setItem('adminName', this.loginForm.username);
localStorage.setItem('sessionTable', this.loginForm.tableName);
localStorage.setItem('role', this.role);
localStorage.setItem('keyPath', this.$config.indexNav.length+2);
this.$router.push('/index/center');
this.$message({
message: '登录成功',
type: 'success',
duration: 1500,
});
} else {
this.$message.error(res.data.msg);
}
});
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container {
position: relative;
background: url(http://codegen.caihongy.cn/20230202/89a55405b6364919af87c1091a9ad346.jpg) no-repeat center bottom / 100% auto;
.el-form-item {
& /deep/ .el-form-item__content {
width: 100%;
}
}
.list-item /deep/ .el-input .el-input__inner {
border: 1px solid #eee;
padding: 0 10px;
box-shadow: 0 0 0px rgba(64, 158, 255, .5);
color: #333;
width: 100%;
font-size: 14px;
height: 40px;
}
.list-code /deep/ .el-input .el-input__inner {
border: 1px solid #eee;
padding: 0 10px;
outline: none;
color: #333;
background: #fff;
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px);
font-size: 14px;
height: 40px;
}
.list-type /deep/ .el-radio__input .el-radio__inner {
background: rgba(53, 53, 53, 0);
border-color: #666666;
}
.list-type /deep/ .el-radio__input.is-checked .el-radio__inner {
background: #f50000;
border-color: #f50000;
}
.list-type /deep/ .el-radio__label {
color: #666666;
font-size: 14px;
}
.list-type /deep/ .el-radio__input.is-checked+.el-radio__label {
color: #f50000;
font-size: 14px;
}
}
</style>
源码下载
链接：https://pan.baidu.com/s/1KcwHMZ5NCBvSMEACum5HWA
提取码：1234
