四、用nodejs写新增接口

(1)新增数据库

选择不区分大小写

在新建查询内编译

(2)新建提交代码的表

create TABLE code_record(
id INT not null auto_increment,
name VARCHAR(200) not null,
course VARCHAR(200) not null,
mail VARCHAR(200) not null,
description VARCHAR(200) not null,
create_time TIMESTAMP default CURRENT_TIMESTAMP,
img VARCHAR(400),
PRIMARY KEY(id)
)

刷新一下

有了

忘记了一个字段,需要新加一个代码字段

ALTER TABLE code_record add code VARCHAR(500) not null;

刷新

(3)新建user表

CREATE TABLE user(
id int NOT null auto_increment,
name VARCHAR(200) not null,
account VARCHAR(200) not null,
pwd VARCHAR(200) not null,
sex VARCHAR(200) not null,
age VARCHAR(200) not null,
PRIMARY KEY(id)
)

刷新出现了

插入数据

INSERT into user VALUES(1,"管理员","admin","admin123","女","18");

刷新看一下

(4)node登录接口连新数据库和表实现登录

修改Dao->index.js的数据库名字为刚刚建的数据库名字

/**
 * 数据库连接
 */
const mysql = require('mysql');
const DataBase = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: '密码',
        database: 'db_kp',
})
//连接方法异步
const goconnect = ()=>{
    DataBase.connect();
    setTimeout(()=>{
            console.log('数据库连接成功');
    },2000)
}
//暴露出数据库去
module.exports={
        connect:goconnect,
        db:DataBase
    }

user登录接口

const express = require('express');
const router = express.Router();
const Dao = require('../Dao/index');
const jwt = require('../Midware/jwt');
router.post('/login', (req, res) => {
        console.log(jwt,'jwt')
        const sql = "SELECT * from user_kp where account = ?"
        Dao.db.query(sql,req.body.username,(err,result)=>{
        // console.log(result,'用户名密码');
        if(req.body.password == result[0].pwd){
            /**
             * 生成token
             */
            const userInfo = {
                username:result[0].account,
                sex:result[0].sex,
                age:result[0].age,
            }
           const token = jwt.setToken(userInfo,'1h')
               res.send({
                code:200,
                data:{
                    msg:'登录成功',
                    data:{
                        token
                    }
                }
            })
        }else{
            res.send({
                code:200,
                data:{
                    msg:'登录失败',
                    data: []
                }
            })
        }
    })
})
router.post('/userInfo',(req,res)=>{
    console.log( req.headers.authorization,'authorization');
    const token = req.headers.authorization.split(' ')[1]
    const userInfo = jwt.verifyToken(token)
    if (userInfo){
        res.send({
            code:200,
            data:{
                msg:'获取用户信息成功',
                data:userInfo
            }
        })
    }
})
module.exports = router

调用接口

const onSubmit = async value => {
          const res = await login({
            username:data.username,
            password:data.password
          })
          console.log(res,"登录日志");
          if(res.data.msg==='登录成功'){
            const token = res.data.data.token
            console.log(token,"token");
            localStorage.setItem('token',token)
            router.push('/home')
            Toast('登录成功')
            userInfo()
          }else{
            Toast('用户名或密码错误')
          }
        };
        const userInfo = async()=>{
          const res = await getUserInfo();
          console.log(res,"用户信息");
        }

登录替换数据库完成

(5)写新增(提交)代码

    /**
     * 引入express,使用router,引入数据库,写接口,暴露
     */
    const express = require('express');
    const router = express.Router();
    const Dao = require('../Dao/index');
    router.post('/add',(req,res)=>{
        console.log(req);
        const sql = `INSERT INTO code_record(name,course,mail,description,code) VALUES(?,?,?,?,?)`
        Dao.db.query(sql,[req.body.name,req.body.course,req.body.mail,req.body.description,req.body.code],(err,result)=>{
            console.log(result);
        })
    })
    module.exports = router

在进入index内引用这个接口

/**
 * 1.引入一个express框架
 * 2.在加载所有服务模块前,要先连接数据库
 * 安装body-parser中间件解析JSON数据
 */
const express = require('express');
const app = express();
const DataBase = require('./Dao/index');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
DataBase.connect();//连接数据库
/**
 * 3.中间件,使用Service的接口 发送网络请求
 */
/**配置公共请求响应头 */
app.all('*',(req,res,next)=>{
  // console.log('请求进来了');
  res.header("Access-Control-Allow-Origin","*");//允许跨域域名
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');//允许跨域的header类型
  res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");//允许跨域的请求方式
    next();
})
app.use('/api/code',require('./Service/Code'))
app.use('/api/Login',require('./Service/login'))
app.use('/api/User',require('./Service/user'))
app.use('/api/home',require('./Service/home'))
   /**
    * 4.规定服务的端口号
    */
app.listen(3000,()=>{
       console.log('server is running at http://localhost:3000');
   })

(6)新增接口的实现

1.先去api封装的新增这个接口

//提交代码的api
export const CodeAddApi = (data) => {
  return axios.request({
    /**
     * nodejs接口
     */
    url: "/api/Code/add",
    method: "post",
    data: data,
  });
};

