前端（jquery）+ 后端（Node

2401_84437604

于 2024-06-25 00:09:09 发布

阅读量983

点赞数 21

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/2401_84437604/article/details/139941867

版权

</script>




2.  注册页面web/login.html

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    form{

        width: 500px;

        height: 500px;

        border-color: pink;

        margin: 0 auto;

    }

    input{

        width: 200px;

        height: 30px;

        margin-top: 10px;

        outline: none;

    }

</style>

<form>

    <input type="text" name="name" placeholder="输入名字"><br>

    <input type="password" name="password" placeholder="输入密码"><br>

    <input type="button" name="login" value="注册">

</form>

<script src="jquery.js"></script>

<script>

	//点击注册时执行

     $('form').on('click','input[name="login"]',function(e){

        e.preventDefault()

        $.ajax({

            url:'http://10.7.178.116:4000/api/reguser',

            type:'post',

            data:{

                username:$('input[name="name"]').val(),

                password:$('input[name="password"]').val()

            },

            success:function(data){

                if(data.status==1){

                    alert(data.message)

                }else{

                	//成功跳转到登录页面

                    location.href='signin.html'

                }

            }

        })

    })

</script>




3.  主界面web/index.html

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    body,html{

        height: 100%;

    }

    *{

        margin: 0;

        padding: 0;

    }

    .head{

        width: 100%;

        height: 150px;

        background-color: skyblue;

    }

    .head img{

        width: 100px;

        height: 100px;

        border-radius: 50%;

        margin-left: 20px;

        margin-top: 10px;

    }

    .head .use{

        float: left;

    }

    .head div{

        font-size: 24px;

        margin-left: 28px;

       

    }

    .head button{

        width: 50px;

        height: 50px;

        float: right;

        margin-right: 20px;

        margin-top: 50px;

    }

    .nav{

        width: 200px;

        height: 100%;

        background-color: pink;

        float: left;

    }

    .nav .title{

        height: 30px;

        padding: 10px 0;

        margin-left: 15px;

        color: #fff;

        line-height: 30px;

    }

    .nav li{

        list-style: none;

        padding-left: 20px;

        color: #fff;

        height: 30px;

    }

    .nav .active{

        background-color: blueviolet;

    }

    .table{

      

        height: 100%;

        margin-left:200px ;

        background-color: bisque;

    }

    .table table{

        text-align: center;

        line-height: 100px;

        width: 100%;

        

    }

    .table table img{

        width: 80px;

        height: 80px;

    }

    .table table tr td{

        width: 100px;

        height: 100px;

    }

    .table form{

        width: 300px;

        margin: 0 auto;

        text-align: center;

    }

    .table input{

        margin-top: 10px;

        outline: none;

    }

    .table button{

        margin-top: 10px;

        width: 40px;

    }

</style>

<div class="head">

    <div class="use"></div>

    <button class="signOut">退出</button>

</div>

<div class="nav">

    <div class="title">管理</div>

        <ul>

            <li class="vister">游客列表</li>

            <li class="updataPws">更新信息</li>

            <li class="avatar">重置头像</li>

            <li class="password">重置密码</li>

        </ul>

</div>

<div class="table"></div>



<script src="jquery.js"></script>

