编程大白话之-CMS内容管理系统应用案例二

由于最近较忙，一直没有更新，导致都忘记传哪里了，看来做事情还是要有始有终，今天继续给大家分享第二个页面的功能

用户页

需求列表：
1.登录成功后进入用户页面
2.登录用户的相应信息，显示出来
3.重新修改图片或信息，点击更新后信息发生改变，数据库相应数据改变
4.点击删除按钮后，页面跳回登录页面，数据库对应的数据被删除

1.gif

配置文件、封装的AJAX、数据库都是公用的

html

<!-- 个人信息 -->
    <div class="personal-data">
        <div class="account">
            <h2>账户清单</h2>
            <h3>账号</h3>
            <!-- <input type="text" list="fruit" placeholder="选择账号">
            <datalist id="fruit">
                <option value="商家"></option>
                <option value="本人"></option>
                <option value="选中产品"></option>
            </datalist> -->
            <select name="" id="">
                <option value="">商家</option>
                <option value="">本人</option>
                <option value="">选中产品</option>
            </select>
        </div>
        <div class="means">
            <div class="left-data">
                <h1>改变头像</h1>
                <div class="img-me">
                    <!-- // 活的 -->
                    <img id="imgSrc" src="../image/a99448d1526dae883eb16ffe3b435795.jpg" alt="">
                </div>
                <span class="unloap">上传新照片
                    <!-- file文件域控件,将这个input定位在一个标签按钮的位置，然后opactive:0, -->
                    <input type="file" id="file">
                </span>
            </div>
            <div class="right-data">
                <h1>账号设定</h1>
                <form action="">
                    <label for="">用户名
                        <input type="text" id="user">
                    </label>
                    <label for="">账户电子邮件
                        <input type="text" id="e-medu">
                    </label>
                    <label for="">密码
                        <input type="text" id="old-password">
                    </label>
                    <label for="">输入新密码
                        <input type="text" id="new-password">
                    </label>
                    <label for="">电话
                        <input type="text" id="phone">
                    </label>
                    <span class="me-IT" id="me-IT">更新您的个人资料</span>
                </form>
                <p class="delect-user" id="delect-user">删除您的用户</p>
            </div>
        </div>
    </div>

js

function $(id) {
        return document.getElementById(id);
    }

    let file = $('file');           // 上传照片按钮
    let imgSrcs = $('imgSrc');      // 图片盒子

    // 当元素发生改变后触发事件--------添加替换图片
    file.onchange = function () {
        // 当元素发生改变后就会有一个new FormData()构造函数
        let form = new FormData();
        // 添加一个表单数据，得到的是一个文件对象,将文件对象存入form   
        // {
        //     userpic: {name: 'XXX'}
        // }
        form.append('userpic', this.files[0]);    // files元素内自带的一个属性，可以通过下标打印其数据,将这个下标为[0]的文件属性赋值给userpic，并添加进form中
        // 将前面存储的用户的id进行获取
        form.append('userid', localStorage.getItem('userid'));
            
        // console.log(form, 123123)
        filePost('/v1/api/upload', form, function (data) {
            let data2 = JSON.parse(data);

            if (data2.status === 0) {         // 设置的成功返回：0
                imgSrcs.src = data2.imgSrc;
            }
        })
    }


    let meIT = $('me-IT');    // 更新信息按钮
    let delectUser = $('delect-user');     // 删除信息按钮
    let user = $('user')        // 用户名
    let eMedu = $('e-medu');    // 邮箱
    let oldPassword = $('old-password');   // 旧密码
    let newPassword = $('new-password');   // 新密码
    let phone = $('phone');     // 电话


    // 更新按钮信息
    meIT.addEventListener('click', function() {
        console.log(localStorage.getItem('userid'));
        ajax('/v1/post/update', {
            id:localStorage.getItem('userid'),
            username: user.value,
            password: oldPassword.value,
            newPassword: newPassword.value,
            emedu: eMedu.value,
            phone: phone.value
        }, function(data) {
            console.log(data);
        })
    })

    // 进入页面自动调用ajax
    ajax('/v1/post/auto', {}, function (data) {
        let dataNew = JSON.parse(data).result;
        user.value = dataNew.username;
        oldPassword.value = dataNew.password;
        newPassword.value = dataNew.newPassword;
        eMedu.value = dataNew.emedu;
        phone.value = dataNew.phone
    })

    // 点击删除当前用户
    delectUser.addEventListener('click', function() {
        ajax('/v1/post/deletes', {}, function(data) {
            let datas = JSON.parse(data);
            if(datas.status === 0) {                // 如果删除成功status为0时
                location.href = datas.redirect;         // 让页面跳转的路径改为重定向中设置的路径
            }
        })
    })

