【Vue前端】Vue+MySQL(整体用到vue-vli、ElementUI）

article/2025/9/29 11:30:57

提示：小白自学Vue前端，记录一些知识点

Vue+MySQL(整体用到vue-cli、ElementUI）

目录
- 一、相关准备
- - 1. 连接数据库
  - 2. 添加相关依赖
- 二、使用步骤
- - 1. userApi.js
  - 2. db.js
  - 3. index.js
  - 4. server目录下新建sqlMap.js
  - 5. register.vue
  - 6. main.js
  - 7. 启动监听
  - 8. 在内置终端运行
总结

//api路由
var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
var jsonWrite = function (res, ret) {if (typeof ret === 'undefined') {res.json({code: '1', msg: '操作失败'});}else {res.json(ret);}
};
// 增加注册接口
router.post('/addUser', (req, res) => {var sql = $sql.user.add;var params = req.body;console.log(params);conn.query(sql, [params.username, params.password], function (err, result) {if (err) {console.log(err);}if (result) {jsonWrite(res, result);}})
});
module.exports = router;

2. db.js

// 数据库连接配置
//db.js——用来添加 mysql 配置
//根据mysql的IP，端口，用户名，密码，数据库名称自行修改
module.exports = {mysql: {host: 'localhost',user: 'root',password: '123qwe',database: 'mall',port: '3306'}
}

3. index.js

// node 后端服务器
//index.js——Express 服务器入口文件const userApi = require('./api/userApi')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()//采用设置所有均可访问的方法解决跨域问题
app.all("*", function (req, res, next) {//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin", "*");//允许的header类型res.header("Access-Control-Allow-Headers", "content-type");//跨域允许的请求方式 res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");if (req.method.toLowerCase() == 'options')res.send(200); //让options尝试请求快速结束elsenext();
})
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
// 后端api路由app.use('/api/user', userApi)// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')

4. server目录下新建sqlMap.js

// sql语句
//sqlMap.js——SQL 语句映射文件，供 API 调用
var sqlMap = {user: {add: 'insert into user(username,password) values (?,?)'}
}
module.exports = sqlMap

5. register.vue

<template>
<el-button type="submit" @click.prevent="addUser">注册
</el-button>
</template><script>
export default {name: 'register',data() {return {username:'',password:''}},methods:{// 用户注册addUser() {var username = this.username;var password = this.password;this.$axios.post( "http://localhost:3000/api/user/addUser",{username: username,password: password,},{}).then((response) => {//跳转的页面写在此处this.$router.push({path: '/home'});});	}}
}
</script>

6. main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Router from 'vue-router'
import Vuex from "vuex";
import router from "@/router/index";
import axios from 'axios';Vue.use(Router);
Vue.use(ElementUI);
Vue.prototype.$axios = axios