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

某网解释
CMS是"Content Management System"的缩写，意为"内容管理系统"。内容管理系统是企业信息化建设和电子政务的新宠，也是一个相对较新的市场。对于内容管理，业界还没有一个统一的定义，不同的机构有不同的理解。

这里跟大家来分享一个小案例的应用，对于编程初学者是一个不错的案例。
由于案例分为几个页面，所以这里也将分为几个篇章分别给大家分享！

登录页

1.gif

需求内容：
首页：

预登陆：登录账户，如果存在直接进入，如果不存在提示错误信息。
注册：如果用户存在返回提示信息，不存在时添加用户。
登录：注册成功后登录，跳转至个人信息页面。

html

<body>
    <div class="index-container">
        <nav>
            <div class="header">
                <span>产品管理员</span>
                <ul>
                    <li>
                        <a href="/">
                            <span class="iconfont">&#xeb94;</span>
                            <span>仪表板</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont">&#xe647;</span>
                            <span>报告
                                <i class="iconfont icon">&#xe62c;</i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont">&#xf0179;</span>
                            <span>制品</span>
                        </a>
                    </li>
                    <li>
                        <a href="/personal">
                            <span class="iconfont">&#xe678;</span>
                            <span>账号</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont">&#xe706;</span>
                            <span>设置</span>
                        </a>

                    </li>
                </ul>
                <div class="header-rigth">
                    <span>管理员，退出</span>
                </div>
            </div>
        </nav>
    </div>
    <div class="register">
        <div class="register_continer">
            <div class="register_title">
                <h4>
                    <b>欢迎来到仪表板，登录</b>
                </h4>
            </div>
            <div class="username">
                <p>用户名</p>
                <input type="text" name="username" id="username">
                <p>密码</p>
                <input type="text" name="password" id="password">
                <button type="submit" id="login">
                    <b>登录</b>
                </button>
                <button type="submit" id="register">
                    <b>注册</b>
                </button>
            </div>
        </div>
    </div>
    <script src="../js/ajax.js"></script>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        let usernameVl = $('username');
        let passwordVl = $('password');

        // 注册按钮
        $('register').addEventListener('click', () => {
            ajax('/v1/post/register', {
                username: usernameVl.value,
                password: passwordVl.value
            }, function (data) {
                console.log(data);
            })
        });


        // 登录按钮
        $('login').addEventListener('click', () => {
            ajax('/v1/post/login', {
                username: usernameVl.value,
                password: passwordVl.value
            }, function (data) {
                data = JSON.parse(data);
                if (data.status === 0) {
                    location.href = data.redirect;
                } else {
                    console.log(data);
                }
            })
        })
    </script>
</body>

配置的文件

// 配置文件

module.exports = {
    port: 3004,
    database: {
        host: 'localhost',
        port: 3306,
        user: 'root',
        password: 'root',
        database: 'cms2'
    }
}

封装的ajax

// 用户登录注册的ajax
function ajax(url, data, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            callback && callback(xhr.responseText);
        }
    }
    xhr.open('POST', url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(data));
}


// 上传图片的ajax
function filePost(url, fileData, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            callback && callback(xhr.responseText);
        }
    }
    xhr.open('POST', url);
    xhr.send(fileData);
}

设置服务器

const Koa = require('koa');

const koaStatic = require('koa-static'); // 引静态文件   

const koaViews = require('koa-views'); // 动态渲染修改url路径

const path = require('path');

const requireDie = require('require-directory');

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

const bodyP = require('koa-bodyparser');

const router = new Router();

const app = new Koa();

const {port} = require('./config');

app.use(koaStatic(path.join(__dirname, './pulic')));    // 读取静态文件

app.use(koaViews(path.join(__dirname, './pulic/html'), { // 视图渲染，配合GET修改URL
    extension: 'html'
}));

app.use(bodyP());

// 自动挂载路由
requireDie(module, './routers', {visit: (modules) => {
    if(modules instanceof Router) {
        app.use(modules.routes());
    }
}});


app.listen(port, () => {
    console.log('scuess:' + port);
})

创建数据库

// 连接数据库

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);
            }
        })
    })
}

module.exports = {              // 抛出查询或添加后的数据
    find,
    insertUser
}

注册的路由文件

// post-注册-路由文件

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

const router = new Router();

const path = require('path');

const {find, insertUser} = require('../../../controller/db');  // 接收数据库传出的函数

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

    const {username, password} = ctx.request.body;

    let findRes = await find({username});  // 查找的方法

    if(findRes.length <= 0) {   // 返回一个数组，如果数组为空时
        let inser = await insertUser({username, password}); // 执行添加的函数
        console.log(inser)
        ctx.body = {
            status: 0,
            mag: '注册成功'
        }
    } else {
        ctx.body = {
            status: 1,
            mag: '用户已存在'
        }
    }
    
})

module.exports = router;

登录的路由文件


// POST-登录-路由

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

const router = new Router();

const {find} = require('../../../controller/db');

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

    const {username, password} = ctx.request.body;

    let findRes = await find({username, password});

        if(findRes.length >= 1) {
            ctx.cookies.set('userid', findRes[0].id, {
                maxAge: 100 * 1000,
                expires: new Date('2020/8/5'),
                path: '/',
                domain: 'localhost'
            });

            ctx.body = {
                status: 0,
                mag: '登录成功',
                userid: findRes[0].id,
                redirect: '/personal'
            }
        } else {
            ctx.body = {
                status: 1,
                mag: '登录失败',
            }
        }

})


module.exports = router;

整个案例有四个页面，所以会成四篇简书分享给大家，有一些封装的代码是共用的，例如：ajax、自动获取路由等。
有哪里不清楚或写错的，希望大家留言告知！~

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

推荐阅读更多精彩内容