vue+mongodb+nodejs的express框架实现登录注册前台完整案例及源码(1)

proxy: {

‘/api’: {

target: ‘http://localhost:3000/api’, // 域名 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:8080

changOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

pathRewrite: {

‘^/api’: ‘’ // // 替换target中的请求地址，也就是说，在请求的时候，url用’/proxy’代替’http://ip.taobao.com’

}

}

}

}

}

创建.eslintrc.js

module.exports = {

root: true,

env: {

node: true

},

‘extends’: [

‘plugin:vue/essential’,

‘@vue/standard’

],

/*

下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-

主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致

“off” -> 0 关闭规则

“warn” -> 1 开启警告规则

“error” -> 2 开启错误规则

*/

rules: {

‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,

‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,

‘space-before-function-paren’: 0,//函数左边不要有括号

‘indent’: 0, //script的缩进

“no-unused-vars”: 1, // 不能有声明后未被使用的变量或参数

},

parserOptions: {

parser: ‘babel-eslint’

}

}

main.js

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import axios from ‘axios’

Vue.prototype.axios = axios

// 原生ajax、axios请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’

Vue.config.productionTip = false

new Vue({

router,

render: h => h(App)

}).$mount(‘#app’)

app.vue

router/index.js

import Vue from ‘vue’

import Router from ‘vue-router’

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

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

import Home from ‘@/pages/Home.vue’

Vue.use(Router)

export default new Router({

mode: ‘history’,

routes: [

{

path: ‘/’,

name: ‘Login’,

component: Login

}, {

path: ‘/main’,

name: ‘Main’,

component: Main

}, {

path: ‘/home’,

name: ‘Home’,

component: Home

}

]

})

pages/Home.vue

欢迎 {{name}}

<a href=“#” @click=“quit”>注销登录

pages/Login.vue

登录

{{tishi}}

登录

没有账号？马上注册

注册

{{tishi}}

注册

已有账号？马上登录