web前端
小羊黛马
这个作者很懒,什么都没留下…
展开
-
web前端 | 博客(十三)评论功能
评论功能创建评论集合判断用户是否登录,如果用户登录,再允许用户提交评论表单在服务器端创建文章评论功能对应的路由再路由请求处理函数中接受客户端传递过来的评论信息将评论信息存储在评论集合中将页面重定向回文章详情页面在文章详情页面路由中获取文章评论信息并展示在页面中在model下新建comment.jsconst mongoose = require('mongoose');c...原创 2020-01-12 00:37:15 · 4509 阅读 · 1 评论 -
web前端 | 博客(十二)博客系统的前台展示页面
博客系统的前台展示页面在服务器端增加首页和文章详情页面对应的请求路由。将模板的公共部分抽离出来,包括模板骨架和页面公共的区域,并修改中的外链资源地址为绝对路径。在route下的home.js中,添加路由。...原创 2020-01-11 23:07:40 · 1135 阅读 · 0 评论 -
web前端 | 博客(十一)文章列表展示
文章列表展示找到文章列表请求页面的路由请求处理函数,先将所有数据查询出来,并展示在页面当中,之后再实现分页功能。在route/admin/下的article.js中,将文章集合的构造函数导入到当前文件中。并且增加代码 let articles = await Article.find({}); res.send(articles);此时,在localhost/admin/art...原创 2020-01-10 15:23:00 · 1158 阅读 · 0 评论 -
web前端 | 博客(十)文章管理功能
文章管理功能添加路由添加文章列表页面和文章编辑页面对应的路由,并在路由里添加这两个文件。事实上就是实现通过路由的方式访问这两个页面。再route文件夹下的admin.js文件夹中,建立这两个路由。由于页面渲染的请求地址都是从地址栏过来的,所以请求方式都是get。设置完成后,可以访问http://localhost/admin/article和http://localhost/admin/a...原创 2020-01-10 13:42:13 · 1033 阅读 · 0 评论 -
web前端 | 博客(九)删除用户功能
删除用户功能在点击删除按钮后,点击提交按钮时,向服务器端发送删除用户的请求,并且将要删除的用户id作为请求参数传递到服务器端。其实,删除用户的弹出框就是一个表单,要通过这个表单将删除用户的id传递到服务器端。这个表单,有一个含有用户id的隐藏域。在确认删除框中添加隐藏域用以存储要删除的用户id值未删除按钮添加自定义属性用以存储想要删除的用户id值为删除按钮添加点击事件,再点击事件处理函...原创 2020-01-06 21:28:53 · 1337 阅读 · 0 评论 -
web前端 | 博客(八)用户信息修改功能
用户信息修改功能当点击用户后面的按钮时,要跳转到用户信息修改页面。而修改和添加实际上是同一个页面。要区分跳转后是添加操作还是修改操作,在于携带的参数。如果是添加操作,那就直接跳转过去;如果是修改操作,那就携带当前用户的di,通过get的方式传递过去。这样,在跳转到用户编辑页面的时候,可以通过get方式中是否有id参数,来区分到底是添加操作还是修改操作。如果是修改操作,还需要将要修改的用户信息...原创 2020-01-06 20:50:33 · 10001 阅读 · 0 评论 -
web前端 | 博客(七)数据分页
数据分页当数据库中数据非常多时,如果不分页,数据库查询的时间会比较长,用户等待的时间也会比较长,因此数据需要分批次展示。这时就需要用到数据分页功能。分页的本质,就是在查询数据库时,通过指定查询条件,让数据库返回我们需要展示的数据。分页功能的核心要素:当前页。用户通过点击上一页或者下一页或者页码产生,客户端通过get参数方式传递到服务器端。总页数。根据总页数判断当前页是否是最后一页,根据...原创 2020-01-06 19:14:28 · 284 阅读 · 0 评论 -
web前端 | 博客(六)展示用户信息
展示用户信息从数据库中获取数据当访问用户列表页面时,要先在用户列表页面对应的路由处理函数中,将所有的用户信息从数据库中查出来。查询出来后,再使用res.render()渲染用户列表页面模板,并且将查询数据传递到模板中展示出来。此后,再去做文章列表的分页功能。route文件夹下的admin.js中,有一个创建用户列表的路由,在它所对应的路由处理函数文件userPage.js中,从数据库查询...原创 2020-01-06 18:07:21 · 1593 阅读 · 0 评论 -
web前端 | 博客(五)新增用户功能
新增用户功能为新增用户按钮添加链接,点击新增用户按钮切换到新增用户界面在服务器端添加一个链接对应路由,在路由处理函数中渲染新增用户模板在新增用户界面,需要为新增用户表单指定请求地址,当点击提交按钮时,将表单提交到这个地址;还需要为表单指定请求方式(Post,属于向数据库插入数据的操作);还需要为每一个表单项指定name属性,在服务器端通过name属性接收客户端传递过来的请求参数。当前客户端...原创 2020-01-06 17:37:15 · 1483 阅读 · 0 评论 -
web前端 | 博客(四)优化代码
优化代码分离app.js中的功能代码由于只想在app.js中引入一些模块,做一些基础的配置工作,并不想把实现具体功能的代码写在这个文件中,所以要把功能代码从app.js文件中分离出去。例如,把app.use('/admin', 请求处理函数)中app.use()保留,而把第二个参数,即请求处理函数,分离出去。在blog文件夹下新建一个middleware的文件夹,再在这个文件夹之下新建一个...原创 2020-01-05 15:05:15 · 128 阅读 · 0 评论 -
web前端 | 博客(三)登录拦截和重定向
与登陆与否相关的界面登陆成功后的重定向登陆后跳转页面,需要实现页面的重定向,在express中实现重定向的方法是res.redirect('重定向的地址'),把密码比对成功后的逻辑修改为 //将用户名存储在请求对象中 req.session.username = user.username; //重定向到用户列表页面 ...原创 2020-01-05 14:16:38 · 995 阅读 · 0 评论 -
web前端 | 博客(二)登录功能
实现登录功能创建用户集合,初始化用户连接数据库创建用户集合初始化用户为登录表单项设置请求地址,请求方式(GET方法会将参数放到地址栏中,不隐蔽,要用POST方法,它将参数放到消息体中,比较隐蔽)以及表单name属性当用户点击登录按钮时,客户端验证用户是否填写了登录表单如果其中一项没有输入,则阻止表单提交服务器端请求接收参数,验证用户是否填写了登录表单(有时候客户端的js代码...原创 2020-01-05 12:35:43 · 1182 阅读 · 1 评论 -
web前端 | 博客(一)项目搭建
项目搭建新建文件publicviewsmodelroute然后npm init -y安装所需要的模块npm install express mongoose art-template express-art-template添加app.js使用express构建服务器app.js是项目入口文件const express = require('express');//创建网...原创 2020-01-04 10:52:01 · 339 阅读 · 0 评论