AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

学生管理 + 用户管理（Element版）（二）

2022-10-17 87
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 学生管理 + 用户管理（Element版）

1.4.3 添加：ajax操作

  • 查询班级列表

2eff8ac38f134768b78281bd6eae7b56.png

  • 添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）


5104554d78484e5288bc9e5626df5934.png

<template>
  <div>
    <!-- 表单start -->
    <el-form :inline="true" :model="studentVo" size="mini" >
      <el-form-item label="班级">
        <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
          <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="condition(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单end -->
    <el-button type="primary" @click="openAddDialog" >添加</el-button>
    <!-- 添加的弹出框start -->
    <el-dialog title="添加学生" :visible.sync="addStudentDialogVisible">
      <el-form :model="student" label-width="80px">
        <el-form-item label="班级列表" >
          <el-select v-model="student.cid" placeholder="请选择班级">
            <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="id" >
          <el-input v-model="student.sid"></el-input>
        </el-form-item>
        <el-form-item label="名称" >
          <el-input v-model="student.sname"></el-input>
        </el-form-item>
        <el-form-item label="生日" >
          <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="student.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addStudentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加的弹出框end -->
    <!-- 表格start -->
    <el-table
      :data="studentPage.list"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="sid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cid"
        label="班级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="180">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? "男" : "女"}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->
    <!-- 分页条start -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="studentPage.pageNum"
      :page-sizes="[1, 2, 3, 5, 10]"
      :page-size="studentPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="studentPage.total">
    </el-pagination>
    <!-- 分页条end -->
  </div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      studentVo: {    //条件查询
      },
      studentPage: {    //分页数据
        pageNum: 1,
        pageSize: 3
      },
      addStudentDialogVisible: false,     //添加弹出框的控制变量
      student: {        //添加表单对象
      },
      classesList: [],  // 所有班级
    }
  },
  methods: {
    async condition(num) {
      if(num) {
        this.studentPage.pageNum = num
      }
      // ajax查询
      var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
      let {data:baseResult} = await axios.post(url, this.studentVo)
      // 保存结果
      this.studentPage = baseResult.data
    },
    handleSelectionChange(val) {
      console.info('批量删除')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.studentPage.pageSize = val
      this.studentPage.pageNum = 1
      // 重新开始
      this.condition()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.studentPage.pageNum = val
      // 重新开始
      this.condition()
    },
    async selectAllClasses() {
      // ajax 查询所有的班级
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.get(url)
      // 保存结果
      this.classesList = baseResult.data
    },
    openAddDialog() {
      // 打开弹出框
      this.addStudentDialogVisible = true
      // 清空表单数据
      this.student = {}
      // 查询班级列表
      this.selectAllClasses()
    },
    async addStudent() {
      // 添加学生ajax
      var url = `http://localhost:8888/student/saveOrUpdate`
      let { data: baseResult } = await axios.post(url, this.student)
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功：刷新页面，成功提示，关闭弹出框
        this.condition()
        this.$message.success(baseResult.message)
        this.addStudentDialogVisible = false
      } else {
        // 失败：失败提示
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询班级
    this.selectAllClasses()
    // 查询学生
    this.condition()
  },
}
</script>
<style>
</style>

1.4.4 修改：ajax操作

  • 点击修改按钮，通过id查询详情，显示弹出框，并自动填充表单。

905f5bedd71d463da6cf7217c4a3ef38.png

