Vue+Koa+Mongodb 小练习

2018-09-18 admin

作者: Pawn

本文首发: Pawn博客

功能: 基于vue koa mongodb进行登录,注册,留言的简单网站。

体验地址: http://demo.lcylove.cn

github: https://github.com/LiChangyi/demo1

前面的话

原因

  1. 前段时间用vue+koa+mongodb搭建了一个个人博客,因为是第一次写前后交互,发现有很多地方不是特别的完善,同时代码对于新学者来说可读性也不是很大。所以这个小练习,从一个简单的方面入手,希望能给踩过同样多坑的同路人一点启发。
  2. 在我今年年初在学习vue以及koa的时候,网上对这方面的内容,都是一个完整的项目,文件太多,观看难度太大,其次是,都对图片的上传都没怎么涉及。
  3. 我在学习部署koa和vue的项目的时候,网上的知识很零碎,这里我会归纳一下。

涉及知识点

  1. vue全家桶的使用
  2. 在vue中使用axios,并配置它
  3. koa与mongoose的基本使用
  4. jsonwebtoken的使用以及前后台鉴定登录

注: 本文面对刚学vue或者koa不久或者想了解一个简单的前后台交互的问题的同学,涉及基础。

预览

首页预览

登录预览

注册预览

感兴趣的问题

我在代码里面写了很多的注释方便阅读,这里简单说一下我个人当初学习的时候比较疑惑为问题

一些小变动

前端直接采用vue-cli进行一个基础的项目骨架。然后由于是一个简单的项目,所以页面就随便写一下,主要是实现功能。

因为我们在服务器上面采用的是二级域名的形式,所以需要在 config/index.js 下面的 build 项里面将 assetsPublicPath 设置成相对路径。

assetsPublicPath: ''

我们在本地开发的时候需要进行调试,需要用到代理,不然就只有设置后台允许跨域。所以在 config/index.js 下面的 dev 对象里面添加:

proxyTable: {
    '/api':{  // 只代理 /api url下的请求
        target: "http://localhost:7778", // 后台服务器的地址
        changeOrigin: true
    }
}

如何让服务器端记住你(jsonwebtoken)

HTTP请求是无状态的,意思是他记不住你这个人是谁,他只知道你要什么资源,然后给你什么。但是实际问题是当用户给我们寻求资源的时候,我们应该要考虑应该给他这个资源。对这个人的身份做一个判别,然后在做决定给他什么样的资源。

所以针对每个用户我们需要用一个唯一的标识来确定他,这就是为什么需要登录才能操作,登录的目的就是让服务端产生一个认识你的标识,以后你的每次请求都要带上去。

在前后台不分离的时候,服务器端往往会在客服端放一个SessionId 或者一个cookie的东西。但是现在前后端分离以后,我们登录成功,服务器端应该也会给我们这样一个唯一标识身份的字符串。然后我们在每次请求数据的时候带上它。这里我服务器端采用的是jsonwebtoken 来制造这个唯一标识,代码详情 => server/utils/token.js 然后我写了一个中间件check_token 来判断如果这个资源需要登录,就会去检查他的token如果token不对那么就直接抛出错误。

前端拿到服务端的token后我们需要把他存放起来这里大概会有2种方式:

  1. 存在vuex 里面, 这种方式有一个弊端就是,网页一刷新vuex里面的数据就清空了。就意味着要重新登录。
  2. 存在sessionStorage里面,采用浏览器的会话存储,只有当浏览器关闭的时候才会清空数据。

这里我把2种方法结合起来,得到token的时候把他同时存放在vuex和sessionStorage里面,存放在vuex里面是为了操作方便,存放在sessionStorage是为了保持刷新页面的时候数据不丢失。在前端每次向后台请求数据的时候,带上这个token,详见代码 => client/src/axios/index.js

关于一些网上的争论:

Q :有人说,让客服端存放token不安全,或者说用sessionStorage方法来存放不安全,因为存在着csrf问题

A :没有绝对的安全,我个人了解到就是用以前的cookie或者SessionId 也存在着这样的问题。想要解决这个问题就尽量的吧网页升级成https,或者,采用服务器中转的方式,在2者之间在加入一个服务器端,把真实的token存放在中转,然后客服端与中转进行通信。

