ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

博客项目实现笔记

2021-01-18 16:00:24  阅读:132  来源: 互联网

标签:文件 项目 admin 用户 博客 js 笔记 表单 页面


博客项目实现


项目坏境搭建

多人博客管理系统

案例初始化

  1. 建立项目所需文件夹
  • public静态资源
  • model数据库操作
  • route路由
  • views模板
  1. 初始化项目描述文件
  • npm init -y
  1. 下载项目所需第三方模块
  • npm install express mongoose art-template express-art-template
  1. 创建网站服务器
    在这里插入图片描述
    创建文件夹步骤,新建public model route views文件夹 ——>在命令行在day06blog目录下输入npm init -y生成.json文件——>下载第三方模块npm install express mongoose art-template express-art-template——>在day06blog文件夹下创建app.js文件(项目入口文件)——>使用express创建服务器
    但是遇到80端口被占用解决方法1
    80端口被占用解决方法2
    自己写的方法

创建服务器完了之后 ——>构建模块化路由,在route文件夹下面创建home.js admin.js两个文件,在app.js中写入下面代码
在这里插入图片描述
完了之后把静态资源复制到public文件夹中,然后回到app.js文件中开放静态资源
在这里插入图片描述
把public文件夹中的admin home下面的html文件剪切到views文件夹下的admin home文件下,并将后缀html更改为art;
从admin 下面的log开始做
在这里插入图片描述
需要在app.js做配置可以参考文章做三件事
在这里插入图片描述
在模板资源中的外链资源相对路径是相对请求路径的,所以我们要改为绝对路径,加/admin/,因为public就是我们设置的绝对路径下面的路径,在开放静态资源的时候有些;
在这里插入图片描述
所以需要更改为绝对路径
观察静态页面,发现头部和侧边栏一样的文件,所以需要代码抽离;在view下面的admin新建一个common文件夹,然后在common文件夹里面新建header.art aside.art文件;
子模板相对路径就是相对当前路径,模板路径是模板引擎解析所以用相对路径{{include './common/header.art'}}
71
在common文件夹下面放置layout文件,layout文件放置模板骨架代码;
在这里插入图片描述

功能实现

登录

能登录的用户一定是注册过的,也就是数据库有数据的;所以呢,第一件事是要

  1. 创建用户集合 ,初始化用户
  • 连接数据库
  • 创建用户集合
  • 初始化用户

在model文件夹下面建立connect.js文件写好连接数据库代码之后要在app.js里面引入
在这里插入图片描述
连接完了之后开始设定集合规则,在common——>user.js里面创建用户集合规则
在这里插入图片描述
在这里插入图片描述
在user.js创建用户数据测试,在数据库中看数据是否存在

  1. 为登录表单项设置请求地址、请求方式以及表单项name属性
    用户登录需要将表单提交到服务器,登录表单提交方式用post,请求参数放在请求体中传递而get方式把参数放在了地址中传递,所以post提交方式更加隐蔽;
  2. 用户点击登录按钮,客户端验证用户是否填写了登录表单
  3. 如果其中有一项没有输入就会阻止提交;
  4. 服务器端接收请求参数,验证用户是否填写了登录表单;
  5. 如果一种一项没有输入,为客户端做出响应,阻止程序向下执行;
  6. 根据邮箱地址查询用户信息
  7. 用户不存在,为客户端做出响应,阻止程序向下执行;
  8. 如果用户存在,将用户名和密码进行比对;
  9. 比对成功就登录成功,否则失败;
    在login.art文件中添加
    在这里插入图片描述
    结果为:
    在这里插入图片描述
    但是我们想要对象的形式,所以需要把上面图片的数组转换成对象,代码如下:
    在这里插入图片描述
    转换结果如下:
    在这里插入图片描述
    以上过程即如何把数组转换为对象,需要把这个方法变为公共方法,所以把这段函数剪切到public——>admin——>js——>common.js
    并且在layout.js文件中引入这个js文件
    在路由文件admin.js中写获取post请求参数的代码,因为要做二次验证,前面的jQuery提供的获取表单数据得到数组的形式是客户端第一次验证不是100%正确的,所以需要获取post请求参数进行二次验证;
    在这里插入图片描述
    根据邮箱地址查询用户信息,邮箱地址是唯一的;
    引入User对象,使用findOne查询email信息是否匹配,匹配的话use就是对象,否则为空
    在这里插入图片描述

数据库密码加密;在数据库中给密码加密

使用哈希算法加密,嘿嘿哈希算法来了吗??!!!
哈希加密是单程加密方式1234=>abcd 为了防止黑客的暴力破解 (具体怎么破解我也不晓得),在加密的密码中加入随机字符串可以增加密码被破解的难度
第三方模块 bcrypt
在这里插入图片描述
我们需要下载一些软件如下:
在这里插入图片描述

