在 vue 中通过 express 连接数据库

张鸿运当头 2021-02-23 14:39:13
数据库 vue Express 连接 连接数


需要 vue cli3+,node,express 4.17.1+, MySQL

小白一个,写毕业设计遇到的问题,在这里记录一下

在网上找到的,然后自己写了一遍这里记录一下
原链接

大佬有什么好的建议尽情来说

一、首先创建一个数据库

 # 创建数据库
 CREATE DATABASE my\_db\_01
 # 使用这个数据库
 USE my\_db\_01
 # 创建测试表
 CREATE TABLE test(
  id INT AUTO\_INCREMENT PRIMARY KEY, # 该字段为主键且自增
  user\_name VARCHAR(20), # 用户名
  age TINYINT # 年龄
 )
 # 测试插入成功
 INSERT INTO test(user\_name, age) VALUES('zs', '18')
 # 查看表所有数据
 SELECT \* FROM test

image

二、初始化 vue 项目

vue create test

下载 express 模块(搭建一个简单服务器)

npm i express

下载 MySQL 模块

npm i mysql

下载 axios 模块

npm i --save axios

执行 npm run serve ,能否正常启动

image

三、创建一个简单服务器并写入 sql 语句

  1. 在项目根目录创建 server 文件夹然后里面创建三个 .js 文件和一个 api 文件夹

image

  1. db.js 中配置MySQL
// 连接数据库配置
 module.exports = {
  mysql: {
  host: 'localhost', // 域名,这是本机域名
  user: 'root', // MySQL 登录用户名
  password: 'hongyun0808', // MySQL 登录密码 一般都是 root
  database: 'my\_db\_01', // 要连接的数据库名
  port: '3306', // 数据库端口号
  },
 };

image

  1. index.js 中创建一个服务器
// 使用 express 创建服务器
 // 导入 express 模块
 const express = require('express');
 // 调用 express 函数,返回一个数据库实例
 const app = express();
 // 导入路由模块
 const userApi = require('./api/userApi');
 // 端口号
 const port = 8888;
 // 注册全局解析中间件
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 // 注册路由模块
 app.use('/api/user', userApi);
 // 调用 app.listen() 启动服务器
 app.listen(port, () => console.log(`Example app listening on port 8888!`));

image

  1. slqMap.js 写入 sql 语句
// todo sql 语句留后面调用
 module.exports = {
  user: {
  // ? 占位符 后面给数据自动填充
  add: 'insert into test(user\_name, age) values(?, ?)',
  get: 'select \* from test',
  },
 };

image

  1. api/userApi.js 测试用 api 实例
// 测试用 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 = (res, ret) => {
  if (typeof ret === 'undefined') {
  res.json({
  code: '1',
  msg: '操作失败',
  });
  } else {
  res.json(ret);
  }
 };
 // 增加用户接口
 // POST 请求
 router.post('/addUser', (req, res) => {
  var sql = $sql.user.add;
  var params = req.body;
  console.log(params);
  // ! [params.username, params.age] 自动填充到之前 ? 里面
  conn.query(sql, [params.user\_name, params.age], (err, result) => {
  if (err) return console.log(err);
  if (result) {
  jsonWrite(res, result);
  }
  });
 });
 // GET 请求
 router.get('/getUser', (req, res) => {
  let sql = $sql.user.get;
  let params = req.query;
  console.log(params);
  conn.query(sql, (err, result) => {
  if (err) {
  console.log(err);
  }
  console.log(res, result);
  });
 });
 module.exports = router;
  1. cmd 或者 PowerShell 打开 server 文件执行 node index

出现这个说明启动成功
image
注意:这里启动后服务器就不要关闭了,不然后面要保错,报这个错启动服务器就行
image

四、编写 vue 测试文件

为了测试方便直接在 HelloWorld.vue 这里面测试

image

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<form>
<input type="text" name="username" v-model="userName" /> <br />
<input type="text" name="age" v-model="age" /> <br />
<a href="javascript:;" @click="addUser">提交</a> <br />
<a href="javascript:;" @click="getUser">获取</a>
</form>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
userName: "",
age: "",
};
},
props: {
msg: String,
},
methods: {
addUser() {
let user_name = this.userName;
let age = this.age;
this.$http
.post(
"/api/user/addUser",
{
user_name,
age,
},
{}
)
.then((response) => {
console.log(response);
});
},
getUser() {
// ! 这里不能在浏览器控制台里面打印出来,但是在服务端(cmd中或者power shell)可以打印出来,可以在服务端将值保存在 vuex 中
this.$http
.get("/api/user/getUser")
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
a {
color: #42b983;
}
</style>

五、设置代理与跨域

直接执行 npm run serve 会报错

  1. 这是由于直接访问8080端口,是访问不到的,所以这里需要设置一下代理转发映射.

image

在根目录中创建 vue.config.js 文件,并写入以下内容

具体目录如下:

image

写入内容:

module.exports = {
  devServer: {
  proxy: {
  '/api': {
  target: 'http://127.0.0.1:8888/api',
  changeOrigin: true, // 解决跨域
  pathRewrite: {
  '^/api': '',
  },
  },
  },
  },
 };

image

  1. main.js 中添加
import axios from 'axios';
 Vue.prototype.$http = axios;

image

六、成功页面

完成后关闭编辑器重新打开运行 npm run serve

POST 请求

点击提交

HTML 页面

image

power shell 页面

image

数据库 页面

image

GET 请求

点击获取

HTML和数据库均没有效果

power shell 页面

image

版权声明
本文为[张鸿运当头]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039260229

  1. 对前端异常window error捕获的全面总结
  2. A comprehensive summary of front end exception window error capture
  3. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  4. Problem while trying to mount target] \ ". HTTP response code is 400
  5. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  6. 前端面试每日 3+1 —— 第679天
  7. How to add elements at the beginning of an array in JS?
  8. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  9. Front end interview daily 3 + 1 - day 679
  10. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  11. Daily development of 26 common JavaScript code optimization schemes
  12. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  13. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  14. 前端面试常考题:JS垃圾回收机制
  15. ReactDOM.render串联渲染链路(一)
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. 粗涉Webpack
  18. Frequently asked questions in front end interview: JS garbage collection mechanism
  19. ReactDOM.render Serial rendering link (1)
  20. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  21. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  22. About webpack
  23. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  24. 详解vue静态资源打包中的坑与解决方案
  25. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  26. 字节跳动2021前端技术岗发布+最新内部面试题
  27. Detailed explanation of Vue static resource packaging and Solutions
  28. Understanding TCP, HTTP, socket, socket connection pool
  29. 2008-2021 front end technical post release + latest internal interview questions
  30. 4. Vue基本指令
  31. 4. Vue basic instruction
  32. Java 发起 http 请求
  33. Java initiates HTTP request
  34. 网站由http升级为https图文教程
  35. Upgrade the website from HTTP to HTTPS
  36. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  37. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  38. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  39. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  40. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  41. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  42. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  43. react-native版文字跑马灯
  44. React native text running lantern
  45. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  46. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  47. this.byId(SupplierForm).bindElement in SAP UI5
  48. SAP UI5 JavaScript文件的lazy load - 懒加载
  49. this.byId (SupplierForm).bindElement in SAP UI5
  50. Lazy load lazy load of SAP ui5 JavaScript files
  51. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  52. How to connect the ground gas to the micro front end?
  53. How to transform single / micro service application into serverless application
  54. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  55. Seven array methods for JavaScript you need to master in 2021
  56. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  57. Seven array methods for JavaScript you need to master in 2021
  58. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  59. Seven array methods for JavaScript you need to master in 2021
  60. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库