基于vue.js+python flask+mysql实现的网页文件系统

基于vue.js+python+mysql实现的网页文件系统

项目介绍

本项目是基于python语言和vue实现的一个网页文件系统,功能还算可以,项目中一些地方也用到了加密算法。

功能介绍

用户功能

  1. 登录,注册,修改密码;
  2. 在公共的文件区域可以浏览、下载其他用户上传的文件也可以上传文件到公共区;
  3. 对于自己的文件收藏可以浏览、下载、上传、删除文件;
  4. 用户之间也可以通过分享文件生成的链接来进行文件传输;

部分功能图片
登录界面在这里插入图片描述
公共文件区在这里插入图片描述在这里插入图片描述

管理员功能

  1. 管理员拥有用户的所有功能,同时可以管理用户,可以删除用户,修改用户的密码和设置用户的身份;
  2. 对用户上传到公共区的文件进行删除操作;

部分功能图片
管理用户信息

部分后端代码

1.用户登录
利用post方式前端向后端传递表单,进行用户名,密码验证,密码在前端进行了md5加密
代码片.

def login_login():
    if request.method == "POST":
        username = request.form.get("username")
        password = request.form.get("password")
        cursor.execute("select id,username,role,ctime from login where username=\""
                       +str(username)+"\" and password=\""+str(password)+"\"")
        data = cursor.fetchone()
        if(data!=None):
            print("result:",data)
            jsondata = {"id":str(data[0]),"username":str(data[1]),
                        "role":str(data[2]),"ctime":str(data[3])}
            return jsonify(jsondata)
        else:
            print("result: NULL")
            jsondata = {}
            return jsonify(jsondata)

2.文件上传
文件传递到后端后,后端会获取到文件的相关内容,同时后以二进制的形式读出文件,并计算出文件的MD5值以进行文件验证,同时将文件的相关内容写入数据库。文件后上传到设置好的路径。
代码片.

def upload():
   if request.method == 'POST':
       f = request.files['file']
       global Uname
       autor = Uname
       print(autor)
       basedir = os.path.dirname(__file__)
       ctime = time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time()))
      
       file_path = os.path.join(basedir,'myFavorite/uploads/file1',f.filename)
       f.save(file_path)

       m = hashlib.md5()
       mfile=open(file_path,'rb')
       data = mfile.read(1024)
       while data:
           m.update(data)
           data = mfile.read(1024)
       cmd5 = m.hexdigest()   
       mfile.close()
       try:
            cursor.execute("insert into file(fname,autor,ctime,cmd5) values (\""
                            +str(f.filename)+"\",\""+str(autor)+"\",\""
                            +str(ctime)+"\",\""+str(cmd5)+"\")")
            db.commit() #提交,使操作生效
            print("add a new favorite successfully!")
            return "上传成功"
       except Exception as e:
            print("add a new favorite failed:",e)
            db.rollback() #发生错误就回滚
            return "上传失败"

  1. 浏览功能
    前端通过windows。Open函数打开后端链接进行文件浏览

代码片.

def get_images(filename):
    basedir = os.path.dirname(__file__)
    file_path = os.path.join(basedir,'myFavorite/uploads/file1')
    print(file_path)
return send_from_directory(file_path,filename)  

4 . 文件下载
利用return send_from_directory(dirpath, filename, as_attachment=True)方法实现浏览器下载文件,文件的下载路径为浏览器的默认路径

代码片.

def downloads(filename):
dirpath = os.path.join(app.root_path, 'myFavorite/uploads/file1')      
return send_from_directory(dirpath, filename, as_attachment=True)

这是一个期末作业,简单记录一下,功能不是特别完善。

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
实现登录注册的步骤如下: 1. 前端使用 Vue 框架实现登录注册页面,并通过 Ajax 请求向后端发送登录注册请求。 2. 后端使用 Flask 框架搭建 Web 服务器,接收前端发送的请求,并通过 SQLAlchemy 实现MySQL 数据库的交互。 3. 在 MySQL 数据库中创建用户表,用于存储用户信息,包括用户名、密码等。 4. 实现注册功能:前端发送注册请求,后端接收请求后将用户信息插入到用户表中。 5. 实现登录功能:前端发送登录请求,后端接收请求后从用户表中查询用户名和密码,如果匹配成功则返回登录成功的信息,否则返回登录失败的信息。 下面是一个简单的示例代码: 前端代码: ```html <template> <div> <h2>登录</h2> <input v-model="username" placeholder="请输入用户名"> <input v-model="password" placeholder="请输入密码"> <button @click="login">登录</button> <h2>注册</h2> <input v-model="regUsername" placeholder="请输入用户名"> <input v-model="regPassword" placeholder="请输入密码"> <button @click="register">注册</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { username: '', password: '', regUsername: '', regPassword: '', } }, methods: { login() { axios.post('/api/login', { username: this.username, password: this.password, }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); }, register() { axios.post('/api/register', { username: this.regUsername, password: this.regPassword, }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); }, } } </script> ``` 后端代码: ```python from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/dbname' db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(20), unique=True, nullable=False) password = db.Column(db.String(20), nullable=False) @app.route('/api/register', methods=['POST']) def register(): username = request.json['username'] password = request.json['password'] user = User(username=username, password=password) db.session.add(user) db.session.commit() return jsonify({'message': '注册成功'}) @app.route('/api/login', methods=['POST']) def login(): username = request.json['username'] password = request.json['password'] user = User.query.filter_by(username=username, password=password).first() if user: return jsonify({'message': '登录成功'}) else: return jsonify({'message': '用户名或密码错误'}) if __name__ == '__main__': app.run() ``` 其中,`/api/register` 和 `/api/login` 是前端发送请求的地址,通过 `request.json` 获取前端发送的数据,使用 SQLAlchemy 实现数据库操作,最后返回相应的信息。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值