express+mongodb+vue实现增删改查-全栈之路2.0

Github项目地址

效果图

登录页

查询

新增

修改

删除

详情页

技术栈

vue axios vue-router express mongo element iconfont scss

前言

半年前写过一个express+mongodb+vue的项目，其中大体的给你们展现了从零构建一个先后台项目所须要的技术点和思路，以及在开发过程当中遇到的一些坑。

以后收到一些小伙伴的私信包括github上提出的issue。总结一下就是一下如下两点。

1. 项目启动报错的问题
2. 但愿案例能够更加的丰富（分页、条件查询）

其中项目报错404的问题，是由于该项目是一个先后端项目，不只仅须要经过npm run dev启动前端，还须要经过终端node app.js启动后台。这里你们必定要注意！

本次版本是以前版本的升级版，项目中对部分代码作了必定的优化，也增长了一些新的模块和功能点，使得项目更加完善，大体有如下模块。

新增模块

• 登录页面
• 条件查询
• 分页查询
• 本地缓存
• 图标使用
• scss使用
• ......

提示

本篇主要是围绕本次版本新增的一些技术点展开陈述。不会过多的给你们讲解实现整个先后端项目的思路。若是你对整个项目的搭建思路还不是很明确的话，建议您先去阅读上一个版本express+mongodb+vue。

强烈建议去个人github上，将项目下载到本地，启动项目后，顺着本文的思路与我进行灵魂深处的探讨，若是有任何问题的话，欢迎私信我！

正文

封装经常使用工具类函数

由于在真实的项目中，咱们须要频繁的用到ajax获取数据，以前的版本，是采用vue-resource完成的，可是因为官方再也不维护，因此本次版本中采用官方建议使用的axios。咱们能够方便实现自定义axios实例，拦截器，请求添加字段等功能。

在src目录下面，有个utils文件夹，里面用来存放一些工具类函数，这些工具类函数应该是具备通用性的。也就是在不一样的组件页面中均可以引用。实现一次定义，屡次使用的目的。具体的工具类函数分类大体有如下一些点。

• axios实例
• 经常使用正则校验函数
• cookie、sessionStorage添加、获取、删除方法
• ......

总之从事开发的同窗们必定要有简化业务逻辑的思惟，常常用到的模块，独立出来。

Tips:文件命名和函数命名尽可能标准一点，不要想起啥就是啥，尽可能用对应的英文去命名，英文很差的去百度呗，磨刀不误砍柴工！

登录页面的那点事

合理的登录逻辑应该是如下两点:

1. 用户在查询英雄列表以前，首先须要登陆，不然重定向到登陆页面
2. 对于已经登陆的用户，能够直接访问列表页

为了实现上述逻辑，咱们可使用vue-router中提供的前置守卫导航beforeEach配合路由重定向实现。具体代码参考permission.js文件。

Tips:这里要提醒如下你们路由导航中的next使用必定要注意，其中传参和不传参是有不一样的效果的。我在开发的过程当中，就由于这个，遇到了无限循环的坑。

更加丰富的图标选择

本项目使用的前端框架element中虽然为咱们提供了一些经常使用的图标，可是在真实的开发场景中，是没法知足的。若是你还在用图片实现icon的话，我只想送你两个字——牛逼！

阿里巴巴iconfont图标库，能够帮助咱们解决框架提供图标不完善的问题，其中使用方法有三种，它们之间的利和弊可自行前往了解。本项目中使用的是unicode方式。

咱们在开发一个项目以前，可在阿里巴巴iconfont上新建一个项目，而后去图标库中查找对应的图标，添加到项目中。再下载到本地，引入项目中便可。

项目src目录下面的assets文件夹中，主要存放一些静态资源，好比css image icon等。

而后在main.js文件中引入对应图标的css文件。

#main.js

import "./assets/icon/iconfont.css"
复制代码

Tips:其中对于图标库的前缀命名和图标的命名必定要规范，不然后期可能会遇到很大的麻烦。 重要的事说三遍： 命名规范！ 命名规范！ 命名规范！

scss的使用

