毕设人力资源系统开发日记——第一天

前言

       阿明的毕业设计课题为基于web的人力资源管理系统的设计与实现，想通过博客的形式记录毕设的开发历程，功能业务模仿借鉴黑马程序员的人资项目。初步设想是，前端页面通过 Vue3 + ElementPlus 进行设计开发，后端服务器由NodeJs来设计实现，数据库选择MySql。第一阶段的目标是，实现前端页面，预留接口。

一. 创建项目

        通过以下命令创建 Vue3 项目

npm init vue@latest

        输入y并回车 

        接下来就是输入一些项目信息 

 

 

        像阿明这样的新手建议全部选择No，由自己一点一点写出来 。

        创建完成后，通过以下命令进行初始化和运行

npm i
npm run dev

 二. 目录简单梳理

        创建项目后，我们可以看到以下目录，src 为我们主要代码书写的目录，项目的开发主要集中在 src，vite.config.js 为项目配置文件，书写Element 组件的相关配置。

        在 src 目录下进行创建相关文件夹：

                api 文件夹主要存放异步请求接口，

                assets 文件夹存放静态资源，

                components 文件夹存放通用组件，

                layout 文件夹存放主要页面结构，

                router 文件夹存放路由及相关配置，

                store 文件夹存放状态管理工具，也就是Pinia，

                utils 文件夹存放工具函数代码，

                view 文件夹存放路由跳转页面，也就是路由组件。

 

三. 导入Element组件并实现按需导入

        1.安装Element-plus

npm install element-plus --save

        2. 安装按需导入的两个插件

npm install -D unplugin-vue-components unplugin-auto-import

         3. vite.config.js 配置

AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

        4. main.js 配置  

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

const app = createApp(App)//创建根组件

app.use(ElementPlus)
app.mount('#app')//挂载到app上
// createApp(App).mount('#app')

四. 登录页面功能的初步实现

        1. 登录页面基本结构

        制作一个简单的登录页面，后期可新增注册和忘记密码功能。 

        登录页主要使用Element组件进行构建，要注意数据的单向和双向绑定，整个表单通过 ：model='loginForm' 进行单向绑定，也就是 loginForm 会收集整个表单的数据。而表单的子项通过 v-model 进行双向绑定，当用户填写或者修改数据时，对应 loginForm 的属性也会随之改变，这样就可以获取到最新的表单数据。

<template>
  <div class="login_content">
    <div class="login_logo"></div>
    <div class="login_form">
      <h2>用户登录</h2>
      <el-form ref="form" :model="loginForm" :rules="loginRules">
        <el-form-item prop="mobile">
          <el-input
            v-model="loginForm.mobile"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="isAgree">
          <el-checkbox v-model="loginForm.isAgree"
            >用户平台使用协议</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="login" type="primary">登录</el-button>
        </el-form-item>
        <el-button @click="textAjax" type="primary">测试</el-button>
      </el-form>
    </div>
  </div>
</template>

2. 登录校验功能的实现

        登录校验主要通过创建校验规则实现，对于字符串类的数据可以通过正则表达式来校验，而对于布尔值，则需要手写校验函数 validator 进行校验。

        创建好校验规则后，要注意对于组件的绑定，也就是 :rules='loginRules'

//2.登录表单校验
let loginRules = {
  mobile: [
    { require: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  password: [
    { require: true, message: "请输入密码", trigger: "blur" },
    {
      min: 8,
      max: 16,
      message: "长度应在 8 到 16 个字符",
      trigger: "blur",
    },
  ],
  isAgree: [
    {
      validator: (rule, value, callback) => {
        //rule:校验规则
        //value：校验的值
        //callback:回调函数,是一个promise,有resolve和reject两种结果，如果不调用，那就是一直是reject，不会执行下面的代码了
        //callback()是一个正确的回调，callback(new Error('message'))返回错误的回调
        value ? callback() : callback(new Error("您必须勾选用户协议"));
      },
    },
  ],
};

3. 登录功能的初步实现

        点击登录按钮后，触发 login 函数，在 Vue2 中，我们是通过 this.$refs 来获取组件标签，而在 Vue3 中弱化了 this ，所以是通过 ref() 调用函数的方式来获取。

        Element表单组件有个API，为 validate ，这个方法是立即执行一次全体校验，随后会触发一个回调函数，传入的形参就是校验的结果，当结果为 true 时，也就是信息填写完成并且正确，就可以进行跳转主页等功能了。

//3.点击登录
let form = ref(); //获取整个表单信息
let login = () => {
  /* this.$refs.form.validate((isOk) => {console.log(isOk);}); */
  form.value.validate((isOk) => {
    if (isOk) {
      // router.push("/home");
    }
  });
};

五. 今日总结

        项目开始的第一天，做的工作主要是项目的初步搭建以及一些简单功能的实现。