进入页面自动更新-路由

const Router = require('koa-router');

const path = require('path');

const router = new Router();

const {find, insertUser} = require(path.join(process.cwd(), './controller/db'));        

router.post('/v1/post/auto', async ctx => {    

    console.log(ctx.cookies.get('userid'), 12321);
    // const {username, password} = ctx.request.body;              

    let findRes = await find({
        id: ctx.cookies.get('userid'),
    });         
    
    ctx.body = {
        // status: 0,
        result: findRes[0]
    }
});

module.exports = router;

更新按钮-路由

const path = require('path');

const Router = require('koa-router');

const router = new Router();

// 接收数据库抛出的数据
const {update} = require(path.join(process.cwd(), './controller/db'));

router.post('/v1/post/update', async ctx => {
    // console.log(ctx.request.body)
    const {username, password, newPassword, emedu, phone} = ctx.request.body;

    let update2 = await update({ newPassword, emedu, phone, id: ctx.cookies.get('userid')})     // 获取cookiesID，注册时存储的，可以在文件下所有地方都可以获取到

    ctx.body = {
        status:0,
        msg:'更新成功'
    };

})

module.exports = router;

删除用户按钮-路由

const Router = require('koa-router');

const path = require('path');

const router = new Router();

const {deletes} = require(path.join(process.cwd(), './controller/db'));

router.post('/v1/post/deletes', async ctx => {
    await deletes({id: ctx.cookies.get('userid')});
    ctx.body = {
        status:0,
        msg:'用户已删除',
        redirect:'/login'       // 重定向页面的路径
    }
})

module.exports = router;

数据库对应的接口

const mysql = require('mysql');

const {database} = require('../config');        // 接收抛出的配置文件

const connection = mysql.createConnection({     // 将接收到的对象进行赋值，或...database直接将对象进行解构
    host: database.host,
    port: database.port,
    user: database.user,
    password: database.password,
    database: database.database         
});            // 创建连接，配置参数

connection.connect((err) => {       // 执行测试一下，是否运行
    console.log(err, '是否成功');
})


// 查询数据：根据传入的参数查询数据库
async function find(opt) {          // 接收到传来的数据执行函数内容
    let sql = 'SELECT * FROM `userlist3` WHERE' + Object.keys(opt).map(key => {        // 将opt的内容转为数组,通过map循环，将里面的key值转为数据库查询的格式 
        return ` ${key} LIKE '${opt[key]}' `;               // 复制时要将内容里的%删除，否则会将匹配到相关的内容全部返回出去
    }).join('AND ');            // 将每一个key之间用AND进行拼接

    return new Promise((resolve, reject) => {
        connection.query(sql, (err, result) => {
            if(err) {
                reject(err);                // 有错误执行错误
            } else {
                resolve(result);            // 返回结果给路由的find()
            }
        });
    });
}


// 插入数据
async function insertUser(opt) {          // 接收到传来的数据执行函数内容
    return new Promise((resolve, reject) => {
        connection.query(`INSERT INTO userlist3 (username, password) VALUES (?, ?)`, [opt.username, opt.password], (err, result) => {
            if(err) {
                reject(1);          // 错误返回1
            } else {
                resolve(result); 
            }
        })
    })
}

// 修改图片数据
async function updatePic(opt) {
    return new Promise((resolve, reject) => {
        // 如果上传成功返回0，在路由文件，修改文件路径的位置可以打印到
        connection.query(`UPDATE userlist3 SET userpic='${opt.userpic}' WHERE (id=${opt.userid})`, (err, result) => {
            if(err) {
                reject(1);
            } else {
                resolve(0)
            };
        });
    });
}

// 删除用户
async function deletes(opt) {
    return new Promise((resolve, reject) => {
        connection.query(`DELETE FROM userlist3 WHERE (id=${opt.id})`, (err, result) => {
            if(err) {
                reject(1);
            } else {
                resolve(0);
            }
        });
    });
}


// 更新信息
async function update(opt) {
    console.log(opt);
    return new Promise((resolve, reject) => {                 // userid 是在登录时保存的对应id 
        connection.query(`UPDATE userlist3 SET password='${opt.newPassword}', emedu='${opt.emedu}', phone='${opt.phone}' WHERE (id='${opt.id}')`, (err, result) => {
            console.log(err)
            if(err) {
                reject(1);
            } else {
                resolve(result);
            }
        });
        
    });
}
module.exports = {              // 抛出查询或添加后的数据
    find,
    insertUser,
    updatePic,
    update,
    deletes
}

内容供大家参考，有哪里忘传或传错的地方，请朋友们指出，一定及时的改正。