关于react.js:基于-React-ReduxMobx-搞定复杂项目状态管理无密分享

1次阅读

共计 4732 个字符，预计需要花费 12 分钟才能阅读完成。

超清原画残缺无密包含所有视频课件以及源码
点击下崽：网盘链接
基于 Node.js 的 ORM 框架 Prisma 的上手使用

Node.js 作为咱们前端的一项技术，大多数工夫是作为一个 Javascript 的运行环境而存在。然而其优良的异步操作以及非阻塞式的程序运行形式，也让 Node.js 能够同时并发处理数千个连接。前端工程师可能用很低的学习成本来使用它实现罕用的服务端代码。

ORM
ORM: 对象关系映射（Object Relational Mapping）是一种程序设计技术。简略来说 ORM 可能将咱们的底层数据库的各种操作进行肯定的封装，咱们就可能通过更加熟悉的开发语言来书写对应的数据库命令，ORM 则可能将这些数据库操作命令转换为对应的 SQL 语句。

Prisma
下一代 Node.js、TypeScript、Go 的数据库 ORM

Prisma 是一个开源的数据库工具链我的项目，帮助开发人员更快地构建应用程序并缩小谬误，反对 PostgreSQL、MySQL、MongoDB、SQL Server 和 SQLite。

如果想要了解一门技术的用法，那么咱们则需要通过实际的上手使用它来进行一点点的开发。

首先咱们需要初始化一个我的项目

mkdir prisma-demo # 创建一个目录
cd prisma-demo # 通过命令行来进入该我的项目目录
npm init -y # 将我的项目进行初始化
{
“name”: “prisma-demo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {

"test": "echo"Error: no test specified"&& exit 1"

},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}
复制代码
而后咱们将本次所需要使用的 prisma 进行安装一下

npm install prisma -D # 安装 prisma
复制代码
安装实现后，咱们可能通过 npx prisma init - h 命令来查看 prisma 相干的命令帮助信息

Setup a new Prisma project

Usage

$ prisma init [options]
Options

       -h, --help   Display this help message

–datasource-provider Define the datasource provider to use: PostgreSQL, MySQL, SQLite, SQL Server or MongoDB (Preview)

            --url   Define a custom datasource url

Examples

Setup a new Prisma project with PostgreSQL (default)

$ prisma init

Setup a new Prisma project and specify MySQL as the datasource provider to use
$ prisma init –datasource-provider mysql

Setup a new Prisma project and specify the url that will be used
$ prisma init –url mysql://user:password@localhost:3306/mydb
复制代码
在此处咱们通过使用 prisma init –datasource-provider sqlite 来定义默认的数据库为 SQLite

SQLite 是一个文件数据库，自力更生的、无服务器的、零配置的、事务性的 SQL 数据库引擎，在使用过程中较为便利。
npx prisma init –datasource-provider sqlite # 配置默认数据库为 sqlite
复制代码
来到咱们的代码界面

// prisma -> schema.prisma
// 本文件为数据库模型的配置文件所有数据库模型的配置都在此文件
generator client {
provider = “prisma-client-js”
}

// 数据源
datasource db {
provider = “sqlite”
// 数据库
url = env(“DATABASE_URL”)
// 数据库的连接地址
}
// 如果需要在 VScode 中高亮浮现代码提醒则需要安装名为 Prisma 的语法插件
复制代码
创建数据模型

// 用户的数据模型
model user {
id String @id @unique @default(uuid())
// 用户 ID 不能重复默认为 UUID
userName String @unique @map(“user_name”)
// 用户名不能重复 @map 示意为字段定义别名
password String @default(“”)
phone Int? @unique
// 手机号
nickName String? @default(“ 一个不违心透漏姓名的大佬 ”) @map(“nickName”)
// 昵称
address String? @default(“”)
// 地址
gender String? @default(“”)
// 性别
createAt DateTime @default(now()) @map(“create_at”)
// 创建工夫
updateAt DateTime @updatedAt @map(“update_at”)
// 更新工夫
autograph String @default(“”)
// 共性签名
@@map(“users”)
// 给数据表进行命名
}

// 文件模型
model post {
id String @id @unique @default(uuid())
// 建立表的关联关系
authorId String @default(“”) @map(“author_id”)
// 作者 ID 关联用户的 ID
@@map(“posts”)
}

复制代码
数据模型新建完毕后，咱们回到咱们的命令行中，通过使用 npx prisma db push 可能在以后文件下间接生成数据库

node_modules
prisma
- dev.db
  -schema.prisma
