vue+element UI+node.j实现用户后台管理

项目描述：包括登录退出，用户增删改查，echart统计

技术栈：vuex+vue-router+node.js+element UI+echart

效果图：

源码

users.js 接口文件，需要手动启动

nodemon users.js

const express = require("express")
const mysql = require("mysql")
const cors = require("cors")
const bodyParser = require("body-parser")

const app = express()

//跨域
app.use(cors())
// 解析表单
// 如果说extended的值为false  那么可以接受 字符串和数组  如果说为true  那么可以接受任意数据类型
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
//创建数据库

const conn = mysql.createConnection({
  host: "127.0.0.1", //数据库地址
  user: "root", //账号
  password: "", //填写自己的数据库密码
  database: "db_test", //库名
  multipleStatements: true //允许执行多条语句
})

//获取用户
app.get("/api/users", (err, res) => {
  const sqlStr = "select * from users"
  conn.query(sqlStr, (err, results) => {
    if (err) return res.json({ err: 1, message: "获取用户失败" })
    res.json({ status: 200, data: results })
  })
})
//添加用户
app.post("/api/adduser", (req, res) => {
  const user = req.body
  console.log(user)
  // const snum = req.body.snum
  // const name = req.body.name
  // const age = req.body.age
  // const major = req.body.major
  // const sqlStr = 'insert into users(snum,name,age,major) values(?,?,?,?)'
  const sqlStr = "insert into users set ?"
  // [(user.snum, user.name, user.age, user.major)]
  conn.query(sqlStr, user, (err, results) => {
    if (err) return res.json({ err: 1, message: err })
    res.json({ status: 200, data: "添加用户成功" })
  })
})
//用户详情查询
app.post("/api/userdetail", (req, res) => {
  const id = req.body.id
  if (id) {
    const sqlStr = "select * from users where id=?"
    conn.query(sqlStr, id, (err, results) => {
      if (err) return res.json({ err: 1, message: err })
      res.json({ status: 200, data: results })
    })
  }
})
//用户查询

var isShow = false //定义开关变量

app.post("/api/finduser", (req, res) => {
  const snum = req.body.snum
  const name = req.body.name
  const age = req.body.age
  const major = req.body.major

  if (snum !== "") {
    const sqlStr = "select * from users where snum=?"
    conn.query(sqlStr, snum, (err, results) => {
      if (err) return res.json({ err: 1, message: err })
      isShow = true
      if (isShow) {
        res.json({ status: 200, data: results })
      }
    })
  }
  if (name !== "") {
    const sqlStr = "select * from users where name=?"
    conn.query(sqlStr, name, (err, results) => {
      if (err) return res.json({ err: 1, message: err })
      return res.json({ status: 200, data: results })
    })
  }
  if (age !== "") {
    const sqlStr = "select * from users where age=?"
    conn.query(sqlStr, age, (err, results) => {
      if (err) return res.json({ err: 1, message: err })
      return res.json({ status: 200, data: results })
    })
  } else {
    const sqlStr = "select * from users where major=?"
    conn.query(sqlStr, major, (err, results) => {
      if (err) return res.json({ err: 1, message: err })
      return res.json({ status: 200, data: results })
    })
  }
})

// 删除用户
app.post("/api/deleteuser", (req, res) => {
  const id = req.body.id
  console.log(id)
  const sqlStr = "delete from users where id=?"
  conn.query(sqlStr, id, (err, results) => {
    if (err) return res.json({ err: 1, message: err })
    res.json({ status: 200, data: "删除用户成功" })
  })
})

app.listen(9000, err => {
  // console.log(err)
  if (!err) {
    console.log("The server is running at http://localhost:9000/api/users")
  }
})

源码地址：

https://gitee.com/lx-2022/useradmin