vue+express+mysql +node项目搭建
项目搭建前需要先安装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项目搭建的更多相关文章
- vue学习(1) vue-cli 项目搭建
vue学习(1) vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...
- 云服务器+tomcat+mysql+web项目搭建部署
云服务器+tomcat+mysql+web项目搭建部署 1.老样子,开头墨迹两句. 作为我的第二篇文章,有很多感慨,第一篇人气好低啊,有点小丧气,不过相信我还是经验少,分享的都是浅显的,所以大家可能不 ...
- vue2.0 项目搭建 和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...
- Vue.js系列之项目搭建
项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...
- Vue.js系列之项目搭建(1)
项目搭建具体步骤如下: 1.安装node 到官网下载安装,我这里是win7系统. (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装 ...
- vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)
vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...
- CentOS 7.6部署Vue + SrpingBoot + MySQL单体项目
对于独立的项目(前端.后台单体服务.数据库),部署到新服务器上时,常常需要繁琐的配置与环境安装,这里介绍Centos 7.6下如何搭建基于Docker的环境,以及如何使用docker部署一套Vue + ...
- freemarker + spring mvc + spring + mybatis + mysql + maven项目搭建
今天说说搭建项目,使用freemarker + spring mvc + spring + mybatis + mysql + maven搭建web项目. 先假设您已经配置好eclipse的maven ...
- vue 3.0 vue-cli项目搭建要点
一.使用vue-cli搭建项目(可使用vue ui图形化界面搭建项目,配置dist时,将名称设为项目名称) 二.项目搭建后 1.配置vue.config.js // 翻阅文档https://cli.v ...
随机推荐
- PHPSTORM破解版激活方式方法
方法一. 通过Licence Server 激活PHPStorm(快速) 方法原理是通过搭建服务器激活,不过网上有许多搭建好的. http://idea.goxz.gq http://v2mc.net ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- python中闭包和装饰器
前言: 编程语言发展的过程中,我们为了提高代码利用率,发明了函数式编程.函数将代码封装起来,我们需要用到此功能函数的时候,调用一下就可以了.但是使用的过程中,也遇到了一些问题,比如函数实现的功能不够, ...
- 剑指offer---4、序列化二叉树
剑指offer---4.序列化二叉树 一.总结 一句话总结: 1. 对于序列化:使用前序遍历,递归的将二叉树的值转化为字符,并且在每次二叉树的结点不为空时,在转化val所得的字符之后添加一个' , ' ...
- "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 ...
- c++全局变量,局部变量,内存布局,默认初始化
全局变量 定义在所有函数之外的变量,main函数之内的变量也是局部变量,Globle variable 未显示初始化时执行默认初始化 局部变量 定义在函数之内的变量,Local variable 未 ...
- 面试题22:链表中倒数第k个节点
# -*- coding:utf-8 -*- # class ListNode: # def __init__(self, x): # self.val = x # self.next = None ...
- 【软件安装】——Robot Framework
Robot Framework安装(win10) 一. 安装python 1.安装python2.7到本地,双击安装包进行安装,一般放入D盘,文件名默认Python27: 安装完成后进行版本检验,调出 ...
- Jmeter 使用技巧 (如何在linux下运行jmeter视窗界面呢)-jmeter如何模拟http发送gzip数据
jmeter如何模拟http发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量. 当然, 服 ...
- Numpy的基本运算及操作
import numpy as np ''' 一.算术运算 元素级 1.标量 加减乘除 数组(元素级:位置对应) 自增和自减 通用函数 2.数组 +-*/ 数组 (元素级) 3.条件和布尔运算 a&g ...