<script>

    //获取用户信息

    const token=JSON.parse(localStorage.getItem('token')) 

    function fun(){

        $.ajax({

            url:'http://10.7.178.116:4000/my/userinfo',

            type:'get',

            headers: {'Authorization': token},

            dataType: 'JSON',

            success:function(data){

                if(data.status==1){

                    alert('获取信息失败')

                }else{

                    data=data.data

                    let str=`

                    <img src="${data.user_pic}">

                    <div>${data.username}</div>

                     `

                    $('.use').html(str)

                    

                }

            }

        })

    }

    fun()



	//右边页面动画

    function animation(){

        $('.nav .title').click(function(){

            $(this).next().slideToggle()

        })

        $('.nav li').click(function(){

            $('.nav li').removeClass('active')

            $(this).addClass('active')

        })

    }

    animation()



     //右边功能按钮

    function total(){

        $('.nav').on('click','.vister',function(){

            getList()

        }).on('click','.updataPws',function(){

            getUpdataPws()

        }).on('click','.avatar',function(){

            getAvatar()

        }).on('click','.password',function(){

            getPassword()

        })

        

        

        //退出按钮

        $('.head').on('click','.signOut',function(){

        	//清空密钥

            localStorage.setItem('token','')

            location.href='signin.html'

        })

        

    }

    total()

	//获取用户资料

    function getList(){

            $.ajax({

            type:'get',

            url:'http://10.7.178.116:4000/my/list',

            headers: {'Authorization': token},

            dataType: 'JSON',

            success:function(data){

                if(status==0){

                    let list=data.data

                    let strTable=`

                    <table>

                    <tr>

                    <td>id</td>

                    <td>名字</td>

                    <td>图片</td>

                    <td>邮箱</td>

                    <td>功能</td>

                    </tr>

                        `

                   let str=list.map(item=>{

                        return    `<tr>

                                <td>${item.id}</td>

                                <td>${item.username}</td>

                                <td><img src="${item.user_pic}"></td>

                                <td>${item.email}</td>

                                <td class="del" data-index="${item.id}">删除</td>

                                </tr>

                                    `

                    })  

                    str=str.join('')

                    $('.table').html(strTable+str+'</table>')

                }

            }

            })

            

        }

        //更新用户信息

       function getUpdataPws(){

            let str=`

            <input type="text" name="id" placeholder="输入id"><br>

            <input type="text" name="nickname" placeholder="输入昵称"><br>

            <input type="text" name="email" placeholder="输入email"><br>

            <input type="button" name="btn" value="提交">

            `

            $('.table').html(str)

            $('input[name="btn"]').on('click',function(){

                $.ajax({

                type:'post',

                url:'http://10.7.178.116:4000/my/updateUserinfo',

                headers: {'Authorization': token},

                dataType: 'JSON',

                data:{

                    id:$('input[name="id"]').val(),

                    nickname:$('input[name="nickname"]').val(),

                    email:$('input[name="email"]').val(),

                },

                success:function(data){

                    if(data.status==0){

                        alert('更新信息成功')

                        getList()

                    }

                }

                })

            })   

            

       }

        //更改头像

       function getAvatar(){

           let str=`

            <input type="text" name="avatar" placeholder="输入头像地址"><br>

            <input type="button" name="btn" value="提交">

           `

           $('.table').html(str)

           $('input[name="btn"]').on('click',function(){

               $.ajax({

                type:'post',

                url:'http://10.7.178.116:4000/my/update/avatar',

                headers: {'Authorization': token},

                dataType: 'JSON',

                data:{

                    avatar:$('input[name="avatar"]').val(),

                },

                success:function(data){

                    console.log(data);

                    if(data.status==0){

                        alert('更换成功')

                        getList()

                    }

                }

               })

           })

       }

       //更换密码

       function getPassword(){

        let str=`

            <input type="password" name="oldPas" placeholder="输入旧密码"><br>

            <input type="text" name="newPas" placeholder="输入新密码"><br>

            <input type="button" name="btn" value="提交">

           `

        $('.table').html(str)

        $('input[name="btn"]').on('click',function(){

            $.ajax({

                type:'post',

                url:'http://127.0.0.1:4000/my/updatePwd',

                headers: {'Authorization': token},

                dataType: 'JSON',

                data:{

                    oldPws:$('input[name="oldPas"]').val(),

    

                    newPws:$('input[name="newPas"]').val(),

                },

                success:function(data){

                    if(data.status==0){

                        alert('更改成功')

                        getList()

                    }

                }

            })

        })

       }

		//删除用户

       $('.table').on('click','.del',function(){

           const id=$(this).attr('data-index')

           $.ajax({

            type:'post',

                url:'http://127.0.0.1:4000/my/delUser',

                headers: {'Authorization': token},

                dataType: 'JSON',

                data:{

                    id:id,

                },

                success:function(data){

                    if(data.status==0){

                        alert('删除成功')

                        getList()

                    }

                }

           })

       })

</script>




[]( )后端

=====================================================================



1.  连接数据库db/index.js

const mysql=require(‘mysql’)

//建立数据库连接

const db=mysql.createPool({

host:'127.0.0.1',

user:'root',

password:'123456',

database:'test2'

})

module.exports=db




2.  建立路由



*   公开路由，不用身份验证router/user.js

const express=require(‘express’)

const router=express.Router()

//导入路由模块

const user_handler=require(‘…/router-handler/user’)

//导入验证数据中间件

const expressJoi=require(‘@escook/express-joi’)

//导入验证规则对象

const {reg_sign_schema}=require(‘…/schema/user’)

//注册新用户

router.post(‘/reguser’,expressJoi(reg_sign_schema),user_handler.reguser)

//登录

router.post(‘/sign’,expressJoi(reg_sign_schema),user_handler.sign)

module.exports=router




*   私有路由要验证router/userinfo.js

const express=require(‘express’)

const router=express.Router()

//导入路由模块

const userinfo_handler=require(‘…/router-handler/userinfo’)

//导入数据验证中间件

const expressJoi=require(‘@escook/express-joi’)

//导入验证条件

const {update_userinfo_schema,update_password_schema,update_avatar_schema,delete_user_shema}=require(‘…/schema/user’)

//获取用户基本信息

