学习后端——小组项目

负责模块：个人中心

主要功能：注销用户，修改用户信息，用户退出登录，用户点击收藏的对应的信息框跳转到相对应的信息页面，用户可以删除多个已收藏的内容

点击个人收藏，进入个人收藏页面，点击管理，显示复选框，管理变为取消收藏

代码实现

前端

html文件：

引入插件：

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"
    type="application/javascript"></script>

<link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
 <!-- 引用jquery -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

导航栏：

<!-- nav -->
<nav>
    <div class="navbox">
        <img src="./img/logo.png" alt="" class="logo">
        <div class="shoye">首页</div>
        <div class="userbox">
            <div class="tx hide">
                <div class="tc hide">退出</div>
            </div>
            <div class="login hide">
                <a href="../chenlin/login/login.html">请登录</a>
            </div>
        </div>
    </div>
</nav>

信息栏左侧：

<!-- 信息栏 -->
<div class="Personal">
    <div class="left">
        <!-- 个人信息 -->
        <div class="information layui-btn layui-btn-primary"></div>
        <!-- 购买课程 -->
        <div class="course layui-btn layui-btn-primary"></div>
        <!-- 报名项目 -->
        <div class="Registration layui-btn layui-btn-primary"></div>
        <!-- 个人收藏 -->
        <div class="collection layui-btn layui-btn-primary"></div>
    </div>
     

信息栏右侧：

           <div class="right">
        <div class="rightinfo hide ">
        <!-- 个人信息 -->
            <div class="informationl hide">
                头像： <div class="txb"><input type="file" id="touxiang"></div><br><br><br>
                用户名：<input type="text" id="username"><br><br>
                姓名：<input type="text" id="realname" disabled="disabled"><br><br>
                身份证：<input type="text" id="idcard" disabled="disabled"><br><br>
                手机号：<input type="text" id="phonenumber"><br><br>
                密码：<input type="password" id="pwd">
                <!-- <div class="tsk">1.密码必须由字母、数字组成，区分大小写<br>
                    2.密码长度为8-18位
                </div> -->
                <br><br>
                重置密码：<input type="password" id="pwd1">
                <div class="tsk1">1.密码必须由字母、数字组成，区分大小写<br>
                    2.密码长度为8-18位
                </div><br><br>
                <button class="xg layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" onclick="f1()">修改信息</button>
                <button class="zx layui-btn layui-btn-radius layui-btn-danger" onclick="f2()">注销账号</button>
            </div>

            <!-- 购买课程 -->
            <div class="coursel hide">
                <div class="kc">已购买的课程</div>
            </div>
            <!-- 报名项目 -->
            <div class="Registrationl hide">
            </div>
            <!-- 个人收藏 -->
            <div class="collectionl hide">
                <div class="xx"></div>
                <div class="sc">个人收藏
                    <button class="gl hide"></button>
                </div>
            </div>
        </div>
        <div class="rightnoinfo hide">
            <div id="box1"> 您还没有登录，无法查看信息，<a href="../chenlin/login/login.html">请登录</a></div>
        </div>
    </div>
    

css文件：

html,body{
margin: 0;
padding: 0;
}
.navbox{
width: 100%;
height: 80px;
display: flex;
flex-wrap: nowrap;
justify-content:flex-end;
background-color: rgb(166, 237, 255);
align-items: center;
.logo{
    width: 150px;
    height: auto;
    position: absolute;
    left: 20px;
}
.shoye{
    width: 100px;
    font-weight: 800;
    cursor: pointer;
}
.userbox{
    width: 130px;
    display: flex;
    .login{
        align-self: center;
    }
    .tx{
        width: 200px;
        align-items: center;
        height: 80px;
        display: flex;
        justify-content: space-around;
        .hide{
            display: none;
        }
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-top: 10px;
        }
    }
    .hide{
        display: none;
    }
 }
 } 