<template>
  <div>
    <!-- 表单start -->
    <el-form :inline="true" :model="studentVo" size="mini" >
      <el-form-item label="班级">
        <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
          <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="condition(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单end -->
    <el-button type="primary" @click="openAddDialog" >添加</el-button>
    <!-- 添加的弹出框start -->
    <el-dialog :title="dialogTitle" :visible.sync="addStudentDialogVisible">
      <el-form :model="student" label-width="80px">
        <el-form-item label="班级列表" >
          <el-select v-model="student.cid" placeholder="请选择班级">
            <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="id" >
          <el-input v-model="student.sid"></el-input>
        </el-form-item>
        <el-form-item label="名称" >
          <el-input v-model="student.sname"></el-input>
        </el-form-item>
        <el-form-item label="生日" >
          <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="student.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addStudentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加的弹出框end -->
    <!-- 表格start -->
    <el-table
      :data="studentPage.list"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="sid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cid"
        label="班级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="180">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? "男" : "女"}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openUpdateDialog(scope.row.sid)">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->
    <!-- 分页条start -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="studentPage.pageNum"
      :page-sizes="[1, 2, 3, 5, 10]"
      :page-size="studentPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="studentPage.total">
    </el-pagination>
    <!-- 分页条end -->
  </div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      studentVo: {    //条件查询
      },
      studentPage: {    //分页数据
        pageNum: 1,
        pageSize: 3
      },
      addStudentDialogVisible: false,     //添加弹出框的控制变量
      student: {        //添加表单对象
      },
      classesList: [],  // 所有班级
      dialogTitle: '',  // 弹出框的标题
    }
  },
  methods: {
    async condition(num) {
      if(num) {
        this.studentPage.pageNum = num
      }
      // ajax查询
      var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
      let {data:baseResult} = await axios.post(url, this.studentVo)
      // 保存结果
      this.studentPage = baseResult.data
    },
    handleSelectionChange(val) {
      console.info('批量删除')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.studentPage.pageSize = val
      this.studentPage.pageNum = 1
      // 重新开始
      this.condition()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.studentPage.pageNum = val
      // 重新开始
      this.condition()
    },
    async selectAllClasses() {
      // ajax 查询所有的班级
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.get(url)
      // 保存结果
      this.classesList = baseResult.data
    },
    openAddDialog() {
      // 设置标题
      this.dialogTitle = '添加学生'
      // 打开弹出框
      this.addStudentDialogVisible = true
      // 清空表单数据
      this.student = {}
      // 查询班级列表
      this.selectAllClasses()
    },
    async openUpdateDialog(sid) {
      // 设置标题
      this.dialogTitle = '修改学生'
      // 通过id查询详情
      var url = `http://localhost:8888/student/${sid}`
      let { data: baseResult } = await axios.get(url)
      this.student = baseResult.data
      // 查询班级列表
      this.selectAllClasses()
      // 打开弹出框
      this.addStudentDialogVisible = true
    },
    async addStudent() {
      // 添加学生ajax
      var url = `http://localhost:8888/student/saveOrUpdate`
      let { data: baseResult } = await axios.post(url, this.student)
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功：刷新页面，成功提示，关闭弹出框
        this.condition()
        this.$message.success(baseResult.message)
        this.addStudentDialogVisible = false
      } else {
        // 失败：失败提示
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询班级
    this.selectAllClasses()
    // 查询学生
    this.condition()
  },
}
</script>
<style>
</style>

2. 用户管理

2.1 用户名登录

2.1.1 显示登录页面

