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

这里提示小伙伴们，虽然我后面附有github项目源码，但是此文章也只是记录我的礼物帮手项目的一个登录注册部分，有可能会记录的不全，若是你想图方便全拉到本地，下载模块包，可能会出现这样或者那样的问题，也可能因为版本不一致导致你进行不下去，也会着急丧失信心，新手的话建议你们一步一个脚印，从头开始，这里如有技术问题 都可后台私信我，我有空必然帮你们解答，互相探讨，共同进步

下面就开始正文吧，先上效果图

一些错误提示

前台：

从底往上

用的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'
  }
}