.Personal{
 margin-top: 20px;
position: absolute;
 width: 80%;
height: 600px;
left: 10%;
display: flex;
flex-wrap: nowrap;
border: 5px solid rgb(159, 231, 203);

.left{
width: 20%;
text-align: center;
line-height:100px;
border-right:5px solid rgb(159, 231, 203) ;
display: flex;
justify-content: space-around;
flex-wrap: wrap;

.information{
   height:100px;
   width: 90%;
   border-left: none;
   border-right: none;
   border-bottom:5px solid rgb(159, 231, 203) ;
}
.course{
    height:100px;
   width: 100%;
   border-left: none;

    border-bottom:5px solid rgb(159, 231, 203) ;
}
.Registration{
    height:100px;
   width: 100%;
   border-left: none;

    border-bottom:5px solid rgb(159, 231, 203) ;
}
.collection{
    height:100px;
   width: 277px;
     border-left: none;
    border-bottom:5px solid rgb(159, 231, 203) ;
}
}
.right{
width: 80%;
// 实现滚动
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
.hide{
    display: none;
}
.rightinfo{
    .hide{
        display: none !important;
    }

    .informationl{
        margin-left: 100px;
        padding: 50px;
            .txb{
                margin-left: 30px;
                width: 80px;
                height: 80px;
                border: 1px solid black;
                display: inline-block;
                background-size: 80px 80px;
                #touxiang{
                    opacity: 0;
                    width: 80px;
                    height: 80px;
                }
            }
        
        #username{
            margin-left: 20px;
        }
        #realname{
            margin-left: 36px;
        }
        #idcard{
            margin-left: 20px;
        }
        #phonenumber{
            margin-left: 20px;
        }
        #pwd{
            margin-left: 36px;
        }
        .tsk{
            margin-top: 10px;
            margin-left: 20px;
            font-size: 2px;
        }
        #pwd1{
            margin-left: 5px;
        }
        .tsk1{
            margin-top: 10px;
            margin-left: 20px;
            font-size: 2px;
        }
        .zx{
            margin-left: 50px;
        }

    }
.rightnoinfo{
    text-align: center;
    // line-height:800px;
    display: flex;
    justify-content: center;

    #box1 {
        margin: 0 auto;
    }
}
    .coursel{
        display: flex;
        flex-wrap: wrap;
        .kc{
            font-size: large;
            text-align: center;
            line-height:60px ;
            width:803px;
            height: 60px;
            position: absolute;
            background-color: antiquewhite;
        }
        .ts1{
            margin-left: 298px;
            margin-top: 250px;
        }
        .xx1{
            display: flex;
            flex-wrap: wrap;
            margin-top: 70px;
            width: 100%;
            .guomai{
                width: 30%;
                height: 200px;
                margin-top: 20px;
                margin-bottom: 20px;
                margin-left: 20px;
                .wz1{
                    height: 20%;
                    background-color: rgb(255, 138, 42);
                    // text-align: center;
                    line-height: 40px;
                    display: flex;
                    justify-content: center;
                    padding-left: 10px;
                    padding-right: 10px;
                }

                .sp1{
                    height: 80%;
                    background-size:241px 160px ;
                    
                }
            }
        }
        
        
    }
    .Registrationl{
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .collectionl{
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        .sc{
            font-size: large;
            text-align: center;
            line-height:60px ;
            width: 803px;
            height: 60px;
            position: absolute;
            background-color: antiquewhite;
            .gl{
               position: absolute;
               right: 2px;
               top: 32px;
            }
            .hide{
                display: none;
            }
        }
        .ts{
            margin-left: 298px;
            margin-top: 200px;
        }
        .xx{
            display: flex;
            flex-wrap: wrap;
            margin-top: 70px;
            width: 100%;
            .xq{
                width: 30%;
                height: 200px;
                margin-top: 20px;
                margin-bottom: 20px;
                margin-left: 20px;
                .shuoc{
                    width: 100%;
                    height: 200px;
                    // margin-top: 20px;
                    // margin-bottom: 10px;
                    // margin-left: 20px;
                    .wz{
                        height: 20%;
                        background-color: rgb(255, 138, 42);
                        // text-align: center;
                        line-height: 40px;
                        display: flex;
                        justify-content: center;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
    
                    .sp{
                        height: 80%;
                        background-size:241px 160px ;
                        
                    }
                }
            }
            
        }
        
    }
}
}
.right::-webkit-scrollbar {
 display: none; /* Chrome Safari */
}


}

