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

一些错误提示



前台：



从底往上

用的vue3脚手架

创建vue.config.js


module.exports = {
devServer: {
open: true, // 配置自动启动浏览器
// host: 'localhost',
port: '8080',
// 设置代理 devServer.proxy 可以是一个指向开发环境 API 服务器的字符串
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

pages/Login.vue

pages/Main.vue

参考

用户登录 https://blog.csdn.net/weixin_36185028/article/details/79719579

用户注册及数据库验证 https://blog.csdn.net/weixin_36185028/article/details/79706387