停车管理系统

开发环境：工具使用 idea，数据库（mysql5.7）,windows10
项目的技术选型：SpringBoot+mybatis-plus,vue,elementui,springsecurity

后端

userContorller.java

@RestController
@RequestMapping("/user")
@CrossOriginpublic class UserController {@Autowiredprivate UserService userService;@PostMapping("add")
//前端传递的参数是 json 类型，所以方法需要使用到public R addUser(@RequestBody User user){//将数据添加到数据库中boolean b = userService.save(user);if (b){return R.ok().setMessage("添加用户成功");}return R.ok().setMessage("添加用户失败");}@PostMapping("login")public R login(Integer username,String  password){User user = userService.findLlogin(username,  password);if (user!=null){//成功return R.ok().setData("token",user.getId());}else{ //失败return R.error().setMessage("用户名密码不正确！");}}@GetMapping("info")public R userInfo(Integer token){//可以使用 mybatis-plus 查询User user = userService.getById(token);return R.ok().setData("userInfo",user);}/*** 实现模糊分页查询的方法* @param limit 每页显示的数据量* @param page 当前页* @param userName 模糊查询的关键字* @param phone 电话* @return*/@PostMapping("list")public R listUsers(Long page,Long limit,String userName,String phone){//准备分页查询的对象Page<User> userPage = new Page<>(page,limit);
//准备封装查询条件的对象QueryWrapper<User> queryWrapper = new QueryWrapper<>();if (userName!=null){queryWrapper.like("userName",userName);}if (phone!=null){queryWrapper.or().eq("phone",phone);}
//开始查询数据(分页查询)userService.page(userPage,queryWrapper);
//取得总的数据量long total = userPage.getTotal();
//取得总页数long pages = userPage.getPages();
//取得用户列表List<User> userList = userPage.getRecords();return R.ok().setData("userList",userList).setData("total",total).setData("pages ",pages);}/*** 修改用戶信息的方法* @param user* @return*/@PostMapping("update")public R updateUser(@RequestBody User user){if (userService.updateById(user)){return R.ok().setMessage("修改用户成功！");}return R.error().setMessage("修改用户失敗！");}}

前端

adduser.vue

<template>
<div class="app-container">
<el-header>
<h3 style="font-family: Microsoft YaHei">添加用户</h3>
<hr style="border: 0.5px solid #dcdfe6">
</el-header>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :lg="12" style="width: 400px; margin-left:50px;">
<el-form-item label=" 姓名" prop="userName">
<el-input v-model="ruleForm.userName"/>
</el-form-item>
<el-form-item label=" 联系电话" prop="phone">
<el-input v-model="ruleForm.phone"/>
</el-form-item>
<el-form-item label=" 选择角色" prop="role">
<el-select v-model="ruleForm.role" placeholder=" 请选择">
<el-option v-for="item in
roles" :key="item.key" :label="item.display_name" :value="item.key"/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :lg="12" style="width: 400px; margin-left:50px;">
<el-form-item label=" 密码" prop="password">
<el-input v-model="ruleForm.password" type="password" auto-complete="off"/>
</el-form-item>
<el-form-item label=" 确认密码" prop="checkPass">
<el-input v-model="ruleForm.checkPass" type="password" auto-complete="off"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :offset="7">
<el-form-item style="margin: 0;">
<el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>

listuser.vue

<template><div class="app-container"><div class="filter-container"><el-input v-model="listQuery.userName" placeholder=" 用户姓名" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter"/><el-input v-model="listQuery.phone" placeholder=" 电话" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter"/><el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button><el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button></div><el-tablev-loading="listLoading":key="tableKey":data="list"borderfithighlight-current-rowstyle="width: 100%;"@sort-change="sortChange"><el-table-column label="用户编号" prop="id" sortable="custom" align="center" min-width="105px"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template></el-table-column><el-table-column label="用户姓名" min-width="80px" align="center"><template slot-scope="scope"><span>{{ scope.row.userName }}</span></template></el-table-column><el-table-column label="电话号码" min-width="115px" align="center"><template slot-scope="scope"><span>{{ scope.row.phone }}</span></template></el-table-column><el-table-column label="操作" align="center" min-width="80px" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button><el-button type="danger" size="mini" @click="handleUpdate(scope.row)"> 删除</el-button></template></el-table-column></el-table><pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /><el-dialog :visible.sync="dialogFormVisible" title="修改用户信息"><el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;"><el-form-item label="姓名" prop="userName"><el-input v-model="temp.userName"/></el-form-item><el-form-item label="联系电话" prop="phone"><el-input v-model="temp.phone"/></el-form-item><el-form-item><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="updateData">确认</el-button></el-form-item></el-form></el-dialog></div>
</template>

总结：

学完之后了解了SpringBoot框架，学习了mybatis-plus,springsecurity，以前学过vue,对学过的知识又进行了复习，新接触了elementui,使的开发更加快捷和简单，对前后端分离项目的开发步骤有了一定的理解和经验。

前后端分离：停车管理系统（Java后端，vue前端）相关推荐

基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B ...
视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java
Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...
基于SpringBoot+Vue开发的前后端分离人力资源管理系统
项目介绍一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
计算机毕业设计Java前后端分离健身房管理系统(源码+系统+mysql数据库+lw文档）
计算机毕业设计Java前后端分离健身房管理系统(源码+系统+mysql数据库+lw文档) 计算机毕业设计Java前后端分离健身房管理系统(源码+系统+mysql数据库+lw文档) 本源码技术栈: 项目 ...
java毕业设计前后端分离健身房管理系统源码+lw文档+mybatis+系统+mysql数据库+调试
java毕业设计前后端分离健身房管理系统源码+lw文档+mybatis+系统+mysql数据库+调试 java毕业设计前后端分离健身房管理系统源码+lw文档+mybatis+系统+mysql数据库+调 ...
java计算机毕业设计前后端分离健身房管理系统源代码+数据库+系统+lw文档
java计算机毕业设计前后端分离健身房管理系统源代码+数据库+系统+lw文档 java计算机毕业设计前后端分离健身房管理系统源代码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语 ...
新B站视频来了！Spring security + vue前后端分离后台管理系统
距离上次发布视频已经很久了哈,有点懒.这次发布的是一个基于Spring security + jwt + vue的前后端分离后台管理系统VueAdmin,项目讲解视频一共54集,共800分钟,发布到B ...
前后端分离时代，Java 程序员的变与不变！
事情的起因是这样的,有个星球的小伙伴向邀请松哥在知乎上回答一个问题,原题是: 前后端分离的时代,Java后台程序员的技术建议? 松哥认真看了下这个问题,感觉对于初次接触前后端分离的小伙伴来说,可能都会 ...
SpringCloud Alibaba+layui前后端分离权限管理系统
cloud_layui 权限管理系统项目介绍 cloud_layui是基于springcloud alibaba+layui整合开发前后端分离权限管理系统,架构思想来源于( RuoYi-Cloud) ...
视频教程-SpringBoot实战教程：SpringBoot入门及前后端分离项目开发-Java
SpringBoot实战教程:SpringBoot入门及前后端分离项目开发十三,CSDN达人课课程作者,CSDN 博客作者,现就职于某网络科技公司任职高级 Java 开发工程师,13blog.sit ...

前后端分离：停车管理系统（Java后端，vue前端）

文章目录

停车管理系统

后端

userContorller.java

前端

adduser.vue

listuser.vue

总结：

前后端分离：停车管理系统（Java后端，vue前端）相关推荐

最新文章

热门文章