Vue+MySQL+Express

由于前后端分离,写功能的时候都是造的假数据,觉得不太好,然后在网上找到这位博主的案例:http://fehey.com/2017/01/20/vue-mysql-express/ 自己在动手做了一下!

一.用vue-cli脚手架工具创建一个基于webpack的Vue项目

1、前提要安装node环境。

2、首先全局安装:npm install -g vue-cli

3、创建一个文件夹或者直接安装在桌面:vue init webpack investment

4、安装完之后,切换到项目根目录,使用 npm install 安装依赖。

 

5、执行 npm run dev 进行开发调试,是否能启动。

二、添加Express服务端目录

1、前提:电脑安装mysql数据库

2、在项目根目录下创建一个server文件夹。然后里面创建下面三个文件:

db.js----用来添加mysql配置

// 数据库连接配置
module.exports = {
    mysql: {
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'test',
        port: '3306'
    }
}

index.js----Express服务器入口文件

// node 后端服务器

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.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......');

sqlMap.js----SQL语句映射文件,以供api逻辑调用

// sql语句
var sqlMap = {
    // 用户
    user: {
        add: 'insert into user(id, name, age) values (0, ?, ?)'
    }
}

module.exports = sqlMap;

api/userApi.js ---- 测试用api示例(server文件夹下面创建一个api文件夹,把userApi.js放入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.age], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

module.exports = router;

具体目录如下:

3、编写完成之后,就可以在项目根目录下安装依赖 npm install express mysql body-parser

4、切换到server文件夹下执行node index , 出现以下说明服务端启动成功。

三、编写vue测试文件

1、由于这里只是为了测试,所以直接在vue-cli生成的HelloWorld.vue中编写即可。

<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>
    </form>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userName: '',
      age: ''
    }
  },
  methods: {
    addUser() {
      var name = this.userName;
      var age = this.age;
      this.$http.post('/api/user/addUser', {
        username: name,
        age: age
      },{}).then((response) => {
        console.log(response);
      })
    }
  }
}
</script>

四、设置代理与跨域

1、完成上面3步之后,执行npm run dev,然后输入一组数据,点击保存,你会发现会报一个错误:vue-resource.common.js?e289:1071 POST http://localhost:8080/api/user/addUser 404 (Not Found).
这是由于直接访问8080端口,是访问不到的,所以这里需要设置一下代理转发映射.

vue-cli的config文件中有一个proxyTable参数,用来设置地址映射表,可以添加到开发时配置(dev)中

dev: {
    // ...
    proxyTable: {
        '/api': {
            target: 'http://127.0.0.1:3000/api/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    // ...
}

即请求/api时就代表http://127.0.0.1:3000/api/(这里要写ip,不要写localhost),
changeOrigin参数接收一个布尔值,如果为true,这样就不会有跨域问题了。

2、访问 http://localhost:8080/   把值填上点击提交会报 HelloWorld.vue?18db:26 Uncaught TypeError: Cannot read property 'post' of undefined  

解决:

1、在项目根目录安装axios:npm install --save axios

2、在项目main.js中添加:

import axios from 'axios'

Vue.prototype.$http = axios 

以下内容是调通的:

 

  • 2
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue+Node+MySQL是一种常见的前后端开发组合。Vue是一种流行的JavaScript框架,用于构建用户界面。Node是一个基于Chrome V8引擎的JavaScript运行时环境,用于构建服务器端应用程序。MySQL是一种关系型数据库管理系统,用于存储和管理数据。 在这个组合中,Vue通常用于构建前端界面,括用户界面和交互逻辑。Node用于构建后端服务器,处理前端发送的请求,并与数据库进行交互。MySQL用于存储和管理数据。 在你提供的引用中,\[1\]是一个Node服务器端的代码示例,用于处理添加用户的请求,并将用户信息插入到数据库中。\[2\]是一个MySQL连接示例,用于连接到数据库并暴露连接对象供接口操作数据库时使用。\[3\]提供了一个简单的目录结构示例,展示了如何在Node工程中进行数据库操作。 综上所述,Vue+Node+MySQL是一种常见的前后端开发组合,用于构建Web应用程序。Vue负责前端界面,Node负责后端服务器,MySQL负责数据存储和管理。通过这种组合,可以实现前后端的数据交互和处理。 #### 引用[.reference_title] - *1* [vue+node+mysql项目开发(括部署到服务器)](https://blog.csdn.net/juvialoxer/article/details/114012421)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue+node+mysql+nginx+express完成云服务器前后端分离搭建](https://blog.csdn.net/weixin_43480867/article/details/103255855)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值