基于Java+SpringBoot+vue+node.js实现直行车租赁平台管理系统

前言介绍：

跟着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和遍及使得各种信息体系的开发成为必需。自行车在线租借办理体系，首要的模块包括主页、个人中心、用户办理、会员办理、自行车租借办理、租借办理、会员租借办理、还车办理、会员还车办理、分类栏办理、留言板办理、体系办理等功用。体系中办理员首要是为了安全有效地存储和办理各类信息，还能够对体系进行办理与更新保护等操作，而且对后台有相应的操作权限。要想完成自行车在线租借办理体系的各项功用，需求后台数据库的大力支持。办理员验证注册信息，收集的信息，并由此剖析得出的相关信息等很多的数据都由数据库办理。本文中数据库服务器端采用了Mysql作为后台数据库，使Web与数据库严密联系起来。在规划过程中，充分保证了体系代码的良好可读性、实用性、易扩展性、通用性、便于后期保护、操作便利以及页面简洁等特色。本体系的开发使获取自行车在线租借办理体系信息能够愈加便利快捷，一起也使自行车在线租借办理体系办理信息变的愈加体系化、有序化。体系界面较友爱，易于操作。

功用规划：

自行车在线租借办理体系根据Web服务形式，是一个适用于Internet环境下的模型结构。只需用户能连上Internet,便能够在不受时刻、地址的约束来使用这个体系。自行车在线租借办理体系作业原理图，如图所示：

体系架构图属于体系规划阶段，体系架构图只是这个阶段一个产品，体系的总体架构决议了整个体系的形式，是体系的根底。自行车在线租借办理体系的整体结构规划如图所示。

功用截图：

主页登录注册：

用户端：自行车在线租借办理体系，在体系的主页能够检查主页、自行车租借、活动、留言反应、个人中心、后台办理、在线客服等信息进行详细操作

自行车租借，在自行车租借页面中能够检查自行车编号、品牌、分类、规格、简介、时值、会员时值、点击次数、图片等信息，并进行租借、会员租借操作。

自行车活动

留言反应:

个人中心：

办理员端：办理员登录进入体系之后，就能够对所有的信息进行检查，能够检查到主页、个人中心、用户办理、会员办理、自行车租借办理、租借办理、会员租借办理、还车办理、会员还车办理、分类栏办理、留言板办理、体系办理等，而且还能够对其进行相应的操作办理

用户信息：

自行车租借办理：

还车办理：

分类专栏：

留言板和回复：

主页轮播图：

活动办理：

要害代码：

后端登录controller:

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UserController{
	@Autowired
	private UserService userService;
	@Autowired
	private TokenService tokenService;
	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().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 UserEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(userService.selectOne(new EntityWrapper<UserEntity>().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){
    	UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().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,UserEntity user){
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
    	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( UserEntity user){
       	EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
      	ew.allEq(MPUtil.allEQMapPre( user, "user")); 
        return R.ok().put("data", userService.selectListView(ew));
    }
    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UserEntity 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");
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }
    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UserEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        userService.insert(user);
        return R.ok();
    }
    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UserEntity user){
//        ValidatorUtils.validateEntity(user);
    	UserEntity u = userService.selectOne(new EntityWrapper<UserEntity>().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();
    }
}

前端登录vue代码：