python下载地址
安装windows-build-tools插件报错参考
安装完成后重新以管理员身份打开powershell npm install bcrypt
在这里插入图片描述
在控制台中执行生成的随机字符串为:
在这里插入图片描述
加密代码

async function run() {
    const salt = await bcrypt.genSalt(10);
    // console.log(salt);
    // 对密码进行加密
    // 1.第一个值是加密明文
    // 2.随机字符串
    // 返回值是加密后的密码
    const result = await bcrypt.hash('123456', salt);
    console.log(salt);
    console.log(result);
}
run();

给明文密码加密;
在这里插入图片描述
加密结果
在这里插入图片描述
出现MongoDB弃用警告 解决方案
在这里插入图片描述
如果出现上面的错误是因为我们重复插入数据了;解决方案
http的无状态协议,响应完客户端和服务端就没了联系,所以需要客户端和服务端建立联系

cookie 与session

cookie:浏览器在电脑硬盘中开辟的一块空间,主要供服务器端存储数据。
cookie中的数据是以域名的形式进行区分的;
cookie中的数据是有过期事件的,超过时间数据会被浏览器自动删除;
cookie中的数据会随着请求被自动发送到服务器端;
在这里插入图片描述
session:实际上就是一个对象,存储在服务器端的内存中,在session对象中也可以 存储多条数据,每一条数据都有一个sessionid作为唯一标识;
cookie在客户端 session在服务器端;
在这里插入图片描述
session使用:
首先在app文件中写入

app.use(session({ secret: 'secret key' }));

然后在admin文件中的验证用户代码段添加代码:req.session.username = user.username;

在这里插入图片描述

在列表页面显示
在这里插入图片描述
使用重定向到用户列表页面,express下面提供了一个方法redirect

// res.send('登录成功'); 使用重定向到用户列表页面
            res.redirect('/admin/user');

点击登录按钮就会跳转到用户列表页面
为了在用户列表页面能够显示用户名我们使用:req.app.locals.userInfo = user;,把用户信息放到locals下面,然后再views ——>admin——>common——>header.art里面显示用户名的地方改成
在这里插入图片描述
登录拦截:用户没用登录的情况,用户看不到博客页面

  • 判断用户访问的是否是登录页面
  • 判断用户登录状态
  • 用户登录的 请求放行
  • 用户没有登录请求重定向到的登陆页面

在app.js文件中增加登录拦截代码
在这里插入图片描述
87

新增用户

  1. 为用户列表页面的新增用户按钮添加链接
  2. 添加一个链接对应的路由,在路由处理函数中渲染新增用户模板;
  3. 为新增用户表单指定请求地址,请求方式,为表单项添加name属性;
  4. 增加实现添加用户的功能路由;
  5. 接收到客户端传递过来的请求参数;
  6. 对请求参数格式验证
  7. 验证邮件地址是否唯一
  8. 对密码加密
  9. 将用户信息添加到数据库
  10. 重定向页面到用户列表也买你

找到views——>admin——>user.art
在这里插入图片描述
在route——>admin.js为链接添加对应的路由了啦
在这里插入图片描述
在route——>admin.js里面渲染页面uer-edit
在这里插入图片描述
为增加用户添加路由功能在admin.js文件中
在这里插入图片描述
再在admin——>user-edit-fn中接收post请求参数,使用req.body

res.send(req.body);

对请求参数格式验证JOi

JavaScript 对象的规则描述语言和验证器;规则如下
在这里插入图片描述
JOi提供了一些其他的规则可根据需要查询官方文档。
在这里插入图片描述
但是在执行过程中报错了
在这里插入图片描述
解决方法参考
在当前目录下下载新版joi 即可 npm install joi@14.3.1
在这里插入图片描述
使用ex.message使得错误提示变得清晰简洁
在这里插入图片描述
在这里插入图片描述
捕获异步函数的异常使用

try{
正常
}catch{
不正常就这些这里的代码
}

请求参数的格式验证
在这里插入图片描述
在user-edit.js文件中获取错误信息
在这里插入图片描述
在这里插入图片描述
验证email是唯一的之后对密码进行加密操作
在这里插入图片描述
JSON.stringify()将数据对象类型转换为字符串数据类型代码优化使用得到的
对于user-edit-fn里面有好几句重定向语句,所以将其进行优化
在app.js里面使用next方法,但是next方法只能传递一个字符串参数,所以需要把重定向的内容从对象形式转换为字符串,这个时候就使用到了JSON.stringify方法
在这里插入图片描述
在app.js里面的代码为:
在这里插入图片描述