2.引用

import { CodeAddApi } from '../../api/api';

3.使用

<script setup>
import Header from '../../components/Header.vue';
import { ref } from 'vue'; 
import { CodeAddApi } from '../../api/api';
    const name = ref('');
    const course = ref('');
    const mail = ref('');
    const description = ref('');
    const code = ref('');
    const onSubmit = async(values) => {
      console.log('submit', values);
      try{
        const res = await CodeAddApi({...values})
      }catch(error){
        console.log(error)
      }
    }

</script>
<template>
<Header title="提交代码"/>
<!-- 表单 -->
<van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="course"
        name="course"
        label="课程"
        placeholder="课程"
        :rules="[{ required: true, message: '请填写课程' }]"
      />
      <van-field
        v-model="description"
        name="description"
        label="描述"
        placeholder="描述"
        :rules="[{ required: true, message: '请填写描述' }]"
      />
      <van-field
        v-model="mail"
        name="mail"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <van-field
        v-model="code"
        name="code"
        label="代码"
        placeholder="代码"
        :rules="[{ required: true, message: '请填写代码' }]"
      />
        <div class="uploader">
            <!-- 代码图片 -->
            <!-- 上传组件 -->
            <!-- <div class="images">
                <van-uploader :after-read="afterRead" />
            </div> -->
        </div>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<style scoped>
.uploader{
    font-size: 12px;
    padding-left: 10px;
    display: flex;
    .images{
        padding-left: 50px;
    }
}
</style>

请求一下

成功

写下状态

    /**
     * 引入express,使用router,引入数据库,写接口,暴露
     */
    const express = require('express');
    const router = express.Router();
    const Dao = require('../Dao/index');
    router.post('/add',(req,res)=>{
        console.log(req);
        const sql = `INSERT INTO code_record(name,course,mail,description,code) VALUES(?,?,?,?,?)`
        Dao.db.query(sql,[req.body.name,req.body.course,req.body.mail,req.body.description,req.body.code],(err,result)=>{
            console.log(result);
            if(err) {
                res.send(
                    {
                        code:500,
                        msg:'服务器错误',
                        data:[]
                    }        
                ) 
                return
            }
                 
            res.send(
                {
                    code:200,
                    msg:'提交成功'
               }
            )

        })
    })
    module.exports = router

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring框架学习笔记(二):Spring IOC容器配置 Bean,分别基于XML配置bean 和 基于注解配置 bean

1 Spring 配置/管理 bean 介绍 Bean 管理包括两方面 &#xff1a;创建 bean 对象&#xff1b;给 bean 注入属性 Bean 配置方式&#xff1a;基于 xml 文件配置方式&#xff1b;基于注解方式 2 基于 XML 配置 bean 2.1 通过类型来获取 bean 方法&#xff1a;给getBean传入一…

传输层之 TCP 协议

TCP协议段格式 源/目的端口号&#xff1a;表示数据是从哪个进程来&#xff0c;到哪个进程去。 序号&#xff1a;发送数据的序号。 确认序号&#xff1a;应答报文的序号&#xff0c;用来回复发送方的。 4 位首部长度&#xff1a;一个 TCP 报头&#xff0c;长度是可变的&#xff…

STM32学习和实践笔记(25):USART(通用同步、异步收发器)

一&#xff0c;STM32的USART简介 USART即通用同步、异步收发器&#xff0c;它能够灵活地与外部设备进行全双工数据交换&#xff0c;满足外部设备对工业标准 NRZ 异步串行数据格式的要求。 UART即通用异步收发器&#xff0c;它是在USART基础上裁剪掉了同步通信功能。 开发板上…

【Web】CTFSHOW 七夕杯 题解

目录 web签到 easy_calc easy_cmd web签到 CTF中字符长度限制下的命令执行 rce(7字符5字符4字符)汇总_ctf中字符长度限制下的命令执行 5个字符-CSDN博客7长度限制直接梭了 也可以打临时文件RCE import requestsurl "http://4ae13f1e-8e42-4afa-a6a6-1076acd08211.c…

Vision Mamba:高效视觉表示学习双向状态空间模型,超越Vision Transformer!

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; Vision Mamba: Efficient Visual Representation Learning with Bidirectional State Space Model 引言&#xff1a;探索视觉领域的新方向 在计算机视觉领域&…

翻工第二次 Ant Design Pro 下载,发现问题,电脑网络配置有误,魔法了

一、相关网址链接 鱼皮的用户中心项目 &#xff08;前端Ant Design Pro构建&#xff09; 语雀 ## 没有选择umi版本这一步 Issue #11144 ant-design/ant-design-pro GitHub 关于umi ui图标未显示问题_umi ui不出现-CSDN博客 二、存在问题 导致下载速度慢 本人镜像代码写…

双向链表(详解)

在单链表专题中我们提到链表的分类&#xff0c;其中提到了带头双向循环链表&#xff0c;今天小编将详细讲下双向链表。 话不多说&#xff0c;直接上货。 1.双向链表的结构 带头双向循环链表 注意 这几的“带头”跟前面我们说的“头节点”是两个概念&#xff0c;实际前面的在…

