20230712

该文描述了一个用户注册系统,通过SpringBoot的Controller和Service层处理注册逻辑,利用Redis检查用户名唯一性,并通过Docker搭建Redis服务。当用户名不存在且密码符合复杂度要求时,注册成功并将信息写入数据库。此外,还展示了Vue前端页面的注册表单及数据传递流程。
摘要由CSDN通过智能技术生成
  1. 任务1

创建一个表user_tab
user_id, user_name,user_username,user_password, user_create_time, user_update_time, user_create_by
用户名:必须唯一
做一个用户的注册模块
检查用户名是否存在,如果存在则注册失败,返回失败信息
如果用户名不存在,密码但是不允许出现空或在简单数字
用户注册,注册成功后后返回登录页面,将信息写入用户表。

  1. 博客任务

redis的docker搭建过程。

debug

关于controller层进不去,报404错误的问题

@SpringBootApplication(exclude ={
        DruidDataSourceAutoConfigure.class
})
@ComponentScan(basePackages = "com.woniu.bm")

public class BookApp {
    public static void main(String[] args) {
        SpringApplication.run(BookApp.class);
    }
}

原因: line4中的@ComponetScan()中的包名basePackages = "com.woniu.bm.common"写错了,应该写成basePackages = "com.woniu.bm",不然扫描不到.

task

完成注册登陆模块

controller层

@Api("用户接口类")
@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private IUserService userService;

    @ApiOperation(value = "addUser",notes = "添加用户并返回是否成功")
/*    @ApiImplicitParams({

    })*/
    @GetMapping("/addUser")
    public HttpResp<Integer> addUser(User user) {
        int i = userService.addUser(user);
        if (i > 0) {
            return new HttpResp(RespCode.USER_REG_SUCCESS, i, new Date());
        }else{
            return new HttpResp(RespCode.USER_REG_ERROR, i, new Date());
        }
    }
}

service层

@Service
public class UserServiceImpl implements IUserService {
    @Autowired
    private UserDao userDao;
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    @Override
    public int addUser(User user) {
        user.setCreateBy("test");
        user.setCreateTime(new Date());
        user.setUpdateTime(new Date());
        List<User> users = userDao.selectList(null);
        users.forEach(u->{
            stringRedisTemplate.opsForValue().set("u"+u.getName(), "flag");
        });
        if (stringRedisTemplate.opsForValue().get("u" + user.getName()) == null) {
            return userDao.insert(user);
        }
        return 0;
    }
}
  • 从前端传入的数据只有三个

    • username
    • name
    • password
  • 使用Redis缓存检验是否重名

  • 返回1说明,affect row了

  • 返回0说明重名了

application.yml配置

server:
  port: 11111

logging:
  level:
    com.woniu.bm.user: debug

spring:
  profiles:
    active: common,domain    #引用application-common,applicaiton-domain配置
  redis:
    host: 192.168.179.128

启动项

@SpringBootApplication(exclude ={
        DruidDataSourceAutoConfigure.class
})
@ComponentScan(basePackages = "com.woniu.bm")

public class UserApp {
    public static void main(String[] args) {
        SpringApplication.run(UserApp.class);
    }
}

依赖

<dependencies>
    <dependency>
        <groupId>com.woniu.bm.domain</groupId>
        <artifactId>bm-domain</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
</dependencies>

vue页面

Register.vue

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width: 400px;margin: 0 auto;"
        class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input show-password v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="danger" @click="reg('ruleForm')">注册</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import $requet from '../utils/request';
