[项目实训]VJ前端之Problem的显示

首先从vj的数据库进去导入数据到本地并反向生成模型对象并存入app目录下的models.py

进入settings.py 配置数据库

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'vj',
'USER': 'root',
'PASSWORD': 'ssq960424',
'HOST': 'localhost',
'PORT': '3306'
}
}

同时因为使用mysql，修改项目根目录下的__init__.py

import pymysql
pymysql.install_as_MySQLdb()

接着编写views.py,urls.py,前端模板在原有oj上可以借鉴稍作修改

views.py

from django.shortcuts import render
from .models import *
from django.forms.models import model_to_dict
# Create your views here.

def problem_detail(req, pid):
problem = Problem.objects.get(problemid=pid)
content = model_to_dict(problem)
#content = {'originoj':'hdu','problemid':1001}
return render(req,'problem/problem_detail.html',content)

problem_base.html

{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block navbar %}{% include "include/navbar-problem.html" %}{% endblock %}

{% block header %}
<div class="text-center">
<h1 class="text-success">{{ title }}</h1>
<ul class="list-inline">
<li>Time Limit: {{ timelimit }}s</li>
<li>Memory Limit: {{memorylimit}}</li>
<li>Origin OJ: {{originoj}}</li>
</ul>
</div>

<link rel="shortcut icon" href="/static/img/favicon.ico">
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/static/js/csrf.js"></script>
<script src="/static/js/jquery.form.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/js/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/css/shBrushCpp.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/css/shBrushJava.js"></script>
<link href="/static/syntaxhighlighter/css/shCore.css" rel="stylesheet" type="text/css"/>
<link href="/static/syntaxhighlighter/css/shThemeDefault.css" rel="stylesheet" type="text/css"/>

{% endblock %}

{% block content %}
<div class="panel panel-default">
{% include "problem/include/subnav.html" %}
</div>
{% block detail %}
{% endblock %}
{% endblock %}

problem_detail.html

{% extends "problem/problem_base.html" %}

{% block detail %}
<style type="text/css">
pre{
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
}
</style>

{% autoescape off %}

<h3 class="text-info">Description</h3>
<pre>{{ description }}</pre>

<h3 class="text-info">Input</h3>
<pre>{{ input }}</pre>

<h3 class="text-info">Output</h3>
<pre>{{ output }}</pre>

{% endautoescape %}

<h3 class="text-info">Sample Input</h3>
<pre>{{ sampleinput }}</pre>

<h3 class="text-info">Sample Output</h3>
<pre>{{ sampleoutput }}</pre>

{% autoescape off %}

<h3 class="text-info" >Note</h3>
<pre>{{ updatetime }}</pre>

<h3 class="text-info">Source</h3>
<pre>{{ originoj }} {{problemid}}</pre>

{% endautoescape %}

{% endblock %}

由于这周准备考试计划中的ProblemList的页面编写延后，同时发现数据库中的一些设计可能还有缺陷要与小伙伴们讨论下