Tb0_图书管理系统保姆教程（一）

基于Vue+SpringBoot+Mybatis的图书管理系统

图书管理系统保姆教程（一）

需求分析

• 用户与角色权限管理

  普通用户

  • 查看图书
  • 借阅图书
  • 添加图书评论
  • 查看借阅图书的信息
  • 归还图书
  • 修改用户密码

  系统管理员

  • 增删改查图书信息
  • 增删改查用户信息

• 图书管理

  图书管理

  • excel批量导入

技术架构

前端：使用Vue+axios+elemenet框架实现

后端：SpringBoot+Mybatis

背景知识介绍

• 可使用 NodeJS 实现什么

环境准备

IDE

• VSCode
• IntelliJ IDEA

使用 CLI 搭建 Vue.js 项目

利用 Vue CLI（或写成 vue-cli，即 Vue 脚手架）搭建项目

• 安装 NPM（Node Package Manager），是一个NodeJS包管理和分发工具 。所以直接安装 Node.js，访问官网 https://nodejs.org/en/下载。
• 安装 Vue CLI

npm install -g vue-cli
或者
npm install -g @vue/cli

• 测试验证（略）

使用IntelliJ IDEA 创建Spring Boot项目

• IntelliJ IDEA 专业版自带Spring插件
• IntelliJ IDEA 社区版本，下载Spring Boot Helper
• 使用maven的方法配置项目
• 使用spring网站配置

创建项目

后端项目创建

博主直接使用spring网站配置的spring工程，直接使用idea打开运行。

后端运行效果（这个是正常运行的标志，虽然还没有加前端）

后端开发

用户类

java/demo/src/main/java/com/example/demo/User.java

这个类是有问题的！！！解决方法在后面

package book;

public class User {
    int ID;
    String userame;
    String passWord;

    public int getId() {
        return ID;
    }

    public void setId(int id) {
        this.ID = id;
    }

    public String getuserName() {
        return userame;
    }

    public void setuserName(String userName) {
        this.userame = userName;
    }

    public String getPassword() {
        return passWord;
    }

    public void setPassword(String password) {
        this.passWord = password;
    }
}

相应控制类

java/demo/src/main/java/com/example/demo/LoginController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.Objects;

@Controller
public class LoginController {

    @CrossOrigin(origins = "*", allowedHeaders = "*")
    @PostMapping(value = "/api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {

        String username = requestUser.getUsername();

        if (!Objects.equals("admin", username) || !Objects.equals("123123", requestUser.getPassword())) {
            String message = "账号密码错误";
            return new Result(400);
        } else {
            return new Result(200);
        }
    }

    @CrossOrigin
    @PostMapping(value = "/api/test")
    public int test() {

            return  400;
        }
}

后端配置

java/demo/src/main/resources/application.properties添加 内容（初始应该是空白的，后期还要配置数据库等）

server.port=8888

前端页面开发

后端创建完成，需开发一个前端显示界面。

登录页面：src\components\Login.vue

<template>
    <div>
        用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
        <br><br>
        密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        <br><br>
        <button v-on:click="login">登录</button>
    </div>
</template>

<script>

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: []
    }
  },
  methods: {
    login () {
      this.$axios
        .post('/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
          }
        })
        .catch(failResponse => {
        })
    }
  }
}
</script>

跳转页面：src\components\AppIndex.vue

<template>
    <div>
      Hello World!
    </div>
</template>

<script>
export default {
  name: 'AppIndex'
}
</script>

<style scoped>

</style>

前端配置

设置反向代理

src\main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'

// 设置baseURL，8888是后端端口号，前端请求默认发送到baseURL的地址
// var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
Vue.prototype.$axios = axios// 全局注册，其他组件中通过调用 this.$axios 发送数据
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这儿会报错：

ailed to compile with 1 errors                                                                         上午11:32:03

This dependency was not found:

* axios in ./src/main.js

To install it, you can run: npm install --save axios
Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\DumpStack.log.tmp'
Error from chokidar (D:\node_modules): Error: EBUSY: resource busy or locked, lstat 'D:\DumpStack.log.tmp'

这儿英文提示的很清楚，需安装axios。

配置页面路由

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import AppIndex from '@/components/AppIndex'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/AppIndex',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

跨域支持

config\index.js修改proxyTable

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

