vue+node+mysql8.0,详细步骤及报错解决方案

1.下载需要安装的插件

  • 下载express
    npm install express
  • 下载cors,用于处理接口跨域问题
    npm install cors
  • 下载mysql
    npm install mysql

2.配置服务器

可以在vue项目的src同级创建server文件夹(这里的位置可随意选择)
在这里插入图片描述

然后依次创建:

  • 新建/server/app.js,用于配置服务器相关信息
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const router = require('./router') //导入路由配置,创建/server/router.js后使用const app = express()
app.use(cors())
app.use(express.urlencoded({extended: false}))
app.use(bodyParser.json())
app.use(router)   //导入路由配置,创建/server/router.js后使用app.listen(3018, () => {console.log('server running at http://127.0.0.1:3018')
})
  • 新建/server/db/index.js,用于配置数据库相关信息
const mysql = require('mysql');db = mysql.createPool({host: '127.0.0.1',user: 'root',password: '',  // 这里使用自己数据库的密码database: 'web'// 这里使用自己数据库的名称
})module.exports = db
  • 新建/server/api/user.js,用于操作数据库(这里获取user表中的数据)
let db =require('../db/index')
exports.get=(req,res)=> {let sql = 'select * from user'db.query(sql, [req.query.name, req.query.password], (err, data) => {if (err) {return res.send('错误:' + err.message)}res.send(data)})
}
  • 新建/server/router.js,用于配置对应路由
let express = require('express')
let router = express.Router()
let user = require('./api/user')
router.get('/user' , user.get)
module.exports = router

3.测试服务器

好啦,到这里就可以测试下服务器是否搭建成功

在server文件夹下cmd执行

node app.js

提示“server running at http://127.0.0.1:3018”

浏览器打开http://127.0.0.1:3018/user,可看见user数据表中对应的数据,表示服务器搭建成功


我第一次使用node连接mysql8.0时,遇到了报错:
Client does not support authentication protocol requested by server; consider upgrading MySQL client

如果你遇到了相同的问题,可参考《node连接mysql报错:Client does not support authentication protocol requested by server; consider…》

最后的实现效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/491353.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言刷题(2)

5. 题目描述 KIKG今年5岁了,已经能够认识100以内的非负整数,并且并目能够 进行 100 以内的非负整数的加法计算,不过,老师发现KIK在进行大于等于100的正整数的计算时,规则如下: 1.只保留该数的最后两位,例…

360智脑张向征:共建可信可控AI生态 应对大模型安全挑战

发布 | 大力财经 人工智能的加速发展,有力推动了社会的数智化转型;与此同时,带来的相关安全风险也日益凸显。近日,在北京市举办的通明湖人工智能开发与应用大会上,360智脑总裁张向征以“大模型安全研究与实践”为主题&…

相机标定中的相机模型

一、相机标定基本原理 在图像测量过程以及机器视觉应用中,为确定空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系,必须建立摄像机成像的几何模型,这些几何模型参数就是摄像机参数。在大多数条件下这些参数必须通过实验与计算才能得到&…

【大模型微调学习6】-实战Hugging Face Transformers工具库

【大模型微调学习6】-实战Hugging Face Transformers工具库 实战Hugging Face Transformers工具库1.Hugging Face Transformers 库是什么?2.HF Transformers 核心模块学习:Pipelines(1)如何下载hugging face的数据集和模型权重&am…

【AIGC进阶-ChatGPT提示词副业解析】探索生活的小确幸:在平凡中寻找幸福

引言 在这个快节奏的现代社会中,我们常常被各种压力和焦虑所困扰,忘记了生活中那些细小而珍贵的幸福时刻。本文将探讨如何在日常生活中发现和珍惜那些"小确幸",以及如何通过尝试新事物来丰富我们的生活体验。我们还将讨论保持神秘感和期待感对于维持生活乐趣的重要性…

使用 rvest 包快速抓取网页数据:从入门到精通

介绍 随着大数据和数据科学的迅速发展,互联网数据的抓取已经成为重要的信息获取手段之一。网页抓取(Web Scraping)可以帮助我们自动化地从网页中提取有价值的数据,应用广泛,包括新闻热点分析、金融数据采集等。在本篇…

在 DDD 中优雅的发送 Kafka 消息

前言 1:host 映射 下载 SwitchHost 配置一个映射地址。点击 添加一个本地环境,之后配置你的 IP kafka 这样就能找这个地址了。IP 为你本地的IP,如果是云服务器就是公网IP地址 使用docker-compose.yml进行一键部署安装 version: 3.0 # docker-compose …

c#上班,上学,交通方式接口