<template>
  <div class="login">
    <el-card class="login-card">
      <div slot="header" class="clearfix">
        <el-button type="text" icon="el-icon-home">传智专修学院</el-button>
      </div>
      <!-- 表单start -->
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单end -->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
    }
  },
  methods: {
    login() {
    }
  },
}
</script>
<style>
  .login {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .login-card {
    width: 500px;
  }
</style>

2.1.2 表单校验

  • 普通字段校验

63c35e93ac2e412fa3436c200930f8d0.png

<template>
  <div class="login">
    <el-card class="login-card">
      <div slot="header" class="clearfix">
        <el-button type="text" icon="el-icon-home">传智专修学院</el-button>
      </div>
      <!-- 表单start -->
      <el-form ref="form" :model="user" :rules="loginRules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单end -->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
      loginRules: {   //校验规则
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$message.success('ajax发送')
    }
  },
}
</script>
<style>
  .login {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .login-card {
    width: 500px;
  }
</style>
  • 程序校验

50f7899ed64e46be9878487380a0cc33.png

<template>
  <div class="login">
    <el-card class="login-card">
      <div slot="header" class="clearfix">
        <el-button type="text" icon="el-icon-home">传智专修学院</el-button>
      </div>
      <!-- 表单start -->
      <el-form ref="loginForm" :model="user" :rules="loginRules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单end -->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
      loginRules: {   //校验规则
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 校验通过
          this.$message.success('ajax发送')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>
<style>
  .login {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .login-card {
    width: 500px;
  }
</style>

2.1.3 ajax提交

  • 表单校验通过后，发送ajax，如果登录成功跳转到首页，如果失败提示“用户名或密码不匹

7e78a6cbb44e4581bc814d32a01b2ef7.png

methods: {
    login() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 校验通过 发送ajax start
          var url = `http://localhost:8888/user/login`
          let { data: baseResult } = await axios.post(url, this.user)
          if( baseResult.code == 20000) {
            // 登录成功，跳转到首页
            this.$router.push('/home')
          } else {
            // 登录失败
            this.$message.error(baseResult.message)
          }
          // 校验通过 发送ajax end
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },

2.1.4 后端实现


步骤：


步骤1：拷贝表


步骤2：编写JavaBean


步骤3：编写mapper


步骤4：编写service，提供login，使用用户名和密码进行查询，null或user


步骤5：编写controller，根据返回值提出，登录成功/账号或密码不匹配


步骤1：拷贝表


CREATE TABLE `tb_user` (
  `u_id` varchar(32) NOT NULL COMMENT '用户编号',
  `user_name` varchar(50) DEFAULT NULL COMMENT '用户名',
  `password` varchar(32) DEFAULT NULL COMMENT '密码',
  `gender` bit(1) DEFAULT NULL COMMENT '性别,1表示男，0表示女',
  PRIMARY KEY (`u_id`),
  UNIQUE KEY `user_name` (`user_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*Data for the table `tb_user` */
insert  into `tb_user`(`u_id`,`user_name`,`password`,`gender`) values ('1','jack','1234',''),('10','jack5','1234',''),('2','rose','1234','\0'),('3','张三','1234',''),('4','tom','1234',''),('5','jack2','1234',''),('6','jack1','1234',''),('7','jack3','1234',''),('8','jack4','1234',''),('cd0d2523b5024589af142787de8a7b2a','jack6','1234','');

步骤2：编写JavaBean

package com.czxy.domain;
import lombok.Data;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
@Data
@Table(name = "tb_user")
public class User {
    @Id
    @Column(name = "u_id")
    private String uid;
    @Column(name = "user_name")
    private String username;
    @Column(name = "password")
    private String password;
    @Column(name = "gender")
    private Integer gender;     // 0 或 1
}

步骤3：编写mapper

package com.czxy.mapper;
import com.czxy.domain.User;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends Mapper<User> {
}

步骤4：编写service，提供login，使用用户名和密码进行查询，null或user

  • 接口
package com.czxy.service;
import com.czxy.domain.User;
public interface UserService {
    /**
     *
     * @param userLogin 用户名和密码（表单提交）
     * @return 查询结果（数据库查询）
     */
    public User login(User userLogin);
}
  • 实现类
package com.czxy.service.impl;
import com.czxy.domain.User;
import com.czxy.mapper.UserMapper;
import com.czxy.service.UserService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;
import javax.annotation.Resource;
import java.util.List;
@Service
@Transactional
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;
    @Override
    public User login(User userLogin) {
        // 用户名和密码查询，如果有结果返回，如果没有返回null
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username", userLogin.getUsername());
        criteria.andEqualTo("password", userLogin.getPassword());
        // 查询
        List<User> list = userMapper.selectByExample(example);
        // 返回第一个数据
        if(list != null && list.size() > 0) {
            return list.get(0);
        }
        return null;
    }
}
  • 步骤5：编写controller，根据返回值提出，登录成功/账号或密码不匹配
package com.czxy.controller;
import com.czxy.domain.User;
import com.czxy.service.UserService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@RestController
@CrossOrigin        //跨域
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;
    @PostMapping("/login")
    public BaseResult login(@RequestBody User user) {
        // 登录
        User loginUser = userService.login(user);
        // 判断
        if(loginUser != null) {
            // 登录成功
            return BaseResult.ok("登录成功", loginUser);
        } else {
            // 登录失败
            return BaseResult.error("用户名或密码不匹配");
        }
    }
}

2.2 注册：用户名校验（ajax校验）

2.2.1 需求

  • 用户名存在，表单不能注册。用户名不存在，可以注册。

2.2.2 后端

  • 通过用户名查询，根据查询结果提示
  • 查询到，提示“用户名已存在”
  • 没有查询到，提示“用户名可用”
  • 步骤：
  • 步骤1：service，通过用户名查询
  • 步骤2：controller，post，json数据，判断
  • 步骤1：service，通过用户名查询
  • 接口
 /**
     * 通过用户名查询
     * @param username
     * @return
     */
    public User findByUsername(String username);
  • 实现类
 @Override
    public User findByUsername(String username) {
        // 用户名和密码查询，如果有结果返回，如果没有返回null
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username", username);
        // 查询
        List<User> list = userMapper.selectByExample(example);
        // 返回第一个数据
        if(list != null && list.size() > 0) {
            return list.get(0);
        }
        return null;
    }

步骤2：controller，post，json数据，判断

@PostMapping("/check")
    public BaseResult check(@RequestBody User user) {
        // 登录
        User findUser = userService.findByUsername(user.getUsername());
        // 判断
        if(findUser == null) {
            // 没有结果，可用
            return BaseResult.ok("用户名可用");
        } else {
            // 有结果，不可用，已存在
            return BaseResult.error("用户名已存在");
        }
    }
文章标签：
前端开发
数据安全/隐私保护
数据格式
JSON
路遥叶子
目录
相关文章
_BugMan
|
8月前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统：登录页
【vue实战项目】通用管理系统：登录页
_BugMan
78 2
_BugMan
|
8月前
|
JavaScript API
【vue实战项目】通用管理系统：信息列表，信息的编辑和删除
【vue实战项目】通用管理系统：信息列表，信息的编辑和删除
_BugMan
71 2
爱你三千遍斯塔克
|
7月前
|
监控 数据安全/隐私保护
若依修改---功能详解--权限控制，demo超级管理员，可以查看所有功能菜单，zhangsan,登录之后，仅可以查看线索的菜单，不同角色岗位，登录查看的内容不同，若依通过用户管理，角色管理，菜单管理控
若依修改---功能详解--权限控制，demo超级管理员，可以查看所有功能菜单，zhangsan,登录之后，仅可以查看线索的菜单，不同角色岗位，登录查看的内容不同，若依通过用户管理，角色管理，菜单管理控
爱你三千遍斯塔克
1186 0
游客xbewbwflf4oy6
|
9月前
|
自然语言处理 数据安全/隐私保护 开发者
wikijs的基本操作-网站配置和用户管理
wikijs的基本操作-网站配置和用户管理
游客xbewbwflf4oy6
472 1
你挚爱的强哥
|
9月前
|
JavaScript
❤❤❤常用模板❤❤❤Vue常用后台管理系统增删改查列表（表格）模板
❤❤❤常用模板❤❤❤Vue常用后台管理系统增删改查列表（表格）模板
你挚爱的强哥
98 0
〔Lisa〕
|
存储 SQL JSON
​​Layui之用户管理实例（对数据的增删改查）
​​Layui之用户管理实例（对数据的增删改查）
〔Lisa〕
121 0
邹邹很busy。
|
API
Vue--element实现编辑会员功能
Vue--element实现编辑会员功能
邹邹很busy。
140 0
jasmine_qiqi
|
JavaScript 前端开发 程序员
Vue用户管理（增删改查）功能详情（下）
Vue用户管理（增删改查）功能详情（下）
jasmine_qiqi
131 0
Vue用户管理（增删改查）功能详情（下）
jasmine_qiqi
|
JavaScript API
Vue用户管理（增删改查）功能详情（上）
Vue用户管理（增删改查）功能详情（上）
jasmine_qiqi
184 0
Vue用户管理（增删改查）功能详情（上）
路遥叶子
|
前端开发
学生管理 + 用户管理（Element版）（三）
学生管理 + 用户管理（Element版）
路遥叶子
84 0
学生管理 + 用户管理（Element版）（三）

热门文章

最新文章

  • 1
    解决kafka集群由于默认的__consumer_offsets这个topic的默认的副本数为1而存在的单点故障问题
  • 2
    oracle 11g 11204补丁信息
  • 3
    Python 命令行之旅：初探 docopt
  • 4
    时间之箭源于量子纠缠？
  • 5
    输入输出流体系图
  • 6
    Windows Server 2008 R2下部署OCS 2007 R2 边缘服务器
  • 7
    从码农到设计者，从单例模式入手设计代码
  • 8
    瑞典力推储能助太阳能发电计划落实
  • 9
    十张图告诉你互联网发展的八大趋势
  • 10
    第7周-任务3-复数模板类
  • 1
    DeepSeek——DeepSeek模型部署实战
    128
  • 2
    基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证
    105
  • 3
    基于电导增量MPPT控制算法的光伏发电系统simulink建模与仿真
    29
  • 4
    基于排队理论的客户结账等待时间MATLAB模拟仿真
    44
  • 5
    3天功能开发→3小时：通义灵码2.0+DEEPSEEK实测报告，单元测试生成准确率92%的秘密
    63
  • 6
    Sentinel监测到了服务，但是实时监控不显示曲线图，应该怎么解决这个问题？
    47
  • 7
    通义灵码 2.0 体验报告：AI 赋能智能研发的新范式
    61
  • 8
    通义灵码 2.0 体验报告：AI 赋能智能研发的新范式
    80
  • 9
    类和对象的简述（c++篇）
    48
  • 10
    模拟实现c++中的vector模版
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型