管理系统的实现_03

news2024/11/26 3:29:19

文章目录

  • 登录界面的开发
    • 安装axios用于前后端交互
      • 第一步、在项目目录下执行命令
      • 第二步、在main.js文件夹添加如下代码
      • 第三步、使用this.axios 即可访问到
  • Login.vue 完整代码如下
  • 搭建第一个springboot项目
    • 第一步、修改配置文件(application.properties)
    • 第二步、创建包目录
  • 用springboot实现登录功能
    • 第一步、创建数据库
    • 第二步、编写实体类
    • 第三步、编写mapper
    • 第四步、编写mapper的映射xml文件
    • 第五步、编写公共的返回类型
    • 第六步、编写业务层接口
    • 第七步、编写业务层的实现类
    • 第八步、编写controller类
    • 最后一步 重点！！！ 启动类要加@MapperScan("com.hebust.mapper") 即你的mapper的 全限定名
  • swagger接口文档的使用
    • 第一步、添加依赖
      • 注意：添加依赖后可能会报错，这是版本问题，需要把springboot的版本降低，同时数据库驱动的依赖也要修改
    • 第二步、编写SwaggerConfig类
    • 第三步、在controller所有类中添加注解，自动生成接口文档
    • 第四步、测试 地址 http://localhost:8081/doc.html

登录界面的开发

安装axios用于前后端交互

第一步、在项目目录下执行命令

npm install axios -S

第二步、在main.js文件夹添加如下代码

import axios from "axios";

Vue.prototype.axios = axios

在这里插入图片描述

第三步、使用this.axios 即可访问到

Login.vue 完整代码如下

<template>
  <div class="box">
    <div class="ms-login">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <h3 class="loginTitle">学生选课与评教系统</h3>
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>

        <el-radio v-model="radio" label="1">管理员</el-radio>
        <el-radio v-model="radio" label="2">教师</el-radio>
        <el-radio v-model="radio" label="3">学生</el-radio>
        <br>
        <br>

        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="loginSubmit('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: '',
        password: ''
      },
      radio: '1',
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, message: '用户名大于3位', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    // ref 的 loginForm
    loginSubmit(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          // 去服务器端 查询数据库的用户名 密码
          this.axios.post('http://localhost:8081/login?' + "username=" + this.ruleForm.name + "&" + "password=" + this.ruleForm.password)
            .then(res => {
              // 回调函数
              if (res.data.code == 1002) {
                this.$router.push("/admin");
                this.$message.success("登录成功")
              } else if (res.data.code == 1000) {
                this.$message.error("用户名不存在");
              } else if (res.data.code == 1001) {
                this.$message.error("密码错误");
              }
            }).catch(err => {
            // 异常
            console.log(err);
          });
        } else {
          this.$message.error('请输入完整字段');
        }
      });
    }
  }
}
</script>

<style>

.box {
  width: 100%;
  height: 100%;
  /*background: antiquewhite;*/
  background-image: url("../assets/school.png");
  background-repeat: no-repeat;
}

.ms-login {
  width: 300px;
  height: 270px;
  border: 1px solid #eaeaea;
  position: absolute;
  left: 77%;
  top: 38%;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  background: #fff;
}

.loginTitle {
  margin: 0px auto 40px auto;
  text-align: center;
}

</style>

搭建第一个springboot项目

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

第一步、修改配置文件(application.properties)

后缀改为  .yml

添加以下内容

# web
server:
  port: 8081

spring:
  # mysql8.0
  datasource:
    name: defaultDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    # 注意下面是8.0的写法  不要写成5.7的  数据库名字（rainng_course）改为自己的数据库名字
    url: jdbc:mysql://localhost:3306/rainng_course?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8&useSSL=false&allowMultiQueries=true&autoReconnect=true
    # 数据库账号密码改为自己的
    username: root
    password: 123456

  # project_name
  application:
    name: springboot_login

