快速上手vue3+js+Node.js

安装Navicat Premium

Navicat Premium

创建一个空的文件夹(用于配置node)

生成pakeage.json文件

复制代码
npm init -y

操作mysql

复制代码
npm i [email protected]

安装express搭建web服务器

复制代码
npm i [email protected]

安装cors解决跨域问题

复制代码
npm i [email protected]

创建app.js

复制代码
const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');

app.use(cors());
app.use(bodyParser.json());
// 设置静态资源目录
app.use('/static', express.static('E://各类资料//毕业设计'));

// 引入路由文件
const userRouter = require('./user/index');
const homeRouter = require('./home/home');

// 使用路由
app.use('/api', userRouter);
app.use('/api/home', homeRouter);

app.listen(8080, () => {
    console.log("服务器启动 http://127.0.0.1:8080");
});

配置连接mysql--db文件下创建index.js

复制代码
const mysql = require("mysql");

const db = mysql.createConnection({
    host: '127.0.0.1',
    user: 'root',
    password: 'xxxxxx',// 个人数据库密码
    database: 'xxxxxx'// 操作的数据库名
});

db.connect((err) => {
    if (err) {
        console.error('Error connecting to the database:', err.stack);
        return;
    }
    console.log('Connected to the database.');
});

module.exports = db;

user文件夹下创建index.js

复制代码
const express = require("express");
const router = express.Router();
const db = require("../db/index");
const md5 = require("md5");
const multer = require("multer");
const path = require("path");

// 获取用户列表
router.get("/getUserList", (req, res) => {
  const sql = "SELECT * FROM account_info";
  db.query(sql,(err, result) => {
    if (err) { err.message }
    if (result.length < 1) {
      res.send({ status: 1, message: "获取用户列表失败!", code: 400 });
    }
    res.send({ status: 0, data: result, message: "获取用户列表成功", code: 200 });
  });
});

module.exports = router;

注意:其他的crud操作根据实际的需求去操作sql语句来具体实现

创建一个vue的脚手架

在文件夹api下创建request.js文件用于封装axios来发送网络请求

复制代码
import axios from "axios";

// 对 axios 进行二次封装
const requests = axios.create({
    timeout: 5000,
    headers: {
        "Content-Type": "application/json"
    }
});

// 请求拦截器
requests.interceptors.request.use((config) => {
    return config;
}, (error) => {
    return Promise.reject(error);
});

// 响应拦截器
requests.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    return Promise.reject(error);
});

// 获取
const listUserData = (data) => requests({ url: "http://127.0.0.1:8080/api/getUserList", method: "get", data });

export { listUserData };

node接口效果图

postman

脚手架调用接口返回

UI交互简单实现

相关推荐
TimeDoor6 分钟前
在 Windows上安装 Node.js 开发环境的完整指南
node.js·web开发
Summer_Xu28 分钟前
模拟 Koa 中间件机制与洋葱模型
前端·设计模式·node.js
清风ai明月1 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿1 小时前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
剑亦未配妥1 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
zoahxmy09291 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon111131 小时前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR1 小时前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风012341 小时前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
gongzemin2 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js