首页 > 其他分享 >小白next项目初步上手搭建一个随机社会信用代码生成及验证功能网站

小白next项目初步上手搭建一个随机社会信用代码生成及验证功能网站

时间:2024-06-17 17:34:33浏览次数:24  
标签:代码生成 use like app js project 小白 next

先看看效果

image

网址是:https://xinyongdaima.aitoolpro.work/#

主要实现功能

  1. 实现随机社会信用代码生成及验证;
  2. 无数据存储功能;

技术栈

  1. next.js
  2. tailwind

工具

  1. sublime
  2. ChatGPT4o

步骤

准备工作:

  1. 需要电脑安装node

生成项目

打开终端并运行以下命令:
npx create-next-app@latest my-next-app
这里的 my-next-app 是你的项目名称,你可以根据需要更改。

  1. 选择模板(可选)
    在运行上述命令后,你会被提示选择一个模板。你可以选择默认的模板,或者选择其他预设的模板,如 TypeScript 模板。
    ? What is your project named? … my-next-app
    ? Would you like to use TypeScript with this project? › No / Yes
    ? Would you like to use ESLint with this project? › No / Yes
    ? Would you like to use Tailwind CSS with this project? › No / Yes
    ? Would you like to use src/ directory with this project? › No / Yes
    ? Would you like to use experimental app/ directory with this project? › No / Yes
    ? What import alias would you like to use? › @/*
    根据你的需求选择相应的选项。

  2. 进入项目目录

cd my-next-app 5. 启动开发服务器
在项目目录中,运行以下命令启动开发服务器:

npm run dev
默认情况下,开发服务器会在 http://localhost:3000 上运行。你可以在浏览器中打开这个地址,查看你的 Next.js 应用。

  1. 项目结构
    一个基本的 Next.js 项目结构如下:
点击查看代码

my-next-app/
├── node_modules/
├── public/
│ ├── favicon.ico
│   └── vercel.svg
├── src/
│   ├── pages/
│   │   ├── api/
│   │   │   └── hello.js
│   │   ├── _app.js
│   │   ├── index.js
│   └── styles/
│       ├── globals.css
│       └── Home.module.css
├── .gitignore
├── package.json
├── README.md
└── next.config.js

如果你能看到网页正常打开~,那么恭喜,成功一半了。
下一篇继续搭建我们想要的模板~

标签:代码生成,use,like,app,js,project,小白,next
From: https://www.cnblogs.com/yiqyan/p/18252866

相关文章

  • 手把手教NLP小白如何用PyTorch构建和训练一个简单的情感分类神经网络
        在当今的深度学习领域,神经网络已经成为解决各种复杂问题的强大工具。本文将通过一个实际案例——对Yelp餐厅评论进行情感分类,来介绍如何使用PyTorch构建和训练一个简单的神经网络模型。我们将逐步讲解神经网络的基础概念,如激活函数、损失函数和优化器,并最终实现一......
  • 小白Linux提权
     1.脏牛提权原因:内存子系统处理写入复制时,发生内存条件竞争,任务执行顺序异常,可导致应用崩溃,进一步执行其他代码。get_user_page内核函数在处理Copy-on-Write(以下使用COW表示)的过程中,可能产出竞态条件造成COW过程被破坏,导致出现写数据到进程地址空间内只读内存区域的机会......
  • 小白的Python+Anaconda+vscode安装教程(win11系统手把手教学)
    python下载安装python下载安装过程下载地址:https://www.python.org/![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/33bd022a0d104a22b9e8caf7abb4e294.png我这里选择了3.7.9版本选中刚才下载的.exe文件,右键-打卡上一个页面点击customizinstallation后......
  • 文字游侠:AI一键创作高质量图文,小白也能上手!附上渠道和指导教程!
    近期发现了一款极为实用的AI文章生成工具——“文字游侠”,这款工具能为自媒体文章创作提升极大的效率。不妨先来看看下面关于文字游侠的视频简单讲解介绍:利用’文字游侠‘在今日头条上发布图文,每天10分钟迅速爆款!那么,如何使用【文字游侠】工具呢?关于文字游侠的具体用......
  • 响应式布局mediaquery使用,鸿蒙NEXT星河版
    一、导入方法,定义响应式接口//组件的封装importmediaqueryfrom'@ohos.mediaquery'exportinterfaceLandType{isLandScape:boolean}二、监听当前是否是横屏状态//监听当前是否是横屏状态@StatelandRes:LandType={isLandScape:false}liste......
  • ArkTS本地化数据库SqlLight使用,鸿蒙NEXT星河版API(11)
    RelationalStore提供了一套完整的对本地数据库进行管理的机制,对外提供了一系列的增、删、改、查等接口,也可以直接运行用户输入的SQL语句来满足复杂的场景需要。谓词:数据库中用来代表数据实体的性质、特征或者数据实体之间关系的词项,主要用来定义数据库的操作条件。结果......
  • 比较适合小白练手的Python项目!
    一.学习Python需要掌握的技能成为Python高手需要一定的时间和实践,但以下是一些建议,可以帮助你更快入门并提高技能:学习基础知识:-了解Python的基本语法、数据类型、控制流等。-学习函数、模块和包的使用。深入理解数据结构和算法:-学习常见的数据结构(列表、字典、集合......
  • 牛客小白月赛96(待补思路和F)
    比赛链接:牛客小白月赛96赛时感受    赛时在前面卡的时间有点长,C题没开longlongwa了n发,D题没考虑负数又wa了n发,然后来写E的时候时间就不长了,匆忙写一次交一发。A思路    题解#include<bits/stdc++.h>usingnamespacestd;constintN=1e5+10;#......
  • 阻塞IO、非阻塞IO、IO多路复用和信号驱动IO简介(简单易懂、纯小白)
    一、分类在UNIX或Liunx下主要有4中IO模型阻塞IO:最简单、最常用、效率最低阻塞IO简介和代码示例-CSDN博客当进程执行读操作的时候,如果缓冲区有内容,则继续读取内容向下执行。缓冲区没内容,进程进入休眠态,直到缓冲区中再次有内容,由内核唤醒进程,读取缓冲区的内容,然后继续向下执......
  • Vue基础知识:异步DOM更新是什么?$nextTick是什么?到底应该如何使用。什么是同步?什么是异
    要先了解异步dom更新是什么就必须先了解,什么是同步?什么是异步?1.什么是同步?什么是异步?同步(Synchronous):同步操作是按照代码的顺序执行的,每个操作都必须等待上一个操作完成后才能执行。在Vue中,同步操作通常指的是直接执行的代码,例如在方法中执行的普通JavaScript代码或同步......