vue+mysql实现前端对接数据库

这篇具有很好参考价值的文章主要介绍了vue+mysql实现前端对接数据库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

下载引入相关依赖
1、cnpm install --save mysql

2、cnpm install --save axios

3、cnpm install --save body-parser

4、cnpm install --save express

5、cnpm install --savecrypto

在main中引入axios

import Axios from ‘axios’

Vue.prototype.$axios = axios

配置连接
在src下新建文件夹server,在其中新建db.js文件,index.js文件,其中db是数据库配置,index是node后端服务配置

db.js内容

module.exports = {
  mysql: {
    host: 'localhost', // 新建数据库连接时的 主机名或ID地址 内容
    user: 'name', // 连接的数据用户名
    password: '***', // 密码
    database: 'apitest', // 数据库名
    port: '3306'
  }


index.js内容

// node 后端服务器
const UserApi = require('./api/SysUser')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()
//采用设置所有均可访问的方法解决跨域问题
app.all("*", function(req, res, next) {
  //设置允许跨域的域名,*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin", "*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers", "content-type");
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == 'options')
    res.send(200); //让options尝试请求快速结束
  else
    next();
})

// 以json格式返回出去
app.use(bodyParser.json()) 
app.use(bodyParser.urlencoded({ extended: false }))

// 后端api路由
app.use('/api/sysuser', UserApi)


// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')


创建api
在新建文件夹api,在api下新建文件SysUser.js文件,这个就是之后需要使用到的接口api

const models = require('../server/db')
const express = require('express')
const router = express.Router()
const mysql = require('mysql')
const crypto = require('crypto')

// 连接数据库
const conn = mysql.createConnection(models.mysql)
conn.connect()
const jsonWrite = function (res, ret) {
  if (typeof ret === 'undefined') {
    res.json({
      code: '1', msg: '操作失败'
    })
  } else {
    res.json(
      ret
    )
  }
}

// 接口:增加信息sql,编辑修改信息sql1
router.post('/save', (req, res) => {
  const md5 = crypto.createHash('md5')
  const params = req.body
  const sql = `insert into sys_user(sys_id,sys_username,sys_pwd,sys_nickname,sys_phone,sys_head_protrait,sys_usertype,sys_userlevel) 
  select 0,?,?,?,?,?,?,? FROM DUAL WHERE NOT EXISTS(SELECT sys_username FROM sys_user WHERE  sys_username = ?)`
  const sql1 = `update sys_user set sys_nickname = ?,sys_phone = ?,sys_userType = ? where sys_id = ?`
  md5.update(params.pwd)
  // params.pwd = md5.digest('hex')
  if(params.id==0){
    conn.query(sql, [params.username, md5.digest('hex'), params.nickname, params.phone, params.headProtrait, params.userType, params.level,params.username], function (err, result) {
      if (err) {
        console.log(err)
      }
      if (result) {
        jsonWrite(res, result)
      }
    })
  }else{
    conn.query(sql1, [params.nickname, params.phone, params.userType, params.id], function (err, result) {
      if (err) {
        console.log(err)
      }
      if (result) {
        jsonWrite(res, result)
      }
    })
  }
})

// 接口:用户管理分页接口查询
router.get('/getlist', (req, res) => {
  const params = req.query
  const sql = `SELECT * FROM sys_user WHERE sys_username LIKE '%${params.keyword}%' 
  OR sys_phone LIKE '%${params.keyword}%' OR sys_nickname LIKE '%${params.keyword}%' 
  limit ${(params.pageIndex-1) * params.pageSize},${params.pageSize}`
  const sql2 = `SELECT COUNT(*) as total FROM sys_user`
  conn.query(sql, function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      conn.query(sql2,function(err, result2) {
        if(err){
          console.log(err)
        }
        if(result2){
          let ret = {
            data:result,
            total:result2[0].total
          }
          jsonWrite(res, ret)
        }
      })
    }
  })
})