// import $route from '../router/index'
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
                name: ''
            },
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    //在rule内可以插入多组数组来验证用户名、密码等,数组内可以插入多个对象,同时起作用      
                    {
                        required: true,
                        trigger: "blur",
                        message: "密码不能为空",
                    },
                    {
                        //插入正则验证:大小写、数字、至少8位、不常用字符
                        pattern:
                            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-])[A-Za-z\d$@#!%^*?&+-]{8,}/,
                        message: "密码应当至少8位且含有数字、大小写字母及特殊字符",
                    },
                ],
            }
        };
    },
    methods: {
        login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('login!');
                } else {
                    console.log('error login!!');
                    return false;
                }
            });
        },
        reg(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('reg!');
                    $requet.get('http://localhost:11111/api/user/addUser', {
                        params: {
                            username: this.ruleForm.username,
                            password: this.ruleForm.password,
                            name: this.ruleForm.name
                        }
                    })
                        .then(function (response) {
                            // 处理成功情况
                            console.log(response);
                            if (response.data.respCode.code == 20201) {
                                alert('用户注册成功');
                                _this.$router.push({
                                    path : '/login',
                                    query :{
                                        username : _this.ruleForm.username,
                                        password : _this.ruleForm.password
                                    }
                                })
                                // window.location.href = 'http://localhost:8080/login'
                                // window.location.href = '/login'
                            } else if (response.data.respCode.code == 20202) {
                                alert('用户重名!');
                                _this.$refs[formName].resetFields();
                            }

                        })
                        .catch(function (error) {
                            // 处理错误情况
                            console.log(error);
                        })
                        .then(function () {
                            // 总是会执行
                        });
                } else {
                    console.log('error reg!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
  • 第一次遇到的知识点:使用vue携带参数跳转,在回调函数中,如果respCode.code是成功注册,则

    _this.$router.push({
        path : '/login',
        query :{
        username : _this.ruleForm.username,
        password : _this.ruleForm.password
    	}
    })
    
    • path之前写的是完整的http://localhost:8080/login,结果在Login页面打印数据是undefined的,原因未知,写成这种简单的就成功携带数据

Login.vue

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width: 400px;margin: 0 auto;" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input show-password v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login('ruleForm')">登陆</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                password: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('login!');
                } else {
                    console.log('error login!!');
                    return false;
                }
            });
        },
        reg(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('reg!');
                } else {
                    console.log('error reg!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created(){
        console.log('这是登陆页面');
        console.log(this.$route.query.username);
        this.ruleForm.name = this.$route.query.username;
        this.ruleForm.password = this.$route.query.password;
    }

}
</script>
  • 如何接受参数?

    • this.ruleForm.name = this.$route.query.username;
      this.ruleForm.password = this.$route.query.password;
      

效果展示

a

redis的docker搭建过程

定义静态网段

docker network create --driver bridge --subnet=172.18.12.0/16 --gateway=172.18.1.1 wn_docker_net

拉取docker

search

image-20230712153817384

docker

[root@localhost ~]# docker pull redis
Using default tag: latest
latest: Pulling from library/redis
a2abf6c4d29d: Pull complete 
c7a4e4382001: Pull complete 
4044b9ba67c9: Pull complete 
c8388a79482f: Pull complete 
413c8bb60be2: Pull complete 
1abfd3011519: Pull complete 

  • 查看已下载的镜像应用
[root@localhost ~]# docker image ls
REPOSITORY   TAG       IMAGE ID       CREATED         SIZE
redis        latest    7614ae9453d1   18 months ago   113MB
mysql        latest    3218b38490ce   18 months ago   516MB
  • 下载Redis的conf配置文件

image-20230712154302534

创建容器

创建文件

[root@localhost software]# mkdir -p redis/6379/conf redis/6379/data redis/6379/log
.
└── 6379
    ├── conf
    ├── data
    └── log

上传redis.conf到conf文件夹

image-20230712154957851

创建一个日志文件

image-20230712155133336

  • redis.log权限设置可读写

image-20230712155335389

修改redis.conf文件

image-20230712155531118

image-20230712155921948

image-20230712155644644

创建运行容器

docker run -it \
--name redis_6379 \
--privileged \
-p 6379:6379 \
--network wn_docker_net \
--ip 172.18.12.10 \
-v /usr/local/software/redis/6379/conf/redis.conf:/usr/local/etc/redis/redis.conf \
-v /usr/local/software/redis/6379/data/:/data \
-v /usr/local/software/redis/6379/log/redis.log:/var/log/redis.log \
-d redis \
/usr/local/etc/redis/redis.conf
  • 检查进程是否启动

docker ps

image-20230712160545298

  • 检查日志

docker logs redis_6379

image-20230712160600783

测试redis

[root@localhost log]# docker exec -it redis_6379 bash
root@99be9ab35b30:/data# redis-cli
127.0.0.1:6379> ping
PONG
127.0.0.1:6379>


-v /usr/local/software/redis/6379/data/:/data
-v /usr/local/software/redis/6379/log/redis.log:/var/log/redis.log
-d redis
/usr/local/etc/redis/redis.conf


* 检查进程是否启动

> docker ps

[外链图片转存中...(img-JdT3intT-1689173143692)]

* 检查日志

> docker logs redis_6379

[外链图片转存中...(img-gjzhbVoI-1689173143693)]

### 测试redis

[root@localhost log]# docker exec -it redis_6379 bash
root@99be9ab35b30:/data# redis-cli
127.0.0.1:6379> ping
PONG
127.0.0.1:6379>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值