第十次作业

最新推荐文章于 2024-08-02 15:55:58 发布
最新推荐文章于 2024-08-02 15:55:58 发布
阅读量127 收藏
点赞数 1
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hinxx/article/details/140107222
版权
1.编辑登录页面

登录页面：

login.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录后信息放在session中</title>
    <!-- 引入组件库 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="js/element.css">
    <style>
        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100%;
        }
        .form-container {
            width: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="form-container">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="onReset">取消</el-button>
            </el-form-item>
        </el-form>
        <!-- 登录成功的弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogVisible">
            <p>登录成功！</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false; goToReaderPage();">确定</el-button>
            </span>
        </el-dialog>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                },
                dialogVisible: false
            }
        },
        methods: {
            onSubmit() {
                var url = `/login_session`;
                console.log(this.form.username);
                console.log(this.form.password);

                axios.post(url, {
                    name: this.form.username,
                    password: this.form.password
                })
                    .then(response => {
                        this.dialogVisible = true;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            onReset() {
                this.form.username = '';
                this.form.password = '';
            },
            goToReaderPage() {
                location.href = '/reader.html';
            }
        }
    });
</script>
</body>
</html>

 

页面退出登录：
logout() {
                var url = '/logout';
                axios.get(url)
                    .then(response => {
                        console.log('Logout successful');
                        // 跳转到登录页面
                        alert('退出成功！');
                        location.href = 'login.html';
                    })
                    .catch(error => {
                        console.error(error);
                        alert('退出失败，请重试');
                    });
            },
登录验证：
 created() {

            var url = `/readerLogin`
            axios.get(url)
                .then(response => {
                    //this.tableData = response.data;
                    this.tableData = response.data;
                    console.log(this.tableData);
                    this.findAll(this.pageNum);
                })
                .catch(error=>{
                    console.error(error);
                })

        }

 后代代码：

loginController

package com.library.Controller;

import com.library.Utils.JwtUtils;
import com.library.pojo.Reader;
import com.library.pojo.Result;
import com.library.service.ReaderService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

@Slf4j
@RestController
public class LoginController {
    @Autowired
    private ReaderService readerService;
   @PostMapping("/login")
   public Result login(@RequestBody Reader reader){
       log.info("登录:{}",reader);
       Reader r=readerService.login(reader);
//       return r!=null?Result.success():Result.erro("登陆失败");
       if(r!=null){
           Map<String, Object> claims=new HashMap<>();
           claims.put("id",r.getId());
           claims.put("username",r.getUsername());
           String jwt = JwtUtils.generateJwt(claims);
           return  Result.seccess(jwt);
       }
       return Result.erro("登陆失败");
    }
    @PostMapping("/login_session")
    public Result login(HttpServletRequest request, @RequestBody Reader reader) {
        Reader r=readerService.login(reader);
        if (r != null) {
            request.getSession().setAttribute("user", reader.getUsername());
            String user = (String) request.getSession().getAttribute("user");
            System.out.println("查询不为空。"+user);
            return Result.success();
        }
        else{
            String user = (String) request.getSession().getAttribute("user");
            System.out.println("查询为空。"+user);
            return Result.erro("用户名或密码错误");
        }

    }
    @GetMapping("/logout")
    public Result logout(HttpServletRequest request) {
        //清理Session中保存的当前登录员工的id
        request.getSession().removeAttribute("user");
        return Result.seccess("退出成功");
    }
    @GetMapping("/readerLogin")
    public Result readerlogin(HttpServletRequest request) {
        String reader = (String) request.getSession().getAttribute("reader");
        if (reader != null) {
            return Result.success();
        } else {
            return Result.erro("无权限");

        }
   }
}
3.编写接口文档：

# 图书管理系统接口文档

## 3.读者管理

### 3.1 读者列表查询分页功能

#### 3.1.1 基本信息

> 请求路径：/reader/{page}/{pageSize}
>
> 请求方式：GET
>
> 接口描述：该接口用于读者数据的分页输出

#### 3.1.2 请求参数

参数格式：queryString

参数说明：

| 参数名称    | 是否必须 | 示例         | 备注                        |
| --------   | -------- | ----------  | ---------------------------|
| page       | 是       | 1             | 分页查询的页码，如果未指定，默认为1        |
| pageSize   | 是       | 10            | 分页查询的每页记录数，如果未指定，默认为10 |


请求数据样例：

```shell
/reader/1/2
```

#### 3.1.3 响应数据

参数格式：application/json

参数说明：

| 参数名         | 类型      | 是否必须 | 备注                           |
| -------------- | --------- | -------- | ------------------------------ |
| code           | number    | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg            | string    | 非必须   | 提示信息                       |
| data           | object[] | 非必须   | 返回的数据                     |
|\|-id         | number    | 非必须   | 编号                        |                     |
|\|-username   | string    | 非必须   | 读者用户名                       |
|\|-password   | string    | 非必须   | 账户密码                       |
|\|-realName   | string    | 非必须   | 姓名                       |
|\|-sex   | string    | 非必须   | 性别                       |
|\|readerNumber   | string    | 非必须   | 用户编号                       |
|\|-birthday   | string    | 非必须   | 出生日                       |
|\|-address   | string    | 非必须   | 地址                       |
|\|-tel   | string    | 非必须   | 电话号码                       |
|\|-email  | string    | 非必须   | 邮箱                       |
|\|-registerDate  | string    | 非必须   | 账号注册时间                       |

响应数据案例：

```json
{
  "code": 1,
    "msg": "success",
    "data": {
        "total": 15,
        "rows": [
            {
                "id": 4,
                "username": "user66",
                "password": "password6",
                "realName": "张旭",
                "sex": 0,
                "birthday": "1997-04-30T00:00:00",
                "address": "南昌大道3号",
                "tel": "34567890123",
                "email": "user6@test.com",
                "registerDate": "2024-10-06T13:00:00",
                "readerNumber": "R67890"
            },
            {
                "id": 5,
                "username": "user7",
                "password": "password7",
                "realName": "李四",
                "sex": 1,
                "birthday": "1998-06-23T00:00:00",
                "address": "嘿嘿嘿",
                "tel": "7895426987",
                "email": "user7@test。com",
                "registerDate": "2024-03-04T20:32:16",
                "readerNumber": "R67891"
            }
        ]
    }
}
```

### 3.2 读者列表查询用户姓名功能

#### 3.2.1 基本信息

> 请求路径：/readers1/{realName}
>
> 请求方式：GET
>
> 接口描述：该接口用于读者数据的查询姓名的模糊查询

##### 3.2.2 请求参数

参数格式：queryString

参数说明：

| 参数名称    | 是否必须 | 示例       | 备注                        |
| --------   | -------- | ---------- | ---------------------------|
| realName | 是       | 张三         | 查询读者姓名，可以模糊查询 |


请求数据样例：

```shell
/readers1/%E5%BC%A0%E4%B8%89
```


#### 3.2.3 响应数据

参数格式：application/json

参数说明：

| 参数名         | 类型      | 是否必须 | 备注                           |
| ---------------- | --------- | -------- | ------------------------------ |
| code           | number    | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg            | string    | 非必须   | 提示信息                       |
| data           | object[] | 非必须   | 返回的数据                     |
|\|-id         | number    | 非必须   | 编号                        |                     |
|\|-username   | string    | 非必须   | 读者用户名                       |
|\|-password   | string    | 非必须   | 账户密码                       |
|\|-realName   | string    | 非必须   | 姓名                       |
|\|-sex   | string    | 非必须   | 性别                       |
|\|readerNumber   | string    | 非必须   | 用户编号                       |
|\|-birthday   | string    | 非必须   | 出生日                       |
|\|-address   | string    | 非必须   | 地址                       |
|\|-tel   | string    | 非必须   | 电话号码                       |
|\|-email  | string    | 非必须   | 邮箱                       |
|\|-registerDate  | string    | 非必须   | 账号注册时间                       |

响应数据案例：

```json
{
   "code": 1,
    "msg": "success",
    "data": [
        {
            "id": 6,
            "username": "user1",
            "password": "密码zs",
            "realName": "张三",
            "sex": 0,
            "birthday": "1990-05-15T00:00:00",
            "address": "北京市朝阳区",
            "tel": "1234567890",
            "email": "user1@test.com",
            "registerDate": "2024-05-23T09:00:00",
            "readerNumber": "R12345"
        }
    ]
}
```
### 3.3 根据日期范围查询读者信息

#### 3.3.1 基本信息

> 请求路径：/reader/{startDate}/{endDate}/{page}/{pageSize}
>
> 请求方式：GET
>
> 接口描述：该接口用于根据选定的日期范围，筛选在这一时期内注册的读者信息


##### 1.3.2 请求参数

参数格式：路径参数

参数说明：

| 参数名 | 类型   | 是否必须 | 备注   |
| ------ | ------ | -------- | ------ |
| startDate     | LocalDateTime | 必须     | 起始日期   |
| endDate     | LocalDateTime | 必须     | 终止日期   |
| page       | 是       | 1             | 分页查询的页码，如果未指定，默认为1        |
| pageSize   | 是       | 10            | 分页查询的每页记录数，如果未指定，默认为10 |


```
/reader//2024-06-01T17:07:58/2024-06-30T17:07:58/1/2
```

#### 3.3.3 响应数据

参数格式：application/json

参数说明：

| 参数名         | 类型      | 是否必须 | 备注                           |
| ---------------- | --------- | -------- | ------------------------------ |
| code           | number    | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg            | string    | 非必须   | 提示信息                       |
| data           | object[] | 非必须   | 返回的数据                     |
|\|-id         | number    | 非必须   | 编号                        |                     |
|\|-username   | string    | 非必须   | 读者用户名                       |
|\|-password   | string    | 非必须   | 账户密码                       |
|\|-realName   | string    | 非必须   | 姓名                       |
|\|-sex   | string    | 非必须   | 性别                       |
|\|readerNumber   | string    | 非必须   | 用户编号                       |
|\|-birthday   | string    | 非必须   | 出生日                       |
|\|-address   | string    | 非必须   | 地址                       |
|\|-tel   | string    | 非必须   | 电话号码                       |
|\|-email  | string    | 非必须   | 邮箱                       |
|\|-registerDate  | string    | 非必须   | 账号注册时间                       |

响应数据案例：

```json
{
   "code": 1,
    "msg": "success",
    "data": [
        {
            "id": 6,
            "username": "user1",
            "password": "密码zs",
            "realName": "张三",
            "sex": 0,
            "birthday": "2024-06-15T00:00:00",
            "address": "北京市朝阳区",
            "tel": "1234567890",
            "email": "user1@test.com",
            "registerDate": "2024-05-23T09:00:00",
            "readerNumber": "R12345"
        }
    ]
}
```
### 3.4 删除单条读者信息

#### 3.4.1 基本信息

> 请求路径：/reader/{id}
>
> 请求方式：DELETE
>
> 接口描述：该接口用于根据ID删除读者信息


##### 3.3.2 请求参数

参数格式：路径参数

参数说明：

| 参数名 | 类型   | 是否必须 | 备注   |
| ------ | ------ | -------- | ------ |
| id     | number | 必须     | 编号   |

请求参数样例:

```
/reader/1
```

#### 3.4.3 响应数据

参数格式：application/json

参数说明：

| 参数名 | 类型   | 是否必须 | 备注                           |
| ------ | ------ | -------- | ------------------------------ |
| code   | number | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg    | string | 非必须   | 提示信息                       |
| data   | object | 非必须   | 返回的数据                     |

响应数据样例：

```json
{
    "code":1,
    "msg":"success",
    "data":null
}
```

### 3.5 添加读者信息

#### 3.5.1 基本信息

> 请求路径：/readers
>
> 请求方式：POST
>
> 接口描述：该接口用于添加读者信息数据


#### 3.5.2 请求参数

格式：application/json

参数说明：

| 参数名 | 类型   | 是否必须 | 备注     |
| ------ | ------ | -------- | -------- |
|\|-username   | string    | 必须   | 读者用户名                       |
|\|-password   | string    | 必须   | 账户密码                       |
|\|-realName   | string    | 必须   | 姓名                       |
|\|-sex   | string    | 必须   | 性别                       |
|\|readerNumber   | string    | 必须   | 用户编号                       |
|\|-birthday   | string    | 必须   | 出生日                       |
|\|-address   | string    | 必须   | 地址                       |
|\|-tel   | string    | 必须   | 电话号码                       |
|\|-email  | string    | 必须   | 邮箱                       |



请求参数样例：

```json
{
            "username": "user1",
            "password": "密码zs",
            "realName": "张三",
            "sex": 0,
            "birthday": "2024-06-15T00:00:00",
            "address": "北京市朝阳区",
            "tel": "1234567890",
            "email": "user1@test.com",
            "readerNumber": "R12345"
}
```

#### 3.5.3 响应数据

参数格式：application/json

参数说明：

| 参数名 | 类型   | 是否必须 | 备注                           |
| ------ | ------ | -------- | ------------------------------ |
| code   | number | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg    | string | 非必须   | 提示信息                       |
| data   | object | 非必须   | 返回的数据                     |

响应数据样例：

```json
{
    "code":1,
    "msg":"success",
    "data":null
}
```


### 3.6 根据ID查询

#### 3.6.1 基本信息

> 请求路径：/reader/{id}
>
> 请求方式：GET
>
> 接口描述：该接口用于根据ID查询读者信息数据


#### 3.6.2 请求参数

参数格式：路径参数

参数说明：

| 参数名 | 类型   | 是否必须 | 备注   |
| ------ | ------ | -------- | ------ |
| id     | number | 必须     | 读者ID |

请求参数样例：

```
/reader/1
```

#### 3.6.3 响应数据

参数格式：application/json

参数说明：

| 参数名         | 类型      | 是否必须 | 备注                           |
| -------------- | --------- | -------- | ------------------------------ |
| code           | number    | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg            | string    | 非必须   | 提示信息                       |
| data           | object[ ] | 非必须   | 返回的数据                     |
|\|-id         | number    | 非必须   | 编号                        |                     |
|\|-username   | string    | 非必须   | 读者用户名                       |
|\|-password   | string    | 非必须   | 账户密码                       |
|\|-realName   | string    | 非必须   | 姓名                       |
|\|-sex   | string    | 非必须   | 性别                       |
|\|readerNumber   | string    | 非必须   | 用户编号                       |
|\|-birthday   | string    | 非必须   | 出生日                       |
|\|-address   | string    | 非必须   | 地址                       |
|\|-tel   | string    | 非必须   | 电话号码                       |
|\|-email  | string    | 非必须   | 邮箱                       |
|\|-registerDate  | string    | 非必须   | 账号注册时间                       |

响应数据案例：

```json
{
   "code": 1,
    "msg": "success",
    "data": [
        {
            "id": 6,
            "username": "user1",
            "password": "密码zs",
            "realName": "张三",
            "sex": 0,
            "birthday": "2024-06-15T00:00:00",
            "address": "北京市朝阳区",
            "tel": "1234567890",
            "email": "user1@test.com",
            "registerDate": "2024-05-23T09:00:00",
            "readerNumber": "R12345"
        }
    ]
}
```

### 3.7 修改读者信息

#### 3.7.1 基本信息

> 请求路径：/readersPut/{id}
>
> 请求方式：PUT
>
> 接口描述：该接口用于根据id修改读者信息数据



#### 3.7.2 请求参数

格式：路径参数

参数说明：

| 参数名 | 类型   | 是否必须 | 备注     |
| ------ | ------ | -------- | -------- |
| id     | number | 必须     | 读者ID   |

请求参数样例：

```json
/readersPut/1
```

#### 3.7.3 响应数据

参数格式：application/json

参数说明：

| 参数名 | 类型   | 是否必须 | 备注                           |
| ------ | ------ | -------- | ------------------------------ |
| code   | number | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg    | string | 非必须   | 提示信息                       |
| data   | object | 非必须   | 返回的数据                     |

响应数据样例：

```json
{
    "code":1,
    "msg":"success",
    "data":null
}
```
### 3.8 增加读者信息

#### 3.8.1 基本信息

> 请求路径：/readers
>
> 请求方式：POST
>
> 接口描述：该接口用于新增读者信息数据



#### 3.7.2 请求

请求样例：

```json
/readers
```

#### 3.7.3 响应数据

参数格式：application/json

参数说明：

| 参数名 | 类型   | 是否必须 | 备注                           |
| ------ | ------ | -------- | ------------------------------ |
| code   | number | 必须     | 响应码，1 代表成功，0 代表失败 |
| msg    | string | 非必须   | 提示信息                       |
| data   | object | 非必须   | 返回的数据                     |

响应数据样例：

```json
{
    "code":1,
    "msg":"success",
    "data":null
}
```

hinxx
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据库第十次作业--视图
w_ll_an的博客
04-12 3027
创建视图 create view 视图名 as 查询语句; 使用试图sele 删除试图 查看视图字段信息 查看视图创建语句
软件工程第五次作业
lpZhouYi的博客
05-04 4006
软件工程第五次作业 回答下列问题。 (1)什么是模块测试和集成测试?它们各有什么特点? (2)假设有一个由1 000行FORTRAN语句构成的程序(经编译后大约有5 000条机器指令),估计在对它进行测试期间将发现多少个错误?为什么? (3)设计下列伪码程序的语句覆盖和路径覆盖测试用例: START INPUT (A,B,C) IFA>5 THEN X= 10 ELSE X=...
c基础第十次作业
weilongmi的博客
11-23 492
MySQL第十次作业
weixin_61961364的博客
05-01 743
，
数据库第十次作业——视图
XXXA6的博客
05-01 628
软件工程第三次作业
lpZhouYi的博客
05-04 3591
软件工程第三次作业 某交易所规定给经纪人的手续费计算方法如下:总手续费等于基本手续费加上与交易中的每股价格和股数有关的附加手续费。如果交易总金额少于1 000元，则基本手续费为交易金额的8. 4%;如果交易总金额在1 000元到10 000元之间,则基本手续费为交易金额的5%,再加34元;如果交易总金额超过10 000元，则基本手续费为交易金额的4%加，上134元。当每股售价低于14 元时，附加...
数据库第十二次作业
weixin_61961351的博客
04-24 779
软件工程第六次作业
lpZhouYi的博客
05-04 6508
软件工程第六次作业 第一题 对一个包含10000条机器指令的程序进行一个月集成测试后,总共改正了15个错误,此时MTTF= 10h;经过两个月测试后,总共改正了25个错误(第二个月改正了10个错误) ,MTTF= 15h。 要求: (1)根据上述数据确定MTTF与测试时间之间的函数关系,画出MTTF与测试时间τ的关系曲线。在画这条曲线时做了什么假设? (2)为做到MTTF= 100h,必须进行多...
软件工程第四次作业
lpZhouYi的博客
05-04 5608
软件工程第四次作业 研究下面给出的伪码程序 要求: (1)画出它的程序流程图。 (2)它是结构化的还是非结构化的?说明理由。 (3)若是非结构化的,则 (a)把它改造成仅用3种控制结构的结构化程序; (b)写出这个结构化设计的伪码; ©用盒图表示这个结构化程序。 (4)找出并改正程序逻辑中的错误。 COMMENT: PROGRAM SEARCHES FOR FIRST N REFERENCES ...
人工智能原理与算法第十次作业
weixin_44559265的博客
01-21 402
第十次作业 教科书 P299-303 -9.3 -9.4 -9.7 -9.19 -9.23
MATLAB第十次作业.pdf
05-27
标题中的“MATLAB第十次作业”指的是一个使用MATLAB编程解决特定工程问题的作业，而描述中的信息再次确认了这是关于MATLAB的一项任务。在这个作业中，学生被要求利用MATLAB的`pdepe`函数来求解化学工程中一个涉及...
第十次作业1
08-08
第十次作业1
交大-计算机第一次作业.doc
12-06
通过对交大-计算机第一次作业的分析，我们可以总结出以下计算机基础知识点： 1. 计算机系统：计算机系统包括硬件系统和软件系统两个方面。硬件系统由运算器、存储器、输入设备、输出设备和控制器组成。软件系统包括...
计算机组成原理第四次作业答案.doc
11-26
计算机组成原理第四次作业主要涉及了指令执行流程、指令周期的概念、控制器的时序划分、组合逻辑控制器与微程序控制器的对比、微程序控制的基本思想、控制存储器的内容及特点、微指令的结构、微命令分组原则以及功能...
第10次作业_字符串加密.cpp
12-10
第10次作业_字符串加密.cpp
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1463
本文介绍了电子签名、图片合成、及预览功能
vue+element 根据父容器动态设置table高度出滚动条
最新发布
xu_duo_i的博客
08-02 317
vue+element 根据父容器动态设置table高度出滚动条
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 308
SignList这三个页面就是需要切换的页面。
vue3中 provide/inject用法详解
红烧咸咸鱼
08-02 500
vue3中 provide/inject用法详解
概率算法设计与分析第一次作业
"算法分析与设计第一次作业" 概率算法是算法设计中的一种重要方向，用于解决复杂问题的近似解。概率算法的基本思想是使用随机性来减少计算复杂度，提高算法的效率。 在概率算法中，使用随机数生成器来生成随机数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值