前言

记录一下vue + node的学习，并部署到服务器上的过程。

手把手教你自己写接口，自己跟自己联调。

本文章 适合新手，因为我自己也是新手，所以过程还是比较简单的。一步一步来，你也能搭建出自己的全栈项目。

一、Vue部分

1. 创建项目

npm create vite@latest my-vue-app -- --template vue-ts
npm install
npm run dev

2. 引入组件库element-plus和sass

我用的暗黑模式，这个随便你

npm install element-plus --save
npm install -D sass

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
    locale: zhCn
})
// 全局注册element-plus动态图标
import * as Icons from '@element-plus/icons-vue'
const Icon = (props: { icon: string }) => {
    return createVNode( Icons[ props.icon as keyof typeof Icons ] )
}
app.component('Icon', Icon)

如果这里报错了 无法找到模块“element-plus/dist/locale/zh-cn.mjs”的声明文件

在vite-env.d.ts中引入

declare module ‘element-plus/dist/locale/zh-cn.mjs’

3. 引入axios

npm install axios

配置 /api/http.config.ts

import axios from 'axios';
import { ElMessage } from 'element-plus';

// 配置项
const service = axios.create({
  baseURL: 'http://hocalhost',    // 接口地址
  timeout: 5000,                            // 请求超时时间
});


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


// 响应拦截器
service.interceptors.response.use((res) => {
  if(res.status === 200 && res.data.code === 200) {
    return res.data;
  } else {
    ElMessage({message: `${res.data.code} - ${res.data.message}`, type: 'error'})
  }
}, function(err) {
  return Promise.reject(err);
});

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url: string, params: any): Promise<any> {
  return new Promise((response, reject) => {
    service({url, method: 'get', params}).then(res => {
      response(res)
    }).catch(err => {
      reject(err)
    });
  });
}

配置接口文件 /api/http.api.ts

import { get } from './http.config'

export default {
  getUserList: (params = {}) => { return get('/user/list', params) },   // 用户列表
  deleteUser: (params = {}) => { return get('/user/delete', params) },  // 用户删除
  addUser: (params = {}) => { return get('/user/add', params) },        // 添加用户
  updateUser: (params = {}) => { return get('/user/update', params) },  // 更新用户
}

4. 在app.vue画个基本表格

至于代码我就不贴了，直接贴效果图

image.png

这时候我们的基本静态就出来了，但是没有数据？？？？？

image.png

二、MySQL部分

这里我们需要用到 mysql 和 数据库管理工具 Navicat。

1. 下载 mysql（推荐MSI安装方式）

MySQL :: Download MySQL Community Server

如果安装过程中提示你 【… visual-studio 2019 x64 …】，这时候需要安装一下这个东西

Latest supported Visual C++ Redistributable downloads | Microsoft Learn

image.png

安装完，再次重新安装mysql，一路next，最后想知道有没有安装成功，直接去【任务管理器】

image.png

到这里mysql就有了，但是我们需要操作数据库啊，不然还能用命令行操作吗，这不折腾人？

2. 下载 Navicat

2023年最新Navicat永久激活安装使用教程_数据库

这个里面有详细的教程，一步一步教你如何下载并破解。 最后打开是这样的：

image.png

这时候我们就可以创建数据库、数据表了

image.png

现在我们有项目了，有数据库了，接下来就是把数据拿到，渲染出来就行了…

三、Node部分

1. 引入服务相关依赖

npm install express   // 框架
npm install mysql2    // 这里就是mysql2，你没看错
npm install cors      // 跨域
npm install body-parser  // 处理前端传过来的参数

我们在项目中新建server文件夹，专门存放我们的node服务文件，接下来我会说清楚每个文件内容，以及是干啥用的

image.png

2. db.js

/**
 *  连接数据库
 */
const mysql = require('mysql2')
// 创建连接池
const db = mysql.createPool({
  host: 'localhost',     // 这里就写本地就行，后面部署的时候会改的
  user: 'root',          // 用户名，默认root
  password: 'qwer1234',  // 密码
  database: 'test'       // 需要连接的数据库
})
module.exports = db

3. api/user.js

这里就是写接口的地方了，增删改查，这里我就直接用获取列表举例说明，注意get请求和post请求，获取前端传过来的值的时候，是不一样的，这里我也只是用get做示例

这里SQL查询语句我就不说了，可以直接度娘

const db = require('../db')
// 用户列表
exports.list = (req, res) => {
  // 获取
  const { pageIndex, pageSize, searchKey } = req.query;
  // 根据条件查询总数 【姓名模糊查询】
  db.query(`select count(*) as total from user where name like '%${searchKey}%'`, (err, data1) => {
    if(err) {
      return res.send('错误：' + err.message);
    }
    const total = data1[0].total;

    // 查询条件范围内的数据
    const offset = (pageIndex - 1) * pageSize; // 获取数据偏移量
    const sql = `select * from user where name like '%${searchKey}%' limit ${pageSize} offset ${offset}`
    db.query(sql, (err, data2) => {
      if(err) {
        return res.send('错误：' + err.message);
      }
      res.send({
        code: 200,
        message: 'success',
        data: {
          list: data2,
          total: Number(total),
          current: Number(pageIndex)
        }
      })
    })
  })
}

4. router.js

配置服务器路由

/**
 *  配置服务器路由（接口）
 */

const express = require('express')
const router = express.Router()
let user = require('./api/user')

// 配置接口地址
router.get('/user/list', user.list)       // 用户列表
// router.get('/user/delete', user.delete)   // 删除用户
// router.get('/user/add', user.add)         // 添加用户
// router.get('/user/update', user.update)   // 更新用户

