vue项目使用node连接数据库的方法(前后端分离)

目录
  • 写在前面
  • 编写顺序
  • 开始
  • 2.制作后端 node 服务器
  • 3.编写 node 连接数据库
  • 4.实现登录、修改密码和获取用户信息接口
  • 5.完成前后端交互
  • 结束

学习关键语句:
vue连接mysql数据库
vue项目连接后台数据库配置
vue通过node连接MySQL数据库

写在前面

为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,如果你对这篇文章中提到的内容有所疑惑,请飞快的将你的疑惑输入到下方评论区中!
另外一个真实原因是我在做这个练习时很难找到完整的教学性文章 , 所以决定分享一下经验

注意:本文在2022/8/16号已进行完善,此次完善的内容如下

  • 变为更符合真实项目的目录结构
  • axios请求二次封装
  • 前端跨域处理完善

文章末尾附带本文项目文件链接

对于搜索自己问题找到这篇文章的网友,可以参考右边的菜单目录快速定位到你可能想找的内容

编写顺序

  • 编写前端页面
  • 编写后端node服务器
  • 编写node连接数据库
  • 编写数据库交互
  • 编写前后端交互

开始

1.编写前端页面

这里使用vue2脚手架快速搭建项目

vue create node-app

选择 babel, router即可
建立好之后如下图

删除无需内容

APP.vue
只保留路由切换

Home.vue 和 About.vue 全部清空,重新建立vue文件模板(template + script + style)

制作登录页和首页

将 Home.vue 当做登录页面, About.vue当做首页,这样就不用麻烦配置路由了,当做演示就很方便

登录页

登录页的功能需求 : 输入账号密码完成登录操作,并根据登录情况给出响应提示
制作登录页面, 放置两个 input 输入框和一个 button 按钮,并给上最基本的样式

Home.vue

<template>
  <div class="home">
    用户名 <input type="text" v-model="form.username" /><br />
    秘密码 <input type="password" v-model="form.password" /><br />
    <button @click="login">登录</button>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {

    }
  }
}
</script>
<style>
* {
  margin: 5px;
  padding: 5px;
}
button {
  width: 50px;
  height: 30px;
}
</style>

首页

首页就用来修改密码好了, 修改保存在数据库中的密码
首页功能需求 : 修改用户密码 , 查看用户个人信息

About.vue

<template>
  <div style="display:flex">
    <div>
      用户名:<input type='text' v-model='form.username' /><br />
      新密码:<input type='text' v-model='form.newPassword' /><br />
      新密码:<input type='text' v-model='form.rePassword' /><br />
      <button @click='update'>确认</button>
      <button @click='getUser'>查询</button>
    </div>
    <div class="div2" v-if="userInfo.nickname">
      <h3>用户信息</h3>
      <div>
        昵称:{{userInfo.nickname}}
      </div>
      <div v-if="userInfo.gender != '无'">
        性别:{{userInfo.gender}}
      </div>
      <div v-if="userInfo.age != ''">
        年龄:{{userInfo.age}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        newPassword: '',
        rePassword: ''
      },
      userInfo: {}
    }
  },
  methods: {
    getUser() {

    },
    update() {

    }
  }
}
</script>
<style>
</style>

到这里,前端页面除了交互以外就已经完成了
接下来我们来编写后端 node服务器

2.制作后端 node 服务器

初始化项目

新建文件夹, 起名为 node-server , 新建文件 app.js , 在终端中初始化项目

npm init
npm i

完成之后 node-server 文件夹中会出现以下目录

编写 app.js

我们想要制作服务器, 这里使用 express 来实现

npm i --save express

当然了, 我们还需要解决跨域问题, 这里使用 cors 来解决

npm i --save cors

现在我们来考虑前端传参问题
对于get请求,其参数是直接拼接在url后面的,解析也相对容易。在express框架中,get请求的参数全部都被放置在了request对象的query中。
post请求有多种形式可以发送数据,这取决于post请求的请求头Content-type的内容,常见的有三种:

  • multipart/form-data
  • application/x-www-form-urlencoded
  • application/json