router.get(‘/userinfo’,userinfo_handler.getUserinfo)

//更新用户信息

router.post(‘/updateUserinfo’,expressJoi(update_userinfo_schema),userinfo_handler.updataUserinfo)

//重置密码

router.post(‘/updatePwd’,expressJoi(update_password_schema),userinfo_handler.updatePassword)

//更换用户头像

router.post(‘/update/avatar’,expressJoi(update_avatar_schema),userinfo_handler.updateAvatar)

//获取访客列表

router.get(‘/list’,userinfo_handler.getList)

//删除用户

router.post(‘/delUser’,expressJoi(delete_user_shema),userinfo_handler.getDelUser)

module.exports=router




3.  路由执行代码



*   公开路由执行代码router-handler/user.js

//导入数据库模块

const db=require(‘…/db/index’)

//加密模块

const bcrypt=require(‘bcryptjs’)

//导入token模块

const jwt=require(‘jsonwebtoken’)

const config=require(‘…/schema/config’)

const { TokenExpiredError } = require(‘jsonwebtoken’)

//注册新用户

exports.reguser=(req,res)=>{

const userinfo=req.body



// if(!userinfo.name||!userinfo.password){

//     // return res.send({

//     //     status:1,

//     //     message:'用户名或密码不为空'

//     // })

//     return res.cc('用户名或密码不为空')

// }



//定义数据库查询语句

const sqlStr='SELECT * FROM ev_users WHERE username=?'

db.query(sqlStr,[userinfo.username],function(err,results){

   

    if(err)return res.cc(err)

    if(results.length>0)return res.cc('用户名已占用')

    //加密

    userinfo.password=bcrypt.hashSync(userinfo.password,10)



    //注册新用户

    const newUserSql='insert into ev_users set ?'

    db.query(newUserSql,{username:userinfo.username,password:userinfo.password},(err,results)=>{

        if(err)return res.cc(err)

        if(results.affectedRows!==1)return res.cc('注册出错了')

        res.cc(err,0)

    })

    })



}

//登录

exports.sign=(req,res)=>{

const userinfo=req.body

let usernanmSql='SELECT * FROM ev_users WHERE username=?'

db.query(usernanmSql,userinfo.username,(err,results)=>{

    //判断用户

    if(err) return res.cc(err)

    if(results.length==0) return res.cc('用户名不存在')

    //判断密码

    const comparResults= bcrypt.compareSync(userinfo.password,results[0].password)

    if(!comparResults)return res.cc('密码错误')

    //生成token字符串

    const user={...results[0],password:'',user_pic:''}

    //加密

    const tokenStr=jwt.sign(user,config.jwtSecretKey,{expiresIn:'10h'})

    res.send({

        status:0,

        message:'登录成功',

        token:'Bearer '+tokenStr

        

    })

})

}




*   私有路由执行代码router-handler/userinfo.js

//导入数据库模块

const db =require(‘…/db/index’)

//导入密码模块

const bcrypt=require(‘bcryptjs’)

//查询用户信息函数

exports.getUserinfo=(req,res)=>{

//定义字符串

const sql='SELECT id,username,nickname,email,user_pic FROM ev_users WHERE id=?'

//执行

db.query(sql,req.user.id,(err,results)=>{

    if(err) return res.cc(err)

    if(results.length!==1) return res.cc('获取用户信息失败')

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

retKey,{expiresIn:‘10h’})

    res.send({

        status:0,

        message:'登录成功',

        token:'Bearer '+tokenStr

        

    })

})

}




*   私有路由执行代码router-handler/userinfo.js

//导入数据库模块

const db =require(‘…/db/index’)

//导入密码模块

const bcrypt=require(‘bcryptjs’)

//查询用户信息函数

exports.getUserinfo=(req,res)=>{

//定义字符串

const sql='SELECT id,username,nickname,email,user_pic FROM ev_users WHERE id=?'

//执行

db.query(sql,req.user.id,(err,results)=>{

    if(err) return res.cc(err)

    if(results.length!==1) return res.cc('获取用户信息失败')

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

[外链图片转存中…(img-OY3WzDCl-1719245337845)]

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-FOYC8d2T-1719245337846)]

动态交互：JavaScript基础的学习

2401_84437604

关注

21
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
前端（jquery）+ 后端（Node

/建立数据库连接})//导入路由模块//导入验证数据中间件//导入验证规则对象//注册新用户//登录//导入路由模块//导入数据验证中间件//导入验证条件//获取用户基本信息//更新用户信息//重置密码//更换用户头像//获取访客列表//删除用户//导入数据库模块//加密模块//导入token模块//注册新用户//登录//导入数据库模块//导入密码模块//查询用户信息函数。
复制链接

扫一扫