项目搭建前需要先安装node环境及mysql数据库。

1、利用vue-cli脚手架创建一个vue项目

   a.全局安装 npm install -g vue-cli

   b.初始化项目 vue init webpack myexpress

   c.npm install

   d.npm run dev

2.在vue的项目基础上添加express后端目录

  a.在跟目录下新建server文件夹

  

  b.在server文件夹下新建api文件夹、db.js、index.js、sqlMap.js。(api文件存放相关api接口路径及方法,db.js配置相关数据库,index.js配置后端端口及api路由)

  

3.db.js数据库配置

module.exports ={
mysql:{
host: 'localhost',
user: 'root',
password: 'root',
database: 'test',
port: '3306'
}
}

4.index.js

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.urlencoded({extended: true}));
app.use(bodyParser.json()); // 后端api路由
app.use('/api/user', userApi); // 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

5.sqlMap.js

var sqlMap = {
// 用户
user: {
add: 'insert into user(name,age) values(?,?)'
}
} module.exports = sqlMap;

6.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) => {
let sql = $sql.user.add;
let params = req.body;
console.log(params);
conn.query(sql, [params.name, params.age], function(err, result) {
if (err) {
console.log("添加失败"+err);
}
if (result) {
jsonWrite(res, result);
}
})
}); module.exports = router;

7.vue页面编写

8.测试

   

  

vue+express+mysql +node项目搭建的更多相关文章

  1. vue学习(1) vue-cli 项目搭建

    vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...

  2. 云服务器+tomcat+mysql+web项目搭建部署

    云服务器+tomcat+mysql+web项目搭建部署 1.老样子,开头墨迹两句. 作为我的第二篇文章,有很多感慨,第一篇人气好低啊,有点小丧气,不过相信我还是经验少,分享的都是浅显的,所以大家可能不 ...

  3. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

  4. Vue.js系列之项目搭建

    项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...

  5. Vue.js系列之项目搭建(1)

    项目搭建具体步骤如下: 1.安装node 到官网下载安装,我这里是win7系统. (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装 ...

  6. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

  7. CentOS 7.6部署Vue + SrpingBoot + MySQL单体项目

    对于独立的项目(前端.后台单体服务.数据库),部署到新服务器上时,常常需要繁琐的配置与环境安装,这里介绍Centos 7.6下如何搭建基于Docker的环境,以及如何使用docker部署一套Vue + ...

  8. freemarker + spring mvc + spring + mybatis + mysql + maven项目搭建

    今天说说搭建项目,使用freemarker + spring mvc + spring + mybatis + mysql + maven搭建web项目. 先假设您已经配置好eclipse的maven ...

  9. vue 3.0 vue-cli项目搭建要点

    一.使用vue-cli搭建项目(可使用vue ui图形化界面搭建项目,配置dist时,将名称设为项目名称) 二.项目搭建后 1.配置vue.config.js // 翻阅文档https://cli.v ...

随机推荐

  1. PHPSTORM破解版激活方式方法

    方法一. 通过Licence Server 激活PHPStorm(快速) 方法原理是通过搭建服务器激活,不过网上有许多搭建好的. http://idea.goxz.gq http://v2mc.net ...

  2. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...

  3. python中闭包和装饰器

    前言: 编程语言发展的过程中,我们为了提高代码利用率,发明了函数式编程.函数将代码封装起来,我们需要用到此功能函数的时候,调用一下就可以了.但是使用的过程中,也遇到了一些问题,比如函数实现的功能不够, ...

  4. 剑指offer---4、序列化二叉树

    剑指offer---4.序列化二叉树 一.总结 一句话总结: 1. 对于序列化:使用前序遍历,递归的将二叉树的值转化为字符,并且在每次二叉树的结点不为空时,在转化val所得的字符之后添加一个' , ' ...

  5. "New page after" by code

    Hi. There is a method for starting of the new page in the EngineV2: Engine.NewPage(); You can call i ...

  6. c++全局变量,局部变量,内存布局,默认初始化

    全局变量 定义在所有函数之外的变量,main函数之内的变量也是局部变量,Globle variable  未显示初始化时执行默认初始化 局部变量 定义在函数之内的变量,Local variable 未 ...

  7. 面试题22:链表中倒数第k个节点

    # -*- coding:utf-8 -*- # class ListNode: # def __init__(self, x): # self.val = x # self.next = None ...

  8. 【软件安装】——Robot Framework

    Robot Framework安装(win10) 一. 安装python 1.安装python2.7到本地,双击安装包进行安装,一般放入D盘,文件名默认Python27: 安装完成后进行版本检验,调出 ...

  9. Jmeter 使用技巧 (如何在linux下运行jmeter视窗界面呢)-jmeter如何模拟http发送gzip数据

    jmeter如何模拟http发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量.  当然, 服 ...

  10. Numpy的基本运算及操作

    import numpy as np ''' 一.算术运算 元素级 1.标量 加减乘除 数组(元素级:位置对应) 自增和自减 通用函数 2.数组 +-*/ 数组 (元素级) 3.条件和布尔运算 a&g ...