实习任务一：Vue Nodejs MySQL 登录注册 + 首页展示轮播图，热门商品

前端小白实习项目，仅供参考

相关参考：vue登陆注册

登录页面：

通过axios的post方法连接后端，进行select数据库表单内数据

具体代码：

<template>
    <div id="login" class="box">
      <h3>登录页面</h3>
      <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="20%">
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密  码:">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" round @click="submitForm('loginForm')" class="btn">登录</el-button>
      <router-link to="/register">用户注册</router-link>
    </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 3, max: 10, message: "用户名长度需在3-10", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 3, max: 10, message: "密码长度需在3-10", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("http://127.0.0.1/login", {
              params: {
                // 传递参数
                name: this.loginForm.username,
                password: this.loginForm.password,
              },
            })
            .then((res) => {
              if (res.data.length) {
                console.log(res.data);
                this.$alert("登录成功"); // 获取返回数组长度，判断数据库中是否有对应用户名和密码，用于判断是否登录成功