// 接口:删除单条数据
router.post('/del', (req, res) => {
  const params = req.body
  const sql = `DELETE FROM sys_user WHERE sys_id=${params.id}`
  conn.query(sql, params, function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 接口:登录
router.post('/login', (req, res) => {
  const md5 = crypto.createHash('md5')
  const params = req.body
  md5.update(params.password)
  const sql = `SELECT * FROM sys_user WHERE sys_username=? AND sys_pwd=?`
  conn.query(sql, [params.username, md5.digest('hex')], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 接口:查询用户信息
router.get('/get',(req, res) => {
  const params = req.query
  const sql= `select * from info_user a RIGHT JOIN (select sys_id from sys_user where sys_username = ?) b on a.sys_id = b.sys_id`
  conn.query(sql,[params.username],function(err, result){
    if(err){
      console.log(err)
    }
    if(result){
      jsonWrite(res,result)
    }
  })
})

// 接口:编辑修改更新用户信息
router.post('/alterinfo',(req,res)=>{
  const params = req.body
  const sql = `insert into info_user(info_id,sys_id,info_real_name,info_sex,info_age,info_addr,info_phone,info_education) value (0,?,?,?,?,?,?,?)`
  const sql1 = `update info_user set info_real_name = ?,info_sex = ?,info_age = ?,info_addr = ?,info_phone = ?,info_education = ? where info_id = ?`
  if(params.id==0||params.id==null){
    conn.query(sql, [params.sid, params.realname, params.sex, params.age, params.addr, params.phone,params.education], function (err, result) {
      if (err) {
        console.log(err)
      }
      if (result) {
        jsonWrite(res, result)
      }
    })
  }else{
    conn.query(sql1, [params.realname, params.sex, params.age, params.addr, params.phone,params.education,params.id], function (err, result) {
      if (err) {
        console.log(err)
      }
      if (result) {
        jsonWrite(res, result)
      }
    })
  }
})

// 接口:修改密码
router.post('/modifypwd',(req,res)=>{
  const md5 = crypto.createHash('md5')
  const mdx = crypto.createHash('md5')
  const params = req.body
  const sql = `UPDATE sys_user SET sys_pwd=? WHERE sys_id = ? AND sys_pwd = ?`
  md5.update(params.oldPassword)
  mdx.update(params.newPassword)
  conn.query(sql,[mdx.digest('hex'),params.userId,md5.digest('hex')],function(err,result){
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

module.exports = router



api使用
在需要使用的界面调用api接口

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="sys_username" label="登录账号" align="center"></el-table-column>
      <el-table-column prop="sys_nickname" label="昵称" align="center"></el-table-column>
      <el-table-column prop="sys_phone" label="手机号码" align="center"></el-table-column>
      <el-table-column prop="sys_usertype" label="账号类型" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.sys_usertype==1?'超级管理员':(scope.row.sys_usertype===2?'管理员':'用户')}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '',
        pageIndex: 1,
        pageSize: 10,
        tableData: [],
        total: 0
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      getlist() {
        let params = {
          keyword: this.keyword,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
        // 这里使用http://localhost:3000是因为配置地方监听的3000端口
        // /api/sysuser 这一部分也是在index.js中引入配置的
        // /getlist 是在api接口里面的方法
        // 整个三部分组合成立通常使用的接口
        // 其中 前面地址部分可以自己全局去定义,同样$http(axios)也可以封装
        this.$http.get('http://localhost:3000/api/sysuser/getlist', { params: params })
          .then(response => {
            console.log(response);
            if (response.status == 200) {
              let datas = response.data
              this.tableData = datas.data
              this.total = datas.total
            } else {
              console.log(response)
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
    }
  }
</script>

<style scoped>

</style>



以上就是整个内容,但要运行起来,除了运行vue项目外,还需要将配置的node后端运行起来,可以cmd或者用vscode的内置终端运行之前配置的server文件,进入到server文件夹位置,运行:node index出现以下内容即运行成功文章来源地址https://www.toymoban.com/news/detail-785359.html

到了这里,关于vue+mysql实现前端对接数据库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java代码实现,利用JDBC接口-连接Mysql数据库

    1、JDBC本质上是一个接口,也就是java语言操作数据库的一套API(应用程序编程接口), 接口就规则,也就是sun公司创建了一个jdbc接口,各个sql(数据库管理系统)去实现接口提供jar包。其优点JDBC不是指单一操作某一个数据库。各个厂商使用相同的接口。不同的sql厂家实现

    2024年02月09日
    浏览(67)
  • [C#] WinForm/WPF 实现数据库连接与操作(MySQL)

    目录 🌿前言 🌿MySQL数据库简介 🌿数据库的基本概念 🌿ADO.NET体系结构 数据提供程序(.NET Framework Data Provider) 程序数据集(DataSet) 🌿数据库的访问形式 🌿数据库的连接 🌿实现增查改删(CRUD)操作 CRUD SQL常用语句 程序实现数据读取操作 程序实现增删改操作 数据库的使用在涉及

    2024年02月09日
    浏览(42)
  • Java(一):创建 Spring Boot 项目并实现连接操作MySQL数据库

    MySQL 命令 Maven 相关地址 下载地址: https://maven.apache.org/ maven配置方法地址: https://developer.aliyun.com/mvn/guide 仓库搜索地址: https://mvnrepository.com/ https://repo.maven.apache.org/ maven 本地配置 conf/settings.xml 下载 idea 并配置本地环境 maven Maven 构建 生命周期 Maven 的构建 生命周期 包括 三

    2024年02月07日
    浏览(65)
  • Jeecg开发框架前端VUE2数据页面与后端数据库交互实现

    ​ JeecgBoot 是一款基于代码生成器的 低代码 开发平台,零代码开发!采用前后端分离架构:SpringBoot2.x,Ant DesignVue,Mybatis-plus,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! JeecgBoot引领新的开发模式(Online Coding模式- 代码生成器模式- 手工MERGE智能开发

    2024年02月11日
    浏览(41)
  • 如何在安卓手机Termux上安装MariaDB(MySQL)并实现远程连接数据库

    Android作为移动设备,尽管最初并非设计为服务器,但是随着技术的进步我们可以将Android配置为生产力工具,变成一个随身Linux。 MariaDB是MySQL关系数据库管理系统的一个复刻,由社区开发,有商业支持,旨在继续保持在 GNU GPL 下开源。开发这个分支的原因之一是:甲骨文公司

    2024年02月04日
    浏览(46)
  • 关于Android Studio连接mysql数据库的过程和注册功能的实现(数据的插入)以及mysql环境变量的配置

    1.安装mysql数据库,安装的教程哔站有很多,版本尽量用mysql5.7的版本,用mysql8.0的版本与android studio进行连接的话可能会出现问题。 2.安装完成之后,给本机配置环境变量,步骤:如下图示 (1)通过搜索打开环境变量。 (2).点击环境变量。 (3).找到系统变量点击新建。

    2024年04月14日
    浏览(61)
  • Linux使用宝塔面板安装MySQL结合内网穿透实现公网连接本地数据库

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击跳转到网站】 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板+cpolar即可快速搭建一个mysql数据库服务并且实现公

    2024年04月12日
    浏览(51)
  • VsCode连接Mysql、Redis、MariaDB、SQL Server等数据库并进行可视化操作。无需额外的去下载可视化数据软件了,VsCode前端很方便的插件!!!

    前言:VsCode直接连接并操作数据库!最近使用公司的新电脑时,才发现好多东西需要重新下载 、配置,最近偶然接触到了 VsCode 的 Database Clinent 插件,可连接众多的服务,其中就支持连接到本地和远程的数据库,可视化操作、语句查询、导入、导出数据等基本功能集合,个人

    2024年02月05日
    浏览(54)
  • 简单的数据库连接与提供前端接口

    本文浅浅讲解一下,使用多种软件共同开发一个java工程。 这是我在windows系统上跑成功的一次设计: 逻辑图如下: idea,maven,jdk,git,jenkins,nginx,fiddler,chrome,mysql,navicat,tomcat,apifox idea:Docs maven:http:// maven.apache. org jdk:建议使用jdk.8,目前较为主流的jdk版本。百度安

    2024年02月03日
    浏览(51)
  • 【Spring Boot】以博客管理系统举例,完整表述SpringBoot从对接Vue到数据库的流程与结构。

    博客管理系统是一个典型的前后端分离的应用,其中前端使用Vue框架进行开发,后端使用Spring Boot框架进行开发,数据库使用MySQL进行存储。下面是从对接Vue到数据库的完整流程和结构。 对接Vue 在前端Vue应用中,需要访问后端Spring Boot应用的REST API接口,与其进行数据交互。具

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包