vue+node+mysql注册登录功能实现

vue+node+mysql注册登录功能实现

第一次用vue+node做前后端分离的项目，注册登录入手，就已经踩了很多坑，记录一下大概思路

客户端 vue-cli

构建页面,我做的手机端，用的ui框架是vant，pc端差不多

路由

/router/index.js

const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: Home
  },
  {
   
    path: '/login',
    name: 'login',
    component: login
  },
  {
   
    path: '/register',
    name: 'register',
    component:register
  },
]

数据传递

login.vue

<script>
import axios from 'axios'
import VueAxios from 'vue-axios'
import {
    Dialog } from 'vant';
export default {
   
     data() {
   
    return {
   
      userName: '',
      password: '', 
    };
  },
  methods: {
   
     //提交按钮绑定事件
     onSubmit () {
   
     //定义一个date对象存输入框获取到的用户名和密码
      let data = {
   
        userName: this.userName,
        userPassword: this.password
      }
      //通过axios把数据传递给服务端，记得装axios依赖
      this.axios.get('/api/login', {
   
        params: data
      }).then((res) => {
   
      //这里是服务端返回信息后的处理，可以暂时不看
         console.log(res.date)
      })
    }
  },
}
</script>

因为要给服务端传递数据，涉及到跨域问题

• 跨域问题的产生是因为受到了同源策略的影响，就是你自己电脑一个浏览器从一个端口去访问本机的另一个，是不同源的所以产生跨域问题
• 跨域问题可以由后端解决也可以由前端解决，这里用来前端
• 根目录下（和package.json同级）新建一个vue.config.js文件
• 最好不要多加东西，和我一样就够了，真的真的很容易出错

module.exports = {
   
    devServer: {
   
        // open: true,
        host: "localhost",
        //客户端端口
        port: 8080,
        // https: false,
        // hotOnly: false,
        proxy: {
   
        //这里的api在axios传递数据时要用，可以检测请求地址，如果以"/api"开头，就会默认使用下面的代理
            '/api': {
   
                target: 'http://127.0.0.1:3000', //API服务器的地址
                changeOrigin: true,//"changeOrigin"用来设置开启代理
                pathRewrite: {
   
                    '^/api': ''
                }
            }
        },
    }
}

服务端

新建文件，安装express

• npm install express
• app.js

// 引入express
var express = require('express');
let loginRouter = require('./routes/login');

// 1. 创建app
var app = express();

// 登录路由
app.use('/api/login',loginRouter)

app.listen(3000,function(){
   
    console.log('服务端正在运行.......');
})

• 终端运行 node .\app.js
  
• login.js

let express = require('express');
let router = express.Router();
//————————————连接数据库——————————
//记得装mysql依赖啊
var mysql = require('mysql');
var connection = mysql.createConnection({
   
  host     : 'localhost',
  user     : 'root',//数据库用户名
  password : '',//密码
  database :<