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文件目录,目录下创建index.ts import…...
CRM系统主要包括哪些功能?
CRM系统应该要包括的功能总结为3大方向—— 核心必须要具备的功能常见尽量要有的功能可选有了自然更好的功能 以我们公司用的简道云CRM系统模板为例:https://www.jiandaoyun.com 01 核心必须要具备的功能 核心功能决定了系统是否能够被纳入CRM类别,这些…...
Nginx location 精准匹配URL = /
Location是什么? Location是Nginx中的块级指令(block directive),通过配置Location指令块,可以决定客户端发过来的请求URI如何处理(是映射到本地文件还是转发出去)及被哪个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环境变量下找不到头文件。 解决方法: 1)输入echo $DDK,查看当前DDK地址 2)在src文件夹下找到CMakeLists.txt文件,发现该文件有一个变量名…...
uniapp——实现二维码生成+保存二维码图片——基础积累
最近在做二维码推广功能,自从2020年下半年到今天,大概有三年没有用过uniapp了,而且我之前用uniapp开发的程序还比较少,因此很多功能都浪费了很多时间去查资料,现在把功能记录一下。 这里写目录标题 效果图1.根据接口返…...
零基础学前端(六)重点讲解 JavaScript
1. 该篇适用于从零基础学习前端的小白,完全从零基础角度出发 2. 我们学习时,应该主动向自己提问?只有你能提出问题,你才算是在编程中学习进步了。 3. 初学者不懂得问题很多,在自己在不懂时,一定要求助有经验…...
数据库问题记录(粗略版)oracle、mysql等主流数据库通用
1. ORA-00918:未明确定义列 该问题情况大致为:select 所取列名错误、重复等问题。 2. “select * from temp where 10; ”的含义 布尔值为FALSE,只返回表结构,不返回数据。 举一反三: select * from temp where 1&…...
ORACLE多列中取出数据最大的一条
1.需求说明: 当查询出来的数据存在多条数据时,想按照一定条件排序取出其中一条数据。 2.使用函数: row_number() over( partition by 分组字段 order by 排序字段 desc) 3.示例: --根据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、具体的效果 有事需要在程序内集成自动更新的功能,网上找了下ÿ…...
运维工程师面经
文章目录 前言RedisMongoDBPython中的GIL(全局解释器锁)Python算法总结 前言 本博客仅做学习笔记,如有侵权,联系后即刻更改 科普: Redis 参考网址 NoSQL技术 基于内存的数据库,并且提供一定的持久化功能…...
stm32之智能垃圾桶实战
之前用过51做过一个垃圾桶的小项目,这里用32重新搞了一下。视频的效果和之前一样,可参考这个垃圾桶效果 。 一、项目描述(同51) 项目主要是模拟不用手动打开垃圾桶盖,而进行自动操作。自动打开的条件如下:…...
【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响应界面说明请求响应另存为示例(模板)Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式,也可以遵循restful api接口规范&#…...
Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache,lsof)命令
1、什么是buffer/cache ? buffer/cache 其实是作为服务器系统的文件数据缓存使用的,尤其是针对进程对文件存在 read/write 操作的时候,所以当你的服务进程在对文件进行读写的时候,Linux内核为了提高服务的读写速度,则将…...
(Vue2)自定义创建项目、ESLint、Vuex
自定义创建项目:基于VueCli自定义创建项目架子 安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter 路由配置项很多,希望创建项目时就把架子搭好 hash模式和history模式 页面跳转和加载模式 Vue为单页面,只有一个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 场景: 收到一个请求会并发发起多个请求,使用openresty提供的协程说明: 这个是高级课程,如果不理解可以先跳过遗留: APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…...
JavaWeb 学习笔记 7:Filter
JavaWeb 学习笔记 7:Filter 1.快速开始 使用过滤器的方式与 Servlet 类似,要实现一个Filter接口: WebFilter("/*") public class FirstFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletE…...
从零上手Neo4j Desktop:CSV数据导入与核心Cypher操作指南
1. Neo4j Desktop环境准备与数据导入 第一次打开Neo4j Desktop时可能会被它的界面搞得有点懵,别担心,我刚开始用的时候也这样。这个工具把数据库管理、浏览器界面和插件都集成在了一起,特别适合新手快速上手。安装过程我就不赘述了࿰…...
3步在Mac上免费运行Stable Diffusion的终极指南
3步在Mac上免费运行Stable Diffusion的终极指南 【免费下载链接】MochiDiffusion Run Stable Diffusion on Mac natively 项目地址: https://gitcode.com/gh_mirrors/mo/MochiDiffusion 还在为寻找合适的Mac AI绘画工具而烦恼吗?想要完全离线生成惊艳的AI艺术…...
开源工具实现游戏存档编辑:虚幻引擎存档处理全指南
开源工具实现游戏存档编辑:虚幻引擎存档处理全指南 【免费下载链接】uesave 项目地址: https://gitcode.com/gh_mirrors/ue/uesave 在游戏开发与玩家体验中,虚幻引擎的存档文件往往以二进制格式存储,这给数据修改、备份与分析带来了挑…...
FreeRTOS实战指南:从消息队列到内存管理,手把手解决嵌入式多任务难题
FreeRTOS实战指南:从消息队列到内存管理,手把手解决嵌入式多任务难题 1. 为什么嵌入式开发者需要FreeRTOS 在资源受限的嵌入式系统中,开发者常常面临这样的困境:既要处理实时性要求高的传感器数据采集,又要兼顾用户界面…...
UReport2实战:如何优雅地导出多Sheet页报表(动态/静态分页全解析)
UReport2实战:如何优雅地导出多Sheet页报表(动态/静态分页全解析) 在数据驱动的商业环境中,报表导出功能已成为企业级应用的标配需求。当面对海量数据时,传统的单Sheet页Excel导出方案往往导致文件臃肿、查阅困难。URe…...
3步打造开源工具效率引擎:QtScrcpy自定义配置全指南
3步打造开源工具效率引擎:QtScrcpy自定义配置全指南 【免费下载链接】QtScrcpy Android实时投屏软件,此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy …...
STM32博物馆环境监控系统设计与实现
基于STM32的博物馆展柜环境监控系统设计1. 项目概述1.1 系统背景文物保护工作中,展柜微环境稳定性直接影响文物保存状态。传统人工巡检方式存在响应滞后、数据不连续等问题。本项目设计了一套基于STM32的智能化环境监控系统,可实时监测温湿度、光照、烟雾…...
从FCN到U-Net:盘点深度学习图像分割中,那些‘放大’特征图的秘密武器与选型指南
从FCN到U-Net:解码图像分割中的特征图放大技术选型 在构建图像分割模型时,特征图的上采样操作往往是决定最终分割精度的关键环节之一。不同于分类任务只需输出一个类别标签,分割网络需要对每个像素进行分类,这就要求网络能够将低分…...
OpenClaw自动化测试:百川2-13B量化模型多场景准确率评估
OpenClaw自动化测试:百川2-13B量化模型多场景准确率评估 1. 测试背景与目标 去年冬天,我在为团队寻找一个能处理本地自动化任务的AI助手时,偶然发现了OpenClaw这个开源框架。当时最让我头疼的是,市面上的大模型要么太贵…...
NSudo:突破Windows权限壁垒的系统管理利器
NSudo:突破Windows权限壁垒的系统管理利器 【免费下载链接】NSudo [Deprecated, work in progress alternative: https://github.com/M2Team/NanaRun] Series of System Administration Tools 项目地址: https://gitcode.com/gh_mirrors/ns/NSudo 一、核心价…...