using System;namespace INTERFACE {abstract class Person{public string Name { get; set; }public int Age { get; set; }public virtual void ShowInfo(){Console.WriteLine($"Name: {Name}, Age: {Age}");}}// 接口 IWorkinterface IWork{void GotoCompany();}/…

Halcon 直连相机

一、相机类别 1、大恒示例 DahengCAM 使用大华相机,待补充... 2、大华例程 GigEVision 2.1 关键算子 1、查询指定图像采集接口信息。 info_framegrabber (GigEVision, info_boards, Information, ValueList) 获取结果 unique_name:302fac01cd50_MachineVision_MVA5B57MG20…

RPC 服务与 gRPC 的入门案例

RPC 协议 RPC(Remote Procedure Call Protocol)即远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务的协议,允许一个计算机程序可以像调用本地服务一样调用远程服务 。 RPC的主要作用是不同的服务间方法调用就像本地…

机器学习-正则化技术

文章目录 拟合正则化正则项L1 正则化(Lasso)L2 正则化(Ridge) 多元线性回归的正则化回归形式代码 拟合 过拟合:参数(特征)过多(理解为考虑很多因素)或者说过多专注于原来的训练数据…

数据可视化-2. 条形图

目录 1. 条形图适用场景分析 1.1 比较不同类别的数据 1.2 展示数据分布 1.3 强调特定数据点 1.4 展示时间序列数据的对比 1.5 数据可视化教育 1.6 特定领域的应用 2. 条形图局限性 3. 条形图图代码实现 3.1 Python 源代码 3.2 条形图效果(网页显示&#…

【DBeaver】连接带kerberos的hive[Apache|HDP]

目录 一、安装配置Kerberos客户端环境 1.1 安装Kerberos客户端 1.2 环境配置 二、基于Cloudera驱动创建连接 三、基于Hive原生驱动创建连接 一、安装配置Kerberos客户端环境 1.1 安装Kerberos客户端 在Kerberos官网下载,地址如下:https://web.mit.edu/kerberos…

SpringBoot+IDEA工具框架快捷键+注解备注

快捷键 ctrlr 搜索替换 ctrlshiftr 全局搜索和替换 altfninsert 自行补全函数和构造函数等 ctrlaltt 可以尝试添加东西 可以加try catch ctrlshiftt 生成接口对应的测试函数 ctrlh 可以查看当前类的一个继承和实现关系 大写CD回车 ide会自动生成cdata区的标签 x…

AI前沿分析:ChatGPT搜索上线,Google搜索地位能否守住?

名人说:莫听穿林打叶声,何妨吟啸且徐行。—— 苏轼 Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 引言:AI与搜索领域的激烈博弈一、ChatGPT搜索的优势是什么?1. 实时信息获取&#xf…

ScottPlot学习的常用笔记

ScottPlot学习的常用笔记 写在前面版本的选择第一个障碍:版本问题。 ScottPlot4.0的官方网站与示例官方起始页cookbook5.0Demo4.1 demo以4.1为例,解压和运行如下: 下载源代码和编译先说结论: 写在前面 之前调研的TraceCompass&am…

客户端(浏览器)vue3本地预览txt,doc,docx,pptx,pdf,xlsx,csv,

预览文件 1、入口文件preview/index.vue2、预览txt3、预览doc4、预览pdf5、预览pptx6、预览xlsx7、预览csv 1、入口文件preview/index.vue 预览样式&#xff0c;如pdf 文件目录如图所示&#xff1a; 代码如下 <template><div class"preview-wrap" ref&…

luckysheet与superslide冲突解决

[现象]控制台报错、界面无法操作 $是jquery。查看源码&#xff0c;发现mousewheel方法来自插件mousewheel&#xff0c;luckysheet初始应该会将mousewheel挂载在jquery上。 在控制台打印jquery取dom及其方法&#xff0c;结果如下&#xff1a; 不存在mousewheel方法&#xff0c…

MongoDB(上)

MongoDB 基础 MongoDB 是什么&#xff1f; MongoDB 是一个基于 分布式文件存储 的开源 NoSQL 数据库系统&#xff0c;由 C 编写的。MongoDB 提供了 面向文档 的存储方式&#xff0c;操作起来比较简单和容易&#xff0c;支持“无模式”的数据建模&#xff0c;可以存储比较复杂…

搭建Tomcat(四)---Servlet容器

目录 引入 Servlet容器 一、优化MyTomcat ①先将MyTomcat的main函数搬过来&#xff1a; ②将getClass()函数搬过来 ③创建容器 ④连接ServletConfigMapping和MyTomcat 连接&#xff1a; ⑤完整的ServletConfigMapping和MyTomcat方法&#xff1a; a.ServletConfigMappin…