四、用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.tokenconsole.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-fieldv-model="name"name="name"label="姓名"placeholder="姓名":rules="[{ required: true, message: '请填写姓名' }]"/><van-fieldv-model="course"name="course"label="课程"placeholder="课程":rules="[{ required: true, message: '请填写课程' }]"/><van-fieldv-model="description"name="description"label="描述"placeholder="描述":rules="[{ required: true, message: '请填写描述' }]"/><van-fieldv-model="mail"name="mail"label="邮箱"placeholder="邮箱":rules="[{ required: true, message: '请填写邮箱' }]"/><van-fieldv-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