第十三届蓝桥杯决赛(国赛)真题 Java A 组【原卷】

文章目录 发现宝藏【考生须知】试题 A: 火柴棒数字试题 B: 小蓝与钥匙试题 C: 内存空间试题 D: 斐波那契数组试题 E: 交通信号试题 F: 数组个数试题 G: 六六大顺试题 H : \mathrm{H}: H: 选素数试题 I: 图书借阅试题 J \mathrm{J} J : 括号序列树 发现宝藏 前些天发现了一个…

数据分析:基于sparcc的co-occurrence网络

介绍 Sparcc是基于16s或metagenomics数据等计算组成数据之间关联关系的算法。通常使用count matrix数据。 安装Sparcc软件 git clone gitgithub.com:JCSzamosi/SparCC3.git export PATH/path/SparCC3:$PATHwhich SparCC.py导入数据 注&#xff1a;使用rarefy抽平的count ma…

stm32单片机学习路线

第一步 编程及硬件基础知识 1.掌握C语言基础 作为STM32的主要编程语言&#xff0c;C语言的基础知识是必不可少的。建议通过书籍、在线课程或者教学视频系统地学习C语言的基础知识&#xff0c;包括语法、数据类型、函数、指针等。 2.了解电子电路基础 对于单片机开发来说&…

经开区创维汽车车辆交接仪式顺利举行,守护绿色出行助力低碳发展

5月10日&#xff0c;“创维新能源汽车进机关”交车仪式于徐州顺利举行&#xff0c;20辆创维EV6 II正式交付经开区政府投入使用。经开区陈琳副书记、党政办公室副主任张驰主任、经开区公车管理平台苑忠民科长、创维汽车总裁、联合创始人吴龙八先生、创维汽车营销公司总经理饶总先…

OpenHarmony 实战开发——移植通信子系统

通信子系统目前涉及Wi-Fi和蓝牙适配&#xff0c;厂商应当根据芯片自身情况进行适配。 移植指导 Wi-Fi编译文件内容如下&#xff1a; 路径&#xff1a;“foundation/communication/wifi_lite/BUILD.gn” group("wifi") {deps [ "$ohos_board_adapter_dir/ha…

asp.net mvc使用IHttpModule拦截所有请求,包括资源文件

目录 HttpApplication 类 添加App_Code文件夹 MyHttpModel2 Web.config添加配置&#xff0c;在iis模块中生效 项目发布后&#xff0c;察看注册的自定义模块 框架集&#xff1a;.NET Framework 4.7web框架&#xff1a;asp.net mvc 5 HttpApplication 类 HttpApplication 类…

数据库备份与恢复--06---MySQL集群高可用架构之MHA

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 MySQL集群高可用架构之MHA1.什么是MHAMHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件 &#xff0c;m…

2024最新洗地机选购攻略!分享四款热门洗地机推荐

洗地机可以说是现代家庭生活中一大利器&#xff0c;它能帮我们快速搞定家里的地板清洁工作&#xff0c;省去了自己清洗滚刷的麻烦。不过&#xff0c;当下市面上洗地机品牌种类繁多&#xff0c;价格区间也相差悬殊&#xff0c;要选择一款性价比较高、使用体验较好的洗地机产品&a…

太阳能无人机的多元化应用

随着新能源技术的不断发展和成熟&#xff0c;太阳能在无人机的应用技术已经成熟。太阳能无人机得到了量产和广泛的应用。传统无人机相比&#xff0c;太阳能无人机无需燃油&#xff0c;运行费用低廉&#xff0c;搭载多种高科技设备&#xff0c;能够高效、多元化地采集和分析各类…

AI算法-高数3-导数-求导法则

P16 2.2 求导法则&#xff0c;宋浩老师&#xff1a;2.2 求导法则_哔哩哔哩_bilibili 反函数求导法则&#xff1a; 复合函数求导&#xff1a;剥洋葱法。

蜂群优化算法(bee colony optimization algorithm)

​注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法引言 自然界的启发&#xff1a;BSO算法的灵感来自于蜜蜂在自然界中的觅食行为。在自然界中&#xff0c;蜜蜂需要找到花蜜来生存。当一只蜜…

在做题中学习(53):寻找旋转数组中的最小值

153. 寻找旋转排序数组中的最小值 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a;O(logn)->很可能就是二分查找 思路&#xff1a;再看看题目要求&#xff0c;可以画出旋转之后数组中元素的大小关系&#xff1a; 首先&#xff0c;数组是具有二段性的(适配二分查…

车载测试系列:UDS诊断服务

UDS诊断服务介绍 UDS&#xff08;Unified Diagnostic Services&#xff0c;统一诊断服务&#xff09;诊断协议诊断测试仪和ECU之间一种通信协议&#xff0c;在ISO14229中规定。UDS被用在几乎所有由OEM一级供应商所制造的新ECU。 诊断工具与车内的所有ECU均有连接&#xff0c;…