React and neo4j

来自ling
跳转至: 导航搜索

起源

ldd有很多绘图的内容,所以研究g6 然后发现neo4j能实现自己一些有趣的想法

g6 https://antv-g6.gitee.io/zh/examples/gallery

基本介绍

neo4j https://www.cnblogs.com/mantoudev/p/10414495.html

[1]

[2]

antd https://ant.design/components/overview-cn/

neo4j

docker run -it -d --name neo4j_dtt \
  --publish=7475:7474 --publish=7688:7687 \
  --env NEO4J_AUTH=neo4j/Dtt123456789! \
  neo4j

http://cloud.ling2.cn:7475/browser/

bolt://cloud.ling2.cn:7688

原生查询

Find the actor named "Tom Hanks"...

MATCH (tom {name: "Tom Hanks"}) RETURN tom

Find the movie with title "Cloud Atlas"...

MATCH (cloudAtlas {title: "Cloud Atlas"}) RETURN cloudAtlas

Find 10 people...

MATCH (people:Person) RETURN people.name LIMIT 10

Find movies released in the 1990s...

MATCH (nineties:Movie) WHERE nineties.released >= 1990 AND nineties.released < 2000 RETURN nineties.title

List all Tom Hanks movies...

MATCH (tom:Person {name: "Tom Hanks"})-[:ACTED_IN]->(tomHanksMovies) RETURN tom,tomHanksMovies

Who directed "Cloud Atlas"?

MATCH (cloudAtlas {title: "Cloud Atlas"})<-[:DIRECTED]-(directors) RETURN directors.name

Tom Hanks' co-actors...

MATCH (tom:Person {name:"Tom Hanks"})-[:ACTED_IN]->(m)<-[:ACTED_IN]-(coActors) RETURN coActors.name

How people are related to "Cloud Atlas"...

MATCH (people:Person)-[relatedTo]-(:Movie {title: "Cloud Atlas"}) RETURN people.name, Type(relatedTo), relatedTo

Movies and actors up to 4 "hops" away from Kevin Bacon

MATCH (bacon:Person {name:"Kevin Bacon"})-[*1..4]-(hollywood)
RETURN DISTINCT hollywood

Bacon path, the shortest path of any relationships to Meg Ryan

MATCH p=shortestPath(
(bacon:Person {name:"Kevin Bacon"})-[*]-(meg:Person {name:"Meg Ryan"})
)
RETURN p

Note you only need to compare property values like this when first creating relationships

Extend Tom Hanks co-actors, to find co-co-actors who haven't worked with Tom Hanks...

MATCH (tom:Person {name:"Tom Hanks"})-[:ACTED_IN]->(m)<-[:ACTED_IN]-(coActors),
 (coActors)-[:ACTED_IN]->(m2)<-[:ACTED_IN]-(cocoActors)
WHERE NOT (tom)-[:ACTED_IN]->()<-[:ACTED_IN]-(cocoActors) AND tom <> cocoActors
RETURN cocoActors.name AS Recommended, count(*) AS Strength ORDER BY Strength DESC

Find someone to introduce Tom Hanks to Tom Cruise

MATCH (tom:Person {name:"Tom Hanks"})-[:ACTED_IN]->(m)<-[:ACTED_IN]-(coActors),
 (coActors)-[:ACTED_IN]->(m2)<-[:ACTED_IN]-(cruise:Person {name:"Tom Cruise"})
RETURN tom, m, coActors, m2, cruise

Delete all Movie and Person nodes, and their relationships

MATCH (n) DETACH DELETE n

Note you only need to compare property values like this when first creating relationships Prove that the Movie Graph is gone

MATCH (n) RETURN n

react

基于 ant pro

基于 create-react-app

参考 https://ant.design/docs/react/use-in-typescript-cn

  • 安装
npm install -g create-react-app
  • 创建应用
npx create-react-app neo4j --typescript
  • 添加需要的
npm install --save @antv/graphin @antv/graphin-components antd umi-request -registry=https://registry.npm.taobao.org
  • 自定义webpack配置
npm run eject  //自定义模式,暴露出webpack配置,不可逆
  • 着手自定义webpack配置
    • 安装http-proxy-middleware:
yarn add http-proxy-middleware
    • 在'src'目录下新建'setupProxy.js'并写入:
const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        // 将原来的proxy改为createProxyMiddleware
        createProxyMiddleware(
            '/api/ver2.0/zy',
            {
                target: 'http://127.0.0.1:5007',
                changeOrigin: true,
                pathRewrite: {
                    '^/api/ver2.0/zy': '/',
                },
            }
        )
    )
}

代码 https://gitee.com/ling2/neo4j-ui

编码

React16 基础知识 https://segmentfault.com/a/1190000016617400

https://blog.csdn.net/sinat_17775997/article/details/89366698

https://www.jianshu.com/p/dfb3e154ad33

常见问题

proxy is not a function

https://blog.csdn.net/xiaoyao9524/article/details/85236550