海外购物网站哪个最好黄冈网站推广在线
前面这篇文章中已经介绍了后端配置数据库的流程了
简单创建一个djiango后端项目连接数据库
接下来创建一个前端vue项目，在前端页面中通过axios使用后端接口返回的数据，就完成了一个基本的vue+djiano的前后端分离项目啦
碎碎念(所以去年学不会springboot，就是因为springboot太难啦，比起djiango这些轻量级的框架来说，真的要记的东西太多啦)
1.在djiango的views.py页面中把需要查询数据库的视图函数写好
def test_neo4j_connection(request):try:# 执行 Cypher 查询，这里简单查询所有节点results, meta = db.cypher_query("MATCH (n) RETURN n LIMIT 10")data = []for record in results:node = record[0]node_data = dict(node.items())data.append(node_data)return JsonResponse({'data': data})except Exception as e:return JsonResponse({'error': str(e)}, status=500)
这是上一篇中写的，以这个视图函数为例，编写视图函数主要分为以下四个步骤。
函数结构：每个视图函数都遵循相似的结构，首先执行相应的 Cypher 查询，然后处理查询结果，将节点和关系信息整理成特定的格式，最后以 JSON 格式返回数据。
Cypher 查询：根据不同的需求，使用不同的 Cypher 查询语句来匹配相应类型的节点和关系。
节点和关系处理：为了避免重复添加节点，使用 node_ids 集合来记录已经添加过的节点 ID。对于每个节点和关系，提取其 ID、标签和属性，并整理成字典格式。
异常处理：与之前的 test_neo4j_connection 函数类似，对不同类型的异常进行分别处理，并记录详细的错误信息。
假如说现在已经创建好了一个vue项目，进入项目目录并安装必要的依赖，用于 HTTP 请求的 axios
npm install axios
在vue页面中使用axios.get()来访问后端api地址
<script>
import axios from 'axios';
export default {mounted() {this.fetchDataAndRenderGraph();},methods: {async fetchDataAndRenderGraph() {try {const response = await axios.get('http://localhost:8000/knowledge-graph-data/'); // 替换为你的后端 API 地址const { nodes, relationships } = response.data;//这里写上对节点和关系的处理步骤
</script>
不要忘记在 src/router/index.js 中配置这个vue组件的路由
把前后端项目都单独运行起来之后，浏览器看不到数据库，控制台显示报错如下：
index.js??clonedRule…e=script&lang=js:61 Error fetching or rendering graph:
AxiosError
code
:
"ERR_NETWORK"
config
:
{transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
:
"Network Error"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
stack
:
"AxiosError: Network Error\n at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14)\n at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:58:41)\n at async Proxy.fetchDataAndRenderGraph (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/KnowledgeGraph.vue?vue&type=script&lang=js:19:26)"
[[Prototype]]
:
Error
fetchDataAndRenderGraph @ index.js??clonedRule…e=script&lang=js:61
排除了后端项目运行出错的问题之后，应该就是跨域问题得解决了
跨域问题
原因：由于浏览器的同源策略，当前端和后端的域名、端口或协议不一致时，会产生跨域问题，导致请求被浏览器阻止
解决方法1 后端配置 CORS：在 Django 项目中安装 django-cors-headers 并进行配置（我用这个办法没解决，农历好久不知道为啥用不了 pip list 显示 django-cors-headers 已安装，但在虚拟环境的 site-packages 目录下却找不到 corsheaders 文件夹，）
解决方法2 使用 Django 中间件手动处理跨域请求（亲测有效）
在 Django 项目中创建一个新的 Python 文件，例如 cors_middleware.py，并添加以下代码：
class CorsMiddleware:def __init__(self, get_response):self.get_response = get_responsedef __call__(self, request):response = self.get_response(request)response['Access-Control-Allow-Origin'] = '*' # 允许所有来源的请求，生产环境建议指定具体来源response['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'response['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'return response
然后在 settings.py 文件中配置这个中间件，将其添加到 MIDDLEWARE 列表中：
MIDDLEWARE = [# 其他中间件...'path.to.your.cors_middleware.CorsMiddleware', # 替换为实际的路径# 其他中间件...
]
前端代理配置：如果你使用的是 Vue CLI 项目，可以在 vue.config.js 中配置代理。
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8000', // 后端服务地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}
同时，修改前端的请求地址，例如将 axios.get(‘http://localhost:8000/…/’) 改为 axios.get(‘/api/…/’)。
最后记得重新启动项目就可以了
（如果还是接收不到数据，可以先检查两边url配置是否正确，然后再先访问后端API看接受到的是不是正确的数据，最后再看前端处理数据的逻辑有没有问题，按照这个顺序来依次排除）