礼物帮手APP项目（2）登录注册

}));

浏览器访问localhost:3000

路打通了

客户端

---

先下载路由和axios

Unknown custom element:

解决：

packsge.json

“dependencies”: {

“vue”: “^2.6.6”,

“vue-router”: “^3.0.2”,

“axios”: “^0.18.0”

},

快速删node_modules

首先通过npm安装删除工具

npm install rimraf -g

安装淘宝镜像后可以使用

cnpm install rimraf -g 命令行语句，速度会更快

在使用删除命令

rimraf node_modules

npm config set registry http://registry.cnpmjs.org

index.js

import Vue from ‘vue’

import Router from ‘vue-router’

import Login from ‘…/pages/Login.vue’

import Main from ‘…/pages/Main.vue’

Vue.use(Router)

export default new Router({

mode: ‘history’,

routes: [

{

path: ‘/’,

name: ‘Login’,

component: Login

}, {

path: ‘/main’,

name: ‘Main’,

// meta: {

// // 添加该字段，表示进入这个路由是需要登录的

// requireAuth: true

// },

component: Main

}

]

})

login.vue

登录

<input @keyup.13=“login” class=“myinput” type=“password” placeholder=“口令” v-model=“password” />

找回密码

记住我

<button :disabled=“disablebtn” class=“login” @click=“login”>{{loginText}}

这里点击登录直接跳转主页

因为没有做判断，所以不管填什么都对

如何做判断呢？

---

前面不是安装了axios，就用这个请求接口数据

跨域请求

---

然后我们在main.js中添加如下代码 引入axios，并配置基础路径（因为是跨域请求node端，所以所有请求前面都需要添加node端的基础地址，以后打包上线的时候需要合并的时候再把这个地址删掉），文件位置和修改后的代码如下图

由于是跨域请求，我们需要配置withCredentials为true，这样避免每次都被识别为新的请求。

说明：在vue中，可以使用代理去实现跨域，但是每次新地址都需要配置，还是比较麻烦，这里我们采用直接配置跨域，一次配置就可以一劳永逸。

import axios from ‘axios’// 引入axios组件

Vue.prototype.axios = axios

axios.defaults.withCredentials = true // 跨域保存session有用

axios.defaults.baseURL = ‘http://localhost:3000’ // 打包的时候直接删掉，默认基础路径在这里配置

// 将 axios 赋值给 Vue，方便在子组件里面使用

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

if (response.data.err) {

alert(response.data.err)

return Promise.reject(response)

} else if (response.data.redirect) {

alert(‘请先登录…’)

window.location.href = ‘#/’

return Promise.reject(response)

} else {

// 返回response继续执行后面的操作

return response

}

}, function (error) {

// 对响应错误做点什么

return Promise.reject(error)

})

登录请求的实现

---

在Login.vue中实现login()函数

login(){

var _this = this;

this.disablebtn = true;

this.loginText = “登录中…”;

//this.$reqs就访问到了main.js中绑定的axios

this.$reqs.post(“/users/login”,{

username:this.username,

password:this.password

}).then(function(result){

//成功

console.log(result)

_this.disablebtn = false;

_this.loginText = “登录”;

}).catch(function (error) {

//失败

_this.disablebtn = false;

_this.loginText = “登录”

});

}

连数据库

---

链接好以后，在nwe connection右键 create database 输入创建 classweb数据库

创建好以后，展开classweb,然后在cloolections右键， create collection 创建一个user表（在弹出框中输入user），用来放后台登录的用户

创建好以后就有user表了，双击就能打开user表，现在里面没有数据

往里面添加一条数据，便于以后登录使用

user右键 insert document，然后输入后面的数据 ，save， （数据用户名 admin 密码是 123456 加密后的字段 还有手机号）

{

“_id” : ObjectId(“5b988192469dc3ff0faa6dd2”),

“name” : “admin”,

“phone” : “123456”,

“password” : “4QrcOUm6Wau+VuBX8g+IPg==”

}

分享