项目功能实现

将用户信息展示在user页面

  1. 将用户信息从数据库中查询出来
    找到用户列表路由
    在这里插入图片描述
    在这个userPage.js文件中写处理代码
    在这里插入图片描述
    user数组为
    在这里插入图片描述
    数组里面是对象要把这个对象渲染到user.art页面当中,views——>admin——>user.art
    在这里插入图片描述
    在这里插入图片描述
    93

数据分页显示

数据库数据很多的时候需要分页显示功能,
分页功能核心要素:

  1. 当前页,通过点击上一页或者下一页产生,客户端通过get参数方式 传递到服务器端;
  2. 总页数,根据页数判断当前页是否为最后一页、根据判断结果做响应操作;总页数=总数居/一页显示的数据,采用向上取整
//接受客户端传递过来的当前页参数 客户端通过get参数方式将请求参数传递过来
    let page = req.query.page;
    //每一页显示的数据条数
    let pagesize = 10;
    //查询用户数据总数
    let count = await User.countDocuments({});
    //总页数
    let total = Math.ceil(count / pagesize);

94
limit(2);限制查询数量 传入每页显示的数据数量
skip(1);skip 跳过多少条数据 传入显示数据的开始位置
在这里插入图片描述
让翻页的按钮显示或者隐藏
在这里插入图片描述

用户信息修改功能

需要区分添加操作还是修改操作,修改操作需要传入id参数,将用户信息查询显示
对于同一个页面只是某些地方细节上的不同,像修改和添加实际上是同一个页面,这样的话可以通过,通过id来判断是修改操作呢还是添加操作,有id则是修改操作;没有则是添加操作;
在这里插入图片描述
504
用户信息修改,
1.将要修改的用户ID传递到服务器端;
2.建立用户信息修改功能对应的路由;
3. 接收客户端表单传递过来的请求参数;
4. 根据id查询用户信息,并将客户端传递过来的密码和数据库中的密码进行比对;
5. 比对失败,对客户端做出响应
6. 比对成功,将用户信息更新到数据库中;

为了实现1.首先需要找到修改表单提交地址,从地址栏中获取id值?

创建修改信息的路由
在这里插入图片描述
获取修改表单传递的参数
在这里插入图片描述
遇到的问题:
在异步函数里面直接写如下函数没有错误处理会报错
在这里插入图片描述
报错情况:
在这里插入图片描述
所以页面一直处于等待请求状态??
使用req.query获取id出现错误???
在这里插入图片描述

解决方法:
方法参考1
在这里插入图片描述
更改了上面这个错误之后连带哪个promise的错误也没有了;

用户信息删除

  1. 在确认删除框中添加隐藏域或用以存储要删除用户的ID值
    在这里插入图片描述

  2. 为删除按钮添加自定义属性用以存储要删除用户的ID的值
    在这里插入图片描述

  3. 为删除按钮添加点击事件,在点击事件处理函数中获取自定义属性中存储的ID值存储在表单的隐藏域中
    在这里插入图片描述

  4. 为表单添加提交地址以及提交方式
    在这里插入图片描述

  5. 在服务器建立删除功能路由
    在这里插入图片描述

  6. 接收客户端传递过来的id参数

req.query.id
  1. 根据id删除用户
    在这里插入图片描述

文章管理

创建文章路由;
创建文章集合;
在这里插入图片描述
510完成

  1. 同样的先是给article页面中的发布按钮添加链接;
    在这里插入图片描述

  2. 给article-edit页面的form表单添加提交方式 提交地址 name属性等,其中name属性要与article集合规则里面的一致;
    enctype指定表单数据的编码类型;默认值:application/x-www-form-urlencoded
    multipart/form-data
    在这里插入图片描述

  3. 实现文章添加功能路由;在admin.js文件中增加
    在这里插入图片描述
    怎么获得表单传过来的数据呢 之前app.js里面引入的bodyPaser只能处理普通数据,不能处理二进制数据,这里需要上传文件(用的二进制处理方式),所以需要对二进制数据做处理。
    用formidable 第三方模块,支持get请求参数,post请求参数、文件上传;
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在上传文件处理模块出现了问题 问题如下:
    在这里插入图片描述
    解决方法
    搞半天原来是自己忘记指定表单的编码方式了,article-edit文件中的form表单,需要添加enctype属性指定编码方式为二进制;
    在这里插入图片描述

  4. 通过formidable可以获得表单的数据,现在考虑作者,因为作者是和用户关联的;
    通过给作者这个表单赋值value="{{@userInfo._id}}"
    在这里插入图片描述

  5. 文件读取FileReader
    为了让用户选择封面图片以后,图片直接显示在页面中;
    图片预览功能;