# Mybatis_mapper
mybatis:
  mapper-locations: classpath:mappers/*.xml

在这里插入图片描述

在这里插入图片描述

第二步、创建包目录

在这里插入图片描述
在这里插入图片描述

用springboot实现登录功能

第一步、创建数据库

在这里插入图片描述
在这里插入图片描述

第二步、编写实体类

在这里插入图片描述

package com.hebust.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Admins {
    // 注意 映射时  大写字母 会被前面加个 _
    // 例如 a_id  == aId

    private Integer aId;

    private String aUsername;

    private String aPassword;

    // 实体类  表中的字段  和  类的属性  一一对应
}

第三步、编写mapper

在这里插入图片描述

package com.hebust.mapper;

// mapper 中都是接口

import com.hebust.entity.Admins;
import org.springframework.stereotype.Component;

@Component  // 注册为 容器组件
public interface AdminsMapper {
    // 接口中 没有方法体  且是抽象方法  但是abstract可以省略   public 也可以省略

    // 因为 mapper 是访问数据库的  所以返回值为 一条记录  即一个对象（entity下的对象）
    
    // @param 给参数起 别名   映射层可以用别名
    Admins login(@Param("username") String username);
}

第四步、编写mapper的映射xml文件

在这里插入图片描述
在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!--
    1. 此文件是 mybatis 的映射文件  是对 mapper 中接口的实现   用来写sql语句

    2. namespace  写mapper中文件的 全限定类名（从包名开始 一直到 类名） ctrl+shift+alt+c

    3. id 对应接口中 的方法名

    4. #{} 对应 接口中 方法的 参数名

    5. select  update  delete  insert   // 注意字符串类型的写法 @Param("名字")

    6. resultType 返回值 和 实体类中所有属性都一样  直接用 实体类的 全限定类名

    7. resultMap 返回值 和 实体类中所有属性 不完全一样  想要谁的返回值 自己在<resultMap>中写明

-->


<mapper namespace="com.hebust.mapper.AdminsMapper">

    <!--id 自己在sql语句中起的名字  type 实体类的全限定类名-->
    <resultMap id="adminsMap" type="com.hebust.entity.Admins">
        <!--id 代表主键  property 代表属性名  column 代表数据库中的字段名 -->
        <id property="aId" column="a_id"></id>
        <result property="aUsername" column="a_username"></result>
        <result property="aPassword" column="a_password"></result>
    </resultMap>

    <!--id 接口中的方法名  resultMap  自己起的名字 -->
    <select id="login" resultMap="adminsMap">
        select *
        from admins
        where a_username = #{username}
    </select>

</mapper>

第五步、编写公共的返回类型

在这里插入图片描述

package com.hebust.utils;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultVo {
    private int code;  // 状态码

    private String message;  //提示消息

    private Object obj;  // 返回对象
}

第六步、编写业务层接口

在这里插入图片描述

package com.hebust.service;

import com.hebust.utils.ResultVo;

public interface AdminsService {
    ResultVo login(String username, String password);
}

第七步、编写业务层的实现类

在这里插入图片描述

package com.hebust.service.impl;

import com.hebust.entity.Admins;
import com.hebust.mapper.AdminsMapper;
import com.hebust.service.AdminsService;
import com.hebust.utils.ResultVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service   // 业务层 都需要加@Service 注解
public class AdminsServiceImpl implements AdminsService {

    @Autowired
    private AdminsMapper adminsMapper;

    @Override
    public ResultVo login(String username, String password) {
        Admins admins = adminsMapper.login(username);
        if (admins == null) {
            return new ResultVo(1000, "用户名不存在", null);
        } else {
            if (admins.getAPassword().equals(password)) {
                return new ResultVo(1002, "登录成功", null);
            } else {
                return new ResultVo(1001, "密码错误", null);
            }
        }
    }
}

第八步、编写controller类

在这里插入图片描述

package com.hebust.controller;

import com.hebust.service.AdminsService;
import com.hebust.utils.ResultVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController  // 控制层 异步的  所有控制层类都要加
@Api(value = "提供了用户登录等相关接口", tags = "登录模块")  // 类注解  对该控制器类进行功能说明
@CrossOrigin  // 解决跨域问题
public class AdminsController {

    @Autowired
    private AdminsService adminsService;

    @PostMapping("/login")
    @ApiOperation("用户登录接口")  //方法注解  说明方法的作用
    @ApiImplicitParams({  // 加s 表示有多个参数
            @ApiImplicitParam(dataType = "String", name = "username", value = "用户登录账号", required = true),
            @ApiImplicitParam(dataType = "String", name = "password", value = "用户登录密码", required = true)
    })
    public ResultVo login(String username, String password) {
        return adminsService.login(username, password);
    }
}

最后一步 重点！！！ 启动类要加@MapperScan(“com.hebust.mapper”) 即你的mapper的 全限定名

在这里插入图片描述

swagger接口文档的使用

第一步、添加依赖

 <!--下面三个依赖是 swagger 接口文档用的依赖-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.2</version>
        </dependency>

注意：添加依赖后可能会报错，这是版本问题，需要把springboot的版本降低，同时数据库驱动的依赖也要修改

在这里插入图片描述

在这里插入图片描述

第二步、编写SwaggerConfig类

在这里插入图片描述

@Configuration
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket getDocket() {
        // 创建封面对象
        ApiInfoBuilder apiInfoBuilder = new ApiInfoBuilder();
        apiInfoBuilder.title("学生选课与评教系统后端接口说明")
                .description("此文档详细说明了学生选课与评教系统的后端接口规范")
                .version("v1.0.0")
                .contact(new Contact("TZ丶旭哥", "https://tz-xuge.blog.csdn.net/", "320084130@qq.com"));
        ApiInfo apiInfo = apiInfoBuilder.build();

        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo)  // 指定生成的文档中的封面信息
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.hebust.controller"))  // 对controller生成接口文档
                .paths(PathSelectors.any())
                .build();
        return docket;
    }
}

第三步、在controller所有类中添加注解，自动生成接口文档

@Api(value = "提供了用户登录等相关接口", tags = "登录模块")  // 类注解  对该控制器类进行功能说明

 @ApiOperation("用户登录接口")  //方法注解  说明方法的作用
    @ApiImplicitParams({  // 加s 表示有多个参数
            @ApiImplicitParam(dataType = "String", name = "username", value = "用户登录账号", required = true),
            @ApiImplicitParam(dataType = "String", name = "password", value = "用户登录密码", required = true)
    })

第四步、测试 地址 http://localhost:8081/doc.html

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/480251.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

希尔排序（C++）

希尔排序（C++）

希尔排序 是插入排序的一种&#xff0c;也是缩小增量排序。希尔排序是记录按下标的一定增量分组&#xff0c;对每组使用直接插入排序算法排序&#xff1b;随着增量逐渐减少&#xff0c;每组包含的关键词越来越多&#xff0c;当增量减至1时&#xff0c;整个文件恰被分成一组&am…
阅读更多...
常用的极限

常用的极限

常用的极限 方法1 利用基本极限求极限 1.常用的基本极限 一个函数极限是非零常数&#xff0c;分母极限为零&#xff0c;分子极限必为零 幂指函数转为指数函数的形式,再等价代换 方法二 分子分母凑成可以使用等价无穷小代换的形式 arcsinx 和 sin x 作为分子是相减的. 1 先使用…
阅读更多...
数据结构之带头循环双向链表

数据结构之带头循环双向链表

目录 1.何为双链表&#xff1f; 2.带头循环双向链表 1.函数接口与结构体 2.初始化链表 3.销毁链表 4.打印链表 5.创建节点 6.尾插 7.尾删 8.头插 9.头删 10 查找节点 11.在pos前插入x 12.删除pos位置的值 在学习了单链表之后&#xff0c;我们发现单链表弥补了了顺…
阅读更多...
Spring 管理 Bean-IOC--基于注解配置 bean

Spring 管理 Bean-IOC--基于注解配置 bean

目录 Spring 管理 Bean-IOC--基于注解配置 bean ● 基本介绍 ● 组件注解的形式有 代码演示--了解注解 UserDao UserService UserAction MyComponent 配置 beans.xml 注意 测试 注意事项和细节说明 自动装配 基本说明 应用实例需求 UserService UserAction 配置…
阅读更多...
MLC LLM：将大模型运行在手机端的部署工具

MLC LLM：将大模型运行在手机端的部署工具

前言 MLC LLM 是一个通用的解决方案 它允许任何语言模型在不同的硬件后端和本地应用程序集上进行本地部署 并为每个人提供一个高效的框架&#xff0c;以进一步优化模型的性能&#xff0c;满足他们自己的用例 其使命是让每个人都能在自己的设备&#xff08;如手机端&#xf…
阅读更多...
WordPress 不使用ftp更新

WordPress 不使用ftp更新

文章目录 摘要修改 wp-config.php文件处理 413 Request Entity Too Large修改nginx配置&#xff1a;client_max_body_size重启nginx 处理uploaded file exceeds the upload max filesize找到php.ini修改 upload_max_filesize重启php 摘要 每次 WordPress 有插件或主题更新都要…
阅读更多...
计算机组成原理第五章(2)---中断

计算机组成原理第五章(2)---中断

5.1概述 产生和应用 在IO设备和主机交换数据时&#xff0c;由于设备本身的机电特性的影响&#xff0c;其工作速度比较低&#xff0c;与CPU无法匹配&#xff0c;如果采用程序查询的方式需要CPU进行等待&#xff0c;但是如果在等待的过程中CPU可以执行其他的程序&#xff0c;可…
阅读更多...
04_Uboot操作命令与其他命令

04_Uboot操作命令与其他命令

目录 BOOT 操作命令 bootz命令 bootm 命令 reset 命令 go 命令 run 命令 mtest 命令 BOOT 操作命令 uboot的本质工作是引导Linux,所以uboot肯定有相关的boot(引导)命令来启动Linux。常用的跟boot有关的命令有:bootz、bootm和boot。 bootz命令 要启动Linux,需要先将Lin…
阅读更多...
《LearnUE——基础指南:上篇—1》——GamePlay架构之Actor和Component

《LearnUE——基础指南:上篇—1》——GamePlay架构之Actor和Component

目录 Component大法好&#xff0c;谁用谁知道&#xff01;&#xff01; 1.1.1 创世&#xff08;UObject&#xff09; 1.1.2 造物&#xff08;Actor&#xff09; 1.1.3 赋能&#xff08;Component&#xff09; Component大法好&#xff0c;谁用谁知道&#xff01;&#xff0…
阅读更多...
合肥职业技术学院分类考试招生职业技能考试 -- 计算机专业

合肥职业技术学院分类考试招生职业技能考试 -- 计算机专业

考试大纲模块一 专业能力测试主要内容模块二 技术技能测试主要内容分值分布 分模块讲解模块一 专业能力测试计算机的发展、类型及其应用领域计算机技术的发展计算机应用领域 计算机中数据的表示、存储和处理计算机软、硬件系统的组成及主要技术指标计算机软、硬件系统的组成硬件…
阅读更多...
YOLOv5-7.0训练中文标签的数据集

YOLOv5-7.0训练中文标签的数据集

链接&#xff1a;https://pan.baidu.com/s/1KSROxTwyYnNoNxI5Tk13Dg 提取码&#xff1a;8888 以显示楷体为例&#xff08;上面的百度网盘里面有黑体、宋体、楷体ttf文件&#xff09; (1)将metric.py中&#xff1a; 将 sn.set(font_scale1.0 if nc < 50 else 0.8) # for …
阅读更多...
iOS可视化动态绘制八种排序过程

iOS可视化动态绘制八种排序过程

一、可视化解决方案综述 1.交互UI综述 在本篇博客的第一部分我们先来整体的看一下我们Demo的功能。下方就是我们今天博客中的Demo的交互示意图。上方的输入框可以输入要排序元素的个数&#xff0c;下方输入的是300。程序会根据你输入的个数来随机生成数据&#xff0c;你输入30…
阅读更多...
D. Edge Deletion(堆优化最短路)

D. Edge Deletion(堆优化最短路)

Problem - D - Codeforces 给定一个由 n 个顶点和 m 条边组成的无向连通加权图。将从顶点 1 到顶点 i 的最短路径长度表示为 di。 你必须删除一些图中的边&#xff0c;使得最多只保留 k 条边。如果在删除边后&#xff0c;仍然存在从 1 到 i 的路径&#xff0c;其长度为 di&…
阅读更多...
【数学建模】matlab的常用函数运用(1)

【数学建模】matlab的常用函数运用(1)

文章目录 1. matlab基本常识2. 常用输入输出函数2.1 输出函数2.2 拼接函数&#xff08;字符串的合并&#xff09;2.3 输入函数 3. 求和函数3.1 向量求和3.2 矩阵求和 4. 提取矩阵元素4.1 取第x行第y列的元素4.2 取指定行或列的所有元素4.3 取指定某些行的所有元素 1. matlab基本…
阅读更多...
【OMNET++】V2X仿真

【OMNET++】V2X仿真

1.前言 车载无线通信技术V2X即Vehicle to Everything&#xff0c;是在车辆和任何会被该车辆所影响的实体之间分享信息的技术。V2X的主要动机是道路安全、交通效率和节能。 车辆影响实体的分类&#xff1a; Vehicle:对应其他车辆&#xff0c;对应通信V2V&#xff0c;对应设备是…
阅读更多...
Linux学习[9]查找文件指令：which whereis locate find

Linux学习[9]查找文件指令：which whereis locate find

文章目录 前言1. which2. whereis3. locate4. find总结&#xff1a; 前言 之前在弄交叉编译的时候需要找到gcc&#xff0c;gdb什么的在哪里&#xff1b;涉及到了查找文件指令。 这里对linux中的查找指令进行总结 1. which which指令一般用来寻找可执行文件的路径&#xff0c;…
阅读更多...
C. Playing Piano(dfs)

C. Playing Piano(dfs)

Problem - C - Codeforces 小Paul想学弹钢琴。他已经有了一首想要开始演奏的旋律。为简单起见&#xff0c;他将这个旋律表示为键号序列a1,a2,…,an&#xff1a;数字越大&#xff0c;它就越靠近钢琴键盘的右侧。 Paul非常聪明&#xff0c;知道关键是正确地为他要演奏的音符分配…
阅读更多...
git-windows安装

git-windows安装

1.下载地址 https://www.git-scm.com/ 2.第一步&#xff0c;直接next 3.选择默认安装路径 4. 选择组件&#xff0c;默认 5.开始菜单是否创建&#xff0c;默认不创建 6.这里是设置 Git 默认编辑器&#xff0c;我们这里直接下一步 "Next" 7.调整新仓库中初始分支的名称…
阅读更多...
观察 | 卫浴产业数字化转型下的中国智造样本

观察 | 卫浴产业数字化转型下的中国智造样本

文 | 智能相对论 作者 | 佘凯文 数字技术的发展已成为全球科技变革向高端技术不断升级的方向。 年初&#xff0c;中共中央、国务院印发《数字中国建设整体布局规划》&#xff0c;这是党的二十大后党中央在我国数字化发展领域作出的最全面擘画&#xff0c;从顶层设计的高度对…
阅读更多...
elasticsearch结构化查询(一)

elasticsearch结构化查询(一)

在上一篇中我们介绍了DSL相关的知识&#xff0c;接下来我们将会学习elasticsearch的结构化查询&#xff0c;同时也实践一下上一篇的DSL的查询用法 什么是结构化搜索? 从《Elasticsearch权威指南》上摘取部分解释如下: 结构化搜索是指查询包含内部结构的数据。日期&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023