以前的版本中，关于样式是用css进行命名的，这样就会出现如下这种情形...

.container{
    width:...
    margin:...
}

.container header{
    padding:...
    border-radius:...
    box-shadow:...
}
.container header .title{
    background:...
    color:...
    font-size:...
}
复制代码

这种方式虽然没有问题，可是书写起来及其蛋疼，并且一旦形如这种的代码多了，代码看起来也会很不美观。

为了使性能更加好，逼格更加高，代码更加美观，因此我去学了下如何使用scss，大体分为如下三步骤：

第一步：cmd终端或者**vscode**终端输入：
npm  install sass-loader --save-dev
npm install node-sass --sava-dev

第二步：在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
}

第三步： 使用scss时候在所在的style样式标签上添加lang=”scss”便可应用对应的语法，不然报错
复制代码

再用scss语法去书写上面的css规则，则变成如下这种格式:

.container{
    width:...
    margin:...
        header:{
            padding:...
            border-radius:...
            box-shadow:...
                .title{
                    background:...
                    color:...
                    font-size:...
                }
        }
}
复制代码

两种风格的区别和优劣，我相信不用多说，你也应该明白了。

Tips:css的预处理器有less、sass、scss等，它们之间有各自的特色和风格，可是万变不离其宗，你要作的就是打好css基本功。

sessionStorage实现本地缓存

就拿本案例的实际场景来讲吧，当用户从列表页跳转到详情页面时，再返回列表页面时，列表页面的查询条件和查询结果应该还存在那里。而不是须要用户再次输入查询条件进行二次查询，这样作的好处主要有如下两点：

更加符合实际使用场景，减小用户使用成本

毕竟前端工程师是要用本身最大的技术能力让用户体验更佳卓越！

这里个人思路是：

1.用户输入查询条件后，进行列表查询

2.用户点击某条数据的相信按钮，跳转到详情页面（这时咱们要去保存用户的查询条件和当前的页数）

3.用户从详情页返回列表页（在mounted钩子函数中，判断缓存中是否存在缓存数据，若是存在的话，则用缓存数据去进行查询）

注意用户每次进行查询后，咱们须要将缓存给删除，不然用户可能刷新页面后缓存仍然存在，这里咱们将添加缓存的时机选在（用户点击详情按钮的那一刻）
复制代码

大体代码:

#List.vue组件中

#点击详情按钮函数
toDetail(id){
    var queryParmas = {
        ...
        ...
        ...
    };
    //在本地缓存中存储查询条件
    sessionStorage.queryParmas = JSON.stringify(queryParmas);
    
}

#查询函数
search(){
    ...
    ...
    ...
    //每次查询数据后，删除缓存
    sessionStorage.removeItem("queryParmas");
}

#mounted钩子函数
mounted(){
    //进入页面判断是否存在缓存，若是有缓存，直接查询
    var sessionObj = sessionStorage.getItem("queryParmas");
    if(sessionObj){
        //取出缓存数据，包括上次查询条件和上次查询页数，进行查询
    }
}
复制代码

Tips:element中分页的使用中会存在一些坑，当使用上述缓存数据进行查询时，可能会出现页码的一些bug。这里我也没有细找缘由，可是经过使用vue中的$nextTick方法控制分页的显隐，能够解决这个bug。具体的有兴趣能够了解下。

##总结

本篇文章主要是围绕一些功能点和方案实现进行展开，同时也提出了一些我的建议。细心的你必定会发现，其实我提炼出的不少点，均可以围绕前端性能优化进行展开。其中里面还有不少好玩的，包括http 浏览器渲染机制 重排、重绘 函数节流、防抖等须要咱们去学习，这些会鞭策着咱们，不断地去优化本身的程序。最终写出更加优质的代码！

最后的祝福

天青色等烟雨，而我在等你！动动大家的☝️️️，点个赞再走！

2019即将到来，愿全部人牛逼！在这给大家🙏个早年！

原创不易，且👣且珍惜！

Github传送门

☝️☝️☝️☝️☝️

ruiwei88888@163.com

☝️☝️☝️☝️☝️有任何问题，欢迎邮箱私信我！