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'
  }
}
1
2
3
4
5
6
7
8
9

java实现连接mysql数据库单元测试查询数据的实例代码

pdf 0星 超过10%的资源 120KB

下载

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......')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

创建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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

api使用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

以上就是整个内容，但要运行起来，除了运行vue项目外，还需要将配置的node后端运行起来，可以cmd或者用vscode的内置终端运行之前配置的server文件，进入到server文件夹位置，运行：node index出现以下内容即运行成功

获取数据效果展示：

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