.env
app.js

复制代码
咱们生成的文件数据库失常情况下无奈打开，需要安装 VScode 中另外的插件 SQLite 即可失常的打开咱们的文件数据库
除了以上安装插件的方法以外，咱们也可能在我的项目目录中使用 npx prisma studio 命令来打开 prisma 内置的服务器在阅读器端查看咱们的数据库以及数据表
数据库的操作
接下来则是数据库的相干操作

在根目录创建 db.js 文件, 并且进行相应内容的引入

import {PrismaClient} from ‘@prisma/client’
// 引入 prismaClient
const db = new PrismaClient();

db.$connect().catch((err) => console.error(err));
// 进行数据库的连接

export default db
复制代码
创建控制器

// userController.js
import prisma from “../utils/db”;
// 引入数据库的连接服务
async function createUser() {
// 创建用户
try {

await prisma.user.create({
  // 调用 prisma 的创建功能
  data: {
    userName:'test',
    password:'test',
    nickName:'一个不违心透漏姓名的大佬'
  },
});

} catch (err) {

// 异样捕捉
console.log(err);

}
}
// 调用创建用户的方法
createUser()
复制代码
通过在命令行中执行 node userController.js 本文件即可创建一个用户名为 test 明码为 test 的用户

接下来咱们可能通过 prisma 的查找语句来进行查问用户数据

async function findUsers(userName){
const findUser = await prisma.user.findMany({

where:userName

})
console.log(findUser)
}
findUsers(‘test’)
/*
# node userController.js

[
{
            id:'xxxxxxxx',
            userName:'test',
            password:'test',
            nickName:'一个不愿透漏姓名的大佬',
            createAt:2022-03-11T04:05:43.175Z,
            updateAt:2022-03-11T04:05:43.175Z
}
]

*/
复制代码
除了这些以外咱们在数据库操作中常常会有多表关联的情况，那么咱们就需要在数据模型中进行相应的配置

model user {
id String @id @unique @default(uuid())
……
// 共性签名
// @@map 为数据表定义名字

post post[]
// 生成两个表的关联关系
@@map(“users”)
}

model post {
id String @id @unique @default(uuid())
// 建立表的关联关系
author user @relation(fields: [authorId], references: [id])
// fields 示意以后模型中的字段 references 示意需要关联的模型中的字段
authorId String @default(“”) @map(“author_id”)
// 作者 ID 关联用户的 ID
…..
@@map(“posts”)
}
复制代码
更新完数据库相干的数据模型后则需要重重生成数据库以及数据表

npx prisma db push
复制代码
而后咱们依据上方创建用户的操作，增加一个创建文章的方法

async function createPost(){

const user = await prisma.user.findFirst(); // 查找第一个用户

await prisma.post.create({
// 调用创建文章内容的方法

data:{
  title:'xxx',
  desc:'xxx',
  authorId:user.id
  // 填写进去相应的数据
}

})
}
createPost()
// node createPost.js 执行该文件以及方法
复制代码
生成文章后咱们可能再增加一个查找文章的方法

async function findPost(){
const post = await prisma.post.findMany({

where:{}

})
console.log(post)
/*

[
    {
        id:'xxx',
        title:'xxx',
        desc:'',
        content:'',
        ...
    },
    {
        id:'xxx',
        title:'xxxx',
        desc:'xxx',
        content:'xxxx',
        ...
    }
]

*/
}
findPost()
复制代码
以上为创建文章以及查找文章，如果咱们需要查找文章并且需要知道关联数据则可能通过如下方法

async function findPost(){
const post = await prisma.post.findMany({

// where 为限度条件
where:{},

include:{
author: true

}
})
console.log(post)
/*
[

{
    id:'xxx',
    title:'xxx',
    desc:'',
    content:'',
    ...

author:{
id:’xxx’,
userName:’xxx’,
password:’xxxx’,
…
}
```
},
```
]
*/

}
findPost()

正文完

react.js

发表至： react.js

2022-04-07

0

关于react.js:react

关于react.js:React更新流程简介

react之性能优化

关于react.js:React安装教程

关于springboot:SpringBoot-2x-实战仿B站高性能后端项目无密分享

关于react.js:基于-React-ReduxMobx-搞定复杂项目状态管理无密分享

基于 React + Redux/Mobx 搞定简单我的项目状态治理 | 无密分享

默认连接的数据库为 PostgreSQL 的数据库

初始化 prisma

可能通过该命令来定义连接的数据库类型

站内搜索