2022-09-05 第二组刘禹彤 学习笔记

打卡47天

###学习内容

        // 处理文件上传
        Part part = req.getPart("profile");
//        原来的文件名
        String fileName = part.getSubmittedFileName();
//        这个字节流就是上传的文件所对应的字节流
        InputStream inputStream = part.getInputStream();

//        处理文件名，一定要注意不要破坏图片的后缀名
//        UUID是精确到毫秒的不重复的16进制的字符串
        fileName = UUID.randomUUID() + fileName;

//        保存文件，以xx形式保存？？？？？
//        根据日期来创建文件夹
//        获取系统当前的日期 2022-09-05
        LocalDate localDate = LocalDate.now();
        String prePath = "/" + localDate.getYear() + "/" + localDate.getMonthValue() + "/";
//        要存放的是E:/upload/2022/9
        File file = new File("E:/upload" + prePath);

<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script>
    const register = new Vue({
        el:"#register",
        data:{
            msg:"",
            user:{
                gender:'男'
            }
        },
        methods:{
            async verifyUsername() {
                if(this.user.username.length < 6 || this.user.username.length > 12){
                    this.msg = "用户名必须在6-12位";
                    return false;
                }
                //    定义一个标记
                let flag = false;
                //    在这个函数中，验证用户名
                //    发ajax请求到后台，验证用户名
                //    ajax是异步请求，ajax会单独开辟一个线程来自己走，和我们的主JS程序不在同一个线程内
                //    我们需要让我们的ajax和我们的主JS在同一个线程内
                //    通过async 和 await修饰符就把ajax改成了同步请求
                await axios.get("admin/checkUser.do?username=" + this.user.username).then(response=>{
                    // console.log(response.data);
                    this.msg = response.data.message;
                    if(response.data.code == '0'){
                        flag = false;
                    }
                    if(response.data.code == '1'){
                        flag = true;
                    }
                });
                // 返回值是一个Promise对象。是一个特殊的对象。3个属性
                return flag;
            },
            registerData(){
                // 这个result就是上面函数返回的Promise对象
                let result = this.verifyUsername();
                // ES6语法的“解构”，把上面函数的返回值拿到
                result.then(r => {
                    // 带有文件上传的数据提交
                    if(r) {
                        //    要求，如果上传的数据中包含了二进制数据（文件），需要使用formData，来封装数据
                        let formData = new FormData();
                        formData.append("username",this.user.username);
                        formData.append("password",this.user.password);
                        formData.append("name",this.user.name);
                        formData.append("gender",this.user.gender);
                        //    头像，文件怎么拼？
                        //    this.$refs.profile.files[0]，获取对应的文件的二进制形式
                        //    $refs：代表设置了ref属性的表单元素
                        //    profile：找到ref属性为profile的表单元素
                        //    files[0]：找到ref属性为profile的第一个表单元素
                        formData.append("profile",this.$refs.profile.files[0]);
                        //    发请求
                        //    axios的完整写法
                        axios({
                            method:"post",
                            url:"admin/addVip.do",
                            data:formData,
                            // 请求头
                            /*
                            * 'content-Type':'multipart/form-data'
                            * 代表我要传输的数据以多部分的格式来传输。
                            * HTML要求提交文件：multipart/form-data
                            * 提交普通的数据：application/x-www-form-urlencoded
                            * */
                            headers:{
                                'content-Type':'multipart/form-data'
                            }
                        }).then(response => {
                            let data = response.data;
                            alert(data.message);
                            if(data.code == '1'){
                                location.href = "login.html";
                            }
                        })
                    }
                    // if(r) {
                    //     axios.post("admin/addVip.do",this.user).then(response=> {
                    //         let data = response.data;
                    //         alert(data.message);
                    //         if(data.code == '1'){
                    //             location.href = "login.html";
                    //         }
                    //     });
                    // }else {
                    //     alert("用户名已存在");
                    // }
                });
            }
        }
    });
</script>

###学习心得

今天将案例中的注册的基本内容都已经学习完毕，感觉到一个注册操作也是很复杂的。

###掌握情况：一般

标签：profile,username,05,formData,09,刘禹彤,user,data,response
来源： https://www.cnblogs.com/lyt0612/p/16659140.html