<template>
  <div>
    <div class="container loginIn" style="backgroundImage: url()">
      <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'" style="backgroundColor: rgba(221, 239, 223, 0.3)">
        <el-form class="login-form" label-position="left" :label-width="1 == 3 ? '56px' : '0px'">
          <div class="title-container"><h3 class="title" style="color: rgba(86, 188, 225, 0.89)">自行车在线租借办理体系登录</h3></div>
          <el-form-item :label="1 == 3 ? '用户名' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(16, 15, 15, 0.97);line-height:44px"><svg-icon icon-class="user" /></span>
            <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
          </el-form-item>
          <el-form-item :label="1 == 3 ? '暗码' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(16, 15, 15, 0.97);line-height:44px"><svg-icon icon-class="password" /></span>
            <el-input placeholder="请输入暗码" name="password" type="password" v-model="rulesForm.password" />
          </el-form-item>
          <el-form-item v-if="0 == '1'" class="code" :label="1 == 3 ? '验证码' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(16, 15, 15, 0.97);line-height:44px"><svg-icon icon-class="code" /></span>
            <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
            <div class="getCodeBt" @click="getRandCode(4)" style="height:44px;line-height:44px">
              <span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span>
            </div>
          </el-form-item>
          <el-form-item label="人物" prop="loginInRole" class="role">
            <el-radio
              v-for="item in menus"
	      v-if="item.hasBackLogin=='是'"
              v-bind:key="item.roleName"
              v-model="rulesForm.role"
              :label="item.roleName"
            >{{item.roleName}}</el-radio>
          </el-form-item>
          <el-button type="primary" @click="login()" class="loginInBt" style="padding:0;font-size:16px;border-radius:20px;height:44px;line-height:44px;width:100%;backgroundColor:rgba(64, 158, 255, 1); borderColor:rgba(64, 158, 255, 1); color:rgba(17, 17, 17, 1)">{{'1' == '1' ? '登录' : 'login'}}</el-button>
          <el-form-item class="setting">
            <!-- <div class="reset">修改暗码</div> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import menu from "@/utils/menu";