为此,我们引入中间件来解决读取参数的问题
这里使用 body-parser 和 connect-multiparty 来解决

npm i --save body-parser
npm i --save connect-multiparty

接下来编写 app.js 文件

app.js

// 导入 express
const express = require('express')
// 创建 app
const app = express()
// 设置跨域访问
const cors = require('cors')
app.use(cors())
// 处理POST参数
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
// 处理 x-www-form-urlencoded
app.use(bodyParser.urlencoded({
  extended:true
}));
// 处理 application/json
app.use(bodyParser.json())
// 处理 mutipart/form-data
app.use(multiparty())
// 测试接口能否正常调用
app.get('/info', (req, res) => {
  res.send("Hello shaoyahu !")
})
// 启动
app.listen(3000, () => {
  console.log('express server running at http://127.0.0.1:' + 3000);
})

接下来我们在控制台使用 node 命令就可以启动服务器了

node app.js

最先看到控制台打印了消息

接下来我们在浏览器中打开看一看效果

太棒了 ! 我们已经完成了最简单的接口

3.编写 node 连接数据库

编写 mysql.js 文件

我们在 node-server 文件夹下新建文件 mysql.js
首先, 我们需要安装 mysql

本机安装
本机安装 mysql 服务请参考其他文章 , 这里不做详细介绍 , 大致行动为 : 下载安装包 , 点击安装 , 配置

安装 mysql 依赖

npm i --save mysql

编写 mysql.js 文件

mysql.js

let mysql = require('mysql')
const db_config = {
  host: 'localhost',
  user: '请输入你自己的账号, 一般为 root',
  password: '请输入你自己的密码, 一般也为 root',
  port: "3306",// 默认使用3306端口号
  database: 'node_app'// 使用你自己创建的数据库名称,我这里使用 node_app
}
// 进行数据库交互
function conMysql(sql) {
  let connect = mysql.createConnection(db_config)
  // 开始链接数据库
  connect.connect(function (err) {
    if (err) {
      console.log(`mysql连接失败: ${err}!`)
    } else {
      console.log('mysql连接成功!')
    }
  })
  // 返回一个Promise承诺对象
  return new Promise((resolve, reject) => {
    connect.query(sql, (err, result) => {
      if (err) {
        reject(err)
      } else {
        // 此处需要将返回数据转为JSON再转回来,否则原数据不为任何数据类型
        let res = JSON.parse(JSON.stringify(result))
        closeMysql(connect)
        resolve(res)
      }
    });
  })
}
// 查询成功后关闭mysql
function closeMysql(connect) {
  connect.end((err) => {
    if (err) {
      console.log(`mysql关闭失败:${err}!`)
    } else {
      console.log('mysql关闭成功!')
    }
  })
}
// 导出方法
exports.conMysql = conMysql

测试数据库连接

我们在数据库中新建一张表 userinfo , 里面提前插入两条数据

继续编写 app.js 文件获取这两条数据

app.js
在原有的基础上新增一个接口 , 位置放在 /info 下就可以

// 引入 mysql 方法
let { conMysql } = require('./mysql')
// 获取全部用户信息,测试数据库连接的上不上
app.get('/getUser', (req, res) => {
  let sql = 'select * from userinfo'
  conMysql(sql).then(result => {
    res.send(result)
  })
})

同样我们在浏览器中打开

测试成功 !

4.实现登录、修改密码和获取用户信息接口

接下来就是最重要的部分了 , 我们来实现登录、修改密码和获取用户信息的接口 , 同样的里面还包含了数据库的交互
但是 , 在此之前 , 我们先来统一返回的数据格式

app.js
我们创建一个类来返回数据

// 创建统一的返回报文对象
class Response {
  constructor(isSucceed, msg, code, data) {
    this.isSucceed = isSucceed;
    this.msg = msg;
    this.code = code;
    this.data = data;
  }
}

