其实是个夭折了的练手项目,用Python写的后端,提供json格式数据给前端Vue进行渲染

代码写的比较乱,不过还是不忍扔掉,归档记录一下吧,以后再用到了也可以做个参考

数据库

文件列表

db.py 数据库操作

import pymysql
import jsonclass Db:def connect(self):# 设置连接属性cursorclass返回查询结果为dict类型序列conn = pymysql.connect('localhost', 'root', '', 'wenming', charset='utf8', cursorclass=pymysql.cursors.DictCursor)cursor = conn.cursor()return conn, cursordef query(self, sql):conn,cursor = self.connect()cursor.execute(sql)result = cursor.fetchall()conn.close()return json.dumps(result, ensure_ascii=False)# 校验单个提交的问题答案是否正确# answer格式{'id' : 1, 'op': 'A'}def checkAnswer(self, answer:dict):conn,cursor = self.connect()sql = 'select answer from danxuan where id = %d' # 查询返回结果格式:{'answer': 'D'}cursor.execute(sql % answer['id'])correctAnswer = cursor.fetchone()['answer']conn.close()if answer['op'] == correctAnswer:return Trueelse:return False

web.py 使用Flask提供json数据

from flask import Flask, Response, request
from flask_cors import CORS
from db import Db
import jsonmydb = Db()app = Flask(__name__)
CORS(app)@app.route('/')
def index():# return Response(mydb.query('select * from danxuan limit 3'), mimetype='application/json')return mydb.query('select * from danxuan order by rand() limit 5')@app.route('/do', methods = ['POST'])
def check():data = request.json    # dict类型,调用需要使用['key']的方式resultList = []for d in data:# print(str(d['id']) + ' ' + d['op'] + '结果:' + str(mydb.checkAnswer(d)))resultList.append({'id': d['id'], 'correct': mydb.checkAnswer(d)})result = json.dumps({'status': 'OK', 'result': resultList}) return resultif __name__ == '__main__':app.run()

index.html 首页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文明单位模拟测试题</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link rel="stylesheet" href="css.css"><style>[v-cloak] {display: none !important;}</style>
</head><body><div class="container pt-2" id="main" v-cloak><div class="row"><div class="col-md-12"><h2 class="d-inline">文明单位测试题库</h2><div class="float-right"><div class="btn btn-secondary mr-4" onclick="doRefresh()">刷新</div><div class="btn btn-success" onclick="doSubmit()">提交</div></div></div></div><div class="row mt-2"><div class="col-md-12"><form id="ceyan"><table class="table table-bordered table-striped"><thead><tr><th class="text-center" style="width:4em">编号</th><th class="text-center" style="width:60%">题目</th><th class="text-center">选项</th><th class="d-none result text-center">结果</th><th class="d-none answer text-center">答案</th></tr></thead><tr v-for="q in questions"><td class="text-center align-middle">{{q.id}}</td><td class="align-middle">{{q.title}}</td><td class="align-middle"><div class="custom-control custom-radio"  v-for="op in q.options"><input type="radio" class="custom-control-input" :name=q.id :id=q.id+op.substr(0,1) :value=op.substr(0,1)><label class="custom-control-label" :for=q.id+op.substr(0,1)>{{op}}</label></div></td>        <td class="d-none result"><span :id=q.id+'result'></span></td><td class="d-none answer">{{q.answer}}</td></table></form></div></div></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script type="text/javascript">var v = new Vue({el: '#main',data: {questions: []}})$(document).ready(function () {            initData()});function initData(){$.getJSON("http://localhost:5000/", function (result, status) {var questions = new Array();$.each(result, function (key, val) {var options = val.options.split(' '); //拆分选项questions.push({ id: val.id, title: val.title, options: options, answer: val.answer })})v._data.questions = questions;});}function doRefresh(){$('input').removeAttr('checked');initData()}function doSubmit(){count = v._data.questions.length;var answers = new Array();$.each(v._data.questions, function(key,val){op = $('input[name="'+ val.id +'"]:checked').val();answers.push({id:val.id, op:op})})// for(i=1;i<count+1;i++){//     op = $('input[name="'+ i +'"]:checked').val();//     answers.push({id:i, op:op})// }var jdata = JSON.stringify(answers);$.ajax({type:'POST',url:'http://localhost:5000/do',dataType:'json',contentType: 'application/json; charset=utf-8',data:jdata,success:function(data){// data内容:// {"status": "OK", "result": [{"id": 1, "correct": true}, {"id": 2, "correct": false}, {"id": 3, "correct": true}]}$.each(data.result, function(key,val){//console.log(val.id + ' : ' + val.correct);if(val.correct==true){$('#' + val.id + 'result').text('√');$('#' + val.id + 'result').addClass('right');}else{$('#' + val.id + 'result').text('×');$('#' + val.id + 'result').addClass('wrong');}})// 显示结果和答案$('.result').removeClass('d-none');$('.answer').removeClass('d-none');}});}</script>
</body></html>

css.css 自定义样式

.wrong{font-size:2em;font-weight:bold;color:red
}
.right{font-size:2em;font-weight:bold;color:green
}

Python+Vue开发Web入门实例相关推荐

Python爬虫开发从入门到实战
Python爬虫开发从入门到实战(微课版) 第1章绪论爬虫的主要目的是获取网页内容并解析.只要能达到这个目的,用什么方法都没有问题. 关于获取网页,本书主要介绍了Python的两个第三方模块,一个 ...
python人工智能开发-Python人工智能开发从入门到精通
(1)深入浅出,实操性强.每一章都是以实例为主,读者可参考源代码,修改实例,切换数据源,就能得到自己想要的结果.目的就是让读者看得懂.学得会.做得出.(2)专业专注,学以致用.NumPy.Pandas ...
Android游戏开发的入门实例
在Android系统上开发游戏是Android开发学习者所向往的,有成就感也有乐趣,还能取得经济上的报酬.那怎样开发Android游戏呢?下面介绍一个简单的入门实例. 一.创建 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
使用Python Django开发web应用5 URL映射、模板和视图
版本声明:转载请注明出处.未经允许,禁止商业用途. 使用Python Django开发web应用5 URL映射.模板和视图 ----刘一凡创建模板在D:\django\web\blog\中创建te ...
使用Python Django开发web应用15 缓存
版本声明:转载请注明出处.未经允许,禁止商业用途. 15 使用Python Django开发web应用缓存讲师:刘一凡第一步: 在settings.py中进行添加 CACHES = { ...
使用Python Django开发web应用4 模型和数据库
版本声明:转载请注明出处.未经允许,禁止商业用途. 使用Python Django开发web应用模型和数据库 ----刘一凡数据库配置 Django支持很多数据库,官方支持PostgreSQL. ...
使用Python Django开发web应用14 静态文件
版本声明:转载请注明出处.未经允许,禁止商业用途. 14 使用Python Django开发web应用静态文件讲师:刘一凡第一步: 准备静态文件,制作图片OurBlog 第二步: 缺省配置下.静 ...
python 题库系统,Python可以开发Web程序，也可以管理操作系统。
Python可以开发Web程序,也可以管理操作系统. 更多相关问题请论述什么是正常?什么是异常? 哪些用地需要招标.拍卖或者挂牌出让国有建设用地使用权? 如何防止给水管道振动? 下列哪些事件的发生会 ...

Python+Vue开发Web入门实例

数据库

文件列表

db.py 数据库操作

web.py 使用Flask提供json数据

index.html 首页

css.css 自定义样式

Python+Vue开发Web入门实例相关推荐

最新文章

热门文章