Node.js+Express+Vue+MySQL+axios的项目搭建
1 基本搭建
创建vue项目之前需要先安装Node.js和MySQL数据库
1.1 vue脚手架安装
npm i vue -g
npm i @vue/cli -g//初始化vue项目
vue create 项目名
1.2 在创建好的项目中创建server文件夹
在文件夹内创建这几个文件:
新建api文件夹、db.js、index.js、sqlMap.js。(api文件存放相关api接口路径及方法,db.js配置相关数据库,index.js配置后端端口及api路由)
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......');
db.js
//数据库配置信息 并进行导出
module.exports ={mysql:{host: 'localhost',user: 'root',password: '123456',database: 'h5',port: '3306'}
}
sqlMap.js
var sqlMap = {// 用户user: {add: 'insert into user(name,age) values(?,?)',update:'....'},//商品goods:{add:'insert into goods(name,desc,price,num) value(?,?,?,?)'},//订单orders:{....}
}
module.exports = sqlMap;
userApi.js
//引入express,调用路由模块
var express = require('express');
var router = express.Router();//引入mysql,mysql配置文件
var models = require('../db');
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);}
};// 增加用户接口 完整进入该post的路径问index.js里面配置的路由加上该post的路径
// '/api/user/addUser'
router.post('/addUser', (req, res) => {let sql = $sql.user.add;let params = req.body;console.log(params);conn.query(sql, [params.name, params.pass], function(err, result) {if (err) {console.log("添加失败"+err);}if (result) {jsonWrite(res, result);}})
});module.exports = router;
1.3 编写前端界面
在src的views目录下建一个前端界面
<template><div class="home"><form action="http://localhost:3000/api/user/addUser" method="post">user:<input type="text" name="name" /><br>pass:<input type="password" name="pass" /><br><input type="submit"/></form><button type="button" @click="addUser">post添加用户</button></div>
</template><script>export default {name: 'Home',methods:{addUser(){// console.log(111)//发起ajax请求//使用axios请求}}
}
</script>
1.4 启动服务测试
此时我们还没有安装mysql模块
npm i mysql --save
同时启动前端和后端的服务
输入数据测试:
数据插入成功!
这里需要注意一点:
前端界面表单中的name要和数据库中的字段一致,不然数据不能插入数据库而显示为NULL
2 axios的使用
axios安装和使用
安装axios
npm i --save axios
在vue项目中的main.js中引入axios
// 引入axios
import axios from 'axios'//全局注册axios
Vue.prototype.$axios=axios
<template><div class="home"><form action="http://localhost:3000/api/user/addUser" method="post">user:<input type="text" name="name" /><br>pass:<input type="password" name="pass" /><br><input type="submit"/></form><button type="button" @click="selectUser">post添加用户</button></div>
</template><script>export default {name: 'Home',methods:{selectUser(){// console.log(111)//发起ajax请求//使用axios请求// console.log(this.$axios)this.$axios({url:'http://localhost:3000/api/user/',//请求的url地址method:'post',data:{name:'胡桃',},}).then(function(data){console.log(data)}).catch(function(err){console.log(err)})}}
}
</script>
测试报错,因为Node后端和vue端端口不一致,需要跨域
配置proxy进行跨域请求
vue根目录找到vue.config.js
,如果没有就手动创建一个
module.exports={devServer:{proxy:{//配置跨域'/api':{target:'http://localhost:3000/',//这里填写真实的后台接口changeOrigin:true,//允许跨域pathRewrite:{/* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api*/'^/api':'/'}}}}
}
userApi.js中新增一个post
router.post('/selectUser', (req, res) => {console.log(req.body);
});
<template><div class="home"><form action="http://localhost:3000/api/user/addUser" method="post">user:<input type="text" name="name" /><br>pass:<input type="password" name="pass" /><br><input type="submit"/></form><button type="button" @click="selectUser">post添加用户</button></div>
</template><script>export default {name: 'Home',methods:{selectUser(){// console.log(111)//发起ajax请求//使用axios请求// console.log(this.$axios)this.$axios({url:'/api/api/user/selectUser',//请求的url地址method:'post',data:{name:'胡桃',},}).then(function(data){console.log(data)}).catch(function(err){console.log(err)})}}
}
</script>
重启前端和后端服务,点击按钮
查看后台控制台
跨域请求数据成功!
proxy写多个代理
module.exports={devServer:{proxy:{//配置跨域'/api/select':{target:'http://localhost:3000/',//这里填写真实的后台接口changeOrigin:true,//允许跨域pathRewrite:{'^/api/select':''}},'/api':{target:'http://localhost:3000/',//这里填写真实的后台接口changeOrigin:true,//允许跨域pathRewrite:{// api代表网址是: http://localhost:3000/api/user'^/api':''}},}}
}
前端url路径写成哪个都可以跨域请求到数据
代码更改后需要充钱前端服务
简写代码:
同理,我们把第二个代理修改
但是这里测试请求失败,
我们做如下修改:
最终就可以测试成功了!
Node.js+Express+Vue+MySQL+axios的项目搭建相关推荐
- 跟李宁老师做项目:小程序版网上商城(Node.js + Express + MySQL)-李宁-专题视频课程...
跟李宁老师做项目:小程序版网上商城(Node.js + Express + MySQL)-8799人已学习 课程介绍 本课程采用的技术包括小程序开发.Node.js.Express和M ...
- 基于node.js和vue的前后端分离影院售票系统电影院影片管理
1,项目介绍 基于 node.js和vue 的影院售票系统拥有两种角色,分别为管理员和用户. 用户:热映.即将上映.电影和影院全局搜索.评论.选座.购票.点赞.收藏.订单等一系列购票功能 管理员:用户 ...
- Node.js Express+Mongodb 项目实战
Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...
- 视频教程-项目实战视频课程:美团小程序(Node.js+Express+支付)-微信开发
项目实战视频课程:美团小程序(Node.js+Express+支付) 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN ...
- 项目实战视频课程:美团小程序(Node.js+Express+支付)-李宁-专题视频课程
项目实战视频课程:美团小程序(Node.js+Express+支付)-473人已学习 课程介绍 小程序视频教程,本课程实现了美团小程序的核心部分.采用异步的方式,通过AJAX从服务端获 ...
- 基于node.js和Vue的食堂窗口美食评价系统/美食网站
摘要 本论文主要论述了如何使用Node.js语言开发一个食堂窗口美食评价系统,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言中,作者将论述食堂窗口 ...
- 使用Node.js express 开发上传文件/图片api接口
我是傲夫靠斯,欢迎关注我的公众号[前端工程师的自我修养],每天更新. 今天我们来搞一个Node.js Express的上传文件功能,我使用了busboy这个库. Busboy是一个基于事件的文件流解析 ...
- 基于node.js和Vue的运动装备网上商城
摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准 ...
- 从零开始搭建Node.js, Express, Ejs, Mongodb服务器
http://www.toolmao.com/nodejs-express-ejs-mongodb-server 本文改自非鱼的<[翻译]前端开发人员入门指南,从零开始搭建Node.js, Ex ...
最新文章
- 在项目管理情境下,如何做多项目管理?
- GDataXML的一些简单示例。
- Debian、Ubuntu安装源配置文件说明
- Java的浅拷贝与深拷贝总结
- beego 显示html文件,[Beego] 内置的模板函数(不同格式的字符串和html的互转)
- SpringCloud之五大组件
- 修改layui框架html,layui框架如何设置分页?(方法介绍)
- 转dmg 到iso。。。
- ShFileOperation函数详解
- 信安第二版:第23章云计算安全需求分析与安全保护工程学习笔记
- 【CSS】1340- CSS 渲染原理以及优化策略
- 一键查询 | 2020年最新SCI期刊影响因子报告
- 实录丨戴琼海:深度学习遭遇瓶颈,全脑观测启发下一代AI算法
- cad坐标归零lisp_CAD坐标Z归0问题
- 基于线性表的图书信息管理系统
- 1046 mysql_MYSQL 1046 错误求助:
- unity打开除主菜单其他地方黑屏或白屏与unityHub安装unity简介
- 迁移系统至固态硬盘的采坑回顾
- 便签提醒事项怎么设置闹钟
- 香港之行——大学·精神·交通