当前位置: 首页 > news >正文

React+Node——next.js 构建前后端项目

一、安装全局依赖

npm i -g create-next-app

二、创建next项目

create-next-app react-next-demo
//或
create-next-app react-next-demo --typescript

三、加载mysql依赖

npm i -S mysql2

四、运行项目

npm run dev

在这里插入图片描述

五、创建db文件目录,目录下创建index.ts

import { createConnection } from "mysql2";// 创建数据库连接
const db = createConnection({host: 'localhost',    // 数据库主机名user: 'root',         // 数据库用户名password: 'password', // 数据库密码database: 'mydb'      // 数据库名称
});// 连接到数据库
db.connect((err) => {if (err) {console.error('无法连接到数据库:', err);return;}console.log('已成功连接到数据库');
});module.exports = db;

六、创建pages文件目录,目录下创建api文件目录,api目录下创建user.ts

请求地址 http://localhost:3000/api/user

import db from "@/db";
import { NextApiRequest, NextApiResponse } from "next";export default (req: NextApiRequest, res: NextApiResponse) => {db.query(`SELECT * FROM ....`, (err, result) => {res.status(200).json(result)})
};

七、在pages目录下创建user.tsx

页面访问地址 http://localhost:3000/user

import { useEffect } from "react"export default () => {useEffect(() => {fetch(`api/user`).then(res => {console.log(res) //接口数据})}, [])return <div>Hello Next.js</div>
}

Tip 目录结构

在这里插入图片描述

相关文章:

React+Node——next.js 构建前后端项目

一、安装全局依赖 npm i -g create-next-app二、创建next项目 create-next-app react-next-demo //或 create-next-app react-next-demo --typescript三、加载mysql依赖 npm i -S mysql2四、运行项目 npm run dev五、创建db文件目录&#xff0c;目录下创建index.ts import…...

CRM系统主要包括哪些功能?

CRM系统应该要包括的功能总结为3大方向—— 核心必须要具备的功能常见尽量要有的功能可选有了自然更好的功能 以我们公司用的简道云CRM系统模板为例&#xff1a;https://www.jiandaoyun.com 01 核心必须要具备的功能 核心功能决定了系统是否能够被纳入CRM类别&#xff0c;这些…...

Nginx location 精准匹配URL = /

Location是什么&#xff1f; Location是Nginx中的块级指令(block directive)&#xff0c;通过配置Location指令块&#xff0c;可以决定客户端发过来的请求URI如何处理&#xff08;是映射到本地文件还是转发出去&#xff09;及被哪个location处理。 匹配模式 分为两种模式&…...

使用JAXB将Java对象转xml

文章目录 使用JAXB将Java对象转xml1. 要求生成的xml2. Java对象3. 封装的工具类4. 测试 使用JAXB将Java对象转xml 1. 要求生成的xml <?xml version"1.0" encoding"UTF-8" ?> <root><result status"success" msg"成功&qu…...

Atlas 200 DK开发板问题总结

1.fatal error: acl/acl.h: No such file or directory 该问题是因为在设置的DDK环境变量下找不到头文件。 解决方法&#xff1a; 1&#xff09;输入echo $DDK&#xff0c;查看当前DDK地址 2&#xff09;在src文件夹下找到CMakeLists.txt文件&#xff0c;发现该文件有一个变量名…...

uniapp——实现二维码生成+保存二维码图片——基础积累

最近在做二维码推广功能&#xff0c;自从2020年下半年到今天&#xff0c;大概有三年没有用过uniapp了&#xff0c;而且我之前用uniapp开发的程序还比较少&#xff0c;因此很多功能都浪费了很多时间去查资料&#xff0c;现在把功能记录一下。 这里写目录标题 效果图1.根据接口返…...

零基础学前端(六)重点讲解 JavaScript

1. 该篇适用于从零基础学习前端的小白&#xff0c;完全从零基础角度出发 2. 我们学习时&#xff0c;应该主动向自己提问&#xff1f;只有你能提出问题&#xff0c;你才算是在编程中学习进步了。 3. 初学者不懂得问题很多&#xff0c;在自己在不懂时&#xff0c;一定要求助有经验…...

数据库问题记录(粗略版)oracle、mysql等主流数据库通用

1. ORA-00918&#xff1a;未明确定义列 该问题情况大致为&#xff1a;select 所取列名错误、重复等问题。 2. “select * from temp where 10; ”的含义 布尔值为FALSE&#xff0c;只返回表结构&#xff0c;不返回数据。 举一反三&#xff1a; select * from temp where 1&…...

ORACLE多列中取出数据最大的一条

1.需求说明&#xff1a; 当查询出来的数据存在多条数据时&#xff0c;想按照一定条件排序取出其中一条数据。 2.使用函数&#xff1a; row_number() over( partition by 分组字段 order by 排序字段 desc&#xff09; 3.示例&#xff1a; --根据table_a中的pk_house&#x…...

Xamarin.Android实现App内版本更新

目录 1、具体的效果2、代码实现2.1 基本原理2.2 开发环境2.3 具体代码2.3.1 基本设置2.3.2 系统的权限授予2.3.3 进度条的layout文件2.3.4 核心的升级文件 3、代码下载4、知识点5、参考文献 1、具体的效果 有事需要在程序内集成自动更新的功能&#xff0c;网上找了下&#xff…...

运维工程师面经

文章目录 前言RedisMongoDBPython中的GIL&#xff08;全局解释器锁&#xff09;Python算法总结 前言 本博客仅做学习笔记&#xff0c;如有侵权&#xff0c;联系后即刻更改 科普&#xff1a; Redis 参考网址 NoSQL技术 基于内存的数据库&#xff0c;并且提供一定的持久化功能…...

stm32之智能垃圾桶实战

之前用过51做过一个垃圾桶的小项目&#xff0c;这里用32重新搞了一下。视频的效果和之前一样&#xff0c;可参考这个垃圾桶效果 。 一、项目描述&#xff08;同51&#xff09; 项目主要是模拟不用手动打开垃圾桶盖&#xff0c;而进行自动操作。自动打开的条件如下&#xff1a…...

【C++面向对象侯捷下】2.转换函数 | 3.non-explicit-one-argument ctor

文章目录 operator double() const {} 歧义了 标准库的转换函数...

UOS Deepin Ubuntu Linux 开启 ssh 远程登录

UOS Deepin Ubuntu Linux 开启 ssh 远程登录 打开控制台 安装 openssh-server sudo apt -y install openssh-server修改 /etc/ssh/ssh_config 文件 sudo vim /etc/ssh/ssh_config找到 # Port 22 去掉 # 注释后 保存 重启 ssh 服务 sudo systemctl restart ssh设置 ssh 服务 开机…...

Postman应用——接口请求和响应(Get和Post请求)

文章目录 新增Request请求Get请求Post请求 Request请求响应Postman响应界面说明请求响应另存为示例&#xff08;模板&#xff09;Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式&#xff0c;也可以遵循restful api接口规范&#…...

Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache,lsof)命令

1、什么是buffer/cache &#xff1f; buffer/cache 其实是作为服务器系统的文件数据缓存使用的&#xff0c;尤其是针对进程对文件存在 read/write 操作的时候&#xff0c;所以当你的服务进程在对文件进行读写的时候&#xff0c;Linux内核为了提高服务的读写速度&#xff0c;则将…...

(Vue2)自定义创建项目、ESLint、Vuex

自定义创建项目&#xff1a;基于VueCli自定义创建项目架子 安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter 路由配置项很多&#xff0c;希望创建项目时就把架子搭好 hash模式和history模式 页面跳转和加载模式 Vue为单页面&#xff0c;只有一个HTML…...

LLaMa

文章目录 Problems403 代码文件LLaMA: Open and Efficient Foundation Language Models方法预训练数据结构优化器一些加速的方法 结果Common Sense ReasoningClosed-book Question AnsweringReading ComprehensionMassive Multitask Language Understanding Instruction Finetu…...

API(九)基于协程的并发编程SDK

一 基于协程的并发编程SDK 场景&#xff1a; 收到一个请求会并发发起多个请求,使用openresty提供的协程说明&#xff1a; 这个是高级课程,如果不理解可以先跳过遗留&#xff1a; APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…...

JavaWeb 学习笔记 7:Filter

JavaWeb 学习笔记 7&#xff1a;Filter 1.快速开始 使用过滤器的方式与 Servlet 类似&#xff0c;要实现一个Filter接口&#xff1a; WebFilter("/*") public class FirstFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletE…...

Python 装饰器实战:用@syntax 优雅地增强函数功能

# Python 装饰器实战&#xff1a;用syntax 优雅地增强函数功能## 什么是装饰器&#xff1f;装饰器&#xff08;Decorator&#xff09;是 Python 中的一种高级特性&#xff0c;它允许你在不修改原函数代码的情况下&#xff0c;动态地给函数添加功能。简单来说&#xff0c;装饰器…...

Qwen3-TTS-VoiceDesign实战案例:用‘撒娇稚嫩萝莉声’描述生成高拟真TTS音频

Qwen3-TTS-VoiceDesign实战案例&#xff1a;用‘撒娇稚嫩萝莉声’描述生成高拟真TTS音频 1. 项目概述与核心价值 Qwen3-TTS-VoiceDesign是一个让人惊艳的语音合成模型&#xff0c;它最大的特点就是能用简单的文字描述&#xff0c;生成你想要的任何声音风格。想象一下&#xf…...

游戏报错终极解决方案 DirectX修复工具深度解析

在Windows操作系统环境下&#xff0c;DirectX组件是游戏和多媒体软件运行的核心基础。 随着游戏产业的快速发展&#xff0c;越来越多的玩家在运行游戏时遇到了各种技术问题。 其中&#xff0c;DirectX组件缺失、损坏、报错是最为常见的问题之一&#xff0c;严重影响了用户的游戏…...

从晶体管到CPU:CMOS反相器延迟如何决定你的电脑主频

从晶体管到CPU&#xff1a;CMOS反相器延迟如何决定你的电脑主频 当你按下电脑电源键的瞬间&#xff0c;数十亿个晶体管在芯片上开始协同工作。这些微观开关的切换速度&#xff0c;直接决定了处理器主频的上限。而构成所有数字电路基础的CMOS反相器&#xff0c;其动态响应特性就…...

HP-Socket开发者技能认证考试大纲更新全指南:周期解析与参与攻略

HP-Socket开发者技能认证考试大纲更新全指南&#xff1a;周期解析与参与攻略 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket作为高性能TCP/UDP/HTTP通信组件&…...

Webots R2021a搭配Anaconda环境:从SSL报错到Python API调通的完整避坑指南

Webots R2021a与Anaconda环境深度整合&#xff1a;Python控制器开发全流程解析 当机器人仿真与Python开发环境相遇时&#xff0c;Webots和Anaconda的组合为研究者提供了强大工具链。然而&#xff0c;从环境配置到API调用的完整流程中&#xff0c;开发者常会遇到各种"坑点&…...

Python开源代码管理避坑实战:从Git高级操作到Docker环境配置

前言&#xff1a;为什么你总在开源门前徘徊&#xff1f; “这个项目看起来好复杂&#xff0c;我连代码都看不懂...” “提交PR会不会被大佬嘲笑&#xff1f;” “环境配置又报错了&#xff0c;算了&#xff0c;下次再说吧” 如果你有过这些想法&#xff0c;别担心&#xff…...

DXVK解决方案:基于Vulkan的Direct3D兼容层性能优化指南

DXVK解决方案&#xff1a;基于Vulkan的Direct3D兼容层性能优化指南 【免费下载链接】dxvk Vulkan-based implementation of D3D9, D3D10 and D3D11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk DXVK是一个基于Vulkan的Direct3D 8/9/10/11实现层…...

ABYSSAL VISION(Flux.1-Dev)风格化研究:模拟Typora等工具的极简文档配图

ABYSSAL VISION&#xff08;Flux.1-Dev&#xff09;风格化研究&#xff1a;模拟Typora等工具的极简文档配图 不知道你有没有过这样的体验&#xff1a;写技术文档或者博客的时候&#xff0c;文字部分洋洋洒洒&#xff0c;逻辑清晰&#xff0c;但一到需要配图说明的地方就卡壳了…...

LFM2.5-1.2B-Thinking-GGUF效果展示:同一Prompt下Thinking中间态与终版回答对比图

LFM2.5-1.2B-Thinking-GGUF效果展示&#xff1a;同一Prompt下Thinking中间态与终版回答对比图 1. 模型简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;特别适合在资源有限的环境中快速部署和使用。该模型采用GGUF格式存储&#xff0c;通过ll…...