node.js+vue3 +mysql 实现登录功能

实现登录功能，即是从获取表格的输入数据然后拿到后端进行数据库的验证，首先

登录mysql

net start mysql启动（启动了的话就不必了）

然后创建数据表，这里不要直接create table,要先选择数据库种类，

我这里用的use MySQL

然后就是创建表格了：

CREATE TABLE user_accounts (
    username VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL,
    message VARCHAR(255) NOT NULL
);

添加值

INSERT INTO user_accounts (username, password, message) VALUES
('yun', '123456', '欢迎您，小牛马'),
('chi', '654321', '欢迎您，大上海');

接着通过select * from your_name;就可以查看表了，我这里表名是user_acounts,所以用的是select * from  user_accounts

好这一步，下面进入vue3项目的配置环节，在大文件下新建一个sever包，注意不是src目录下面的

要建这么几个文件，自己先建

后面的参考了这篇文章Vue项目通过node连接MySQL数据库并实现增删改查操作_vue连接mysql数据库-CSDN博客

哦对，在终端安装

pnpm i express
pnpm i axios
pnpm i cors//跨域
pnpm i MySQL

新建server/app.js，文件

import express from 'express'
let app = express()
import cors from 'cors'
import bodyParser from 'body-parser'

import router from './router.js'

app.use(bodyParser.json()) //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cors()) //配置跨域，必须在路由之前
app.use(router)

app.listen(80, () => {
  console.log('服务器启动成功')
})

然后是sever/db/index.js

import { createPool } from 'mysql'

let db = createPool({
  host: '127.0.0.1', //数据库IP地址
  user: 'root', //数据库登录账号，
  password: '你的数据库密码', //数据库登录密码
  database: 'mysql' //要操作的数据库
})

export default db

注意database不要写成你的数据表名，应该写你的数据库类别，直接写MySQL也行，

user:root，名字是默认的。

建文件router.js

import express from 'express'

import { userGet } from './API/user.js'

const router = express.Router()
router.get('/user', userGet)

export default router

sever/API/user.js

import db from '../db/index.js'

export function userGet(req, res) {
  var sql = 'select * from user_accounts'//注意，这里选择你自己的数据表名
  db.query(sql, (err, data) => {
    if (err) {
      return res.send('错误：' + err.message)
    }
    res.send(data)
  })
}

var sql = 'select * from user_accounts'//注意，这里选择你自己的数据表名

然后就是

把 sever文件在集成终端打开，输入node app.js，

这里可能会有别的终端抢占什么的，关闭其他终端即可，然后就是上面会给你报一些什么import 后面的文件要不要'.js'后缀什么的，我这里是加了，

后面在浏览器输入：127.0.0.1/user

回车即可看见自己的数据库表了，就是数据库获取成功了

后面的登录逻辑对各位大帅比来说过于简单，我这里只写一部分就好了：

<button class="lg3"
  :style="{ backgroundColor: buttonBackgroundColor }"
@click="login1" > 登录  </button>

这是按钮

const login1 = async () => {
  try {
    const response = await axios.get('http://127.0.0.1/user')

    const userData = response.data
    console.log(userData)

    // 获取输入框的值，假设有变量 usernameInput 和 passwordInput
    const enteredUsername = username.value
    const enteredPassword = password.value

    console.log(enteredUsername)
    // 在 userData 数组中查找匹配的用户
    const matchedUser = userData.find((user) => user.username === enteredUsername)

    if (matchedUser && matchedUser.password === enteredPassword) {
      // 用户名和密码匹配
      ElMessage.closeAll()
      ElMessage.success({
        message: '登录成功',
        type: 'success'
      })
    } else {
      // 用户名或密码错误
      ElMessage.closeAll()
      ElMessage.error('账号或者密码错误')
    }
  } catch (error) {
    console.error('Error during login:', error)
    // 处理错误，例如向用户显示错误消息
  }
}

其中  const enteredUsername = username.value
    const enteredPassword = password.value

这是获取表单的数据，你直接就在输入框input，v-model='username'和v-model='password',

在设置const username=ref('')和const password=ref('')即可，

哦对了，用的上面的elmessage是用的element-plus的组件，你去官网搜一下全局引用或者按需引用，你不用的话把elmessage部分删了也行。

好了，短短的三千字文章是菜鸡我一天才搞明白。

最后我想说一句：‘扣1送地狱火吗？’