vue2后台管理系统（ vue2 + vue-router + Vuex + axios + elementui + echarts，nodejs后台）

最新推荐文章于 2025-05-31 11:14:59 发布

欢愉～

最新推荐文章于 2025-05-31 11:14:59 发布

阅读量5.7k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Vue2.x 文章标签： echarts vue.js elementui

本文链接：https://blog.csdn.net/m0_61612505/article/details/125349534

技术

vue2 + vue-router + Vuex + axios + elementui + echarts

2.SessionStorage.js(数据持久化)

3.接口api文件，Goods的index.js

登录页面

1.LoginView..vue

Layout布局界面

1. MyContent.vue（动态面包屑）

serve

1.db数据库连接

// const mysql = require('mysql')
import mysql from 'mysql'

const client = mysql.createConnection({
  host: 'localhost', // 数据域名
  user: 'root',
  password: 'admin123',
  database: 'my_db_01',
  port: '3306'
})

// 封装数据库操作语句
export function sqlFn (sql, arr, callback) {
  client.query(sql, arr, function (error, result) {
    if (error) {
      console.log('数据库语句错误')
      return
    }
    callback(result)
  })
}

2.user.js

import express from 'express'
import { sqlFn } from '../db/index.js'
import Mock from 'mockjs'
import sercet from '../sercet.js'
import jwt from 'jsonwebtoken'
// 图片需要的模块
import fs from 'fs'
import path from 'path'
const router = new express.Router()

/* 配置路由 */

/* 登录接口： */
router.post('/login', (req, res) => {
  const { username, password } = req.body
  // console.log(username,password);
  // 请求数据库
  const sql = 'select * from ev_user where username=? and password=?'
  const arr = [username, password]
  sqlFn(sql, arr, result => {
    if (result.length > 0) {
      const token = jwt.sign({
        username: result[0].username,
        id: result[0].id
      }, sercet.key, {
        expiresIn: 20 * 1
      })
      res.send({
        status: 200,
        success: true,
        message: '登录成功',
        token: 'Bearer ' + token,
        data: token
      })
    } else {
      res.send({ status: 404, message: '信息错误' })
    }
  })
})

// 注册接口
router.post('/register', (req, res) => {
  const {
    username,
    password
  } = req.body
  const sql = 'insert in ev_users values(null,?,?)'
  const arr = [username, password]
  sqlFn(sql, arr, (result) => {
    if (result.attectedRows > 0) {
      res.send({
        msg: '注册成功'
      })
    } else {
      res.status(401).json({
        error: '用户名密码错误'
      })
    }
  })
})

// 商品列表
router.get('/pojectList', (req, res) => {
  const page = parseInt(req.query.pagesize || 1)
  const sqlLen = 'select * from sp_goods where goods_id'
  sqlFn(sqlLen, null, data => {
    const len = data.length
    const sql = 'select * from sp_goods order by goods_id desc limit 8 offset ' + (page - 1) * 8
    sqlFn(sql, null, result => {
      if (result.length > 0) {
        res.send({
          status: 200,
          data: result,
          pagesize: 8,
          total: len
        })
      } else {
        res.send({
          status: 500,
          msg: '暂无数据'
        })
      }
    })
  })
})

// 商品规格列表
router.get('/specificationsList', (req, res) => {
  const page = parseInt(req.query.pagesize || 1)
  const sqlLen = 'select * from sp_goods where goods_id'
  sqlFn(sqlLen, null, data => {
    const len = data.length
    const sql = 'select * from sp_attribute order by attr_id desc limit 8 offset ' + (page - 1) * 8
    sqlFn(sql, null, result => {
      if (result.length > 0) {
        res.send({
          status: 200,
          data: result,
          pagesize: 8,
          total: len
        })
      } else {
        res.send({
          status: 500,
          msg: '暂无数据'
        })
      }
    })
  })
})

// 类目选择接口，参数cid：id
router.get('/category', (req, res) => {
  const data = Mock.mock({
    status: 200,
    // 生成list字段：数组类型，内容是6个数据
    'result|4': [
      {
        'id|+1': 1, // id自增
        'name|+1': [// 一次获取一个数值，累次向下推
          '电视',
          '大屏',
          'OLED',
          '空调',
          '冷风'
        ],
        'cid|+1': 10001
      }
    ]
  })
  console.log(req.query)
  if (req.query.cid === 4) {
    res.send({
      status: 500
    })
  } else {
    res.send(data)
  }
})

router.post('/upload', (req, res) => {
  const oldName = req.files[0].path// 获取名字
  // 给新名字加上原来的后缀
  const newName = req.files[0].path + path.parse(req.files[0].originalname).ext
  fs.renameSync(oldName, newName)// 改图片的名字
  res.send({
    err: 0,
    url:
      'http://localhost:1314/upload/' +
      req.files[0].filename +
      path.parse(req.files[0].originalname).ext// 该图片的预览路径
  })
})

// 测试mockjs数据
router.get('/test', (req, res) => {
  // 使用mock生成数据
  const data = Mock.mock({
    info: '我是一个单纯的对象',
    status: 200,
    // 生成list字段：数组类型，内容是6个数据
    'list|6': [
      {
        'id|+1': 1, // id自增
        'flag|1-2': true,
        'city|1': { // 获取城市数据
          310000: '上海市',
          320000: '江苏省',
          330000: '浙江省',
          340000: '安徽省',
          110000: '北京市',
          130000: '河北省'
        },
        'arr|+1': [// 一次获取一个数值，累次向下推
          'AMD',
          'CMD',
          'UMD',
          'BMD',
          'aaa',
          'ccc'
        ],
        desc: '@cword(20,80)', // 随机汉字
        imgUrl: '@image'
      }
    ]
  })
  res.send(data)
})

// module.exports=router
export default router

3.app.js

import express from 'express'
import userRouter from './router/user.js'
// 图片需要的模块
import multer from 'multer'
const app = express()

/* post接受参数配置 配置解析表单数据的中间件 */
app.use(express.json()) // for parsing application/json
app.use