某网解释
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"></span>
<span>仪表板</span>
</a>
</li>
<li>
<a href="#">
<span class="iconfont"></span>
<span>报告
<i class="iconfont icon"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="iconfont">󰅹</span>
<span>制品</span>
</a>
</li>
<li>
<a href="/personal">
<span class="iconfont"></span>
<span>账号</span>
</a>
</li>
<li>
<a href="#">
<span class="iconfont"></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、自动获取路由等。
有哪里不清楚或写错的，希望大家留言告知！~
网友评论