//选择文件上传控件
    var file = document.querySelector('#file');
    var preview = document.querySelector('#preview');

    //用户选择完文件以后
    file.onchange = function() {
        //1.创建文件读取对象
        var reader = new FileReader();
        // 2.读取文件 获取用户选择的文件 [0]表示选择的第一个文件
        reader.readAsDataURL(this.files[0]);
        //3.监听onload事件
        reader.onload = function() {
            // 将文件读取结果显示在页面中
            preview.src = reader.result;
        }
    }

选择文件res.send(files);以后
在这里插入图片描述
获取路径:files.cover.path.split('public')[1]
获取表单数据:
在这里插入图片描述
获取表单数据以后需要将数据重定向到文章列表页面

//将页面重定向到文章列表页面
        res.redirect('/admin/article');

查询作者的详细信息:
在这里插入图片描述
得到author详细信息
在这里插入图片描述
为了取到作者的名字的时候又报错了:
为了查询author下面的username
在这里插入图片描述
但是这个时候使用重定向出错了,关联查询报错??

 res.render('admin/article.art', {
        articles: articles,
    });

错误信息:
在这里插入图片描述
解决方法
521

对发布时间进行格式化

  1. 使用 npm install dateformat下载dateformat工具
  2. app.js文件中导入dateformat第三方模块
//导入dateformat第三方模块
const dateFormat = require('dateformat');
  1. 导入dateformat第三方模板并且向模板内部导入dateFormate变量
//导入dateformat第三方模块
const dateFormat = require('dateformat');
//向模板内部导入dateFormate变量
template.defaults.imports.dateFormat = dateFormat;
  1. 在article.art模板文件中用dateformat对日期进行格式化
 <td>{{dateFormat($value.publishDate,'yyyy-mm-dd')}}</td>

格式化后的结果
在这里插入图片描述

分页功能

使用数据分页mongoose-sex-page

  1. 使用mongoose-sex-page,在article.art模板中也要进行更改
//page指定当前页
    // size指定每页显示的数据条数
    // display指定客户端显示的页码数量
    // 查询所有文章数据  exec()向数据库发送查询请求
    let articles = await pagination(Article).find().page(1).size(2).display(3).populate('author').exec();

下面的articles2需要更改为articles2.records, articles2对应的是article.js里面的articles2:articles2中前面那个;
在这里插入图片描述
display是指定的页码显示数量,display(3)表示一页显示3页的按钮

 {{each articles2.display}}
            <li><a href="/admin/article?page={{$value}}">{{$value}}</a></li>
 {{/each}}

向上向下翻页功能

  1. 向上翻页 如果页面articles2.page>1就隐藏掉li
{{if articles2.page>1}}
            <li>
                <a href="/admin/article?page={{articles2.page-1}}">
                    <span>&laquo;</span>
                </a>
            </li> {{/if}}
  1. 向下翻页articles2.pages>articles.page, art模板不使用<吗?会被当作<>解析??因为我把我的art文件设置用html去解析了
<!-- 向下翻页 -->
            {{if articles2.pages>articles2.page}}
            <li>
                <a href="/admin/article?page={{articles2.page-0+1}}">
                    <span>&raquo;</span>
                </a>
            </li>
            {{/if}}
            <!-- 向下翻页  -->

mogoDB数据库添加账号

为mogoDB数据库添加登录账号,普通账号和超级账号;
在这里插入图片描述
在这里插入图片描述

  1. 以管理员身份运行power shell 输入mogo 回车
  2. 输入show dbs 查看有哪些数据库
  3. 使用use admin 然后db.createUser({user:'root',pwd:'root',roles:['root']})
    其中db.createUser传入的参数是一个对象,user,pwd ,roles
    在这里插入图片描述
  4. 创建完admin之后 输入use blog创建普通用户db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']})
    创建成功
    在这里插入图片描述
  5. 创建普通用户之后,停止MongoDB服务;net stop mongodb再使用移除mongodb
  6. 创建mongodb服务 指定日志目录和数据目录;找到自己 的MongoDB安装路径:mongod --logpath='D:\soft\MongoDB\log\mongod.log' --dbpath='D:\soft\MongoDB\data' --install --auth
    看到下面的服务正在启动证明安装成功
    在这里插入图片描述
    这个时候虽然服务已经启动但是还不能操作数据库,需要使用账号登录对数据库操作;
    如下图所示需要对数据库链接代码做改进
    在这里插入图片描述

总结

标签:文件,项目,admin,用户,博客,js,笔记,表单,页面
来源: https://blog.csdn.net/qq_38294099/article/details/112198486

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有