# flask

**Repository Path**: timem00n/flask

## Basic Information

- **Project Name**: flask
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-16
- **Last Updated**: 2021-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目名称：多人课程表
在json文件中输入了用户的课程表、用户名称、用户密码后，将此数据传入flask项目内，用于各个页面之间数据的验证与绑定。
利用flask框架，对数据与参数进行绑定并传入HTML界面，解决不同用户在相同界面可看到与自身相对应的课程表问题。
利用if elif判断语句，判断用户输入密码是否与此用户的用户名相对应，如果不对应，利用elif语句返回html页面

<img src="https://gitee.com/timem00n/flask/raw/master/pic/%E5%8A%9F%E8%83%BD%E6%B5%81%E7%A8%8B%E5%9B%BE.png">



## 问题表述
该python项目主要用于储存多名用户的课程表、用户名、用户密码，利用用户名称对课程表归属进行区分，利用用户密码确认此用户是否能够获取当前账号的课程表内容。

### 用户画像
> 名称：李华  
> 年龄：19  
> 年级：大二  
> 需求：想为同学做一个课程表网页，在爬取了教务系统后获得了同学课程表后无法将这些课程表与用户一一相对应  



## 解决方案表述
在构建flask项目之前，先制作一个简易的json文件，对不同的学生数据进行录入，其中主要包括课程表、用户名、用户密码（此json文件仅负责一个数据库功能，如果数据足够庞大，可用mysql文件代替），将这些数据传入flask项目后，进行分组判定。  
1. 判定用户名称是否与用户所输入密码相对应：
利用表单功能，将html中input获取到的数值返回至flask其中一个函数内，利用request.form方法获取此表单传入的数值，得到用户输入密码的具体数值，随后引入json文件，利用python中的for循环，查看此密码是否在此账号名下，随后利用if else语句进行判断：如果此密码不在此用户名下，则利用JavaScript的alert方法，跳出弹窗"您输入的密码与用户名称不匹配，请确认后重新输入"。    

使用技术点： 
> python:if判断语句、for循环、flask框架中的数据绑定、json模块的使用  
> JavaScript: DOM、alert方法    

<img src="https://gitee.com/timem00n/flask/raw/master/pic/%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.png">
（登录页面如上图所示）  

<img src="https://gitee.com/timem00n/flask/raw/master/pic/%E5%AF%86%E7%A0%81%E9%94%99%E8%AF%AF.png">
(密码错误弹出框如上图所示)

2. 将json数据绑定至html页面：  
将不同用户的课程表读取后，将此数据一一传至课程表显示页面，利用flask框架中的数据绑定方法，将html中表格中的所有数据与json文件中用户的课程表信息相互绑定，最后将用户课程表信息呈现在html中

使用技术点：
> python：flask框架中的数据绑定，将json文件中的数据绑定至html中



3. 修改密码：  
在修改密码页面，利用if语句判断输入的新密码与旧密码是否相同、旧密码是否正确、两次输入的新密码是否一致。

使用技术点
> python：if判断语句、json模块使用

## 核心功能：
1. 用户名与用户密码的验证
2. 用户课程表与html文件进行传参绑定 [将用户的课程表数据渲染至html中]
3. 用户可更改自己的密码

### 编程功能的基本描述
此功能的核心功能较为简单，主要所需的知识点：
> python:
>> 1. 需要掌握python数据类型与数据结构  项目功能占比：60%[此为python学习基本功，囊括了接下来的python知识部分的2、3点]
>> 2. 学会使用python中的json库对json文件进行操作  项目功能占比：10%
>> 3. 对flask框架的使用有一个基础了解学会使用其中的request方法   项目功能占比：50%

> html：
>> 基础的html语义标签使用，包括img、div等 项目功能占比：20%

>css:
>> CSS基础的属性使用，包括position、margin、border、padding等 项目功能占比：10%

> JavaScript：
>> 基础的JavaScript语法能力，学会使用JavaScript对html内容进行监听与操作 项目功能占比：10%

## 学习实践心得与感谢：
在本次项目完成中，大部分应用了许智超老师在课上所讲的flask框架的基础使用，另外感谢kaikai4在CSDN网站中分享的[利用JavaScript对html中audio标签进行操作的方法](https://blog.csdn.net/kaikai4/article/details/51776581)

代码如下图所示：
<img src="https://gitee.com/timem00n/flask/raw/master/pic/js%E6%8E%A7%E5%88%B6html%E4%B8%ADaudio%E6%92%AD%E6%94%BE.png">






# 账号说明：  
* 初始用户名1. twodog  
* 初始用户名2. tongding  
* 初始密码都为123456

# 功能说明
1. 可根据不同用户的课程调出不同课程表
2. 确认用户名与密码是否相对应，如果不对应，则返回登录界面
3. 在html页面中插入背景音乐，由于chorme内部设置音频文件无法自动响起，应用JS文件监听并启动背景音乐（虽然好像和课程无关）
4. 新功能1：在课程表页面添加修改密码的按钮
5. 添加密码修改逻辑：当新密码与旧密码一致是返回修改界面，当两次输入的新旧密码不一致时也返回修改界面