Python+Vue开发Web入门实例

其实是个夭折了的练手项目,用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 首页

    
    
    
    
    
    
    




    

        

            

                
文明单位测试题库
                

                        
刷新
                        
提交
                
                
            
        
        

            

                

                    

                        

                            

                                
编号
                                
题目
                                
选项
                                
结果
                                
答案
                            
                        
                        

                            
{{q.id}}
                            
{{q.title}}
                            

                                

                                    
                                    {{op}}
                                
                            
        
                            

                            
{{q.answer}}
                    
                
            
        
    



    
    
    
    
    

css.css 自定义样式

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