项目搭建前需要先安装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. NOIP 考前研究

    NOIP 2017 试题研究 D1T1 小凯的疑惑 (45 min) 看到题面,大概是推数学公式. 先打暴力表,观察 \(a,b\) 与 \(n\) 的关系.猜想 \(a×b−a−b\). 引理:对于 ...

  2. error C2664: “ATL::CStringT<BaseType,StringTraits>::Remove”: 不能将参数 1 从“const char [2]”转换为“char”

    转自VC错误:http://www.vcerror.com/?p=1395 问题描述: 代码: CString str("asdfafda"); str.Remove(" ...

  3. java并发编程笔记(七)——线程池

    java并发编程笔记(七)--线程池 new Thread弊端 每次new Thread新建对象,性能差 线程缺乏统一管理,可能无限制的新建线程,相互竞争,有可能占用过多系统资源导致死机或者OOM 缺 ...

  4. 【玩转SpringBoot】异步任务执行与其线程池配置

    同步代码写起来简单,但就是怕遇到耗时操作,会影响效率和吞吐量. 此时异步代码才是王者,但涉及多线程和线程池,以及异步结果的获取,写起来颇为麻烦. 不过在遇到SpringBoot异步任务时,这个问题就不 ...

  5. 提高redis cluster集群的安全性,增加密码验证

    节点设置密码 1.修改配置文件 在配置文件里面增加密码选项,一定要加上masterauth,不然Redirected的时候会失败. masterauth redispassword requirepa ...

  6. 《单词的减法》state1~state17(第二遍学习记录)

    单词的减法(二) 2016.05.18.2016.05.21 state 1 advisory 顾问的,劝告的 anticipate/participate 期望/参加 state 2 applian ...

  7. Ascii Chart

    Char Dec Oct Hex | Char Dec Oct Hex | Char Dec Oct Hex | Char Dec Oct Hex -------------------------- ...

  8. C语言|博客作业5

    ---恢复内容开始--- 一.本周教学内容&目标 第2章 用C语言编写程序-函数 2.5 生成乘方表与阶乘表.使学生对函数的定义和调用有初步的认识,能模仿编程. 二.本周作业头 问题 答案 这 ...

  9. 04-初始mysql语句

    本节课先对mysql的基本语法初体验. 操作文件夹(库) 增 create database db1 charset utf8; 查 # 查看当前创建的数据库 show create database ...

  10. pycharm格式化python代码快捷键Ctrl+Alt+L失效

    突然发现按Ctr+Alt+L格式化python失效了,下午时候还好好的.看网上得说法是因为开着的其他软件里用了全局快捷键Ctr+Alt+L,我的是因为被网易云音乐占用了,所以在网易云音乐里把这个快捷键 ...