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

Posted 2023-04-06 游1

下载引入相关依赖

1、cnpm install --save mysql

2、cnpm install --save axios

3、cnpm install --save body-parser

4、cnpm install --save express

5、cnpm install --save crypto

在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出现以下内容即运行成功

 获取数据效果展示：

 

微信小程序前后端分离怎么实现

微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开，前端负责展示和交互，后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤：

1. 前端代码开发：使用微信小程序开发者工具或其他工具，开发出前端的界面、功能、逻辑代码等。

2. 后端接口开发：后端负责提供API接口，承担数据处理和逻辑控制等任务。采用RESTful API 或GraphQL API 形式提供前端需要的数据接口。

3. 前后端接口对接：在前端代码中，需要对后端提供的接口进行调用，获取数据进行展示，完成前后端交互。

4. 服务端部署：将后端代码部署到服务器上，在服务器上运行后端代码，使得前端发起请求后能够得到正确的数据返回。

5. 网络安全和数据安全：在前端和后端的实现过程中，需要注意网络安全和数据安全的问题，保证通信过程中的安全以及数据的保密性和完整性。

以上是微信小程序前后端分离实现的一些关键步骤，需要注意的是，该过程需要前端和后端开发人员进行密切协作，并进行适当的测试和调整，以保证整体的实现效果和性能。 参考技术A 微信小程序前后端分离可以通过以下步骤来实现：

1. 前端使用框架如Vue、React等，通过AJAX或fetch等方式向后端发送请求，获取数据并展示。

2. 后端使用RESTful API接口提供服务，将数据以JSON格式返回给前端。后端可选用Node.js、Spring Boot、Django等框架实现。

3. 在小程序中使用wx.request() API来发送请求和接收响应。前端需要处理好请求参数、请求头、请求体等内容，并对响应进行解析和处理。

4. 部署方面，可以将前端部署到静态文件服务器上，将后端部署到云服务平台，例如阿里云、腾讯云等。

5. 安全性方面，需要注意前端的安全问题，尤其是防止XSS攻击；同时也要注意后端的安全问题，如SQL注入、身份验证等。

总之，微信小程序前后端分离需要前后端协同开发，具有良好的接口设计和文档说明，以及严格的安全措施，才能实现高效、稳定和安全的应用 参考技术B 微信小程序前后端分离可以通过Restful API接口实现。首先，前端页面由小程序框架进行搭建，并定义数据结构，接口请求，以及用户交互等；其次，后端项目服务器端部署实现RESTful API接口，提供各种功能的支持和操作；最后，小程序客户端和服务器端建立联系，实现前后端分离，从而实现小程序前后端分离开发。 参考技术C 微信小程序前后端分离实现的主要原理是：利用微信内置的JavaScript SDK，使微信小程序前端与后端实现了无缝连接，从而实现了前后端分离的效果。

前端代码通过微信小程序提供的JavaScript SDK接口，可以实现和后端API的交互，来获取所需的数据，从而实现小程序功能的展示和操作。

后端API是一段独立的服务程序，使用HTTP协议向前端发送JSON格式的响应数据，后端API可以实现前端所需要的各种数据处理，比如查询数据库，处理数据等。

通过前后端分离，微信小程序可以更快速地实现业务开发，前端可以更加专注于页面的展示和操作，而后端可以完成对数据的处理，从而提高了小程序开发的效率和用户体验。 参考技术D 微信小程序前后端分离的实现，主要是通过前后端分离的技术，来实现微信小程序的前端和后端的分离。

前端部分主要是实现前端框架，例如Vue，React，Angular等，实现前端页面的展示，框架中提供了很多组件，可以快速开发页面，框架中也有很多API，可以实现页面的交互，和数据的获取。

后端部分，主要是实现数据的存储，通过后端语言，例如Node.js，PHP，Python等，实现服务器的搭建，实现数据库的创建和数据的存储，以及实现接口的设计，从而实现前端数据的获取。

实现微信小程序前后端分离，需要前端和后端开发人员配合，前端人员实现页面的搭建和交互，后端实现数据的存储和接口的设计，两者配合完成微信小程序前后端分离的实现。