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

停车管理系统

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

后端

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("修改用户失敗！");
    }


}

前端

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-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>

总结：

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