前言
记录一下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画个基本表格
至于代码我就不贴了,直接贴效果图
这时候我们的基本静态就出来了,但是没有数据?????
二、MySQL部分
这里我们需要用到 mysql 和 数据库管理工具 Navicat。
1. 下载 mysql(推荐MSI安装方式)
MySQL :: Download MySQL Community Server
如果安装过程中提示你 【… visual-studio 2019 x64 …】,这时候需要安装一下这个东西
Latest supported Visual C++ Redistributable downloads | Microsoft Learn
安装完,再次重新安装mysql,一路next,最后想知道有没有安装成功,直接去【任务管理器】
到这里mysql就有了,但是我们需要操作数据库啊,不然还能用命令行操作吗,这不折腾人?
2. 下载 Navicat
这个里面有详细的教程,一步一步教你如何下载并破解。 最后打开是这样的:
这时候我们就可以创建数据库、数据表了
现在我们有项目了,有数据库了,接下来就是把数据拿到,渲染出来就行了…
三、Node部分
1. 引入服务相关依赖
npm install express // 框架
npm install mysql2 // 这里就是mysql2,你没看错
npm install cors // 跨域
npm install body-parser // 处理前端传过来的参数
我们在项目中新建server文件夹,专门存放我们的node服务文件,接下来我会说清楚每个文件内容,以及是干啥用的
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”】去掉就行了
注意这里我们监听的是3000端口,所以我们axios配置文件里
baseURL: 'http://localhost:3000'
7. 调用接口
上面http.api.ts文件里,我们已经写了接口方法了
getUserList: (params = {}) => { return get('/user/list', params) }
直接在app.vue里调用即可,最后看一下页面:
四、部署服务器
本地我们已经可以调用接口进行增删改查了,接下来就是给这个项目放到线上,直接域名访问。
1. 轻量级服务器(宝塔)
这里我就用腾讯云服务器做演示,基本上都差不多,需要先购买服务器,对于我们搭建网站来说,轻量级2核2G的就足够了,如果是首次,首页都会有免费的试用。
购买完之后:
再去宝塔之前,我们把防火墙端口都放行,免得后面还要返回回来,把该添加规则的都添加规则,
然后在应用管理里面,复制、登录
用外网面板地址在新窗口打开,记住用户名和密码,需要登录的
登陆成功,会让你下载套件,选择左边【LNMP推荐】
2. 把本地数据库导入到服务器
首先我们需要先拿到.sql文件
在建的数据库上右击,-> 转储SQL文件 -> 结构和数据 -> 放到桌面就可以了
- 这里需要注意一下,我就踩坑了。
- 因为我们安装的mysql是最新版本的8.0,而宝塔里默认是5.7,如果你的服务器好的话,可以升级到8,也可以。
- 如果也是2核2G的,那就老老实实打开刚才导出的test.sql文件,然后需要修改里面的一些字符集和排序规则,谁让我们版本太高了呢,就这一次,以后都不用再改了
把文件中的所有的
utf8mb4_0900_ai_ci 替换为 utf8_general_ci
utf8mb4 替换为 utf8
点击面板中的【数据库】【添加数据库】
数据库名随便起,用户名和密码,起个好记得,后面也要用。。提交。。
然后后面会有个【导入】,点击导入刚才的【test.sql】文件
到这里数据库就完成了。
3. 部署node项目
首先我们需要在【安全】里面添加端口规则,注意刚才我们node监听3000端口,这里就得加进去,你的是啥,就加啥。
然后在【文件】里wwwroot文件夹下面创建两个文件夹,一个存放vue打包后的项目,一个存放node服务文件
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文件
因为node服务传到线上了,所以db.js里的连接数据库配置就得修改了,直接在文件夹里双击修改
host: 自己服务器外网IP地址
其他的就是刚才我们导入数据库的时候,设置的
4. 使用PM2管理我们的node
【软件商店】下载【PM2管理器】
注意这两个里面的node版本保持一致
点开PM2 添加项目
然后点击后面的模块-管理, 【一键安装依赖】
安装完,这个状态就是node服务启动成功了
5. 配置站点
【网站】-【PHP项目】-【添加站点】
域名:服务器外网IP地址,其实就是宝塔的ip地址
根目录: 就是vue项目打包dist存在的目录,直接选就可以了
6. 运行
把配置的IP地址域名,在浏览器里打开,就能看到我们的项目,接口也可正常调用了。
7. 域名
这个自己买个域名,记住你的域名和服务器建议买同一家的,不然会有点小麻烦…
备案完成后,把IP改成域名,然后在网站底部加上备案号就可以了。
五、Navicat连接线上数据库
为了本地能操作线上数据库,我们需要使用Navicat连接服务器上的mysql数据库,从而进行本地操作
【连接】-【MySQL】
连接名随便取一个,主机就是你的服务器IP地址,端口不变3306,用户名、密码就是线上数据库的用户名、密码。
填写完,点击测试连接,连接成功就没毛病了,添加一条数据,然后去网站刷新,增加一条,完成。
结尾
自己摸索加上度娘,用了两天,终于把这个搞定了,特别适合第一次想用node写项目写接口的朋友,非常友好,算是个起步了。 虽然麻烦,但是整体下来能学到不少东西,接下来就可以做自己的网站了。
如果过程中遇到什么问题,可直接私聊我。
如果内容有啥错误,可直接评论,不会写文章,还请见谅。
最后,祝大家天天开心!!!!