前端用node+mysql实现简单服务端
node express + mysql实现简单服务端
前端新人想写服务端不想学PHP等后端语言怎么办,那就用js写后台吧!
这也是我这个前端新人的学习成果分享,如有那些地方不对,请给我指出。
1.准备工作
node:官网下载,然后配置环境变量,在cmd中输入node -v检查是否配置成功。
npm:集成在node里了,npm -v检查。
MySQL:官网下载安装,配置请问度娘。
2.构建服务端
首先先在项目文件夹里新建一个server的新文件夹,新建一个index.js服务端入口文件,一个mysql.js配置文件,一个api.js接口文件。
index.js
const userApi = require('./api')
const bodyParser = require('body-parser')
const express = require('express')
const app = express() // 中间件
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false })) app.use('/sqlapi', userApi)
// 监听端口
app.listen(3000)
console.log('success listen at port:3000')
mysql.js
var mysql = require('mysql')
var connection = mysql.createConnection({
host: 'localhost',//数据库地址
user: 'root', //连接数据库的用户名
password: '',//连接数据库的密码
database: ''//数据库名
}) module.exports = connection
api.js
var mysql = require('./mysql')
var express = require('express')
var router = express.Router()
mysql.connect()
router.post('/login', (req, res) => {
var params = req.body
mysql.query("SELECT * FROM `user` WHERE `username` = '" + params.username + "' AND `password` = '" + params.password + "'", function (err, result) {
if (err) {
console.log(err)
}
if (result) {
if (result.length > 0) {
res.json({ message: '登录成功', status: 1 })
} else {
res.json({ message: '用户名或密码错误', status: 0 })
}
res.end('is over')
}
})
})
这样服务端就完成了,然后进入server文件夹,cmd运行命令
node index
启动服务端
3.前端访问
服务端构建完成后就可以在前台用ajax访问了,这里我用我正在写的个人项目做演示,我个人项目用的是vue-cli3,请求用的是axios,并且封装了拦截器,所以可能有些不同,只需要按照常规的post请求即可。
** 注意,因为服务端和前端端口不一致,所以存在跨域问题,需要进行跨域 **
这是我前端api封装的代码,不含拦截器
import request from '@/utils/request' /**
* 登录
*/
export function login (data) {
return request({
url: '/sqlapi/login',
method: 'post',
data: {
username: data.username,
password: data.password
}
})
}
调用页面
login () {
var _this = this
if (this.disabled) return
this.disabled = true
login({ username: this.username, password: this.password }).then(function (data) {
_this.disabled = false
if (data.data.status) {
Toast(data.data.message)
_this.$store.dispatch('SetUserInfo', { username: _this.username, login: true })
} else {
Toast(data.data.message)
}
})
}
跨域配置:
跨域我是在前台进行配置的,因为还用到其它接口,也可以在服务端进行配置噢。
proxy: {
'/sqlapi': {
target: 'http://localhost:3000/sqlapi',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/sqlapi': ''
}
}
}
mysql 建表
首先先建一个表,比如账户信息,用户名作为主键,随便写两个字段测试一下
登录界面填好账号密码后,点击登录请求
查看返回数据,请求成功
这样就实现了node express + mysql的服务端,是不是很简单,觉得有用的话就给我评个分吧!
完整项目地址:github
前端用node+mysql实现简单服务端的更多相关文章
- 前端学习 node 快速入门 系列 —— 服务端渲染
其他章节请看: 前端学习 node 快速入门 系列 服务端渲染 在简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力. 对于真正的网站,页面中的数据应该来自服 ...
- 前端使用node.js+express+mockjs+mysql实现简单服务端,2种方式模拟数据返回
今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese
- Linux中如何安装配置Mysql和SVN服务端
目标Linux系统为centOS 一.安装登陆mysql 1.直接以root用户运行:yum install mysql 和yum install mysql-server等带安装完成. 2.安装 ...
- git分布式的理解----简单服务端搭建
Git是分布式的,并没有服务端跟客户端之分,所谓的服务端安装的其实也是git.Git支持四种协议,file,ssh,git,http.ssh是使用较多的,下面使用ssh搭建一个免密码登录的服务端. 1 ...
- node.js创建简单服务测试请求数据
工具:安装node: 1,创建文件夹 server, 2 ,在server文件夹下分别创建server.js 和 package.json 文件 3,server.js 代码: var express ...
- 小tips:node起一个简单服务,打开本地项目或文件浏览
1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...
- node起一个简单服务,打开本地项目或文件浏览
1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...
- [django]django配合前端vue前后端联调,django服务端解决跨域(django-cors-headers)
django内部csrf post提交数据解决 https://www.cnblogs.com/iiiiiher/articles/9164940.html 前端写了个页面,里面$.post发现403 ...
随机推荐
- 购物车redis存储结构
- Servlet:从入门到实战学习(3)---Servlet实例【图文】
本篇通过图文实例给大家详细讲述如何建立一个Servlet,配置好运行环境并成功连接到MYSQL的数据库,进行数据的查询展示. 1.项目创建:IDEA -> Create New Project ...
- 2.bootstrap安装
1.下载 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本(或者 http://www.bootcss.com/ 中文网) Download Boo ...
- 古老的CSS同高列问题
今日在网页设计时,遇到了希望页面的几列同高需求的实现问题,搜罗了一下google,找到以下文章,感觉不错,翻译过来,同时作为学习加深印象. https://css-tricks.com/fluid-w ...
- 关于Unity3d的Quaternion.LookRotation的学习
首先,创建两个cube GameObject物件.Origin作为原点参考.Player是我们要实验的物件.如下图所示: 创建一个脚本Quat.cs,赋给Palyer cube.脚本如下: publi ...
- Excel英语成绩单 吴昊
- [BZOJ 1588][HNOI 2002] 营业额统计
这果然是在那个没有STL的年代出的题 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 16648 Solve ...
- 【[CQOI2018]解锁屏幕】
状压这个东西好像没有什么能优化的高级东西,像什么斜率优化,单调队列在状压的优化上都很少见 而最常见的状压优化就是预处理优化了, 这道题就预处理一下所有点对之间连线上的点,之后压成状态就能做到\(O(2 ...
- 软件分享:将应用一键打包成dmg文件
简介 苹果软件开发完成后,都要打包成dmg文件.通常的做法也许是到系统自带的磁盘工具里制作dmg文件,但这样做比较繁琐,尤其是要打包多个应用时,每次只能制作一个dmg文件很麻烦.分享一个很好用很方便的 ...
- Apollo深度磁盘清理
摘要 在Apollo的使用过程中,会出现磁盘空间不足的情况,Apollo的官方提供的方法是删除apollo/data/log或者删除apollo/data/bag文件.但是即使删除了这些,磁盘空间并没 ...