Node+Express+vue3+vite开发项目

Node默认已经安装，如果没有安装的自行百度一下。

1、安装vite（vite中文官网： https://vitejs.cn/）：

• 使用npm：

npm init vite@latest

• 使用yarn：

yarn create vite

 

 

 我这里选用的是js，可以自行选择js或者ts；

执行提示命令，运行项目！

2、安装express、mongoose（由于我使用的是MongoDB， 所以需要安装这个库）、body-parser（解析中间件）、nodemailer：

npm install express mongoose body-parser nodemailer

3、新建一个用于服务端的文件夹：

 

 

 4、新建index.js用于连接数据库：

//1.引入express模块
const express = require('express');
const mongoose = require('mongoose');
const bodyParse = require('body-parser');
const app = express();
mongoose
  .connect('mongodb://127.0.0.1:27017/admin', {
    useNewUrlParser: true,
    useUnifiedTopology: true
  })
  .then(() => console.log('数据库连接成功!'))
  .catch((err) => console.log(err));

//创建app对象
app.use(bodyParse.json());
app.use(bodyParse.urlencoded({ extended: true }));

// 定义服务启动接口
app.listen(3000, () => {
  console.log('app 3000');
});

　这里推荐还安装nodemon这个库，改代码就不用手动重启服务了。

 

 

 

 

 

 这样就连接成功了！

5、新建一个接口：

 

 

 

//引入express模块
const express = require('express');
const nodemailer = require('nodemailer');
//定义路由级中间件
const router = express.Router();
//引入数据模型模块
const User = require('../schema/user');
const jwt = require('../token');

// 新增用户
router.post('/user/inertUser', (req, res) => {
  const body = req.body;
  User.find({ $or: [{ userName: body.userName }, { email: body.email }] }, (err, doc) => {
    if (doc.length) {
      res.send({
        code: 500,
        msg: '该用户名或者邮箱已存在'
      });
      return;
    }
    new User(body).save((err) => {
      if (err) {
        res.status(500).send({ code: 500, msg: '新增失败!' });
        return;
      }
      res.send({ code: 200, msg: '新增成功!' });
    });
  });
});

// 获取用户信息
router.get('/user/getUserInfo', (req, res) => {
  let ifValue = jwt.decrypt(req.headers.authorization);
  if (!ifValue.token) {
    res.send({
      code: 401,
      msg: '登录过期，重新登录'
    });
  } else {
    User.findOne({ _id: ifValue.gadID }, (err, doc) => {
      if (err) {
        res.status(500).send({
          code: 500,
          msg: '获取用户信息失败!'
        });
        return;
      }
      if (doc?._id) {
        res.send({ code: 200, data: doc });
      } else {
        res.send({ code: 500, msg: '暂无该用户信息!' });
      }
    });
  }
});

module.exports = router;

6、在index.js暴露出来使用：

//1.引入express模块
const express = require('express');
const mongoose = require('mongoose');
const bodyParse = require('body-parser');
const app = express();
mongoose
  .connect('mongodb://127.0.0.1:27017/admin', {
    useNewUrlParser: true,
    useUnifiedTopology: true
  })
  .then(() => console.log('数据库连接成功!'))
  .catch((err) => console.log(err));

//创建app对象
app.use(bodyParse.json());
app.use(bodyParse.urlencoded({ extended: true }));

// 定义服务启动接口
app.listen(3000, () => {
  console.log('app 3000');
});

//引入刚才定义的user路由并应用
const User = require('./routes/user');
app.use('/api', User);

7、使用接口（requset自己封装的）：

 

 

 vuex调用api：

 

 

 调用vuex：

import useUserStore from '@/store/modules/user';
const userStore = useUserStore();

function submitLogin() {
  proxy.$refs['loginFormRef'].validate((valid) => {
    if (valid) {
      loginLoading.value = true;
      userStore
        .login({ userName: loginForm.value.userName, password: md5(loginForm.value.password) })
        .then((res) => {
          router.push({ path: '/' });
        })
        .catch(() => {
          loginLoading.value = false;
        });
    }
  });
}

 

这样就可以整个项目串起来了！