js文件：

    <script>
        var information=document.querySelector(".information")
        var course=document.querySelector(".course")
        var Registration=document.querySelector(".Registration")
        var collection=document.querySelector(".collection")
        
    information.onmouseout = function () {
        information.style.backgroundColor = ""
    }
        information.onmouseover = function () {
            information.style.backgroundColor = "rgba(100,255,100,0.5)"
    }
    course.onmouseout = function () {
        course.style.backgroundColor = ""
    }
    course.onmouseover = function () {
        course.style.backgroundColor = "rgba(100,255,100,0.5)"
    }
    Registration.onmouseout = function () {
        Registration.style.backgroundColor = ""
    }
    Registration.onmouseover = function () {
        Registration.style.backgroundColor = "rgba(100,255,100,0.5)"
    }
    collection.onmouseover = function () {
        collection.style.backgroundColor = "rgba(100,255,100,0.5)"
    }
    collection.onmouseout = function () {
        collection.style.backgroundColor = ""
    }
    </script>

隐藏信息栏右侧的内容：

<!-- 隐藏所有详情页 -->
<script>
    // 将所有详情页隐藏
    var fm = function () {
        var informationl = document.querySelector(".informationl")
        informationl.classList.add("hide")

        var coursel = document.querySelector(".coursel")
        coursel.classList.add("hide")

        var Registrationl = document.querySelector(".Registrationl")
        Registrationl.classList.add("hide")

        var collectionl = document.querySelector(".collectionl")
        collectionl.classList.add("hide")
    }
</script>

信息栏左侧：

<!-- 左侧内容 -->
<script>
    var shoye = document.querySelector(".shoye")
    shoye.onclick = function () {
        window.open("../zmy/xm.html")
    }
    // 获取左侧详情页的信息
    var right = document.querySelector(".right")
    // 个人信息
    var information = document.querySelector(".information")
    information.innerHTML = "个人信息"

    // 购买课程
    var course = document.querySelector(".course")
    course.innerHTML = "购买课程"

    // 报名信息
    var Registration = document.querySelector(".Registration")
    Registration.innerHTML = "报名信息"

    // 个人收藏
    var collection = document.querySelector(".collection")
    collection.innerHTML = "个人收藏"
</script>