登录

app.js
登录方法我们使用 post 请求,想来没人希望自己的账号密码被人一眼看见吧

// 登录
app.post('/login', (req, res) => {
  let sql = `select * from userinfo where username = '${req.body.username}'`
  conMysql(sql).then(result => {
    if (result[0].password === req.body.password) {
      let response = new Response(true, '登录成功', 200, result)
      res.send(response)
    } else {
      let response = new Response(false, '用户名或密码错误', 400)
      res.status(400).send(response)
    }
  }).catch(err => {
    res.status(500).send('数据库连接出错!')
  })
})

其中 , res.send() 方法默认返回状态码为 200 , 可以通过增加调用 .status() 方法返回想要返回的状态码

修改密码

app.js
修改密码我们使用 post 请求

// 修改密码
app.post('/updatePassword', (req, res) => {
  let sql = `update userinfo set password = '${req.body.newPassword}' where username = '${req.body.username}'`
  conMysql(sql).then(result => {
    if (result.affectedRows == 1) {
      let response = new Response(true, '修改成功', 200, result)
      res.send(response)
    } else {
      let response = new Response(false, '修改失败,请稍后重试', 400)
      res.status(400).send(response)
    }
  }).catch(err => {
    res.status(500).send('数据库连接出错!')
  })
})

获取用户个人信息

app.js
获取用户个人信息我们使用 get 请求

// 获取当前用户信息
app.get('/getUserInfo', (req, res) => {
  let sql = `select * from userinfo where username = '${req.query.username}'`
  conMysql(sql).then(result => {
    let response = new Response(true, '获取成功', 200, result)
    res.send(response)
  }).catch(err => {
    res.status(500).send('数据库连接出错!')
  })
})

这样一来 , 我们登录、修改密码和获取个人信息都已经完成了 , 接下来只需要完成前后端交互就可以了 , 很显然的是 , 接下来的事应该是由前端开发来完成了 , 所有如果有哪位有意向于前端开发的朋友阅读到这里 , 就可以尝试自己动手完成接下来的工作了

5.完成前后端交互

前后端交互我们使用 axios
安装依赖

$ npm i --save axios

二次封装axios和请求

在src同级目录下新建文件 axios.js

打开axios.js文件,我们进行简单封装

axios.js
进行简单的封装,不添加拦截器

为了简洁,同时相同请求地址的域名都是相同的,我们就可以将域名提出来统一放在最前面

const axios = require('axios')

const service = axios.create({
  baseURL: 'http://localhost:3000'
})

export default service

接下来进行请求的封装
在src目录下新建 api 文件夹同时在该文件夹下新增文件 user.js 专门存放和用户有关的接口请求

我们在 user.js 中封装三个方法,分别是登录,修改密码和查看个人信息

user.js

import axios from '../../axios'

// 用户登录
export function userLogin(data) {
  return axios.post(`/login`, data)
}

// 修改密码
export function updatePassword(data) {
  return axios.post('/updatePassword', data)
}

// 获取用户信息
export function getUserInfo(username){
  return axios.get('/getUserInfo?username=' + username)
}

当然了,前端也是会遇到跨域问题的,我们这里使用代理服务器来解决跨域问题
在src同级目录下新增 vue.config.js 文件

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      },
    },
  }
}

由于我们将所有的 /api 都使用域名进行重写
所以我们再来修改 axios.js 文件

axios.js

const axios = require('axios')

const service = axios.create({
  baseURL: '/api'
})

export default service

好了这样一来我们和发送请求相关的文件便写好了,现在要去写交互页面了

添加登录功能

Home.vue
首先需要引入请求方法

import { userLogin } from '../api/user'

再只需要对上面的 login 方法进行补充就可以了

    login() {
      userLogin(this.form)
        .then((res) => {
          alert(res.data.msg)
          this.$router.push('about')
        })
        .catch((err) => {
          alert(err.response.data.msg)
        })
    }

