前后端项目运行（图书管理系统）

运行的该项目是一个智能图书管理系统，是一个利用 AI 模型和数据分析对用户所喜欢的图书进行精准推荐的系统，在普通图书管理系统拥有的功能基础上，还能提供AIGC 的在线生成借阅量分析的 BI 图表功能，能够起到一个数据分析师的作用。其主要有三大使用者：用户（借阅人）、图书管理员、系统管理员。

该项目使用前后端分离的模式，前端构建页面，后端作数据接口，前端调用后端数据接口得到数据，重新渲染页面。

一、系统部分功能介绍

1、登录页面

1.1 Element el-form表单

 </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model.trim="loginForm.username" prefix-icon="iconfont icon-gerenxinxi"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="iconfont icon-tianchongxing-" type="password"
            @keyup.enter.native="login" :show-password="true"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

使用用el-form标签将表单控件包裹起来，每个控件使用el-form-item标签包裹起来，这样产生的表单就会比较整齐。

el-form标签的核心元素
1:model用于保存表单的数据对象
2:rules用于对表单数据对象的校验
3：ref指定表单对象名称
4：label-width指定label的宽度
5:label-position指定label的位置
6:inline指定是否同行
7：size指定所有组件大小
el-form-item标签的核心元素
1：label设置内容
2：prop指定:rules中的属性
3：required指定必填
4:rules可以设置当前prop的校验，一般数值类型的校验可在此单独设置，要指定type:'number'，与v-model.number配合使用,注意点有提及
5：size指定单一组件大小

1.2 Element el-input 输入框

1、show-password属性将输入框显示为密码框

如：

显示为密码框
    <el-input v-model="input1" show-password></el-input>
    <el-divider></el-divider>

2、prefix-icon或suffix-icon属性为输入框设置显示在前方/后方的图标。

3、可以设置输入长度的上限。

如：

输入长度限制
    <el-input v-model="input1" maxlength="10" show-word-limit></el-input>
    <el-divider></el-divider>

4、显示占位文本框

占位文本可以在输入框内容未输入时显示提示信息。

如：

显示占位文本
    <el-input v-model="input1" placeholder="请输入姓名"></el-input>
    <el-divider></el-divider>

1.3 Vue表单校验规则（rules验证规则）

系统举例：

loginFormRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },

（常用的表单验证）

首先在表单中绑定rules，并在item中定义属性prop

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

然后在data或computed中编写rules规则：

rules {	
      name: [ { type: 'string',required: true,message: "名称必填", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }]
      }

其中name为prop名

type：类型

required：是否必选项（此栏是否为空）

message：报错信息

trigger：触发方式（

blur ：失去焦点时进行验证
常用：对 input 输入框的验证

change ：当值发生变化时进行验证
常用：下拉框select，日期选择框date-picker，复选框checkbox，单选框radio）

完整版：vue表单验证—完整版本（多种验证方式）

1.4Vue中使用axios进行前后端的数据传输

系统举例：

vconst { data: res } = await this.$http.post(
          "user/login",
          {
            username,
            password
          }
        );
        if (res.status !== 200) {
          this.loginLoading = false;
          return this.$message.error(res.msg);
        }
        // console.log(res);
        this.$message.success("登录成功");
        this.loginLoading = false;
        window.sessionStorage.setItem("token", res.map.token);
        window.sessionStorage.setItem("userId", res.map.id);
        this.$router.push("/home"); //跳转到home页面下
      });
    },
    goUser() {
      this.$router.push("/login");
    },
    goManage() {
      this.$router.push("/login manage");
    },
  },

安装组件

npm install axios --save

然后在main.js文件中引入，axios不能使用use。

import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;

axios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。

系统用的是axios.post()

// 发送get请求
    // 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
    // 参数2：可选，json对象，要提供给数据接口的参数
    // 参数3：可选，json对象，请求头信息
    axios.get('服务器的资源地址',{
        params:{  // get参数
            参数名:'参数值', // id: 200,
        },
        header:{  // 请求头
            
        }
    }).then(function (response) { // 请求成功以后的回调函数
            console.log("请求成功");
            console.log(response.data); // 获取服务端提供的数据
    
    }).catch(function (error) {   // 请求失败以后的回调函数[如果then里面代码有错误，也会执行这里的代码]
            console.log("请求失败");
            console.log(error.response);  // 获取错误信息
    });

    // 发送post请求，参数和使用和axios.get()一样。
    // 参数1: 必填，字符串，请求的数据接口的url地址
    // 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
    // 参数3：可选，json对象，请求头信息
    axios.put('服务器的资源地址',{
        username: 'xiaoming',
        password: '123456'
    },{
        responseData:"json",
    })
    .then(function (response) { // 请求成功以后的回调函数
      console.log(response);
    })
    .catch(function (error) {   // 请求失败以后的回调函数
      console.log(error);
    });

    
    // b'firstName=Fred&lastName=Flintstone'

1.5 用户密码在数据库中进行md5加密

MD5用途：
1.防止被篡改：

1）比如发送一个电子文档，发送前，我先得到MD5的输出结果a。然后在对方收到电子文档后，对方也得到一个MD5的输出结果b。如果a与b一样就代表中途未被篡改。

2）比如我提供文件下载，为了防止不法分子在安装程序中添加木马，我可以在网站上公布由安装文件得到的MD5输出结果。

3）SVN在检测文件是否在CheckOut后被修改过，也是用到了MD5.

2.防止直接看到明文：

现在很多网站在数据库存储用户的密码的时候都是存储用户密码的MD5值。这样就算不法分子得到数据库的用户密码的MD5值，也无法知道用户的密码。

SpringBoot 用户登录注册MD5加密存入数据库

1.6 Vue实现切换登录用户类别

系统部分代码：

<span><i class="iconfont icon-haoyou" @click="goUser"></i>
      </span>
      <span>
        <i class="iconfont icon-guanliyuanrenzheng" @click="goAdmin"></i>
      </span>

vue 实现用户登录方式的切换功能