运行程序

同时运行前端和后端项目，访问 localhost:8080/#/login，输入用户名 admin，密码 123123

后端未启动的情况

后端启动报错

Access to XMLHttpRequest at 'http://localhost:8888/api/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:264 
        
 POST http://localhost:8888/api/login net::ERR_FAILED

? 这是常见的跨域资源共享（CORS）问题 。

? 浏览器限制了跨域请求，只有在服务端设置了响应头 Access-Control-Allow-Origin 时，才允许跨域请求。 这个错误是由于浏览器的跨域安全策略导致的。

CORS原理

跨域资源共享（CORS）是一种机制，是W3C标准。它允许浏览器向跨源服务器，发出XMLHttpRequest或Fetch请求。整个CORS通信过程都是浏览器自动完成的，不需要用户参与。

CORS的工作原理是：

1. 浏览器先根据同源策略对前端页面和后台交互地址做匹配，若同源，则直接发送数据请求；若不同源，则发送跨域请求。
2. 当浏览器需要向跨源服务器发送请求时，会在请求头中添加一些额外的字段，这些字段告诉服务器请求来自哪个源（即来源域名、协议和端口）。
3. 服务器接收到请求后，会检查请求头中的这些字段，确认是否接受来自该源的请求。如果接受，服务器会正常处理请求并返回数据；如果不接受，服务器可能会返回一个错误响应。

CORS的配置通常包括以下几个字段：

• Access-Control-Allow-Origin：指定哪些来源的网页可以访问该资源。可以是具体的来源域名，也可以是通配符’*'表示任何来源都可以访问。
• Access-Control-Allow-Methods：指定允许的前端发起请求的方法类型。
• Access-Control-Allow-Headers：指定允许的前端请求头字段。
• Access-Control-Allow-Credentials：指定是否允许携带凭据（如cookies、HTTP认证等）。
• Access-Control-Max-Age：指定预检请求的有效期（以秒为单位），即在多长时间内无需发送预检请求。

需要注意的是，使用CORS的前提是浏览器必须支持这个功能，并且服务器端也必须同意这种"跨域"请求。因此实现CORS的关键是服务器。

解决方法

将这几个类直接改到DemoApplication包下。

如图：

博主的问题是把LoginController类、Result类、User类都放到自己创建的book目录下了。途中的book目录已经删除。book目录需时demo的子目录。

遇到跨域问题的同学可以尝试检查一下自己的

control类所在的包需符合“controller类必须是Application的所在包的类或者子包的类” ，启动类Application是Controller文件的上一级，只有这样，项目启动时才能扫描加载到controller类。

登录后不跳转

问题描述

两个页面单独登录可以登录

http://localhost:8080/#/login
http://localhost:8080/#/index

输入用户密码，页面不跳转

问题分析

单独页面都可以登录说明页面没有问题；

输入用户名密码，在login函数中，修改返回结果都是200后。页面可以正常跳转。说明前端代码正常。

public Result login(@RequestBody User requestUser) {

        String username = requestUser.getUsername();

        if (!Objects.equals("admin", username) || !Objects.equals("123123", requestUser.getPassword())) {
            String message = "账号密码错误";
            return new Result(200);
        } else {
            return new Result(200);
        }
    }

在方法中打断点，查看变量，username获取为空，密码是正确的。

按照原来的逻辑，应该返回new Result(400)，确实不会跳转。

检查发现

设置两个断点，一个是setUserName函数，一个是setPassword函数。结果只进入setPassword

解决方法

点击右上角警告提示

警告已经写了这两个函数未使用，那么直接修改名称。修改名称后，还是不跳转。修改函数setUserName

改成setUsername。此处犯了两个拼写错误，都是泪。

至此完成前后端正常登录跳转功能。

项目Github地址链接

演示结果：

为空，密码是正确的。

按照原来的逻辑，应该返回new Result(400)，确实不会跳转。

检查发现

设置两个断点，一个是setUserName函数，一个是setPassword函数。结果只进入setPassword

解决方法

点击右上角警告提示

警告已经写了这两个函数未使用，那么直接修改名称。修改名称后，还是不跳转。修改函数setUserName

改成setUsername。此处犯了两个拼写错误，都是泪。

至此完成前后端正常登录跳转功能。

项目Github地址链接

演示结果：