Python+Vue开发Web入门实例

其实是个夭折了的练手项目,用Python写的后端,提供json格式数据给前端Vue进行渲染代码写的比较乱,不过还是不忍扔掉,归档记录一下吧,以后再用到了也可以做个参考数据库文件列表db.py 数据库操作import pymysqlimport jsonclass Db:def connect(self):# 设置连接属性curs...

DexterLien

3972人浏览 · 2019-10-18 11:06:47

DexterLien · 2019-10-18 11:06:47 发布

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

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

数据库

文件列表

db.py 数据库操作

import pymysql
import json

class Db:
    def connect(self):
        # 设置连接属性cursorclass返回查询结果为dict类型序列
        conn = pymysql.connect('localhost', 'root', '', 'wenming', charset='utf8', cursorclass=pymysql.cursors.DictCursor)
        cursor = conn.cursor()
        return conn, cursor

    def 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 True
        else:
            return False

web.py 使用Flask提供json数据

from flask import Flask, Response, request
from flask_cors import CORS
from db import Db
import json

mydb = 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 result


if __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
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^