Introduction:

With the development of society, all walks of life are taking advantage of the information age. The superiority and popularization of computer make it necessary to develop all kinds of information system. Bike online rental management system, the main modules include home page, personal center, user management, member management, bike rental management, rental management, member rental management, return car management, member return car management, classification column management, message board management, system management and other functions. The system administrator is mainly for the safe and effective storage and management of all kinds of information, but also can manage the system and update maintenance operations, and has the corresponding operation rights on the background. In order to realize the functions of the bicycle online rental management system, it needs the strong support of the background database. The administrator verifies the registration information, collects the information, and thus obtains the association information and so on the large amount of data by the database management. In this paper, the database server uses Mysql as the background database, so that the Web and database are closely linked. In the design process, the system code is fully guaranteed to be readable, practical, easy to expand, universal, easy to maintain, easy to operate and simple page characteristics. The development of this system makes it more convenient to obtain the information of the bicycle online rental management system, and also makes the management information of the bicycle online rental management system become more systematic and orderly. The system interface is friendly and easy to operate.

Functional design:

The bicycle online rental management system is based on Web service mode, which is a model structure suitable for Internet environment. As long as users can connect to the Internet, they can use this system in no time or place. The working principle diagram of the online bicycle rental management system is shown in the figure below:

System architecture diagram belongs to the system design stage, system architecture diagram is only a product of this stage, the overall architecture of the system determines the mode of the whole system, is the foundation of the system. The overall structure design of the bicycle online rental management system is shown in the figure.

Function screenshots:

Home Login registration:

Client: bicycle online rental management system, in the home page of the system can view the home page, bicycle rental, activities, message feedback, personal center, background management, online customer service and other information for detailed operation

Bicycle rental, in the bicycle rental page, you can view the bicycle number, brand, classification, specifications, profile, current price, current price of members, click times, pictures and other information, and conduct rental, member rental operations.

Cycling activities

 

Feedback:

Personal Center:

Administrator side: Administrator login into the system, you can to see all of the information, you can view the home page, personal center, user management, member management, bicycle rental, lease management, leasing management, car management, members also car management, classified management, message board management, system management, etc., and can also carry on the corresponding operation management

User Information:

Bicycle rental management:

Car return management:

Classified column:

Message boards and replies:

Home page rotation map:

Event Management:

Key code:

Back-end login controller:


/** * Login related */
@RequestMapping("users")
@RestController
public class UserController{
	
	@Autowired
	private UserService userService;
	
	@Autowired
	private TokenService tokenService;

	/** * login */
	@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("Incorrect account number or password");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		return R.ok().put("token", token);
	}
	
	/** * Register */
	@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("User already exists");
    	}
        userService.insert(user);
        return R.ok();
    }

	/** * exit */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("Exit successful");
	}
	
	/**
     * 密码重置
     */
    @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("Account does not exist");
    	}
    	user.setPassword("123456");
        userService.update(user,null);
        return R.ok("Password reset to 123456");
    }
	
	/** * list */
    @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);
    }

	/** * list */
    @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));
    }

    /** * info */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /** * Get user session user information */
    @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);
    }

    /** * save */
    @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("User already exists");
    	}
        userService.insert(user);
        return R.ok();
    }

    /** * modify */
    @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("User name already exists.");
    	}
        userService.updateById(user);// All updates
        return R.ok();
    }

    /** * delete */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        userService.deleteBatchIds(Arrays.asList(ids));
        returnR.ok(); }}Copy the code

Front-end login VUE code:

<template>
  <div>
    <div class="container loginIn" style="backgroundImage: url(http://localhost:8080/springbootl5za3/upload/login_bg.png)">

      <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)>Bicycle online rental management system login</h3></div>
          <el-form-item :label="1 = = 3? 'Username' : '" :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="Please enter user name" name="username" type="text" v-model="rulesForm.username" />
          </el-form-item>
          <el-form-item :label="1 = = 3? 'Password' :" :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="Please enter your password" name="password" type="password" v-model="rulesForm.password" />
          </el-form-item>
          <el-form-item v-if="0 = = '1'" class="code" :label="1 = = 3? 'Verification code' :" :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="Please enter the verification code." 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="Role" prop="loginInRole" class="role">
            <el-radio
              v-for="item in menus"
	      v-if="Item. HasBackLogin = = 'is'"
              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' : 'login'}}</el-button>
          <el-form-item class="setting">
            <! - < div style = "color: rgba (10, 10, 10, 1)" class = "reset" > change password < / 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. The el - radio__label '). The forEach (el = > {el. Style. Color = "Rgba (6, 5, 5, 0.97)"})}, register(tableName){this.$storage.set("loginTable", tableName); this.$router.push({path:'/register'}) }, For (let I in this. Codes) {code += this. Codes [I].num} if ('0' == '1' &&! This. Rulesform. code) {this.$message.error(" Please enter verification code "); return; } if ('0' == '1' && this.rulesForm.code.toLowerCase() ! = code.tolowerCase ()) {this.$message.error(" error "); this.getRandCode() return; } if (! This. Rulesform.username) {this.$message.error(" please enter username "); return; } if (! This. Rulesform. password) {this.$message.error(" Please enter password "); return; } if (! This. Rulesform. role) {this.$message.error(" Please select role "); 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>
