devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

月木学途开发 2.前台用户模块

作者：IT小白 | 2024-04-10 01:27:05

赞

踩

月木学途开发 2.前台用户模块

概述

效果展

 

 

数据库设计

会员表

  1. DROP TABLE IF EXISTS `user_type`;
  2. CREATE TABLE `user_type` (
  3.   `userTypeId` int(11) NOT NULL AUTO_INCREMENT,
  4.   `userTypeName` varchar(255) DEFAULT NULL,
  5.   `userTypeDesc` varchar(255) DEFAULT NULL,
  6.   PRIMARY KEY (`userTypeId`)
  7. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4;

用户表

  1. DROP TABLE IF EXISTS `user`;
  2. CREATE TABLE `user` (
  3.   `userId` int(11) NOT NULL AUTO_INCREMENT,
  4.   `username` varchar(255) DEFAULT NULL,
  5.   `password` varchar(255) DEFAULT NULL,
  6.   `phone` varchar(255) DEFAULT NULL,
  7.   `nickname` varchar(255) DEFAULT NULL,
  8.   `userImg` longtext,
  9.   `email` varchar(255) DEFAULT NULL,
  10.   `userIntroduce` longtext,
  11.   `userSex` varchar(255) DEFAULT NULL,
  12.   `signature` longtext,
  13.   `userStatus` varchar(255) DEFAULT NULL,
  14.   PRIMARY KEY (`userId`)
  15. ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4;

会员_用户中间表

  1. DROP TABLE IF EXISTS `user_user_type`;
  2. CREATE TABLE `user_user_type` (
  3.   `userId` int(11) DEFAULT NULL,
  4.   `userTypeId` int(11) DEFAULT NULL
  5. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

实体类设计

会员类型表

  1. /**
  2.  * 会员类型
  3.  */
  4. @Data
  5. public class UserType {
  6.     @TableId
  7.     private Integer userTypeId;
  8.     private String userTypeName;//名称【普通会员/黄金会员/钻石会员/至尊会员/骇客会员】
  9.     private String userTypeDesc;//详情
  10. }

用户表

  1. /**
  2.  * 用户
  3.  */
  4. @Data
  5. public class User implements Serializable {
  6.     @TableId
  7.     private Integer userId;
  8.  
  9.     private String userImg; // 头像
  10.     private String nickname; // 昵称
  11.  
  12.     private String username; // 账号
  13.     private String password; // 密码
  14.     private String phone; // 手机号
  15.  
  16.     private String email;//邮箱
  17.     private String userSex; // 性别
  18.     private String signature;//个性签名
  19.     private String userIntroduce;//自我介绍
  20.  
  21.     private String userStatus; // 用户状态（1激活 0未激活）
  22. }

Mapper层开发

用户mapper

  1. public interface UserMapper extends BaseMapper<User> {
  2. }

用户类型mapper

  1. public interface UserTypeMapper extends BaseMapper<UserType> {
  2.     //添加用户_用户类型中间表的数据
  3.     void addUser_userType(@Param("userId") Integer userId, @Param("userTypeId") Integer userTypeId);
  4.     //删除用户_用户类型中间表的数据
  5.     void deleteUser_userType(@Param("userId") Integer userId, @Param("userTypeId") Integer userTypeId);
  6.  
  7.     //根据用户id删除用户_用户类型中间表的数据
  8.     void deleteUser_userTypeByUserId(Integer userId);
  9.     //根据用户类型id删除用户_用户类型中间表的数据
  10.     void deleteUser_userTypeByUserTypeId(Integer userTypeId);
  11.  
  12.     //根据用户id查询用户_用户类型中间表的专栏数据
  13.     List<UserType> findUserTypeByUserId(Integer userId);
  14. }

用户类型mapper映射文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="jkw.mapper.UserTypeMapper">
  6.     <insert id="addUser_userType">
  7.         INSERT INTO user_user_type
  8.         VALUES (#{userId}, #{userTypeId});
  9.     </insert>
  10.     <delete id="deleteUser_userType">
  11.         DELETE
  12.         FROM user_user_type
  13.         WHERE userId = #{userId}
  14.           and userTypeId = #{userTypeId}
  15.     </delete>
  16.     <delete id="deleteUser_userTypeByUserId" parameterType="int">
  17.         DELETE
  18.         FROM user_user_type
  19.         WHERE userId = #{userId}
  20.     </delete>
  21.     <delete id="deleteUser_userTypeByUserTypeId" parameterType="int">
  22.         DELETE
  23.         FROM user_user_type
  24.         WHERE userTypeId = #{userTypeId}
  25.     </delete>
  26.     <select id="findUserTypeByUserId" resultType="jkw.pojo.UserType" parameterType="int">
  27.         select user_type.*
  28.         from user_type
  29.                  left join user_user_type
  30.                            on user_user_type.userTypeId = user_type.userTypeId
  31.         where user_user_type.userId = #{userId}
  32.     </select>
  33.  
  34. </mapper>

Service层开发

UserService

  1. public interface UserService {
  2.     void add(User user);
  3.  
  4.     void update(User user);
  5.  
  6.     void delete(Integer id);
  7.  
  8.     User findById(Integer id);
  9.  
  10.     Page<User> search(int page, int size);
  11.  
  12.     List<User> findAll();
  13.  
  14.     void updateStatus(Integer id);
  15.  
  16.     // 注册时向redis保存手机号+验证码
  17.     void saveRegisterCheckCode(String phone, String checkCode);
  18.  
  19.     // 注册时验证手机号
  20.     void registerCheckCode(String phone, String checkCode);
  21.  
  22.     // 注册
  23.     void register(User user);
  24.  
  25.     // 账号密码登录
  26.     String loginPassword(String username, String password);
  27.  
  28.  
  29.     // 手机号验证码登录时向redis保存手机号+验证码
  30.     void saveLoginCheckCode(String phone, String checkCode);
  31.  
  32.     // 手机号验证码登录
  33.     String loginCheckCode(String phone, String checkCode);
  34.  
  35.     // 获取登录用户
  36.     User getLoginUser(String token);
  37.  
  38. }

UserServiceImpl

  1. package jkw.service.impl;
  2.  
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  5. import jkw.exception.MyException;
  6. import jkw.mapper.UserMapper;
  7. import jkw.mapper.UserTypeMapper;
  8. import jkw.pojo.User;
  9. import jkw.service.UserService;
  10. import jkw.utils.JWTUtil;
  11. import jkw.utils.Md5Util;
  12. import org.springframework.beans.factory.annotation.Autowired;
  13. import org.springframework.data.redis.core.RedisTemplate;
  14. import org.springframework.stereotype.Service;
  15. import org.springframework.transaction.annotation.Transactional;
  16.  
  17. import java.util.List;
  18. import java.util.concurrent.TimeUnit;
  19.  
  20. @Service
  21. @Transactional
  22. public class UserServiceImpl implements UserService {
  23.     @Autowired
  24.     private UserMapper userMapper;
  25.     @Autowired
  26.     private RedisTemplate redisTemplate;
  27.     @Autowired
  28.     private UserTypeMapper userTypeMapper;
  29.  
  30.  
  31.     @Override
  32.     public void add(User user) {
  33.         user.setPassword(Md5Util.encode(user.getPassword()));
  34.         userMapper.insert(user);
  35.     }
  36.  
  37.     @Override
  38.     public void update(User user) {
  39.         User userFromData = userMapper.selectById(user.getUserId());
  40.         //判断密码是否修改[若密码为空或者密码和数据库中相等，则未修改]
  41.         if (user.getPassword().equals(userFromData.getPassword())) {
  42.             userMapper.updateById(user);
  43.         } else {
  44.             //若修改，则加密后在保存
  45.             user.setPassword(Md5Util.encode(user.getPassword()));
  46.             userMapper.updateById(user);
  47.         }
  48.     }
  49.  
  50.     @Override
  51.     public void delete(Integer id) {
  52.         //先删除用户_用户类型中间表的数据
  53.         userTypeMapper.deleteUser_userTypeByUserId(id);
  54.         //删除用户
  55.         userMapper.deleteById(id);
  56.     }
  57.  
  58.     @Override
  59.     public User findById(Integer id) {
  60.         return userMapper.selectById(id);
  61.     }
  62.  
  63.     @Override
  64.     public Page<User> search(int page, int size) {
  65.         return userMapper.selectPage(new Page<>(page, size), null);
  66.     }
  67.  
  68.     @Override
  69.     public List<User> findAll() {
  70.         return userMapper.selectList(null);
  71.     }
  72.  
  73.     @Override
  74.     public void updateStatus(Integer id) {
  75.         User user = userMapper.selectById(id);
  76.         if (user.getUserStatus().equals("1")) {
  77.             user.setUserStatus("0");
  78.             userMapper.updateById(user);
  79.         } else {
  80.             user.setUserStatus("1");
  81.             userMapper.updateById(user);
  82.         }
  83.     }
  84.  
  85.     @Override
  86.     public void saveRegisterCheckCode(String phone, String checkCode) {
  87.         //向redis缓存注册验证码，手机验证码过期时间设为5分钟
  88.         redisTemplate.opsForValue().set("registerCheckCode" + phone, checkCode, 300, TimeUnit.SECONDS);
  89.     }
  90.  
  91.     @Override
  92.     public void registerCheckCode(String phone, String checkCode) {
  93.         //获取redis中缓存的注册验证码
  94.         String checkCodeFromRedis = (String) redisTemplate.opsForValue().get("registerCheckCode" + phone);
  95.         if (!checkCodeFromRedis.equals(checkCode)) {
  96.             throw new MyException(604, "验证码错误");
  97.         }
  98.     }
  99.  
  100.     @Override
  101.     public void register(User user) {
  102.         //验证手机号是否存在
  103.         QueryWrapper<User> queryWrapper1 = new QueryWrapper<>();
  104.         queryWrapper1.eq("phone", user.getPhone());
  105.         List<User> users1 = userMapper.selectList(queryWrapper1);
  106.         if (users1 != null && users1.size() > 0) {
  107.             throw new MyException(604, "手机号已存在");
  108.         }
  109.         //验证账号是否存在
  110.         QueryWrapper<User> queryWrapper2 = new QueryWrapper<>();
  111.         queryWrapper2.eq("username", user.getPhone());
  112.         List<User> users2 = userMapper.selectList(queryWrapper2);
  113.         if (users2 != null && users2.size() > 0) {
  114.             throw new MyException(604, "账号已存在");
  115.         }
  116.         //新增用户
  117.         user.setUserStatus("1");
  118.         user.setPassword(Md5Util.encode(user.getPassword()));
  119.         userMapper.insert(user);
  120.     }
  121.  
  122.     @Override
  123.     public String loginPassword(String username, String password) {
  124.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  125.         queryWrapper.eq("username", username);
  126.         User user = userMapper.selectOne(queryWrapper);
  127.         //判断用户是否存在
  128.         if (user == null) {
  129.             throw new MyException(605, "用户不存在");
  130.         }
  131.         //判断面是否正确
  132.         boolean verify = Md5Util.verify(password, user.getPassword());
  133.         if (!verify) {
  134.             throw new MyException(605, "密码错误");
  135.         }
  136.         //登录成功，生成jwt令牌
  137.         String token = JWTUtil.token(user);
  138.         return token;
  139.     }
  140.  
  141.     @Override
  142.     public void saveLoginCheckCode(String phone, String checkCode) {
  143.         //判断该手机号是否有对应的用户
  144.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  145.         queryWrapper.eq("phone", phone);
  146.         User user = userMapper.selectOne(queryWrapper);
  147.         if (user != null) {
  148.             //向redis缓存登录验证码，手机验证码过期时间设为5分钟
  149.             redisTemplate.opsForValue().set("loginCheckCode" + phone, checkCode, 300, TimeUnit.SECONDS);
  150.         } else {
  151.             throw new MyException(605, "用户不存在");
  152.         }
  153.  
  154.     }
  155.  
  156.     @Override
  157.     public String loginCheckCode(String phone, String checkCode) {
  158.         //获取redis中缓存的登录验证码
  159.         String checkCodeFromRedis = (String) redisTemplate.opsForValue().get("loginCheckCode" + phone);
  160.         if (!checkCodeFromRedis.equals(checkCode)) {
  161.             throw new MyException(604, "验证码错误");
  162.         }
  163.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  164.         queryWrapper.eq("phone", phone);
  165.         User user = userMapper.selectOne(queryWrapper);
  166.         //登录成功，生成jwt令牌
  167.         return JWTUtil.token(user);
  168.     }
  169.  
  170.     @Override
  171.     public User getLoginUser(String token) {
  172.         return userMapper.selectById(JWTUtil.verifyAndGetId(token));
  173.     }
  174. }

UserTypeService

  1. package jkw.service;
  2.  
  3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  4. import jkw.pojo.UserType;
  5.  
  6. import java.util.List;
  7.  
  8. public interface UserTypeService {
  9.     void add(UserType userType);
  10.  
  11.     void update(UserType userType);
  12.  
  13.     void delete(Integer id);
  14.  
  15.     UserType findById(Integer id);
  16.  
  17.     List<UserType> findAll();
  18.  
  19.     Page<UserType> search(String search, int page, int size);
  20.  
  21.     //添加用户_用户类型中间表的数据
  22.     void addUser_userType(Integer userId, Integer userTypeId);
  23.  
  24.     //删除用户_用户类型中间表的数据
  25.     void deleteUser_userType(Integer userId, Integer userTypeId);
  26.  
  27.  
  28.     //根据用户id删除用户_用户类型中间表的数据
  29.     void deleteUser_userTypeByUserId(Integer userId);
  30.  
  31.     //根据用户类型id删除用户_用户类型中间表的数据
  32.     void deleteUser_userTypeByUserTypeId(Integer userTypeId);
  33.  
  34.     //根据用户id查询用户_用户类型中间表的专栏数据
  35.     List<UserType> findUserTypeByUserId(Integer userId);
  36. }

UserTypeServiceImpl

  1. package jkw.service.impl;
  2.  
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  5. import jkw.exception.MyException;
  6. import jkw.mapper.UserMapper;
  7. import jkw.mapper.UserTypeMapper;
  8. import jkw.pojo.User;
  9. import jkw.service.UserService;
  10. import jkw.utils.JWTUtil;
  11. import jkw.utils.Md5Util;
  12. import org.springframework.beans.factory.annotation.Autowired;
  13. import org.springframework.data.redis.core.RedisTemplate;
  14. import org.springframework.stereotype.Service;
  15. import org.springframework.transaction.annotation.Transactional;
  16.  
  17. import java.util.List;
  18. import java.util.concurrent.TimeUnit;
  19.  
  20. @Service
  21. @Transactional
  22. public class UserServiceImpl implements UserService {
  23.     @Autowired
  24.     private UserMapper userMapper;
  25.     @Autowired
  26.     private RedisTemplate redisTemplate;
  27.     @Autowired
  28.     private UserTypeMapper userTypeMapper;
  29.  
  30.  
  31.     @Override
  32.     public void add(User user) {
  33.         user.setPassword(Md5Util.encode(user.getPassword()));
  34.         userMapper.insert(user);
  35.     }
  36.  
  37.     @Override
  38.     public void update(User user) {
  39.         User userFromData = userMapper.selectById(user.getUserId());
  40.         //判断密码是否修改[若密码为空或者密码和数据库中相等，则未修改]
  41.         if (user.getPassword().equals(userFromData.getPassword())) {
  42.             userMapper.updateById(user);
  43.         } else {
  44.             //若修改，则加密后在保存
  45.             user.setPassword(Md5Util.encode(user.getPassword()));
  46.             userMapper.updateById(user);
  47.         }
  48.     }
  49.  
  50.     @Override
  51.     public void delete(Integer id) {
  52.         //先删除用户_用户类型中间表的数据
  53.         userTypeMapper.deleteUser_userTypeByUserId(id);
  54.         //删除用户
  55.         userMapper.deleteById(id);
  56.     }
  57.  
  58.     @Override
  59.     public User findById(Integer id) {
  60.         return userMapper.selectById(id);
  61.     }
  62.  
  63.     @Override
  64.     public Page<User> search(int page, int size) {
  65.         return userMapper.selectPage(new Page<>(page, size), null);
  66.     }
  67.  
  68.     @Override
  69.     public List<User> findAll() {
  70.         return userMapper.selectList(null);
  71.     }
  72.  
  73.     @Override
  74.     public void updateStatus(Integer id) {
  75.         User user = userMapper.selectById(id);
  76.         if (user.getUserStatus().equals("1")) {
  77.             user.setUserStatus("0");
  78.             userMapper.updateById(user);
  79.         } else {
  80.             user.setUserStatus("1");
  81.             userMapper.updateById(user);
  82.         }
  83.     }
  84.  
  85.     @Override
  86.     public void saveRegisterCheckCode(String phone, String checkCode) {
  87.         //向redis缓存注册验证码，手机验证码过期时间设为5分钟
  88.         redisTemplate.opsForValue().set("registerCheckCode" + phone, checkCode, 300, TimeUnit.SECONDS);
  89.     }
  90.  
  91.     @Override
  92.     public void registerCheckCode(String phone, String checkCode) {
  93.         //获取redis中缓存的注册验证码
  94.         String checkCodeFromRedis = (String) redisTemplate.opsForValue().get("registerCheckCode" + phone);
  95.         if (!checkCodeFromRedis.equals(checkCode)) {
  96.             throw new MyException(604, "验证码错误");
  97.         }
  98.     }
  99.  
  100.     @Override
  101.     public void register(User user) {
  102.         //验证手机号是否存在
  103.         QueryWrapper<User> queryWrapper1 = new QueryWrapper<>();
  104.         queryWrapper1.eq("phone", user.getPhone());
  105.         List<User> users1 = userMapper.selectList(queryWrapper1);
  106.         if (users1 != null && users1.size() > 0) {
  107.             throw new MyException(604, "手机号已存在");
  108.         }
  109.         //验证账号是否存在
  110.         QueryWrapper<User> queryWrapper2 = new QueryWrapper<>();
  111.         queryWrapper2.eq("username", user.getPhone());
  112.         List<User> users2 = userMapper.selectList(queryWrapper2);
  113.         if (users2 != null && users2.size() > 0) {
  114.             throw new MyException(604, "账号已存在");
  115.         }
  116.         //新增用户
  117.         user.setUserStatus("1");
  118.         user.setPassword(Md5Util.encode(user.getPassword()));
  119.         userMapper.insert(user);
  120.     }
  121.  
  122.     @Override
  123.     public String loginPassword(String username, String password) {
  124.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  125.         queryWrapper.eq("username", username);
  126.         User user = userMapper.selectOne(queryWrapper);
  127.         //判断用户是否存在
  128.         if (user == null) {
  129.             throw new MyException(605, "用户不存在");
  130.         }
  131.         //判断面是否正确
  132.         boolean verify = Md5Util.verify(password, user.getPassword());
  133.         if (!verify) {
  134.             throw new MyException(605, "密码错误");
  135.         }
  136.         //登录成功，生成jwt令牌
  137.         String token = JWTUtil.token(user);
  138.         return token;
  139.     }
  140.  
  141.     @Override
  142.     public void saveLoginCheckCode(String phone, String checkCode) {
  143.         //判断该手机号是否有对应的用户
  144.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  145.         queryWrapper.eq("phone", phone);
  146.         User user = userMapper.selectOne(queryWrapper);
  147.         if (user != null) {
  148.             //向redis缓存登录验证码，手机验证码过期时间设为5分钟
  149.             redisTemplate.opsForValue().set("loginCheckCode" + phone, checkCode, 300, TimeUnit.SECONDS);
  150.         } else {
  151.             throw new MyException(605, "用户不存在");
  152.         }
  153.  
  154.     }
  155.  
  156.     @Override
  157.     public String loginCheckCode(String phone, String checkCode) {
  158.         //获取redis中缓存的登录验证码
  159.         String checkCodeFromRedis = (String) redisTemplate.opsForValue().get("loginCheckCode" + phone);
  160.         if (!checkCodeFromRedis.equals(checkCode)) {
  161.             throw new MyException(604, "验证码错误");
  162.         }
  163.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  164.         queryWrapper.eq("phone", phone);
  165.         User user = userMapper.selectOne(queryWrapper);
  166.         //登录成功，生成jwt令牌
  167.         return JWTUtil.token(user);
  168.     }
  169.  
  170.     @Override
  171.     public User getLoginUser(String token) {
  172.         return userMapper.selectById(JWTUtil.verifyAndGetId(token));
  173.     }
  174. }

控制层开发

UserCon

  1. package jkw.controller.back;
  2.  
  3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  4. import jkw.pojo.User;
  5. import jkw.service.UserService;
  6. import jkw.vo.BaseResult;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.security.access.prepost.PreAuthorize;
  9. import org.springframework.web.bind.annotation.*;
  10.  
  11. import java.util.List;
  12.  
  13. @CrossOrigin
  14. @RequestMapping("/back/user")
  15. @RestController
  16. public class UserCon {
  17.     @Autowired
  18.     private UserService userService;
  19.  
  20.     /**
  21.      * 新增
  22.      *
  23.      * @param user
  24.      * @return
  25.      */
  26.     @PostMapping("/add")
  27.     @PreAuthorize("hasAnyAuthority('/user')")
  28.     public BaseResult add(User user) {
  29.         userService.add(user);
  30.         return BaseResult.ok();
  31.     }
  32.  
  33.     /**
  34.      * 修改
  35.      *
  36.      * @param user
  37.      * @return
  38.      */
  39.     @PostMapping("/update")
  40.     @PreAuthorize("hasAnyAuthority('/user')")
  41.     public BaseResult update(User user) {
  42.         userService.update(user);
  43.         return BaseResult.ok();
  44.     }
  45.  
  46.     /**
  47.      * 删除
  48.      *
  49.      * @param userId
  50.      * @return
  51.      */
  52.     @DeleteMapping("/delete")
  53.     @PreAuthorize("hasAnyAuthority('/user')")
  54.     public BaseResult delete(Integer userId) {
  55.         userService.delete(userId);
  56.         return BaseResult.ok();
  57.     }
  58.  
  59.     /**
  60.      * 根据id查询
  61.      *
  62.      * @param userId
  63.      * @return
  64.      */
  65.     @GetMapping("/findById")
  66.     @PreAuthorize("hasAnyAuthority('/user')")
  67.     public BaseResult findById(Integer userId) {
  68.         User user = userService.findById(userId);
  69.         return BaseResult.ok(user);
  70.     }
  71.  
  72.     /**
  73.      * 查询所有
  74.      *
  75.      * @return
  76.      */
  77.     @GetMapping("/findAll")
  78.     @PreAuthorize("hasAnyAuthority('/user')")
  79.     public BaseResult findAll() {
  80.         List<User> all = userService.findAll();
  81.         return BaseResult.ok(all);
  82.     }
  83.  
  84.     /**
  85.      * 分页查询
  86.      *
  87.      * @param page
  88.      * @param size
  89.      * @return
  90.      */
  91.  
  92.     @GetMapping("/search")
  93.     @PreAuthorize("hasAnyAuthority('/user')")
  94.     public BaseResult search(int page, int size) {
  95.         Page<User> brandPage = userService.search(page, size);
  96.         return BaseResult.ok(brandPage);
  97.     }
  98.  
  99.  
  100.     /**
  101.      * 修改状态
  102.      *
  103.      * @param userId
  104.      * @return
  105.      */
  106.     @PostMapping("/updateStatus")
  107.     @PreAuthorize("hasAnyAuthority('/user')")
  108.     public BaseResult updateStatus(Integer userId) {
  109.         userService.updateStatus(userId);
  110.         return BaseResult.ok();
  111.     }
  112. }

FrontUserCon

  1. package jkw.controller.front;
  2.  
  3. import jkw.pojo.User;
  4. import jkw.service.MessageService;
  5. import jkw.service.UserService;
  6. import jkw.utils.RandomUtil;
  7. import jkw.vo.BaseResult;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.web.bind.annotation.*;
  10.  
  11. @RestController
  12. @CrossOrigin
  13. @RequestMapping("/front/user")
  14. public class FrontUserCon {
  15.     @Autowired
  16.     private UserService userService;
  17.     @Autowired
  18.     private MessageService messageService;
  19.  
  20.     /**
  21.      * 发送注册短信
  22.      *
  23.      * @param phone 注册手机号
  24.      * @return 操作结果
  25.      */
  26.     @GetMapping("/sendMessage")
  27.     public BaseResult sendMessage(String phone) {
  28.         // 1.生成随机四位数
  29.         String checkCode = RandomUtil.buildCheckCode(4);
  30.         // 2.发送短信
  31.         BaseResult result = messageService.sendMessage(phone, checkCode);
  32.         // 3.发送成功，将验证码保存到redis中,发送失败，返回发送结果
  33.         if (200 == result.getCode()) {
  34.             userService.saveRegisterCheckCode(phone, checkCode);
  35.             return BaseResult.ok();
  36.         } else {
  37.             return result;
  38.         }
  39.     }
  40.  
  41.     /**
  42.      * 验证用户注册验证码
  43.      *
  44.      * @param phone     手机号
  45.      * @param checkCode 验证码
  46.      * @return 200验证成功，605验证码不正确
  47.      */
  48.     @GetMapping("/registerCheckCode")
  49.     public BaseResult register(String phone, String checkCode) {
  50.         userService.registerCheckCode(phone, checkCode);
  51.         return BaseResult.ok();
  52.     }
  53.  
  54.     /**
  55.      * 用户注册
  56.      *
  57.      * @param user 用户信息
  58.      * @return 注册结果
  59.      */
  60.     @PostMapping("/register")
  61.     public BaseResult register(User user) {
  62.         userService.register(user);
  63.         return BaseResult.ok();
  64.     }
  65.  
  66.     /**
  67.      * 用户名密码登录
  68.      *
  69.      * @param user 用户对象
  70.      * @return 登录结果
  71.      */
  72.     @PostMapping("/loginPassword")
  73.     public BaseResult loginPassword(User user) {
  74.         String token = userService.loginPassword(user.getUsername(), user.getPassword());
  75.         return BaseResult.ok(token);
  76.     }
  77.  
  78.  
  79.     /**
  80.      * 发送登录短信验证码
  81.      *
  82.      * @param phone 手机号
  83.      * @return 操作结果
  84.      */
  85.     @GetMapping("/sendLoginCheckCode")
  86.     public BaseResult sendLoginCheckCode(String phone) {
  87.         // 1.生成随机四位数
  88.         String checkCode = RandomUtil.buildCheckCode(4);
  89.         // 2.发送短信
  90.         BaseResult result = messageService.sendMessage(phone, checkCode);
  91.         // 3.发送成功，将验证码保存到redis中,发送失败，返回发送结果
  92.         if (200 == result.getCode()) {
  93.             userService.saveLoginCheckCode(phone, checkCode);
  94.             return BaseResult.ok();
  95.         } else {
  96.             return result;
  97.         }
  98.     }
  99.  
  100.     /**
  101.      * 手机号验证码登录
  102.      *
  103.      * @param phone     手机号
  104.      * @param checkCode 验证码
  105.      * @return 登录结果
  106.      */
  107.     @PostMapping("/loginCheckCode")
  108.     public BaseResult loginCheckCode(String phone, String checkCode) {
  109.         String token = userService.loginCheckCode(phone, checkCode);
  110.         return BaseResult.ok(token);
  111.     }
  112.  
  113.  
  114.     /**
  115.      * 获取登录用户
  116.      *
  117.      * @param token 令牌
  118.      * @return 用户名
  119.      */
  120.     @GetMapping("/getUser")
  121.     public BaseResult getUser(String token) {
  122.         User u = userService.getLoginUser(token);
  123.         return BaseResult.ok(u);
  124.     }
  125.  
  126.     /**
  127.      * 根据id查询
  128.      *
  129.      * @param userId
  130.      * @return
  131.      */
  132.     @GetMapping("/findById")
  133.     public BaseResult findById(Integer userId) {
  134.         User user = userService.findById(userId);
  135.         return BaseResult.ok(user);
  136.     }
  137. }

FrontUserTypeCon

  1. package jkw.controller.back;
  2.  
  3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  4. import jkw.pojo.UserType;
  5. import jkw.service.UserTypeService;
  6. import jkw.vo.BaseResult;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.security.access.prepost.PreAuthorize;
  9. import org.springframework.web.bind.annotation.*;
  10.  
  11. import java.util.List;
  12.  
  13. @CrossOrigin
  14. @RestController
  15. @RequestMapping("/back/userType")
  16. public class UserTypeCon {
  17.     @Autowired
  18.     private UserTypeService userTypeService;
  19.  
  20.     /**
  21.      * 新增
  22.      *
  23.      * @param userType
  24.      * @return
  25.      */
  26.     @PostMapping("/add")
  27.     @PreAuthorize("hasAnyAuthority('/user')")
  28.     public BaseResult add(UserType userType) {
  29.         userTypeService.add(userType);
  30.         return BaseResult.ok();
  31.     }
  32.  
  33.     /**
  34.      * 修改
  35.      *
  36.      * @param userType
  37.      * @return
  38.      */
  39.     @PostMapping("/update")
  40.     @PreAuthorize("hasAnyAuthority('/user')")
  41.     public BaseResult update(UserType userType) {
  42.         userTypeService.update(userType);
  43.         return BaseResult.ok();
  44.     }
  45.  
  46.     /**
  47.      * 删除
  48.      *
  49.      * @param userTypeId
  50.      * @return
  51.      */
  52.     @DeleteMapping("/delete")
  53.     @PreAuthorize("hasAnyAuthority('/user')")
  54.     public BaseResult delete(Integer userTypeId) {
  55.         userTypeService.delete(userTypeId);
  56.         return BaseResult.ok();
  57.     }
  58.  
  59.     /**
  60.      * 根据id查询
  61.      *
  62.      * @param userTypeId
  63.      * @return
  64.      */
  65.     @GetMapping("/findById")
  66.     @PreAuthorize("hasAnyAuthority('/user')")
  67.     public BaseResult findById(Integer userTypeId) {
  68.         UserType userType = userTypeService.findById(userTypeId);
  69.         return BaseResult.ok(userType);
  70.     }
  71.  
  72.     /**
  73.      * 查询所有
  74.      *
  75.      * @return
  76.      */
  77.     @GetMapping("/findAll")
  78.     @PreAuthorize("hasAnyAuthority('/user')")
  79.     public BaseResult findAll() {
  80.         List<UserType> all = userTypeService.findAll();
  81.         return BaseResult.ok(all);
  82.     }
  83.  
  84.     /**
  85.      * 分页查询
  86.      *
  87.      * @param page
  88.      * @param size
  89.      * @return
  90.      */
  91.     @GetMapping("/search")
  92.     @PreAuthorize("hasAnyAuthority('/user')")
  93.     public BaseResult search(String search, int page, int size) {
  94.         Page<UserType> brandPage = userTypeService.search(search, page, size);
  95.         return BaseResult.ok(brandPage);
  96.     }
  97.  
  98.     /**
  99.      * 添加用户_用户类型中间表的数据
  100.      *
  101.      * @param userId
  102.      * @param userTypeId
  103.      * @return
  104.      */
  105.     @PostMapping("/addUserType")
  106.     @PreAuthorize("hasAnyAuthority('/user')")
  107.     public BaseResult addUserType(Integer userId, Integer userTypeId) {
  108.         userTypeService.addUser_userType(userId, userTypeId);
  109.         return BaseResult.ok();
  110.     }
  111.  
  112.     /**
  113.      * 删除用户_用户类型中间表的数据
  114.      *
  115.      * @param userId
  116.      * @param userTypeId
  117.      * @return
  118.      */
  119.     @DeleteMapping("/deleteUserType")
  120.     @PreAuthorize("hasAnyAuthority('/user')")
  121.     public BaseResult deleteColumn(Integer userId, Integer userTypeId) {
  122.         userTypeService.deleteUser_userType(userId, userTypeId);
  123.         return BaseResult.ok();
  124.     }
  125.  
  126.     /**
  127.      * 根据用户id查询用户_用户类型中间表的专栏数据
  128.      *
  129.      * @param userId
  130.      * @return
  131.      */
  132.     @GetMapping("/findUserTypeByUserId")
  133.     @PreAuthorize("hasAnyAuthority('/user')")
  134.     public BaseResult findColumnByBlogId(Integer userId) {
  135.         List<UserType> userTypeByUserId = userTypeService.findUserTypeByUserId(userId);
  136.         return BaseResult.ok(userTypeByUserId);
  137.     }
  138. }

UserTypeCon 

  1. package jkw.controller.back;
  2.  
  3. import jkw.pojo.UserType;
  4. import jkw.service.UserTypeService;
  5. import jkw.vo.BaseResult;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.CrossOrigin;
  8. import org.springframework.web.bind.annotation.GetMapping;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.RestController;
  11.  
  12. import java.util.List;
  13.  
  14. @CrossOrigin
  15. @RestController
  16. @RequestMapping("/front/userType")
  17. public class FrontUserTypeCon {
  18.     @Autowired
  19.     private UserTypeService userTypeService;
  20.  
  21.     /**
  22.      * 查询所有
  23.      *
  24.      * @return
  25.      */
  26.     @GetMapping("/findAll")
  27.     public BaseResult findAll() {
  28.         List<UserType> all = userTypeService.findAll();
  29.         return BaseResult.ok(all);
  30.     }
  31.  
  32.     /**
  33.      * 根据用户id查询用户_用户类型中间表的专栏数据
  34.      *
  35.      * @param userId
  36.      * @return
  37.      */
  38.     @GetMapping("/findUserTypeByUserId")
  39.     public BaseResult findColumnByBlogId(Integer userId) {
  40.         List<UserType> userTypeByUserId = userTypeService.findUserTypeByUserId(userId);
  41.         return BaseResult.ok(userTypeByUserId);
  42.     }
  43.  
  44. }

后台ui代码

会员等级

  1. <template>
  2.   <div class="data-container">
  3.     <!--添加 start-->
  4.     <div class="data-header">
  5.       <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
  6.                 placeholder="请输入关键字"></el-input>
  7.       <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
  8.       <el-button round @click="addHander" size="large" type="primary">
  9.         <el-icon>
  10.           <DocumentAdd/>
  11.         </el-icon>
  12.         <span>新增</span>
  13.       </el-button>
  14.     </div>
  15.     <!--添加 end-->
  16.     <!--表格数据展示 start-->
  17.     <div class="data-table">
  18.       <el-table :data="dataList.list" style="width: 600px;">
  19.         <el-table-column label="id" prop="userTypeId" align="center" width="60"></el-table-column>
  20.         <el-table-column label="名称" prop="userTypeName" align="center" width="120">
  21.           <template #default="scope">
  22.             <el-tag round type="warning" >
  23.               {{ scope.row.userTypeName }}
  24.             </el-tag>
  25.           </template>
  26.         </el-table-column>
  27.         <el-table-column show-overflow-tooltip label="详情" prop="userTypeDesc" align="center"
  28.                          width="200"></el-table-column>
  29.         <el-table-column label="操作" align="center" width="220">
  30.           <template #default="scope">
  31.             <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  32.             <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  33.           </template>
  34.         </el-table-column>
  35.       </el-table>
  36.       <!--分页 start-->
  37.       <div class="page">
  38.         <el-pagination background
  39.                        layout="prev,pager,next,jumper"
  40.                        :default-page-size="defaultPageSize"
  41.                        :total="totalData"
  42.                        @current-change="currentChangeHaddler"></el-pagination>
  43.       </div>
  44.       <!--分页 end-->
  45.     </div>
  46.     <!--表格数据展示 end-->
  47.     <!--添加对话框 start-->
  48.     <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="50%" center>
  49.       <el-form inline :model="addFormInfo" label-width="150px">
  50.         <el-form-item label="名称">
  51.           <el-input v-model="addFormInfo.userTypeName"></el-input>
  52.         </el-form-item>
  53.         <el-form-item label="详情">
  54.           <el-input type="textarea" rows="10" style="width: 500px" v-model="addFormInfo.userTypeDesc"></el-input>
  55.         </el-form-item>
  56.       </el-form>
  57.       <template #footer>
  58.             <span class="dialog-footer">
  59.                 <el-button @click="dialogAddVisible = false">取消</el-button>
  60.                 <el-button type="primary" @click="sureHandler">确定</el-button>
  61.             </span>
  62.       </template>
  63.     </el-dialog>
  64.     <!--添加对话框 end-->
  65.     <!--编辑对话框 start-->
  66.     <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
  67.     <el-dialog
  68.         draggable
  69.         destroy-on-close
  70.         v-model="dialogEditorVisible"
  71.         title="编辑"
  72.         width="50%"
  73.         center>
  74.       <el-form inline :model="editorFormInfo" label-width="150px">
  75.         <el-form-item label="名称">
  76.           <el-input v-model="editorFormInfo.userTypeName"></el-input>
  77.         </el-form-item>
  78.         <el-form-item label="详情">
  79.           <el-input type="textarea" rows="10" style="width: 500px" v-model="editorFormInfo.userTypeDesc"></el-input>
  80.         </el-form-item>
  81.       </el-form>
  82.       <template #footer>
  83.             <span class="dialog-footer">
  84.                 <el-button @click="dialogEditorVisible = false">取消</el-button>
  85.                 <el-button type="primary" @click="sureEditorHandler">确定</el-button>
  86.             </span>
  87.       </template>
  88.     </el-dialog>
  89.     <!--编辑对话框 end-->
  90.   </div>
  91. </template>
  92.  
  93. <script setup>
  94. import axios from "../../api/index.js"
  95. import {onMounted, reactive, ref} from "vue";
  96. import {ElMessage} from "element-plus";
  97. //初始化分页查询数据
  98. const dataList = reactive({
  99.   list: []
  100. })
  101. //初始化总条数
  102. const totalData = ref(0)
  103. //当前页
  104. const currentPage = ref(1)
  105. //初始化分页显示条数
  106. const defaultPageSize = ref(10)
  107. //搜索初始化状态
  108. const searchInfo = ref("")
  109. //添加添加对话框控制器
  110. const dialogAddVisible = ref(false)
  111. //初始化添加对话框状态
  112. const addFormInfo = reactive({
  113.   userTypeName: "",
  114.   userTypeDesc: "",
  115. })
  116. //编辑对话框控制器
  117. const dialogEditorVisible = ref(false)
  118. //初始化编辑对话框状态
  119. const editorFormInfo = reactive({
  120.   userTypeId: '',
  121.   userTypeName: "",
  122.   userTypeDesc: "",
  123. })
  124. /**
  125.  * 网路请求：分页查询
  126.  *  */
  127. const http = (search, page, size) => {
  128.   axios.user_type_search({
  129.     search: search,
  130.     page: page,
  131.     size: size
  132.   }).then(res => {
  133.     if (res.data.code == 200) {
  134.       dataList.list = res.data.data.records
  135.       totalData.value = res.data.data.total
  136.     } else {
  137.       ElMessage.error(res.data.message)
  138.     }
  139.  
  140.   })
  141. }
  142. onMounted(() => {
  143.   http(searchInfo.value, currentPage.value, defaultPageSize.value)
  144. })
  145. /**
  146.  * 分页
  147.  */
  148. const currentChangeHaddler = (nowPage) => {
  149.   http(searchInfo.value, nowPage, defaultPageSize.value)
  150.   currentPage.value = nowPage
  151. }
  152. /**
  153.  * 搜索按钮
  154.  */
  155. const searchHandle = () => {
  156.   http(searchInfo.value, currentPage.value, defaultPageSize.value)
  157. }
  158. /**
  159.  * 添加对话框弹出事件
  160.  */
  161. const addHander = () => {
  162.   dialogAddVisible.value = true
  163. }
  164. /**
  165.  * 添加对话框 确定事件
  166.  */
  167. const sureHandler = () => {
  168.   axios.user_type_add({
  169.     userTypeName: addFormInfo.userTypeName,
  170.     userTypeDesc: addFormInfo.userTypeDesc,
  171.   }).then(res => {
  172.     if (res.data.code == 200) {
  173.       dialogAddVisible.value = false
  174.       http(searchInfo.value, currentPage.value, defaultPageSize.value)
  175.     } else {
  176.       ElMessage.error(res.data.message)
  177.     }
  178.   })
  179. }
  180. /**
  181.  * 编辑对话框 弹出事件
  182.  *  */
  183. const handleEdit = (index, row) => {
  184.  
  185.   dialogEditorVisible.value = true
  186.   axios.user_type_findById({
  187.     userTypeId: row.userTypeId
  188.   }).then(res => {
  189.     if (res.data.code == 200) {
  190.       editorFormInfo.userTypeId = res.data.data.userTypeId;
  191.       editorFormInfo.userTypeName = res.data.data.userTypeName;
  192.       editorFormInfo.userTypeDesc = res.data.data.userTypeDesc;
  193.     } else {
  194.       ElMessage.error(res.data.data.message)
  195.     }
  196.   })
  197.  
  198. }
  199. /**
  200.  * 编辑对话框 确定事件
  201.  */
  202. const sureEditorHandler = () => {
  203.   axios.user_type_update({
  204.     userTypeId: editorFormInfo.userTypeId,
  205.     userTypeName: editorFormInfo.userTypeName,
  206.     userTypeDesc: editorFormInfo.userTypeDesc,
  207.   }).then(res => {
  208.     if (res.data.code == 200) {
  209.       dialogEditorVisible.value = false
  210.       http(searchInfo.value, currentPage.value, defaultPageSize.value)
  211.     } else {
  212.       ElMessage.error(res.data.message)
  213.     }
  214.   })
  215. }
  216. /**删除 */
  217. const handleDelete = (index, row) => {
  218.   ElMessageBox.confirm(
  219.       '确定删除么',
  220.       '删除',
  221.       {
  222.         confirmButtonText: '确定',
  223.         cancelButtonText: '取消',
  224.         type: 'warning',
  225.       }
  226.   ).then(() => {
  227.     //确认删除
  228.     axios.user_type_delete({
  229.       userTypeId: row.userTypeId
  230.     }).then(res => {
  231.       if (res.data.code == 200) {
  232.         ElMessage({
  233.           type: 'success',
  234.           message: "删除成功！！！",
  235.         })
  236.         //刷新
  237.         http(searchInfo.value, currentPage.value, defaultPageSize.value)
  238.       } else {
  239.         ElMessage({
  240.           type: 'error',
  241.           message: res.data.message,
  242.         })
  243.       }
  244.     })
  245.   }).catch(error => {
  246.     ElMessage({
  247.       type: 'info',
  248.       message: "取消删除",
  249.     })
  250.   })
  251.  
  252.  
  253. }
  254. </script>
  255. <style scoped>
  256. .data-container {
  257.   background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  258.   background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  259.   background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  260.   background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  261.   background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  262.   height: 800px;
  263. }
  264.  
  265. .data-header {
  266.   padding: 20px;
  267. }
  268.  
  269. .data-header .input {
  270.   width: 300px;
  271. }
  272.  
  273. .data-table {
  274.   padding: 20px;
  275. }
  276.  
  277. .page {
  278.   position: fixed;
  279.   right: 10px;
  280.   bottom: 10px;
  281. }
  282. </style>

用户

  1. <template>
  2.   <div class="data-container">
  3.     <!--添加 start-->
  4.     <div class="data-header">
  5.       <el-button round @click="addHander" size="large" type="primary">
  6.         <el-icon>
  7.           <DocumentAdd/>
  8.         </el-icon>
  9.         <span>新增</span>
  10.       </el-button>
  11.     </div>
  12.     <!--添加 end-->
  13.     <!--表格数据展示 start-->
  14.     <div class="data-table">
  15.       <el-table :data="dataList.list" style="width: 1400px;">
  16.         <el-table-column label="头像" prop="userImg" align="center">
  17.           <template #default="scope">
  18.             <img :src="scope.row.userImg" style="height:60px"/>
  19.           </template>
  20.         </el-table-column>
  21.         <el-table-column show-overflow-tooltip label="昵称" prop="nickname" align="center"
  22.                          width="120"></el-table-column>
  23.         <el-table-column label="账号" prop="username" align="center" width="140"></el-table-column>
  24.         <el-table-column label="手机号" prop="phone" align="center" width="140"></el-table-column>
  25.         <el-table-column show-overflow-tooltip label="邮箱" prop="email" align="center" width="160"></el-table-column>
  26.         <el-table-column label="性别" prop="userSex" align="center" width="60"></el-table-column>
  27.         <el-table-column label="状态" prop="userStatus" align="center">
  28.           <template #default="scope">
  29.             <el-tag round :type="scope.row.userStatus == '1' ? 'success' : 'info'">
  30.               {{ scope.row.userStatus == '1' ? '激活' : '未激活' }}
  31.             </el-tag>
  32.           </template>
  33.         </el-table-column>
  34.         <el-table-column show-overflow-tooltip label="个性签名" prop="signature" align="center"></el-table-column>
  35.         <el-table-column show-overflow-tooltip label="自我介绍" prop="userIntroduce" align="center"></el-table-column>
  36.         <el-table-column label="操作" align="center" width="300">
  37.           <template #default="scope">
  38.             <!-- 会员模块 start-->
  39.             <el-popover trigger="click" placement="top" :width="300" offset="20">
  40.               <template #reference>
  41.                 <el-button @click="handTypes(scope.$index, scope.row)" size="small" round type="warning">会员</el-button>
  42.               </template>
  43.               <div style="margin: 15px">
  44.                 <el-button @click="handleAddType(scope.$index, scope.row)" style="margin-right: 10px" type="primary"
  45.                            size="small">添加
  46.                 </el-button>
  47.                 <el-select v-model="choseTypeId" size="small">
  48.                   <el-option v-for="item in userTypeList.list" :key="item.userTypeId"
  49.                              :label="item.userTypeName"
  50.                              :value="item.userTypeId">
  51.                   </el-option>
  52.                 </el-select>
  53.               </div>
  54.               <div>
  55.                 <el-tag style="margin: 4px"
  56.                         type="warning"
  57.                         v-for="(item,index) in user_userTypeList.list" :key="index"
  58.                         @close="handleCloseType(scope.row,item.userTypeId)"
  59.                         closable round>
  60.                   {{ item.userTypeName }}
  61.                 </el-tag>
  62.               </div>
  63.             </el-popover>
  64.             <!--  会员模块 end-->
  65.             <el-button size="small" type="success" @click="handleColumn(scope.$index, scope.row)">专栏</el-button>
  66.             <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  67.             <el-button size="small" type="primary" @click="handleStatus(scope.$index, scope.row)">状态</el-button>
  68.             <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  69.           </template>
  70.         </el-table-column>
  71.       </el-table>
  72.       <!--分页 start-->
  73.       <div class="page">
  74.         <el-pagination background
  75.                        layout="prev,pager,next,jumper"
  76.                        :default-page-size="defaultPageSize"
  77.                        :total="totalData"
  78.                        @current-change="currentChangeHaddler"></el-pagination>
  79.       </div>
  80.       <!--分页 end-->
  81.     </div>
  82.     <!--表格数据展示 end-->
  83.     <!--添加对话框 start-->
  84.     <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="70%" center>
  85.       <el-form inline :model="addFormInfo" label-width="150px">
  86.         <el-form-item label="头像">
  87.           <el-input v-model="addFormInfo.userImg"></el-input>
  88.         </el-form-item>
  89.         <el-form-item label="昵称">
  90.           <el-input v-model="addFormInfo.nickname"></el-input>
  91.         </el-form-item>
  92.         <el-form-item label="账号">
  93.           <el-input v-model="addFormInfo.username"></el-input>
  94.         </el-form-item>
  95.         <el-form-item label="密码">
  96.           <el-input v-model="addFormInfo.password"></el-input>
  97.         </el-form-item>
  98.         <el-form-item label="手机号">
  99.           <el-input v-model="addFormInfo.phone"></el-input>
  100.         </el-form-item>
  101.         <el-form-item label="邮箱">
  102.           <el-input v-model="addFormInfo.email"></el-input>
  103.         </el-form-item>
  104.         <el-form-item label="性别">
  105.           <el-input v-model="addFormInfo.userSex"></el-input>
  106.         </el-form-item>
  107.         <el-form-item label="个性签名">
  108.           <el-input type="textarea" rows="3" style="width: 800px" v-model="addFormInfo.signature"></el-input>
  109.         </el-form-item>
  110.         <el-form-item label="自我介绍">
  111.           <el-input type="textarea" rows="6" style="width: 800px" v-model="addFormInfo.userIntroduce"></el-input>
  112.         </el-form-item>
  113.       </el-form>
  114.       <template #footer>
  115.             <span class="dialog-footer">
  116.                 <el-button @click="dialogAddVisible = false">取消</el-button>
  117.                 <el-button type="primary" @click="sureHandler">确定</el-button>
  118.             </span>
  119.       </template>
  120.     </el-dialog>
  121.     <!--添加对话框 end-->
  122.     <!--编辑对话框 start-->
  123.     <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
  124.     <el-dialog
  125.         draggable
  126.         destroy-on-close
  127.         v-model="dialogEditorVisible"
  128.         title="编辑"
  129.         width="70%"
  130.         center>
  131.       <el-form inline :model="editorFormInfo" label-width="150px">
  132.         <el-form-item label="头像">
  133.           <el-input v-model="editorFormInfo.userImg"></el-input>
  134.         </el-form-item>
  135.         <el-form-item label="昵称">
  136.           <el-input v-model="editorFormInfo.nickname"></el-input>
  137.         </el-form-item>
  138.         <el-form-item label="账号">
  139.           <el-input v-model="editorFormInfo.username"></el-input>
  140.         </el-form-item>
  141.         <el-form-item label="密码">
  142.           <el-input v-model="editorFormInfo.password"></el-input>
  143.         </el-form-item>
  144.         <el-form-item label="手机号">
  145.           <el-input v-model="editorFormInfo.phone"></el-input>
  146.         </el-form-item>
  147.         <el-form-item label="邮箱">
  148.           <el-input v-model="editorFormInfo.email"></el-input>
  149.         </el-form-item>
  150.         <el-form-item label="性别">
  151.           <el-input v-model="editorFormInfo.userSex"></el-input>
  152.         </el-form-item>
  153.         <el-form-item label="个性签名">
  154.           <el-input type="textarea" rows="3" style="width: 800px" v-model="editorFormInfo.signature"></el-input>
  155.         </el-form-item>
  156.         <el-form-item label="自我介绍">
  157.           <el-input type="textarea" rows="6" style="width: 800px" v-model="editorFormInfo.userIntroduce"></el-input>
  158.         </el-form-item>
  159.       </el-form>
  160.       <template #footer>
  161.             <span class="dialog-footer">
  162.                 <el-button @click="dialogEditorVisible = false">取消</el-button>
  163.                 <el-button type="primary" @click="sureEditorHandler">确定</el-button>
  164.             </span>
  165.       </template>
  166.     </el-dialog>
  167.     <!--编辑对话框 end-->
  168.   </div>
  169. </template>
  170.  
  171. <script setup>
  172. import axios from "@/utils/request.js"
  173. import axios2 from "../../api/index.js"
  174. import {onMounted, reactive, ref} from "vue";
  175. import {ElMessage} from "element-plus";
  176. import {useRouter} from 'vue-router'
  177.  
  178. const router = useRouter()
  179.  
  180. //初始化分页查询数据
  181. const dataList = reactive({
  182.   list: []
  183. })
  184. //初始化用户类型列表
  185. const userTypeList = reactive({list: []})
  186. //用户的类型
  187. const user_userTypeList= reactive({list: []})
  188. //选择的类型id
  189. const choseTypeId=ref(0)
  190. //初始化总条数
  191. const totalData = ref(0)
  192. //当前页
  193. const currentPage = ref(1)
  194. //初始化分页显示条数
  195. const defaultPageSize = ref(10)
  196. //添加添加对话框控制器
  197. const dialogAddVisible = ref(false)
  198. //初始化添加对话框状态
  199. const addFormInfo = reactive({
  200.   userImg: '',
  201.   nickname: '',
  202.   username: '',
  203.   password: '',
  204.   phone: '',
  205.   email: '',
  206.   userSex: '',
  207.   signature: '',
  208.   userIntroduce: '',
  209.   userStatus: '1',
  210. })
  211. //编辑对话框控制器
  212. const dialogEditorVisible = ref(false)
  213. //初始化编辑对话框状态
  214. const editorFormInfo = reactive({
  215.   userId: '',
  216.   userImg: '',
  217.   nickname: '',
  218.   username: '',
  219.   password: '',
  220.   phone: '',
  221.   email: '',
  222.   userSex: '',
  223.   signature: '',
  224.   userIntroduce: '',
  225.   userStatus: '',
  226. })
  227. /**
  228.  * 网路请求：分页查询
  229.  *  */
  230. const http = (page, size) => {
  231.   axios.get('back/user/search', {
  232.     params: {
  233.       page: page,
  234.       size: size
  235.     }
  236.   }).then(res => {
  237.     if (res.data.code == 200) {
  238.       dataList.list = res.data.data.records
  239.       totalData.value = res.data.data.total
  240.     } else {
  241.       ElMessage.error(res.data.message)
  242.     }
  243.  
  244.   })
  245.   axios2.user_type_findAll().then(res => {
  246.     userTypeList.list = res.data.data
  247.   })
  248. }
  249. onMounted(() => {
  250.   http(currentPage.value, defaultPageSize.value)
  251. })
  252. /**
  253.  * 分页
  254.  */
  255. const currentChangeHaddler = (nowPage) => {
  256.   http(nowPage, defaultPageSize.value)
  257.   currentPage.value = nowPage
  258. }
  259. //专栏
  260. const handleColumn = (index, row) => {
  261.   router.push("/blog/column/" + row.userId)
  262. }
  263. /**
  264.  * 添加对话框弹出事件
  265.  */
  266. const addHander = () => {
  267.   dialogAddVisible.value = true
  268. }
  269. /**
  270.  * 添加对话框 确定事件
  271.  */
  272. const sureHandler = () => {
  273.   axios.post('back/user/add', {
  274.     userImg: addFormInfo.userImg,
  275.     nickname: addFormInfo.nickname,
  276.     username: addFormInfo.username,
  277.     password: addFormInfo.password,
  278.     phone: addFormInfo.phone,
  279.     email: addFormInfo.email,
  280.     userSex: addFormInfo.userSex,
  281.     signature: addFormInfo.signature,
  282.     userIntroduce: addFormInfo.userIntroduce,
  283.     userStatus: addFormInfo.userStatus,
  284.   }).then(res => {
  285.     if (res.data.code == 200) {
  286.       dialogAddVisible.value = false
  287.       http(currentPage.value, defaultPageSize.value)
  288.     } else {
  289.       ElMessage.error(res.data.message)
  290.     }
  291.   })
  292. }
  293. /**
  294.  * 编辑对话框 弹出事件
  295.  *  */
  296. const handleEdit = (index, row) => {
  297.  
  298.   dialogEditorVisible.value = true
  299.   axios.get('back/user/findById', {
  300.     params: {
  301.       userId: row.userId
  302.     }
  303.   }).then(res => {
  304.  
  305.     if (res.data.code == 200) {
  306.       editorFormInfo.userId = res.data.data.userId;
  307.       editorFormInfo.userImg = res.data.data.userImg;
  308.       editorFormInfo.nickname = res.data.data.nickname;
  309.       editorFormInfo.username = res.data.data.username;
  310.       editorFormInfo.password = res.data.data.password;
  311.       editorFormInfo.phone = res.data.data.phone;
  312.       editorFormInfo.email = res.data.data.email;
  313.       editorFormInfo.userSex = res.data.data.userSex;
  314.       editorFormInfo.signature = res.data.data.signature;
  315.       editorFormInfo.userIntroduce = res.data.data.userIntroduce;
  316.       editorFormInfo.userStatus = res.data.data.userStatus;
  317.     } else {
  318.       ElMessage.error(res.data.data.message)
  319.     }
  320.   })
  321.  
  322. }
  323. /**
  324.  * 编辑对话框 确定事件
  325.  */
  326. const sureEditorHandler = () => {
  327.   axios.post('back/user/update', {
  328.     userId: editorFormInfo.userId,
  329.     userImg: editorFormInfo.userImg,
  330.     nickname: editorFormInfo.nickname,
  331.     username: editorFormInfo.username,
  332.     password: editorFormInfo.password,
  333.     phone: editorFormInfo.phone,
  334.     email: editorFormInfo.email,
  335.     userSex: editorFormInfo.userSex,
  336.     signature: editorFormInfo.signature,
  337.     userIntroduce: editorFormInfo.userIntroduce,
  338.     userStatus: editorFormInfo.userStatus,
  339.   }).then(res => {
  340.     if (res.data.code == 200) {
  341.       dialogEditorVisible.value = false
  342.       http(currentPage.value, defaultPageSize.value)
  343.     } else {
  344.       //添加失败：给出提示信息(element-plus/反馈组件/message信息提示)
  345.       ElMessage.error(res.data.message)
  346.     }
  347.   })
  348. }
  349. /**删除 */
  350. const handleDelete = (index, row) => {
  351.   ElMessageBox.confirm(
  352.       '确定删除么',
  353.       '删除',
  354.       {
  355.         confirmButtonText: '确定',
  356.         cancelButtonText: '取消',
  357.         type: 'warning',
  358.       }
  359.   ).then(() => {
  360.     //确认删除
  361.     axios.delete("back/user/delete", {
  362.       params: {
  363.         userId: row.userId
  364.       }
  365.     }).then(res => {
  366.       if (res.data.code == 200) {
  367.         ElMessage({
  368.           type: 'success',
  369.           message: "删除成功！！！",
  370.         })
  371.         //刷新
  372.         http(currentPage.value, defaultPageSize.value)
  373.       } else {
  374.         ElMessage({
  375.           type: 'error',
  376.           message: res.data.message,
  377.         })
  378.       }
  379.     })
  380.   }).catch(error => {
  381.     ElMessage({
  382.       type: 'info',
  383.       message: "取消删除",
  384.     })
  385.   })
  386. }
  387. /**
  388.  * 封装查询用户拥有的会员
  389.  */
  390. const searchTypes = (userId) => {
  391.   axios2.user_type_findUserTypeByUserId({
  392.     userId: userId
  393.   }).then(res => {
  394.     if (res.data.code == 200) {
  395.       user_userTypeList.list = res.data.data
  396.     }
  397.   })
  398. }
  399. /**
  400.  * 点击类型事件
  401.  */
  402. const handTypes = (index, row) => {
  403.   //查询博客拥有的标签
  404.   searchTypes(row.userId)
  405.   //查询所有标签列表
  406.   axios2.user_type_findAll().then(res => {
  407.     if (res.data.code == 200) {
  408.       userTypeList.list = res.data.data
  409.     }
  410.   })
  411. }
  412. /**
  413.  * 添加类型
  414.  */
  415. const handleAddType = (index, row) => {
  416.   axios2.user_type_addUserType({
  417.     userId: row.userId,
  418.     userTypeId: choseTypeId.value
  419.   }).then(res => {
  420.     if (res.data.code == 200) {
  421.       ElMessage.success('添加成功')
  422.       //查询用户的类型
  423.       searchTypes(row.userId)
  424.     }
  425.   })
  426. }
  427. /**
  428.  * 删除类型
  429.  */
  430. const handleCloseType = (row, userTypeId) => {
  431.   axios2.user_type_deleteUserType({
  432.     userId: row.userId,
  433.     userTypeId: userTypeId,
  434.   }).then(res => {
  435.     if (res.data.code == 200) {
  436.       ElMessage.success('删除成功')
  437.       //查询用户的类型
  438.       searchTypes(row.userId)
  439.     }
  440.   })
  441. }
  442. /**
  443.  * 修改用户状态
  444.  */
  445. const handleStatus = (index, row) => {
  446.   axios.post("back/user/updateStatus", {userId: row.userId}).then(res => {
  447.     if (res.data.code == 200) {
  448.       ElMessage.success("状态已更改")
  449.       http(currentPage.value, defaultPageSize.value)
  450.     }
  451.   })
  452. }
  453. </script>
  454. <style scoped>
  455. .data-container {
  456.   background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  457.   background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  458.   background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  459.   background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  460.   background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  461.   height: 800px;
  462. }
  463.  
  464. .data-header {
  465.   padding: 20px;
  466. }
  467.  
  468. .data-table {
  469.   padding: 20px;
  470. }
  471.  
  472. .page {
  473.   position: fixed;
  474.   right: 10px;
  475.   bottom: 10px;
  476. }
  477. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/395897
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号