export default {
  data() {
    return {
      rulesForm: {
        username: "",
        password: "",
        role: "",
        code: '',
      },
  methods: {
    setInputColor(){
      this.$nextTick(()=>{
        document.querySelectorAll('.loginIn .el-input__inner').forEach(el=>{
          el.style.backgroundColor = "rgba(255, 255, 255, 1)"
          el.style.color = "rgba(51, 51, 51, 1)"
          el.style.height = "44px"
          el.style.lineHeight = "44px"
          el.style.borderRadius = "20px"
        })
        document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el=>{
          el.style.height = "44px"
          el.style.lineHeight = "44px"
        })
        document.querySelectorAll('.loginIn .el-form-item__label').forEach(el=>{
          el.style.color = "rgba(16, 15, 15, 0.97)"
        })
        setTimeout(()=>{
          document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el=>{
            el.style.color = "rgba(6, 5, 5, 0.97)"
          })
        },350)
      })
    },
    register(tableName){
      this.$storage.set("loginTable", tableName);
      this.$router.push({path:'/register'})
    },
    // 登陆
    login() {
      let code = ''
      for(let i in this.codes) {
        code += this.codes[i].num
      }
	  if ('0' == '1' && !this.rulesForm.code) {
	     this.$message.error("请输入验证码");
	    return;
	  }
      if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
         this.$message.error("验证码输入有误");
		this.getRandCode()
        return;
      }
      if (!this.rulesForm.username) {
         this.$message.error("请输入用户名");
        return;
      }
      if (!this.rulesForm.password) {
         this.$message.error("请输入暗码");
        return;
      }
      if (!this.rulesForm.role) {
         this.$message.error("请挑选人物");
        return;
      }
      let menus = this.menus;
      for (let i = 0; i < menus.length; i++) {
        if (menus[i].roleName == this.rulesForm.role) {
          this.tableName = menus[i].tableName;
        }
      }
      this.$http({
        url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
        method: "post"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$storage.set("Token", data.token);
          this.$storage.set("role", this.rulesForm.role);
          this.$storage.set("sessionTable", this.tableName);
          this.$storage.set("adminName", this.rulesForm.username);
          this.$router.replace({ path: "/index/" });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getRandCode(len = 4){
      this.randomString(len)
    },
  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    transform: translate3d(-50%,-50%,0);
    height: 446px;
    border-radius: 8px;
  }
  .code {
    .el-form-item__content {
      position: relative;
      .getCodeBt {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 40px;
        width: 100px;
        background-color: rgba(51,51,51,0.4);
        color: #fff;
        text-align: center;
        border-radius: 0 4px 4px 0;
        height: 40px;
        overflow: hidden;
        span {
          padding: 0 5px;
          display: inline-block;
          font-size: 16px;
          font-weight: 600;
        }
      }
      .el-input {
        & /deep/ input {
          padding: 0 130px 0 30px;
        }
      }
    }
  }
  .setting {
    & /deep/ .el-form-item__content {
      padding: 0 15px;
      box-sizing: border-box;
      line-height: 32px;
      height: 32px;
      font-size: 14px;
      color: #999;
      margin: 0 !important;
      .register {
        float: left;
        width: 50%;
      }
      .reset {
        float: right;
        width: 50%;
        text-align: right;
      }
    }
  }
  .style2 {
    padding-left: 30px;
    .svg-container {
      left: -30px !important;
    }
    .el-input {
      & /deep/ input {
        padding: 0 15px !important;
      }
    }
  }
  .code.style2, .code.style3 {
    .el-input {
      & /deep/ input {
        padding: 0 115px 0 15px;
      }
    }
  }
  }
}
</style>

数据库规划：

将数据库概念规划的E-R图转换为联系数据库。在联系数据库中，数据联系由数据表组成，可是表的结构表现在表的字段上。

表4-1：token表

字段称号	类型	长度	字段阐明
id	bigint	主键
userid	bigint	用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	人物
token	varchar	200	暗码
addtime	timestamp	新增时刻
expiratedtime	timestamp	过期时刻

表4-2：活动

字段称号	类型	长度	字段阐明
id	bigint	主键
addtime	timestamp	创立时刻
title	varchar	200	标题
introduction	longtext	4294967295	简介
picture	varchar	200	图片
content	longtext	4294967295	内容

表4-3：留言板

字段称号	类型	长度	字段阐明
id	bigint	主键
addtime	timestamp	创立时刻
userid	bigint	留言人id
username	varchar	200	用户名
content	longtext	4294967295	留言内容
cpicture	varchar	200	留言图片
reply	longtext	4294967295	回复内容
rpicture	varchar	200	回复图片

表4-4：会员租借

字段称号	类型	长度	字段阐明
id	bigint	主键
addtime	timestamp	创立时刻
zixingchebianhao	varchar	200	自行车编号
pinpai	varchar	200	品牌
fenlei	varchar	200	分类
guige	varchar	200	规格
jianjie	longtext	4294967295	简介
huiyuanshijia	int	会员时值
zulinshizhang	int	租借时长
zongjia	int	总价
quchedian	varchar	200	取车点
zucheshijian	date	租车时刻
tupian	varchar	200	图片
zhanghao	varchar	200	账号
xingming	varchar	200	姓名
sfsh	varchar	200	是否审阅
shhf	longtext	4294967295	审阅回复
ispay	varchar	200	是否支付
longitude	float	经度
latitude	float	纬度
fulladdress	varchar	200	地址

表4-5：会员还车

字段称号	类型	长度	字段阐明
id	bigint	主键
addtime	timestamp	创立时刻
zixingchebianhao	varchar	200	自行车编号
pinpai	varchar	200	品牌
fenlei	varchar	200	分类
guige	varchar	200	规格
haichedian	varchar	200	还车点
haicheshijian	datetime	还车时刻
zhanghao	varchar	200	账号
tupian	varchar	200	图片
xingming	varchar	200	姓名
sfsh	varchar	200	是否审阅
shhf	longtext	4294967295	审阅回复
longitude	float	经度
latitude	float	纬度
fulladdress	varchar	200	地址

论文报告：

摘要

1 体系概述

1.1 概述

1.2课题意义

1.3 首要内容

2 体系开发环境

2.1 Spring Boot框架

2.2 JAVA简介

2.3访问数据库完成办法

2.4体系对MySQL数据库的两种衔接办法

2.5 MySql数据库

3 需求剖析

3.1技能可行性：技能布景

3.2经济可行性

3.3操作可行性

3.4体系规划规矩

3.5体系流程和逻辑

4体系概要规划

4.1 概述

4.2 体系结构

4.3. 数据库规划

4.3.1 数据库实体

4.3.2 数据库规划表

5 体系详细规划

5.1体系功用模块

5.2 办理员功用模块

5.3 用户功用模块

5.4会员功用模块

6 体系测验

6.1体系测验的意图

6.2体系测验办法

6.3 测验结果

定论

致　谢

参考文献