// 导出路由
module.exports = router

5. app.js

配置入口文件

const express = require('express')
const app = express()
const cors = require('cors')
const bodyParser = require('body-parser')
const router = require('./router')

//配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors()) // 配置跨域
app.use(router) // 配置路由

// 监听
app.listen(3000, () => {
  console.log('服务器启动成功...');
})

6. 运行服务

另开终端，进入server文件

node app.js

如果这里报错【require is not defined in ES module scope】

我们只需要进入package.json中把【“type”: “module”】去掉就行了

image.png

注意这里我们监听的是3000端口，所以我们axios配置文件里

baseURL: 'http://localhost:3000'

7. 调用接口

上面http.api.ts文件里，我们已经写了接口方法了

getUserList: (params = {}) => { return get('/user/list', params) }

直接在app.vue里调用即可，最后看一下页面：

image.png

image.png

image.png

四、部署服务器

本地我们已经可以调用接口进行增删改查了，接下来就是给这个项目放到线上，直接域名访问。

1. 轻量级服务器（宝塔）

这里我就用腾讯云服务器做演示，基本上都差不多，需要先购买服务器，对于我们搭建网站来说，轻量级2核2G的就足够了，如果是首次，首页都会有免费的试用。
购买完之后：

image.png

再去宝塔之前，我们把防火墙端口都放行，免得后面还要返回回来，把该添加规则的都添加规则，

image.png

然后在应用管理里面，复制、登录

image.png

image.png

用外网面板地址在新窗口打开，记住用户名和密码，需要登录的

登陆成功，会让你下载套件，选择左边【LNMP推荐】

2. 把本地数据库导入到服务器

首先我们需要先拿到.sql文件

image.png

在建的数据库上右击，-> 转储SQL文件 -> 结构和数据 -> 放到桌面就可以了

  1. 这里需要注意一下，我就踩坑了。
  2. 因为我们安装的mysql是最新版本的8.0，而宝塔里默认是5.7，如果你的服务器好的话，可以升级到8，也可以。
  3. 如果也是2核2G的，那就老老实实打开刚才导出的test.sql文件，然后需要修改里面的一些字符集和排序规则，谁让我们版本太高了呢，就这一次，以后都不用再改了
 把文件中的所有的 
 utf8mb4_0900_ai_ci 替换为 utf8_general_ci
 utf8mb4 替换为 utf8

点击面板中的【数据库】【添加数据库】

image.png

数据库名随便起，用户名和密码，起个好记得，后面也要用。。提交。。

然后后面会有个【导入】，点击导入刚才的【test.sql】文件

image.png

到这里数据库就完成了。

3. 部署node项目

首先我们需要在【安全】里面添加端口规则，注意刚才我们node监听3000端口，这里就得加进去，你的是啥，就加啥。

image.png

然后在【文件】里wwwroot文件夹下面创建两个文件夹，一个存放vue打包后的项目，一个存放node服务文件

image.png

vue打包项目之前，需要把axios地址改成你服务器外网IP地址

baseURL: 'http://xxx.xxx.xx.xxx:3000/'

npm run build 打完包，直接把dist里面的文件放进去就行了。

zahngmenglei_node文件夹下面一定放，除了server文件夹里面的文件，还包括package.json / package-lock.json也要放进去。因为一会我们启动服务的时候，程序会根据package.json进行下载依赖，来自动生成node_module文件

image.png

因为node服务传到线上了，所以db.js里的连接数据库配置就得修改了，直接在文件夹里双击修改

host: 自己服务器外网IP地址

其他的就是刚才我们导入数据库的时候，设置的

image.png

image.png

4. 使用PM2管理我们的node

【软件商店】下载【PM2管理器】

注意这两个里面的node版本保持一致

image.png

点开PM2 添加项目

image.png

然后点击后面的模块-管理， 【一键安装依赖】

安装完，这个状态就是node服务启动成功了

image.png

5. 配置站点

【网站】-【PHP项目】-【添加站点】

image.png

域名：服务器外网IP地址，其实就是宝塔的ip地址
根目录： 就是vue项目打包dist存在的目录，直接选就可以了

6. 运行

把配置的IP地址域名，在浏览器里打开，就能看到我们的项目，接口也可正常调用了。

image.png

7. 域名

这个自己买个域名，记住你的域名和服务器建议买同一家的，不然会有点小麻烦…

备案完成后，把IP改成域名，然后在网站底部加上备案号就可以了。

五、Navicat连接线上数据库

为了本地能操作线上数据库，我们需要使用Navicat连接服务器上的mysql数据库，从而进行本地操作

【连接】-【MySQL】

image.png

连接名随便取一个，主机就是你的服务器IP地址，端口不变3306，用户名、密码就是线上数据库的用户名、密码。

填写完，点击测试连接，连接成功就没毛病了，添加一条数据，然后去网站刷新，增加一条，完成。

结尾

自己摸索加上度娘，用了两天，终于把这个搞定了，特别适合第一次想用node写项目写接口的朋友，非常友好，算是个起步了。 虽然麻烦，但是整体下来能学到不少东西，接下来就可以做自己的网站了。

如果过程中遇到什么问题，可直接私聊我。

如果内容有啥错误，可直接评论，不会写文章，还请见谅。

最后，祝大家天天开心！！！！

# mysql # vue.js # node.js
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB全密态数据库等值查询

avatar 华为开发者空间
cover

COC云运维中心新特性解读，让智能运维更高效

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间