0基础想进入IT行业，可以从这个框架入手

news2024/11/25 23:02:12

行业现状

IT、AI都是很多年来的热门话题，以至于时至今日，哪怕IT行业已经卷成狗，依然有无数的人想要挤进这个行业。

大模型、云原生、react等等，无数的技术、概念应运而生。那么作为一个没有基础的人，该如何进入这个行业呢？

下面我来谈谈我的看法。

前端好于后端

我知道我抛出这个话题，一定会被很多人质疑，但是这里我要加上一个限定条件：初学者学习前端好于后端。

我为什么这么说，首先，前端是更容易被感知到的。当你打开浏览器，你通过编程可以迅速改变页面的UI样式，这对开发者来说是十分爽的。

其次前端涌现出的很多框架，如：vue、react，对于初学者来说都是极易学习的（相对于jquery容易很多）。现在网上教程也很多，对于中文也是很友好的。

再者，诸如Nextjs、svelte等框架，连后端和网关的活它也干了。你可以使用它的动态路由，国际化支持，甚至可以直接与数据库进行交互，完全代替了php等后端的作用，是不是爽翻了？

怎么学？

我建议初学者先去学习一下web的基础知识，大家可以通过w3cschool、廖雪峰等网站去学习。

然后可以直接去学习一个框架，在这里我推荐学习react。为什么不是vue呢？我个人认为vue的生态在中国虽然更好，但是他衍生出来的技术生态却比react差不少。比如Nextjs就是react的衍生品，但是却给react带上了一个新的高度。

1. 环境需要

Node.js - 18.17 或更高版本。
Bun - 1.0 或更高版本。 bun安装教程。
OS - macOS, Windows (包括 WSL), 和 Linux。
PostgreSQL - 推荐大家用docker安装一个，或者去vercel申请一个免费的。

顺便说一下，我推荐你使用 NVM (Node Version Manager) 去管理你本地的node环境。

2. 执行命令行

bun create saasfly

在命令执行过程中，会自动做如下几个操作：

克隆 Saasfly 的仓库到你的本地文件夹。
删除git 的 history
安装相关以来
生成 prisma type

3. 启动 Saasfly

3.1 设置环境变量

进入saasfly 文件夹, 复制 .env.example 文件，并将新文件重命名为 .env.local，然后输入你的变量值。

cd saasfly
cp .env.example .env.local

请确保您已经搭建好了postgreSQL。

`POSTGRES_URL` 必须在你的 .env.local 文件中已经填写好。

# Format Example
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"

POSTGRES_URL="postgres://postgres:123456@127.0.0.1:5432/saasfly"

运行如下命令：

bun db:push

输出：

🚀  Your database is now in sync with your Prisma schema. Done in 151ms

┌─────────────────────────────────────────────────────────┐
│  Update available 5.9.1 -> 5.10.2                       │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘

3.2 运行 Run Build

bun run build

3.3 启动server

bun run dev:web

输出：

@saasfly/nextjs:dev: cache bypass, force executing ad8bea47f156e113
@saasfly/nextjs:dev: $ bun with-env next dev
@saasfly/nextjs:dev: $ dotenv -e ../../.env.local -- next dev
@saasfly/nextjs:dev:    ▲ Next.js 14.1.0
@saasfly/nextjs:dev:    - Local:        http://localhost:3000
@saasfly/nextjs:dev:
@saasfly/nextjs:dev:    automatically enabled Fast Refresh for 1 custom loader
@saasfly/nextjs:dev:  ✓ Ready in 12.1s

在浏览器输入： http://localhost:3000。如果一切顺利，你将看到如下页面