技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-4.登陆的前端vue-router路由验证(导航守卫)
上篇文章我们发现有些不使用任何接口的页面,在不登陆状态下是可以进行访问的,所以本篇文章解决一下这个问题。1.使用导航守卫导航守卫是在路由定义之后,进行使用之前进行的相关函数操作。类似中间件,可以说实际上他就是一个钩子函数的中间件。// 导航守卫 router.beforeEach((to, from, next) => { // 打印to,查看内容 console.log(to) ...
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-3.登陆的token验证(校验登录)
token验证的实现方式很简单,只需要在所有后端接口中添加一个验证是否存在token的中间件即可,接口的访问过程是调用→运行→返回数据。所以我们在接口调用之后、运行之前的位置加一个验证token的函数作为接口的中间件,从而验证到非登录人员,将其页面跳转到登陆页面即可。1.在server端获取admin端sessionStorage(或localStorage)存储的token我们要通过将sess....
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-2.管理员登录
上篇文章使用了bcryptjs对密码进行了加密,既然加密后的密码是不可逆的,那么保存后的密文又如何被验证识别呢?仍然使用bcryptjs,其中的compareSync来比较密码和数据库的密文。1.制作登陆页面登陆页面不使用Main.vue带有左侧菜单的布局,所以与Main.vue的路由链接“/”同级。Login.vue:<template> <div class="lo...
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
网站的必备功能:用户登录。用户登录功能是网站安全的一大重点,网站做的再好看,再完善,如果没有一个安全的管理员通道,都算不上一个成功的网站。今天起的几篇文章对用户登录进行专门学习。本篇文章我们将管理员模块实现。1.管理员模块的实现我们使用了CRUD通用接口,我们不需要对常用接口进行编辑,所以每个数据表的模型是我们开发一个模块时的第一步。模型Admin.js,只包括用户名密码即可:主页面Main.v....
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-11.动态添加分栏上传多组数据
例如有些时候需要上传多张图片,但是并不确定留下几个图片位,这是我们就想手动添加图片位,从而实现自定义数量图片的上传。我们以广告上传为例,上传多个广告。1.仿照分类组件编写广告位模块AdSet.vue:<template> <div> <h1>{{id ? '编辑' : '创建'}}广告位</h1> <e...
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-10.vue的富文本编辑器(vue2-editor)
文章的发布功能中,我们希望像写文档一样发布一整篇带标题、分段、加粗等效果的文章,而不是单纯的一段文本,这时就需要用到富文本编辑器。富文本编辑器有很多版本,他们样式不同,使用方法不同。本篇这里我们在npm下载并使用vue相关的富文本编辑器:vue2-editor。1.安装vue2-editor网址:https://www.npmjs.com/package/vue2-editor我们在admin端....
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-9.图片上传
1.根据文章模块实现流程制作出技能模块SkillSet.vue:<template> <div> <h1>{{id ? '编辑' : '创建'}}技能</h1> <el-form label-width="80px" style="margin-top:20px;" @submit.native.pre...
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-8.server端使用通用CRUD接口
1.什么是CRUDCRUD是指在做计算处理时的增加(Create)、检索(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。CRUD主要被用在描述软件系统中数据库或者持久层的基本操作功能。目的是我们将常用的增、删、改、查操作封装在一套接口组件中,在多个功能中重复调用这一套接口组件,从而使代码更精简,同时提升开发效率。2.在本项目中的接口优化实现方法说明我们根据已....
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-7.mongodb数据库关联多个分类(关联多个数据)
技能学习:学习使用golang(gin框架) + vue.js,开发前端全栈网站-1.工具和本地环境技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-2.启动项目技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-3.element-ui和vue-router路由的安装和使用技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-4.使用axi....
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-6.mongodb数据库无限层级的数据关联(子分类)
现在我们已经做出了分类的增删改查功能,并且将设计与开发作为一级分类,下面我们要为一级分类添加二级分类。如平面设计、3D设计为二级分类关联到设计分类中,将网站开发、小程序开发归属到开发分类中。1.更改新建分类页面CategorySet.vue设置上级分类parent,位于分类名之上:<el-form-item label="上级分类"> <el-select v-mode...
本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。
node.js更多学习相关
node.js您可能感兴趣
- node.js model
- node.js包管理
- node.js工具
- node.js算法
- node.js操作指南
- node.js导入
- node.js MongoDB
- node.js install
- node.js库
- node.js NPM
- node.js安装
- Node.js开发
- node.js模块
- node.js js
- node.js express
- node.js版本
- Node.js应用
- node.js服务器
- node.js构建
- node.js项目
- node.js报错
- node.js框架
- node.js节点
- node.js前端
- node.js环境
- node.js部署
- node.js配置
- node.js MySQL
- node.js文件
- node.js笔记
开发与运维
集结各类场景实战经验,助你开发运维畅行无忧
+关注