这样就可以完成登录功能了 , 接下来我们来处理修改密码

添加修改密码功能

About.vue
首先需要引入请求方法

import { updatePassword, getUserInfo } from '../api/user'

再只需要对上面的 update 和 getUser 方法进行补充就可以了

    getUser() {
      getUserInfo(this.form.username).then(res => {
        this.userInfo = res.data.data[0]
      }).catch((err) => {
        console.log(err)
      })
    },
    update() {
      if (
        this.form.username == '' ||
        this.form.newPassword == '' ||
        this.form.rePassword == ''
      ) {
        alert('数据不能为空')
        return
      }
      updatePassword(this.form)
        .then((res) => {
          alert(res.data.msg)
          this.$router.push('/')
          alert('修改密码后请重新登录')
        })
        .catch((err) => {
          alert(err.response.data.msg)
        })
    }

结束

如此一来 , 一个简单的前后端分离的项目就是有了雏形 , 虽然实现的功能非常简陋 , 但能让我在 js 这条路上再进一步 , 就是说非常高兴了

如果你对文中的内容有所疑惑或者觉得不对劲 , 请赶快到评论区给我留言 , 千万别耽误了

文件链接

最后附上文件链接: https://dyyidc.jb51.net/202212/yuanma/vue_node_270703_jb51.rar

到此这篇关于vue项目使用node连接数据库(前后端分离)的文章就介绍到这了,更多相关vue使用node连接数据库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解

    目录 Vue项目通过node连接MySQL数据库 1.创建Vue项目 2.下载安装需要的插件 3.在项目中创建server文件夹,用于搭建本地服务器 4.Vue项目访问接口获取数据 数据表的增删改查操作 1.服务器配置 2.前端配置 页面样式 总结 Vue项目通过node连接MySQL数据库 1.创建Vue项目 vue create 项目名 Vue项目创建的详细步骤,有需要的可移步这里 2.下载安装需要的插件 下载express npm install express 下载cors,用于处理接口

  • Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析

    本文实例讲述了Vue+Node服务器查询Mongo数据库及页面数据传递操作.分享给大家供大家参考,具体如下: 1.利用Mongoose查询MongoDB 通过mongoose依赖可以简捷地操作mondodb数据库,首先安装mongoose: cnpm install mongoose --save 使用mongoose需要一个模式Schema,它用于定义你从mongodb中查询的每个文档条目的内容,然后通过mongoose.model()生成一个模板model,模板像一个架子,将数据库取到的每个

  • vue项目使用node连接数据库的方法(前后端分离)

    目录 写在前面 编写顺序 开始 2.制作后端 node 服务器 3.编写 node 连接数据库 4.实现登录.修改密码和获取用户信息接口 5.完成前后端交互 结束 学习关键语句:vue连接mysql数据库vue项目连接后台数据库配置vue通过node连接MySQL数据库 写在前面 为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,如果你对这篇文章中提到的内容有所疑惑,请飞快的将你的疑惑输入到下方评论区中!另外一个真实原因是我在做这个练习时很难找到完整的教学性

  • 基于vue实现网站前台的权限管理(前后端分离实践)

    Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • 以Java Web项目为例浅谈前后端分离开发模式

    目录 为什么要前后端分离? 什么是前后端分离? 前后端分离的优缺点? 对于你们的团队和产品有没有必要前后端分离? 为什么要前后端分离? 以Java Web项目为例,在传统的开发模式中,前端代码(Html.js.css)写在JSP中,甚至JSP中嵌入Java代码.当用户访问网站时,页面数据也就是Html文档,由Servlet容器将jsp编译成Servlet,然后将jsp中的html,css,js代码输出到浏览器,这个过程需要经过很多步骤,才能响应用户的请求.这个过程非常繁琐,效率低下,直接造成了页

  • Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • 详解vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

随机推荐