Article directory
parking management system
Development environment: tools use idea, database (mysql5.7), technology selection for windows10
projects: SpringBoot+mybatis-plus, vue, elementui, springsecurity
rear end
userContorller.java
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
@Autowired
private 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("修改用户失敗！");
}
}
front end
adduser.view
<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-table
v-loading="listLoading"
:key="tableKey"
:data="list"
border
fit
highlight-current-row
style="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>
Summarize:
After learning, I learned about the SpringBoot framework, learned mybatis-plus, springsecurity, learned vue before, reviewed the knowledge I learned, and got acquainted with elementui, which made the development faster and easier. The development steps have a certain understanding and experience.