标签：profile username 05 formData 09 刘禹彤 user data response

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。