링크를 인간 친화적으로 만드십시오

긴 URL의 현실은 우리보다 몇 광년 뒤쳐져 있습니다. 그러나 나는 여전히 거의 모든 웹사이트에서 그것들을 만난다. 링크가 열린 횟수를 추적하는 최고의 URL 단축 코드를 파악하기는 어렵습니다.

가장 많이 사용되는 고급 프레임워크를 결합한 Redwood JS 프레임워크를 사용하여 이러한 서비스를 만들 것입니다.

공식 시작하기 튜토리얼에 따라 프로젝트를 초기화합니다.

Initialize git

git init

The first step is to add a new data table to api/db/schema.prisma

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider      = "prisma-client-js"
  binaryTargets = "native"
}

model WebLink {
  id           Int    @id @default(autoincrement())
  shortId      String @unique
  url          String
  viewedAmount Int    @default(0)
}

Next, the Prisma framework can help us create a SQL migration for the sqlite. I recommend using postgresql in production.

yarn rw prisma migrate dev

Redwood did a great job with the scaffold feature that generates a CRUD (Create, Retrieve, Update, Delete) code for React by running just one command.

yarn rw g scaffold web-link

Run the development mode
yarn redwood dev

You will see that we have not finished the home page yet; however, four pages have already been generated:
/web-links/new
/web-links/{id:Int}/edit
/web-links/{id:Int}
/web-links

http://localhost:8910/web-links를 열고 새 데이터 레코드를 생성해 보겠습니다.

이제 Graphql API에 새 쿼리를 추가하려고 합니다.api/src/graphql/webLinks.sdl.js
SDL 스키마에 webLinkByShortId(shortId: String!): WebLink @requireAuth 추가

export const schema = gql`
  type WebLink {
    id: Int!
    shortId: String!
    url: String!
    viewedAmount: Int!
  }

  type Query {
    webLinks: [WebLink!]! @requireAuth
    webLink(id: Int!): WebLink @requireAuth
+   webLinkByShortId(shortId: String!): WebLink @requireAuth
  }

  input CreateWebLinkInput {
    shortId: String!
    url: String!
    viewedAmount: Int!
  }

  input UpdateWebLinkInput {
    shortId: String
    url: String
    viewedAmount: Int
  }

  type Mutation {
    createWebLink(input: CreateWebLinkInput!): WebLink! @requireAuth
    updateWebLink(id: Int!, input: UpdateWebLinkInput!): WebLink! @requireAuth
    deleteWebLink(id: Int!): WebLink! @requireAuth
  }

다음 단계는 이 문제를 해결할 함수를 만드는 것입니다.
오픈api/src/services/webLinks/webLinks.js

import { db } from 'src/lib/db'

export const webLinks = () => {
  return db.webLink.findMany()
}

export const webLink = ({ id }) => {
  return db.webLink.findUnique({
    where: { id },
  })
}

export const createWebLink = ({ input }) => {
  return db.webLink.create({
    data: input,
  })
}

export const updateWebLink = ({ id, input }) => {
  return db.webLink.update({
    data: input,
    where: { id },
  })
}

export const deleteWebLink = ({ id }) => {
  return db.webLink.delete({
    where: { id },
  })
}

+ export const webLinkByShortId = async ({ shortId }) => {
+   await db.webLink.update({
+     where: { shortId },
+     data: { viewedAmount: { increment: 1 } },
+   })
+   return db.webLink.findUnique({ where: { shortId } })
+ }

Redwood 생성기를 사용하여 페이지를 생성했습니다.yarn redwood g page Redirect
업데이트web/src/Routes.js . 동적 매개변수를 사용하므로 새 경로가 목록의 마지막 경로인지 확인하십시오.

  - <Route path="/redirect" page={RedirectPage} name="redirect" />
  + <Route path="/{shortId}" page={RedirectPage} name="redirect" />

이제 셀을 생성하려고 합니다. 이것이 Redwood가 데이터 작업을 권장하는 방식입니다.yarn redwood g cell redirect
수정web/src/components/RedirectCell/RedirectCell.js

- export const QUERY = gql`
-  query FindRedirectQuery($id: Int!) {
-    redirect: redirect(id: $id) {
-      id
-    }
-  }
- `

+ export const QUERY = gql`
+   query FindWebLink($shortId: String!) {
+     link: webLinkByShortId(shortId: $shortId) {
+       id
+       url
+     }
+   }
+ `

- export const Success = ({ redirect }) => {
-   return <div>{JSON.stringify(redirect)}</div>
- }


+ export const Success = ({ link }) => {
+   React.useEffect(() => {
+     if (!link) return
+
+     window.location = link.url
+   }, [link])
+
+   return 'redirecting...'
+ }

따라서 [/kcuobL](http://localhost:8910/kcuobL) 를 클릭하면 링크가 https://google.com 로 이동합니다.

짜잔. 당신의 손에는 단순한 URL 단축기 이상이 있습니다. 회사의 전문가가 작업의 상당 부분을 온라인으로 구성하는 데 도움이 되는 마케팅 도구입니다.

Reference

이 문제에 관하여(링크를 인간 친화적으로 만드십시오), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vnadygin/make-your-links-human-friendly-4epb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

링크를 인간 친화적으로 만드십시오

Reference

좋은 웹페이지 즐겨찾기