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

27次阅读

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

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

超清原画 残缺无密 包含所有视频课件以及源码
点击下崽:网盘链接
基于 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)

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

$ prisma init

初始化 prisma

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()

正文完
 0