请求用户信息：

    var f1;
    var f2;
    async function fn() {
        var res = axios.post("/homeuser").then(res => {
            console.log(res)
            // 判断用户是否登录过
            if (res.data.code == 4001) {
                // 已经登录过了

                // 导航栏信息
                var rightinfo = document.querySelector(".rightinfo")
                rightinfo.classList.remove("hide")
                var tx = document.querySelector(".tx")
                var hide = document.querySelector(".hide")
                tx.classList.remove("hide")

                // 导航栏信息
                var img = document.createElement("img")
                tx.appendChild(img)
                var touxiang = res.data.touxiang
                img.src = `${touxiang}`
                // 用户退出
                var tc = document.querySelector(".tc")
                tx.addEventListener("mouseover", function () {
                    tc.classList.remove("hide")
                })
                tx.addEventListener("mouseout", function () {
                    tc.classList.add("hide")
                })
                tc.onclick = function () {
                    axios.get("/tc")
                    location.reload()
                }

                var text = document.createElement("div")
                tx.appendChild(text)
                var username = res.data.username
                text.innerHTML = `${username}`

                // 让页面一加载就有一个模板显示
                fm2()
                var hide = document.querySelector(".hide")

个人信息详情页：

                // 个人信息详情页
                information.onclick = fm2
                function fm2() {
                    fm()
                    var informationl = document.querySelector(".informationl")
                    informationl.classList.remove("hide")

                    // 创建一个数组，下面正则不匹配的令数组中的true改为false
                    // 如果正则匹配完，数组中包含false，我们就令它修改不了信息
                    var arr = [true, true, true]
                    var txb = document.querySelector(".txb")
                    var touxiang1 = res.data.touxiang
                    txb.style.backgroundImage = `url(${touxiang1})`

                    var username = document.querySelector("#username")
                    var username1 = res.data.username
                    username.value = `${username1}`
                    username.addEventListener("change", function () {
                        let reg = /^[0-9a-zA-Z\u4E00-\u9FA5\_]/
                        if (reg.test(username.value)) {
                            username.style.border = "2px green solid"
                        } else {
                            username.style.border = "red 2px solid"
                            arr[0] = false
                        }
                    })
                    // 姓名
                    var realname = document.querySelector("#realname")
                    var realname1 = res.data.realname
                    realname.value = `${realname1}`
                    // 身份证
                    var idcard = document.querySelector("#idcard")
                    var idcard1 = res.data.idcard
                    idcard.value = `${idcard1}`
                    // 手机号码
                    var phonenumber = document.querySelector("#phonenumber")
                    var phonenumber1 = res.data.phonenumber
                    phonenumber.value = `${phonenumber1}`
                    // 手机号的正则匹配
                    phonenumber.addEventListener("change", function () {
                        let reg = /^1[34578]\d{9}$/
                        if (reg.test(phonenumber.value)) {
                            phonenumber.style.border = "2px green solid"
                        } else {
                            phonenumber.style.border = "red 2px solid"
                            arr[1] = false
                        }
                    })

                    // input
                    var tsk1 = document.querySelector(".tsk1")
                    // 重置密码
                    var pwd1 = document.querySelector("#pwd1")
                    // 密码的正则匹配
                    pwd1.addEventListener("change", function () {
                        let reg = /(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/
                        if (reg.test(pwd1.value)) {
                            pwd1.style.border = "2px green solid"
                        } else {
                            pwd1.style.border = "red 2px solid"
                            tsk1.style.color = "red"
                            arr[2] = false
                        }
                    })

                    //   修改头像
                    txb.addEventListener("change", function () {
                        var touxiang = document.querySelector("#touxiang")
                        var url = window.URL.createObjectURL(touxiang.files[0])
                        console.log(url)
                        txb.style.backgroundImage = `url(${url})`
                    })

修改信息：

                    // 修改信息
                    f1 = function () {
                        var touxiang = document.querySelector("#touxiang")
                        var file2 = touxiang.files[0]
                        // console.log(file)
                        var re1 = username.value
                        // console.log(re1)
                        var re2 = phonenumber.value
                        console.log(re2)

                        var pwd = document.querySelector("#pwd")
                        var re3 = pwd.value
                        // console.log(re3)

                        var pwd1 = document.querySelector("#pwd1")
                        var re4 = pwd1.value
                        // console.log(re4)

                        console.log(arr)
                        // 判断数组是否包含false
                        // 如果有，就不执行
                        if (!arr.includes(false)) {
                            console.log(re4)
                            // 判断密码是否存在
                            if (re3) {
                                // 密码存在，我们获取信息
                                // 然后用post请求发送给后端
                                var data1 = new FormData();
                                data1.append("touxiang", file2)
                                data1.append("username", re1)
                                data1.append("phonenumber", re2)
                                data1.append("pwd", re3)
                                data1.append("pwd1", re4)
                                console.log(data1)
                                axios.post("/userinfo", data1).then(res1 => {
                                    if (res1.data.code == 4003) {
                                        // 密码正确，后端就操作（更新）数据库
                                        // 重新刷新页面
                                        location.reload()
                                    } else if (res1.data.code == 4004) {
                                        // 密码错误，给用户一个提示
                                        alert("密码输入错误，无法修改信息")
                                    }

                                })
                            } else {
                                // 如果密码不存在，就给用户一个提示
                                alert("请输入密码")
                            }

                        } else {
                            // 如果数组中包含false，代表格式有问题
                            // 给用户一个提示
                            alert("输入信息格式错误")
                        }
                    }

注销账号：

                    // 注销账号
                    f2 = function () {
                        // 向后端做请求，后端操作数据库删除这个用户的所有信息
                        // 后端清除缓存
                        axios.get("/zxiao")
                        // 重新刷新页面
                        location.reload()
                    }


                }

购买课程的详情页：

                // 购买课程详情页
                course.addEventListener("click", function () {
                    // 将所有详情页隐藏
                    fm()
                    // 获取元素
                    var coursel = document.querySelector(".coursel")
                    var guomaiall = document.querySelectorAll(".guomai")
                    console.log(guomaiall)
                    var xx1 = document.querySelector(".xx1")
                    for (var i = 0; i < guomaiall.length; i++) {
                        xx1.removeChild(xx1.childNodes[0])
                    }
                    var xxal = document.querySelectorAll(".xx1")
                    for (var j = 0; j < xxal.length; j++) {
                        coursel.removeChild(xx1)
                    }

                    var ts1 = document.querySelectorAll(".ts1")
                    for (var j = 0; j < ts1.length; j++) {
                        coursel.removeChild(ts1[0])
                    }

                    coursel.classList.remove("hide")
                    axios.post("/guomai").then(res2 => {
                        console.log(res2)
                        var arr2 = []
                        res2.data.data1.forEach(el => {
                            if (el.coid == 1) {
                                arr2.push(el)
                            }
                        })
                        console.log(arr2)
                        if (arr2[0]) {
                            var div4 = document.createElement("div")
                            div4.classList.add("xx1")
                            coursel.appendChild(div4)
                            arr2.forEach(el => {

                                var div3 = document.createElement("div")
                                div3.classList.add("guomai")
                                div4.appendChild(div3)

                                var div1 = document.createElement("div")
                                div1.classList.add("sp1")
                                div3.appendChild(div1)
                                var div2 = document.createElement("div")
                                div2.classList.add("wz1")
                                div3.appendChild(div2)


                                // var div5 = document.createElement("div")
                                // div5.classList.add("jg1")
                                // div2.appendChild(div5)
                                var div6 = document.createElement("div")
                                div6.classList.add("ms1")
                                div2.appendChild(div6)

                                // div5.innerHTML=el.price+"元"
                                div6.innerHTML = el.name
                                // console.log(el.picturn)
                                var lujin = el.lujin
                                console.log(lujin);
                                div1.style.backgroundImage = `url(${lujin})`
                                // 点击课程，跳转到视频详情页
                                div3.addEventListener("click", function () {
                                    if(lujin.includes("lanqiu")){
                                        window.open("/public/zm/index.html?vid1="+31+"&vid2="+32+"&vid3="+33)
                                    }
                                    if(lujin.includes("bc")){
                                        window.open("/public/zm/index.html?vid1="+28+"&vid2="+29+"&vid3="+30)
                                    }
                                    if(lujin.includes("zuqiu")){
                                        window.open("/public/zm/index.html?vid1="+34+"&vid2="+35+"&vid3="+36)
                                    }
                                    if(lujin.includes("wudao")){
                                        window.open("/public/zm/index.html?vid1="+37+"&vid2="+38+"&vid3="+39)
                                    }
                                    
                                })
                            });
                        }
                        else {
                            var div7 = document.createElement("div")
                            div7.classList.add("ts1")
                            coursel.appendChild(div7)
                            div7.innerHTML = "你还没有购买，快去首页购买吧!!!"

                        }

                    })

                })

线下报名详情页：

                // 线下报名详情页
                Registration.addEventListener("click", function () {
                    // 跳转到网页查询页面
                    window.open("../lirui/index.html")
                }
                )

个人收藏详情页：

                // 个人收藏详情页
                collection.onclick = fm5
                function fm5() {
                    fm()
                    var collectionl = document.querySelector(".collectionl")
                    var shuocall = document.querySelectorAll(".shuoc")
                    console.log(shuocall)
                    var xx = document.querySelector(".xx")
                    for (var i = 0; i < shuocall.length; i++) {
                        xx.removeChild(xx.childNodes[0])
                    }
                    var ts = document.querySelectorAll(".ts")
                    for (var j = 0; j < ts.length; j++) {
                        collectionl.removeChild(ts[0])
                    }

                    collectionl.classList.remove("hide")

                    axios.post("/shouchang").then(res2 => {
                        console.log(res2)
                        var arr2 = []
                        res2.data.data1.forEach(el => {
                            if (el.bid == 1) {
                                arr2.push(el)
                                
                                    
                            }
                        })
                        console.log(arr2)
                        if (arr2[0]) {
                            arr2.forEach(el => {
                                var input = document.createElement("input")
                                input.type = "checkbox"
                                input.classList.add("xzk")
                                input.classList.add("hide")
                                input.name = "xz"
                                // 令每一个复选框的value=后端数据库中的商品信息独一无二的字段的值
                                // 确保每一个复选框的value值不一样，方便后端操作数据库中相对应的信息
                                input.value=el.vid
                                var div5 = document.createElement("div")
                                div5.classList.add("xq")

                                var div = document.createElement("div")
                                div.classList.add("shuoc")
                                xx.appendChild(div5)
                                div5.appendChild(div)
                                div5.appendChild(input)


                                var div1 = document.createElement("div")
                                div1.classList.add("sp")
                                div.appendChild(div1)
                                var div2 = document.createElement("div")
                                div2.classList.add("wz")
                                div.appendChild(div2)



                                // var div3 = document.createElement("div")
                                // div3.classList.add("jg")
                                // div2.appendChild(div3)
                                var div4 = document.createElement("div")
                                div4.classList.add("ms")
                                div2.appendChild(div4)

                                // div3.innerHTML=el.price+"元"
                                div4.innerHTML = el.name
                                // console.log(el.picturn)
                                var lujin = el.lujin
                                div1.style.backgroundImage = `url(${lujin})`
                                // 点击课程，跳转到视频详情页
                                div.addEventListener("click", function () {
                                    if(lujin.includes("lanqiu")){
                                        window.open("/public/zm/index.html?vid1="+31+"&vid2="+32+"&vid3="+33)
                                    }
                                    if(lujin.includes("bc")){
                                        window.open("/public/zm/index.html?vid1="+28+"&vid2="+29+"&vid3="+30)
                                    }
                                    if(lujin.includes("zuqiu")){
                                        window.open("/public/zm/index.html?vid1="+34+"&vid2="+35+"&vid3="+36)
                                    }
                                    if(lujin.includes("wudao")){
                                        window.open("/public/zm/index.html?vid1="+37+"&vid2="+38+"&vid3="+39)
                                    }
                                })
                            });
                            var gl = document.querySelector(".gl")
                            gl.classList.remove("hide")
                            gl.innerHTML = "管理"
                            var flag = false
                            gl.addEventListener("click", function () {
                                
                                flag = !flag
                                if (flag) {
                                    gl.innerHTML = "取消收藏"
                                    flag = true
                                    var inputall = document.querySelectorAll(".xzk")
                                    inputall.forEach(el => {
                                        el.classList.remove("hide")
                                    })
                                } else {
                                    var arr1 = []
                                    console.log($("input[name='xz']:checked"),1111111111)
                                    // 引用jquery插件
                                    // 将被选中的复选框遍历
                                    $("input[name='xz']:checked").each(function (i) {
                                        // 在数组中保存被点击的复选框的vaule值
                                        arr1[i]=$(this).val()
                                    });
                                    console.log(arr1)
                                    // 数组中值连接为字符串
                                    var str = arr1.join(",")
                                    console.log(str)
                                    // 通过网络请求，将字符串发送给后端
                                    // 后端再将字符串转换为数组，进行遍历，对数据库进行操作
                                    axios.post("/qxsc",{str}).then(res=>{
                                        // 后端返回数据后，重新刷新这个页面
                                        fm5()
                                    })
                                   
                                    
                                     
                           
                            gl.innerHTML = "管理"
                            var inputall = document.querySelectorAll(".xzk")
                            inputall.forEach(el => {
                                el.classList.add("hide")
                            })

                        }

                    })
                } else {
                    var div6 = document.createElement("div")
                    div6.classList.add("ts")
                    collectionl.appendChild(div6)
                    div6.innerHTML = "你还没有收藏，快去首页收藏吧!!!"
                }

            })

    }




            }
            else if (res.data.code == 4002) {
        // 没有登录过
        var login = document.querySelector(".login")
        var hide = document.querySelector(".hide")
        login.classList.remove("hide")

        var rightnoinfo = document.querySelector(".rightnoinfo")
        rightnoinfo.classList.remove("hide")


    }
        })
    }
    fn()
</script>

后端

router.js文件：

  // 个人中心

  // 获取用户信息
router.post("/homeuser",controller.homepage.homeuser)
// 修改用户信息
 router.post("/userinfo",controller.homepage.userinfo)
// 注销用户信息
router.get("/zxiao",controller.homepage.zxiao)
// 获取购买课程
router.post("/guomai",controller.homepage.goumai)

// 获取个人收藏信息
router.post("/shouchang",controller.homepage.shouchang)
// 退出
router.get("/tc",controller.homepage.tc)
// 取消收藏
router.post("/qxsc",controller.homepage.qxsc)

controller文件中的homepage.js文件：

  'use strict';

const Controller = require('egg').Controller;
 const fs=require("fs")
const path=require("path");
const { compileFunction } = require('vm');
class HomepageController extends Controller {
 async index() {
const { ctx } = this;
ctx.body = 'hi, egg';
}

获取用户信息：

// 获取用户身份信息
async homeuser(){
var uid=this.ctx.session.uid
console.log(uid)
let flag=await this.ctx.service.user.islogin()
console.log(flag)
// 测试
if(flag){
  // 用缓存信息在数据库中获取用户的头像、账号信息
  let sql1=`SELECT username,phonenumber,touxiang,realname,idcard FROM user WHERE uid="${uid}"`
  let data1=await this.app.mysql.query(sql1)
// 2.获取当前请求的用户信息
this.ctx.body={info:"用户曾经登录过",code:4001,...data1[0]}
}else{
  this.ctx.body={info:"用户未登录过",code:4002}
}
}

修改用户信息：

 // 修改用户信息
 async userinfo(){
  var uid=this.ctx.session.uid
console.log(uid)
// 接收字段
let field=this.ctx.request.body
// 接收文件
let file=this.ctx.request.files
// console.log(file,field,11111111)
var username2=field.username
var phonenumber2=field.phonenumber
var pwd2=field.pwd
let sql1=`SELECT pwd FROM user WHERE uid="${uid}"`
  let data1=await this.app.mysql.query(sql1)
  console.log(data1[0].pwd,22222222222)
  if(data1[0].pwd==pwd2){
    if(file[0]){
      let oldpath=file[0].filepath
      let newpath=__dirname+"/../public/img/"+path.basename(oldpath)
      fs.copyFileSync(oldpath,newpath)
      console.log(4444444444444444)
      // 删除临时目录里面的文件
      fs.unlink(oldpath,err=>{
       console.log(err)
      })
    let imgpath="/public/img/"+path.basename(oldpath)
    this.app.mysql.query( `UPDATE user SET touxiang="${imgpath}" WHERE uid="${uid}"`)
      
    }else{
      if(field.pwd1){
        let pwd3=field.pwd1
        this.app.mysql.query(`UPDATE user SET pwd="${pwd3}" WHERE uid="${uid}"`)
      }
    }
    this.app.mysql.query(`UPDATE user SET username="${username2}",phonenumber="${phonenumber2}" WHERE uid="${uid}"`)

    this.ctx.body={info:"修改成功",code:4003}
      // console.log(555555555555)
  }else{
    this.ctx.body={info:"密码错误",code:4004} 
  }


}

注销用户：

 // 用户信息注销
async zxiao(){
// 取出浏览器中的缓存
let uid=this.ctx.session.uid
// 根据uid值删除数据库中相对应的信息
this.app.mysql.query(`DELETE FROM user WHERE uid="${uid}"`)
// 清除浏览器的缓存
this.ctx.session=null
this.ctx.body={info:"账号已注销，请重新注册"}

}

获取购买课程信息：

// 获取购买课程信息
async goumai(){
 // 取出浏览器中的缓存
var uid=this.ctx.session.uid
// 根据uid值查找数据库中相对应的信息
let sql1=`SELECT * FROM linevideo WHERE uid="${uid}"`
// 取出数据库中的信息
let data1=await this.app.mysql.query(sql1)
console.log(data1)
// 将查找出来的数据发送给前端
this.ctx.body={info:"购买信息",data1}
}

获取个人收藏信息：

// 获取个人收藏信息
async shouchang(){
var uid=this.ctx.session.uid
let sql1=`SELECT * FROM linevideo WHERE uid="${uid}"`
let data1=await this.app.mysql.query(sql1)
this.ctx.body={info:"收藏信息",data1}
}

退出登录：

// 用户退出
async tc(){
// 清除浏览器的缓存
this.ctx.session=null
this.ctx.body={info:"用户退出"}
}

取消收藏：

 // 取消收藏
async qxsc(){
// 接收前端发送的数据包中对象中str属性的属性值
var ziduan=this.ctx.request.body.str
console.log(ziduan,1111111111111)
var arr=ziduan.split(",")
console.log(arr)
arr.forEach(el => {
  console.log(el)
  let sql1=`UPDATE linevideo SET bid=0 WHERE vid="${el}"`
  this.app.mysql.query(sql1)
});
this.ctx.body={info:"取消成功"}
}

}

module.exports = HomepageController;