当前位置：首页 > news >正文

vue+djiango+neo4j项目前后端连接

news 来源：原创 2025/4/28 9:50:42

前面这篇文章中已经介绍了后端配置数据库的流程了
简单创建一个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_response

    def __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': ''
                }
            }
        }
    }
}