簡(jiǎn)介
主要用于班級(jí)作業(yè)通知與管理的網(wǎng)站
功能
- 1.普通成員：
1）瀏覽學(xué)習(xí)委員發(fā)布的作業(yè)通知
2）認(rèn)證郵箱，是否開啟郵箱通知
- 2.學(xué)委
1）可以編輯匹颤、修改雕憔、刪除和發(fā)布作業(yè)通知等相關(guān)作業(yè)的操作筛谚；
2）管理成員：可以通過id的查找上鞠、可以刪除本班成員
4）可上傳圖片尺借，插入在線媒體標(biāo)簽份汗，比如音樂盈电、視頻等
- 3.高級(jí)管理員
1)可以管理所有成員
2)可以修改普通成員的所屬班別
另外，系統(tǒng)默認(rèn)為開啟郵箱通知的用戶發(fā)送郵件
開發(fā)用到的技術(shù)：
1.部署系統(tǒng)是Ubuntu,采用的是gunicorn Wsgi Http Server,[鏈接](http://gunicorn.org/杯活，同時(shí)應(yīng)用了nginx反向代理)
2.作業(yè)編輯器采用了開源的富文本wangEditor,[鏈接](http://www.wangeditor.com)
3.前端框架使用的bootstrap v3,因?yàn)樾枨骳ss有一點(diǎn)小改動(dòng)
4.Web應(yīng)用框架使用的是Flask
5.數(shù)據(jù)庫Mysql 5.5.6
技術(shù)要點(diǎn)：
1.認(rèn)證用戶
用戶登錄之后匆帚，記錄用戶認(rèn)證狀態(tài)，實(shí)現(xiàn)用戶多個(gè)頁面切換依然記住用戶的認(rèn)證狀態(tài)
- 方案使用Flask-Login
[1].安裝擴(kuò)展
pip install flask-login
[2].用戶模型app/model.py
from flask_login import UserMixin
...
class Students(UserMixin, db.Model):
__tablename__ = 'students'
...
[3].初始化LoginManager:app/ __init__.py
from flask_login import LoginManager
login_manager = LoginManager()
login_manager.session_protection = 'strong'
login_manager.login_view = 'main.login'
def getApp(config_name):
...
login_manager.init_app(app)
...
[4].回調(diào)函數(shù)的實(shí)現(xiàn)：app/model.py
from . import login_manager
...
@login_manager.user_loader
def load_user(user_id):
return Students.query.get(user_id)
...
2.富文本wangEditor的使用
需求
（1）把原來的內(nèi)容文本框換成富文本wangEditor
（2）實(shí)現(xiàn)圖片的實(shí)時(shí)上傳
- 需求（1）方案：隱藏原來文本輸入框旁钧，構(gòu)建新的wangEditor吸重，當(dāng)按下'提交'時(shí)，把內(nèi)容賦值到被隱藏的文本輸入框
templates/editwork.html
...
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/wangEditor.min.js') }}"></script>
<script type="text/javascript">
var $text1 = $('#content')
$text1.hide()
$text1.after('<div id=\'editor\' class=\'form-group\'></div>')
$ed = $('#editor')
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.menus = [
'head', // 標(biāo)題
'bold', // 粗體
'fontSize', // 字號(hào)
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對(duì)齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'video', // 插入視頻
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復(fù)
]
$ed.html('{{ content|safe }}')
editor.customConfig.uploadImgServer = '/homework/upload'
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
editor.create()
// 初始化 textarea 的值
document.getElementById('submit').addEventListener('click', function () {
$text1.val(editor.txt.html())
}, false)
</script>
...
- 需求（2）方案：對(duì)上傳的臨時(shí)圖片進(jìn)行保存歪今，上傳的圖片的名字進(jìn)行了md5處理后會(huì)在數(shù)據(jù)庫進(jìn)行保存,當(dāng)用戶提交了之后這條數(shù)據(jù)會(huì)被增加一個(gè)指向的houseworkid的值嚎幸，并且會(huì)對(duì)沒有hfk_workid的圖片進(jìn)行清理。
app/main/view.py
...
# 保存圖片
@main.route('/homework/upload', methods=['POST'])
@login_required
def upload():
data = []
for i in request.files:
t = request.files[i]
name = hashlib.md5((i + current_user.id + str(datetime.now())).encode('utf-8')).hexdigest()
sufix = i[i.rfind('.'):len(i)]
path = 'app/static/upload/' + name + sufix
t.save(path)
data.append(url_for('static', filename='upload/' + name + sufix))
picsave = PicSave(fk_sid=current_user.id, path=path)
db.session.add(picsave)
try:
db.session.commit()
except:
db.session.rollback()
flash('更新數(shù)據(jù)失敿男伞嫉晶！')
json_data = {"errno": 0, "data": data}
return json.dumps(json_data)
...
# 圖片處理代碼片段,從數(shù)據(jù)庫中找出沒有fk_workid的進(jìn)行刪除
delpic = PicSave.query.filter_by(fk_sid=current_user.id,fk_workid=None).all()
for p in delpic:
os.remove(p.path)
db.session.delete(p)
db.session.commit()
...
演示
演示.gif
管理用戶1
管理用戶2
管理用戶3
