base
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>首页 -</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="首页">
<meta name="description" content="首页">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/static/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<aside class="lyear-layout-sidebar">
<!-- logo -->
{# <div id="logo" class="sidebar-header">#}
{# <a href="/"><img src="/static/images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>#}
{# </div>#}
<div class="lyear-layout-sidebar-scroll">
<nav class="sidebar-main">
<ul class="nav nav-drawer">
<li class="nav-item">
<a href="/"><i class="mdi mdi-palette"></i> 图谱查询展示</a>
</li>
<li class="nav-item">
<a href="/wenda"><i class="mdi mdi-format-align-justify"></i> 关系图谱问答</a>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<p class="copyright">Copyright © 2024 数据库知识图谱问答系统 <a target="_blank" href="/"></a>
All rights reserved.</p>
</div>
</div>
</aside>
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar navbar-default">
<div class="topbar">
<div class="topbar-left">
<div class="lyear-aside-toggler">
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
</div>
<span class="navbar-page-title"> 数据库知识图谱问答系统 </span>
</div>
<ul class="topbar-right">
<li class="dropdown dropdown-profile">
<a href="/accounts/logout">
<span>退出</span>
</a>
</li>
<li class="dropdown dropdown-profile">
<a href="javascript:void(0)">
<span>{{ request.user }}</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<!--End 头部信息-->
<!--页面主要内容-->
{% block content %}
{% endblock %}
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<!--图表插件-->
<script type="text/javascript" src="/static/js/Chart.js"></script>
{% if msg %}
<script>
alert("{{ msg }}")
</script>
{% endif %}
</body>
</html>
index
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="lyear-layout-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>查询图谱---<a href="http://localhost:7474/browser/" target="_blank">查看图谱数据库</a></h4></div>
<div class="card-body">
<form action="/" method="get">
{% csrf_token %}
<div class="form-group">
<label for="example-nf-email">开始节点</label>
<input class="form-control" type="text" name="start" placeholder="请输入节点..">
</div>
<div class="form-group">
<label for="example-nf-email">关系</label>
<input class="form-control" type="text" name="relation" placeholder="请输入关系..">
</div>
<div class="form-group">
<label for="example-nf-email">结束节点</label>
<input class="form-control" type="text" name="end" placeholder="请输入节点..">
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">查询节点</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>图谱展示</h4></div>
<div class="card-body">
<div id="main" style="width: 100%;height: 600px"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="/static/jquery-1.10.2.min.js"></script>
<script src="/static/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option1 = {
// backgroundColor: "white",
title: {
text: '关系图谱',
textStyle: {
// color: "white",
fontWeight: "lighter",
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
legend: {
x: "center",
show: true,
data: {{ legend_data | safe }}
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 50,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 4],
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
},
textStyle: {
fontSize: 10
},
}
},
force: {
repulsion: 2500,
edgeLength: [10, 100]
},
focusNodeAdjacency: true,
draggable: true,
roam: true,
categories: {{ categories | safe }},
label: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
}
},
force: {
repulsion: 1000
},
tooltip: {
formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
if (!node.value) {
return node.data.name;
} else {
return node.data.name + ":" + node.data.showNum;
}
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0.3
}
},
// progressiveThreshold: 700,
nodes: {{ datas | safe }},
links: {{ links | safe }},
}
]
};
myChart.setOption(option1);
</script>
{% endblock %}
login
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>登录</title>
<link rel="icon" href="favicon.ico" type="/static/image/ico">
<meta name="keywords" content="登录">
<meta name="description" content="登录">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/static/css/style.min.css" rel="stylesheet">
<style>
body {
background-color: #fff;
}
.lyear-login-box {
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.lyear-login-left {
width: 50%;
top: 0;
left: 0;
bottom: 0;
position: fixed;
height: 100%;
z-index: 555;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.lyear-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
}
.lyear-logo {
margin-bottom: 50px;
}
.lyear-featured {
z-index: 12;
position: absolute;
bottom: 0;
padding: 30px;
width: 100%;
}
.lyear-featured h4 {
color: #fff;
line-height: 32px;
}
.lyear-featured h4 small {
color: #fff;
display: block;
text-align: right;
margin-top: 15px;
}
.lyear-login-right {
margin-left: 50%;
position: relative;
z-index: 999;
padding: 100px;
background-color: #fff;
}
@media screen and (max-width: 1024px) {
.lyear-login-right {
padding: 50px;
}
}
@media screen and (max-width: 820px) {
.lyear-login-left {
width: 100%;
position: relative;
z-index: 999;
height: 300px;
}
.lyear-login-right {
margin-left: 0;
}
}
@media screen and (max-width: 480px) {
.lyear-login-right {
padding: 50px;
}
}
@media screen and (max-width: 320px) {
.lyear-login-right {
padding: 30px;
}
}
</style>
</head>
<body>
<div class="lyear-login-box">
<div class="lyear-login-left" style="background-image: url(/static/images/back.png)">
<div class="lyear-overlay"></div>
<div class="lyear-featured">
<h4> 法律条文是规范性法律文件的基本构成因素，规范性法律文件是法律条文的集合。<small> - 百度百科</small></h4>
</div>
</div>
<div class="lyear-login-right">
<div class="lyear-logo text-center">
<a href="#!"><img src="/static/images/logo-sidebar.png" alt="logo"/></a>
</div>
<form action="/accounts/login" method="post">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input name="username" type="text" class="form-control" id="username" placeholder="请输入您的用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input name="password" type="password" class="form-control" id="password" placeholder="请输入您的密码">
</div>
<div class="form-group">
<button class="btn btn-block btn-primary" type="submit">立即登录</button>
</div>
<p class="m-b-0"><a href="/accounts/register">没有账号，去注册</a></p>
</form>
</div>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">;</script>
{% if errorinfo %}
<script>
alert("{{ errorinfo }}")
</script>
{% endif %}
</body>
</html>
register
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>注册</title>
<link rel="icon" href="favicon.ico" type="/static/image/ico">
<meta name="keywords" content="注册">
<meta name="description" content="注册">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/static/css/style.min.css" rel="stylesheet">
<style>
body {
background-color: #fff;
}
.lyear-login-box {
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.lyear-login-left {
width: 50%;
top: 0;
left: 0;
bottom: 0;
position: fixed;
height: 100%;
z-index: 555;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.lyear-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
}
.lyear-logo {
margin-bottom: 50px;
}
.lyear-featured {
z-index: 12;
position: absolute;
bottom: 0;
padding: 30px;
width: 100%;
}
.lyear-featured h4 {
color: #fff;
line-height: 32px;
}
.lyear-featured h4 small {
color: #fff;
display: block;
text-align: right;
margin-top: 15px;
}
.lyear-login-right {
margin-left: 50%;
position: relative;
z-index: 999;
padding: 100px;
background-color: #fff;
}
@media screen and (max-width: 1024px) {
.lyear-login-right {
padding: 50px;
}
}
@media screen and (max-width: 820px) {
.lyear-login-left {
width: 100%;
position: relative;
z-index: 999;
height: 300px;
}
.lyear-login-right {
margin-left: 0;
}
}
@media screen and (max-width: 480px) {
.lyear-login-right {
padding: 50px;
}
}
@media screen and (max-width: 320px) {
.lyear-login-right {
padding: 30px;
}
}
</style>
</head>
<body>
<div class="lyear-login-box">
<div class="lyear-login-left" style="background-image: url(/static/images/back.png)">
<div class="lyear-overlay"></div>
<div class="lyear-featured">
<h4> 法律条文是规范性法律文件的基本构成因素，规范性法律文件是法律条文的集合。<small> - 百度百科</small></h4>
</div>
</div>
<div class="lyear-login-right">
<div class="lyear-logo text-center">
<a href="#!"><img src="/static/images/logo-sidebar.png" alt="logo"/></a>
</div>
<form action="/accounts/register" method="post">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input name="username" type="text" class="form-control" id="username" placeholder="请输入您的用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input name="password" type="password" class="form-control" id="password" placeholder="请输入您的密码">
</div>
<div class="form-group">
<label for="password">确认密码</label>
<input name="password2" type="password" class="form-control" id="password" placeholder="请输入您的密码">
</div>
<div class="form-group">
<button class="btn btn-block btn-primary" type="submit">注册</button>
</div>
<footer class="text-center">
<p class="m-b-0"><a href="/accounts/login">已有账号，去登录</a></p>
</footer>
</form>
</div>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">;</script>
{% if msg %}
<script>
alert("{{ msg }}")
</script>
{% endif %}
</body>
</html>
wenda
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="lyear-layout-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>请输入问题</h4></div>
<div class="card-body">
<form action="/wenda" method="get">
{% csrf_token %}
<div class="form-group">
<label for="example-nf-email">问题</label>
{# <input class="form-control" type="text" name="key" placeholder="请输入问题"#}
{# value="{{ key }}">#}
<textarea class="form-control" rows="5" name="key" placeholder="请输入问题"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">查找答案</button>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header"><h4>查询到结果</h4></div>
<div class="card-body">
{% if daan %}
<h3 style="color: red">答案：{{ daan | safe }}</h3>
{# <p>注意：绿色为识别的到的节点和关系，红色为neo4j查询的最后结果！</p>#}
{% endif %}
{% if sql %}
<hr>
<p>npl识别查询语句：{{ sql }}</p>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>问答系统问答小助手--<a href="/wenda?clean=1">点击清除历史记录</a></h4></div>
<div class="card-body">
<div class="row">
<!--单按钮下拉菜单-->
{% for wen in all_wendas %}
<div class="col-lg-12">
<h5>{{ wen.question }}</h5>
{{ wen.anster }}
<hr>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
function suggest() {
var query = document.getElementById("query").value;
// 向后端发送请求获取联想结果
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var suggestions = JSON.parse(xhr.responseText);
displaySuggestions(suggestions);
} else {
console.error("请求错误");
}
}
};
xhr.open("GET", "/api/suggestions?query=" + encodeURIComponent(query));
xhr.send();
}
function displaySuggestions(suggestions) {
var suggestionsContainer = document.getElementById("suggestions");
suggestionsContainer.innerHTML = "";
// 在页面上显示联想结果
suggestions.forEach(function(suggestion) {
var suggestionElement = document.createElement("div");
suggestionElement.textContent = suggestion;
suggestionElement.addEventListener("click", function() {
document.getElementById("query").value = suggestion;
suggestionsContainer.innerHTML = "";
});
suggestionsContainer.appendChild(suggestionElement);
});
}
function search() {
var query = document.getElementById("query").value;
// 向后端发送请求，并将结果显示在答案框中
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("answer").innerHTML = response.answer;
} else {
document.getElementById("answer").innerHTML = "出错了，请稍后再试。";
}
}
};
xhr.open("POST", "/api/qa/");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify({ "query": query }));
}
</script>
</div>
</div>
</main>
{% endblock %}
1
<body>
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar navbar-default">
<div class="topbar">
<div class="topbar-left">
<span class="navbar-page-title"> 数据库知识图谱问答系统 </span>
</div>
<div class="lyear-layout-sidebar-scroll">
<div>
<li class="left_div" style="float: left;">
<a href="/"><i class="mdi mdi-palette"></i> 图谱查询展示</a>
</li>
<li class="right_div" style="float: left;">
<a href="/wenda"><i class="mdi mdi-format-align-justify"></i> 关系图谱问答</a>
</li>
</div>
</div>
<ul class="topbar-right">
<li class="dropdown dropdown-profile">
<a href="/accounts/logout">
<span>退出</span>
</a>
</li>
<li class="dropdown dropdown-profile">
<a href="javascript:void(0)">
<span>{{ request.user }}</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- logo -->
</header>
<!--End 头部信息-->
<!--页面主要内容-->
{% block content %}
{% endblock %}
<!--End 页面主要内容-->
</div>
</div>
2
;
jQuery( function() {
$("body").on('click','[data-stopPropagation]',function (e) {
e.stopPropagation();
});
// 滚动条
const ps = new PerfectScrollbar('.lyear-layout-sidebar-scroll', {
swipeEasing: false,
suppressScrollX: true
});
// 侧边栏
$(document).on('click', '.lyear-aside-toggler', function() {
$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
$("body").toggleClass('lyear-layout-sidebar-close');
if ($('.lyear-mask-modal').length == 0) {
$('<div class="lyear-mask-modal"></div>').prependTo('body');
} else {
$( '.lyear-mask-modal' ).remove();
}
});
// 遮罩层
$(document).on('click', '.lyear-mask-modal', function() {
$( this ).remove();
$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
$('body').toggleClass('lyear-layout-sidebar-close');
});
// 侧边栏导航
$(document).on('click', '.nav-item-has-subnav > a', function() {
$subnavToggle = jQuery( this );
$navHasSubnav = $subnavToggle.parent();
$topHasSubNav = $subnavToggle.parents('.nav-item-has-subnav').last();
$subnav = $navHasSubnav.find('.nav-subnav').first();
$viSubHeight = $navHasSubnav.siblings().find('.nav-subnav:visible').outerHeight();
$scrollBox = $('.lyear-layout-sidebar-scroll');
$navHasSubnav.siblings().find('.nav-subnav:visible').slideUp(500).parent().removeClass('open');
$subnav.slideToggle( 300, function() {
$navHasSubnav.toggleClass( 'open' );
// 新增滚动条处理
var scrollHeight = 0;
pervTotal = $topHasSubNav.prevAll().length,
boxHeight = $scrollBox.outerHeight(),
innerHeight = $('.sidebar-main').outerHeight(),
thisScroll = $scrollBox.scrollTop(),
thisSubHeight = $(this).outerHeight(),
footHeight = 121;
if (footHeight + innerHeight - boxHeight >= (pervTotal * 48)) {
scrollHeight = pervTotal * 48;
}
if ($subnavToggle.parents('.nav-item-has-subnav').length == 1) {
$scrollBox.animate({scrollTop: scrollHeight}, 300);
} else {
// 子菜单操作
if (typeof($viSubHeight) != 'undefined' && $viSubHeight != null) {
scrollHeight = thisScroll + thisSubHeight - $viSubHeight;
$scrollBox.animate({scrollTop: scrollHeight}, 300);
} else {
if ((thisScroll + boxHeight - $scrollBox[0].scrollHeight) == 0) {
scrollHeight = thisScroll - thisSubHeight;
$scrollBox.animate({scrollTop: scrollHeight}, 300);
}
}
}
});
});
// 提示
if($('[data-toggle="tooltip"]')[0]) {
$('[data-toggle="tooltip"]').tooltip({
"container" : 'body',
});
}
// 弹出框
if($('[data-toggle="popover"]')[0]) {
$('[data-toggle="popover"]').popover();
}
// 标签
$('.js-tags-input').each(function() {
var $this = $(this);
$this.tagsInput({
height: $this.data('height') ? $this.data('height') : '38px',
width: '100%',
defaultText: $this.attr("placeholder"),
removeWithBackspace: true,
delimiter: [',']
});
});
// 时间选择
jQuery('.js-datetimepicker').each(function() {
var $input = jQuery(this);
$input.datetimepicker({
format: $input.data('format') ? $input.data('format') : false,
useCurrent: $input.data('use-current') ? $input.data('use-current') : false,
locale: moment.locale('' + ($input.data('locale') ? $input.data('locale') : '') + ''),
showTodayButton: $input.data('show-today-button') ? $input.data('show-today-button') : false,
showClear: $input.data('show-clear') ? $input.data('show-clear') : false,
showClose: $input.data('show-close') ? $input.data('show-close') : false,
sideBySide: $input.data('side-by-side') ? $input.data('side-by-side') : false,
inline: $input.data('inline') ? $input.data('inline') : false,
});
});
// 日期选择
jQuery('.js-datepicker').each(function() {
var options = {
weekStart: 1,
autoclose: typeof($(this).data('auto-close')) != 'undefined' ? $(this).data('auto-close') : true,
language: 'zh-CN', // 默认简体中文
multidateSeparator: ', ', // 默认多个日期用,分隔
format: $(this).data('date-format') ? $(this).data('date-format') : 'yyyy-mm-dd',
};
if ( $(this).prop("tagName") != 'INPUT' ) {
options.inputs = [$(this).find('input:first'), $(this).find('input:last')];
}
$(this).datepicker(options);
});
// 颜色选取
jQuery('.js-colorpicker').each(function() {
var $colorpicker = jQuery(this);
var $colorpickerMode = $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'hex';
var $colorpickerinline = $colorpicker.data('colorpicker-inline') ? true: false;
$colorpicker.colorpicker({
'format': $colorpickerMode,
'inline': $colorpickerinline
});
});
// 复选框全选
$("#check-all").change(function () {
if ($boxname = $(this).data('name')) {
$(this).closest('table').find("input[name='" + $boxname + "']").prop('checked', $(this).prop("checked"));
} else {
$(this).closest('table').find(".lyear-checkbox input[type='checkbox']").prop('checked', $(this).prop("checked"));
}
});
// 设置主题配色
setTheme = function(input_name, data_name) {
$("input[name='"+input_name+"']").click(function(){
$('body').attr(data_name, $(this).val());
});
}
setTheme('site_theme', 'data-theme');
setTheme('logo_bg', 'data-logobg');
setTheme('header_bg', 'data-headerbg');
setTheme('sidebar_bg', 'data-sidebarbg');
});
3
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="lyear-layout-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>请输入问题</h4></div>
<div class="card-body">
<form action="/wenda" method="get">
{% csrf_token %}
<div class="form-group">
<label for="example-nf-email">问题</label>
{# <input class="form-control" type="text" name="key" placeholder="请输入问题"#}
{# value="{{ key }}">#}
<textarea class="form-control" rows="5" name="key" placeholder="请输入问题"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">查找答案</button>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header"><h4>查询到结果</h4></div>
<div class="card-body">
{% if daan %}
<h3 style="color: red">答案：{{ daan | safe }}</h3>
{# <p>注意：绿色为识别的到的节点和关系，红色为neo4j查询的最后结果！</p>#}
{% endif %}
{% if sql %}
<hr>
<p>npl识别查询语句：{{ sql }}</p>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>问答系统问答小助手--<a href="/wenda?clean=1">点击清除历史记录</a></h4></div>
<div class="card-body">
<div class="row">
<!--单按钮下拉菜单-->
{% for wen in all_wendas %}
<div class="col-lg-12">
<h5>{{ wen.question }}</h5>
{{ wen.anster }}
<hr>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
function suggest() {
var query = document.getElementById("query").value;
// 向后端发送请求获取联想结果
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var suggestions = JSON.parse(xhr.responseText);
displaySuggestions(suggestions);
} else {
console.error("请求错误");
}
}
};
xhr.open("GET", "/api/suggestions?query=" + encodeURIComponent(query));
xhr.send();
}
function displaySuggestions(suggestions) {
var suggestionsContainer = document.getElementById("suggestions");
suggestionsContainer.innerHTML = "";
// 在页面上显示联想结果
suggestions.forEach(function(suggestion) {
var suggestionElement = document.createElement("div");
suggestionElement.textContent = suggestion;
suggestionElement.addEventListener("click", function() {
document.getElementById("query").value = suggestion;
suggestionsContainer.innerHTML = "";
});
suggestionsContainer.appendChild(suggestionElement);
});
}
function search() {
var query = document.getElementById("query").value;
// 向后端发送请求，并将结果显示在答案框中
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("answer").innerHTML = response.answer;
} else {
document.getElementById("answer").innerHTML = "出错了，请稍后再试。";
}
}
};
xhr.open("POST", "/api/qa/");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify({ "query": query }));
}
</script>
</div>
</div>
</main>
{% endblock %}
7593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