Copy the code

Database design:

Transform the e-R diagram of database conceptual design into a relational database. In a relational database, data relationships consist of data tables, but the structure of the table is expressed in the fields of the table.

Table 4-1: Token table
The field names type The length of the Fields that
id bigint A primary key
userid bigint The user id
username varchar 100 The user name
tablename varchar 100 The name of the table
role varchar 100 role
token varchar 200 password
addtime timestamp The new time
expiratedtime timestamp Expiration time

Table 4-2: Activities
The field names type The length of the Fields that
id bigint A primary key
addtime timestamp Creation time
title varchar 200 The title
introduction longtext 4294967295 Introduction to the
picture varchar 200 The picture
content longtext 4294967295 content

Table 4-3: Message boards
The field names type The length of the Fields that
id bigint A primary key
addtime timestamp Creation time
userid bigint A message people id
username varchar 200 The user name
content longtext 4294967295 Message content
cpicture varchar 200 Message pictures
reply longtext 4294967295 Reply content
rpicture varchar 200 Reply the picture

Table 4-4: Membership rental
The field names type The length of the Fields that
id bigint A primary key
addtime timestamp Creation time
zixingchebianhao varchar 200 Bicycle number
pinpai varchar 200 brand
fenlei varchar 200 classification
guige varchar 200 specifications
jianjie longtext 4294967295 Introduction to the
huiyuanshijia int Member of the current price
zulinshizhang int The length of lease
zongjia int The total price
quchedian varchar 200 Pick up some
zucheshijian date Rental time
tupian varchar 200 The picture
zhanghao varchar 200 account
xingming varchar 200 The name
sfsh varchar 200 Whether the audit
shhf longtext 4294967295 Review the reply
ispay varchar 200 Whether or not to pay
longitude float longitude
latitude float latitude
fulladdress varchar 200 address

Table 4-5: Members return cars
The field names type The length of the Fields that
id bigint A primary key
addtime timestamp Creation time
zixingchebianhao varchar 200 Bicycle number
pinpai varchar 200 brand
fenlei varchar 200 classification
guige varchar 200 specifications
haichedian varchar 200 Car point
haicheshijian datetime Car time
zhanghao varchar 200 account
tupian varchar 200 The picture
xingming varchar 200 The name
sfsh varchar 200 Whether the audit
shhf longtext 4294967295 Review the reply
longitude float longitude
latitude float latitude
fulladdress varchar 200 address

Thesis Report:

Pick to

1 System Overview

1.1 an overview of the

1.2 Significance of the project

1.3 Main Contents

2 System development environment

2.1 Spring Boot Framework

2.2 JAVA introduction

2.3 Access database implementation method

2.4 Two connection modes of the MySQL database

2.5 MySql Database

3 Demand Analysis

3.1 Technical feasibility: Technical background

3.2 Economic Feasibility

3.3 Operation Feasibility

3.4 System design rules

3.5 System flow and logic

4. System outline design

4.1 an overview of the

4.2 System Architecture

4.3. Database design

4.3.1 Database Entities

4.3.2 Database design table

5 Detailed system design

5.1 System Function Modules

5.2 Administrator Function Modules

5.3 User Function Modules

5.4 Member Function modules

6 System Test

6.1 Purpose of system Test

6.2 System test method

6.3 Test Results

conclusion

Thank you

reference

Source code:

Thumb up, collection, attention, comment, view 👇 🏻 👇 🏻 👇 🏻 WeChat public number for contact 👇 🏻 👇 🏻 👇 🏻

Clocked articles updated 212/365 days

Subscribe to the following column 👇🏻👇🏻 🏻👇 👇

Excellent practical case of Java Project 100 Sets

Web front-end final big homework Web combat “100 sets”

​