前端连接数据库mysql用户登录

### 实现前端与MySQL数据库的用户登录功能

为了实现前端项目中的用户登录功能并连接到MySQL数据库，通常采用前后端分离架构。具体来说，在前端部分可以使用Vue.js或其他JavaScript框架来构建用户界面；而后端则通过Node.js及其相关模块（如`express`和`mysql`）创建API接口处理来自前端的数据请求。

#### 创建后端服务

首先需要设置一个基于Node.js的服务用于接收HTTP请求并与MySQL交互：

1. **安装依赖包**

安装必要的npm包以支持Express应用以及MySQL操作：

   npm install express body-parser mysql cors

2. **编写服务器代码**

下面是一个简单的例子展示如何建立基本的Web API来验证用户名密码组合是否存在对应的记录于指定表格内。

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql'); // 导入mysql数据库模块[^1]

// 创建连接池
let pool = mysql.createPool({
    host: 'localhost',
    user: 'root', 
    password: '',
    database: 'testdb'
});

// 初始化app实例
var app = express();
app.use(bodyParser.json());
app.use(cors());

// POST /login 接口定义
app.post('/api/login', function(req, res){
    const { username, password } = req.body;
    
    // 查询语句准备
    var sqlStr = `SELECT * FROM users WHERE name='${username}' AND pwd=MD5('${password}')`;
    
    // 执行查询命令
    pool.getConnection(function(err, connection) {
        if (err) throw err;

        connection.query(sqlStr, function(error, results, fields) {
            // 当发生错误时释放连接
            connection.release();

            if (error || !results.length) {
                return res.status(401).send({ message: "Invalid credentials" });
            }

            // 成功返回用户信息给客户端
            return res.send(results);
        });
    });
});

这段脚本实现了对传入凭证的有效性检查，并向调用者反馈相应的状态码及消息体。

#### 构建前端组件

对于前端而言，则需设计好UI布局并通过AJAX技术发起异步POST请求至上述路径完成身份认证过程。这里给出一段简化版VUE模板作为参考：

<template>
  <div id="app">
    <!-- 登录表单 -->
    <form @submit.prevent="handleLogin()">
      Username:<br/>
      <input type="text" v-model="formData.username"/><br/><br/>

      Password:<br/>
      <input type="password" v-model="formData.password"/><br/><br/>

      <button>Login</button>
    </form>

    {{ loginStatus }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      loginStatus: ''
    }
  },
  
  methods: {
    handleLogin(){
      fetch("/api/login",{
          method:"POST",
          headers:{
              "Content-Type":"application/json"
          },
          body:JSON.stringify(this.formData)
      })
      .then(response => response.json())
      .then(data=>{
          this.loginStatus=data.message||'Welcome!';
      }).catch((e)=>{
          console.error(e);
          alert("Error occurred during login.");
      });
    }
  }
}
</script>

此段HTML片段展示了怎样收集输入框内的数据并将它们序列化成JSON对象发送出去等待响应结果更新视图显示。