vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第1张图片

注册页面

注册页面regin.vue的代码和登录页面的代码差不多,就是要自己写2个验证,电话号码和确认密码的验证规则
regin.vue代码






安装mongodb

要想实现注册和登录功能必须得有数据,一种办法是用mockjs来模拟数据,也可以直接用个数据库,为了学更多的知识,我还是决定研究一下数据库MongoDB

1、下载数据库,官网地址:https://www.mongodb.com/
2、安装数据库:
Image 044.png

安装反正就是next下去就是了

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第2张图片

当然改个安装路径也是不错的

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第3张图片

安装完之后

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第4张图片

因为mongodb的数据一般用cmd操作,不适合直观的看,所以可以下一个mongovue来方便眼睛看
地址:http://pan.baidu.com/s/1c15QWTy
安装都有说明

3、启动数据库

启动数据库之前先找个地方建个文件夹来存放数据,一般叫data

然后就可以启动数据库了
因为用的是3.4的mongodb,所以用mongovue来查看的话会不能创建collections,也就是数据集相当于mysql的表,查了很多资料说是因为数据库的引擎不一样....
针对这个问题据说是这样解决的

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第5张图片

所以先来尝试一下
mongod --storageEngine mmapv1 --dbpath (data的路径)

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第6张图片

跑起来是这个样子

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第7张图片

然后去看一下效果http://localhost:27017/
出现这个才说明是启动了

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第8张图片

然后打开mongovue来测试一下
先创建一个连接

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第9张图片

然后是这样的

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第10张图片

创建一个新的数据库learn

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第11张图片

在learn里面创建一个新的collections,就叫users

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第12张图片

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第13张图片

成功了

vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb_第14张图片

说明这个方法是很有效的

如果还是不成功的话,先把data里面的数据清空,把数据库换成mmapv1引擎,再重复上面的操作

Image 059.png

你可能感兴趣的:(vue vue-router vuex element-ui axios的学习笔记(五)注册页面和连接Mongodb)