验证码的识别

验证码的生成我采用了gd-bmp 包具体用法,看server/controller/other.js 同样根据上面的介绍,http是没有状态的,我们要验证验证码的正确性,应该对每个验证码增加一个唯一的标识,然后存放在数据,当用户登录或者用户注册用到验证码的时候,把验证码和相应的验证码标识一起发往后台,然后判断验证码的正确与否。对于验证码及标识的存储,我这里为了方便就是采用mongodb来存储,但是网上很多人推荐用redis来存储。

本地图片的上传

这个问题从很久以前就很迷惑,一直不知道如何上传图片到服务器。即使h5出现了<input type="file">但是解决这个问题也是很麻烦。我个人觉得上传图片应该有2种方式:

  1. 直接用过input的onchang事件获取到的文件,来上传二进制文件。
  2. 将图片转换成base64来进行上传

我这里采用的是第二种,用base64上传图片,然后自己吧base64字符串保存进数据库,因为操作比较方便。当然你也可以在服务器端吧base64转换成二进制文件存放在服务器里面,然后把文件地址保存在数据库里面。也可以在本地直接上传二进制文件,如果你采用这个方式,那么你应该在koa里面在加入一个处理file请求的中间件。

也可以借助第三方的存储,比如我在我的博客里面写了一个接口就是直接在客服端上传文件到七牛云,然后七牛云返回给我链接。当时之所以采用这个操作是因为,小水管服务器太慢了,借助第三方加载图片会快很多。

关于项目的服务器部署

因为vue的简单,很多都只知道npm installnpm run dev 所以有很多人会有疑问,那就是我这个vue项目如何部署在服务器上面?难道是把代码上传到服务器上面来执行上面2条命令吗?

其实这个问题是由于大家只会机械式操作留下的,因为vue-cli的简单方便已经mvvm框架的厉害,我们忘记了我们写的东西本子上还是网页。所以我们需要用webpack 将我们的项目打包一下在命令行里面执行npm run build 将我们写的vue和js代码以及其他的资源文件,打包/dist里面。这里面的文件就是我们写的网页,,我们只需要吧这里面的文件上传到服务器下就可以运行了。

这里关于把打包出来的文件往往会有2方式运行:

  1. 将文件丢到server/public 文件夹下面,因为我们在server/app.js下面配置了静态文件目录,然后我们启动服务端。就可以在127.0.0.1:7778/index.html(假设服务器端口号是7778)看到我们的网页。
  2. 用nginx服务器代理 ,静态文件用nginx托管,然后设置转发的方式来获取api请求数据。

其实第一种的话也是借助与nodejs会自动启动一个服务器,进行静态文件的托管。我个人比较喜欢第二种方法,下面我们就进行这种文件的配置。

开始之前,你应该检查你的服务器是否安装有nginxpm2

$ pm2 -v
$ nginx -v

如果正确出现版本号,那么就已经安装了,如果没有的话,请谷歌安装。pm2的作用是进行进程守护,当你的nodejs意外的停止的时候,进行重启。

如果我们有域名的话,我们现在域名商哪里添加一个二级域名解析。这里添加完解析以后会要几分钟的等待时间

添加域名解析

然后,我们找到nginx的配置文件nginx.conf 在里面加入:

server {
        listen 80;
        server_name demo.lcylove.cn;
        root   /data/www/demo; 
        index  index.html index.htm index.php;

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            proxy_pass http://127.0.0.1:7778;
        }
    }

注意: location /api/ 这里说明只有api/*的请求才会进行转发。

然后进行nginx服务器的重启:nginx -s reload

我们把server的代码放在服务器下,通过命令行移到相应位置执行命令:

$ npm install && cnpm i
$ pm2 start --name demo1 npm -- run start

启动我们的nodejs服务器。然后我们就可以打开网站 demo.lcylove.cn 查看效果

最后

由于本人才疏学浅,如果有任何问题的欢迎下面留言讨论!

原文链接:https://segmentfault.com/a/1190000016440310

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40615.html

文章标题:Vue+Koa+Mongodb 小练习

相关文章
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
回到顶部