健身管理系统

最新推荐文章于 2024-06-25 16:53:00 发布

a别念m

最新推荐文章于 2024-06-25 16:53:00 发布

阅读量901

点赞数 18

文章标签： vue.js node.js

本文链接：https://blog.csdn.net/2301_82133855/article/details/139007808

版权

健身管理系统

本项目包括三个方面：前台预约展示，后台管理系统，MySQL数据库存储；

前台预约展示

前台方面使用html+css+vue2+axios;
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Untitled-1.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <header>
            <nav id="navbar">
                <div class="container">
                    <h1><a href="健身管理1.html">健身管理系统</a></h1>
                    <ul>
                       <li> <a href="健身管理1.html" class="current">首页</a></li>
                        <li><a href="健身管理2.html" target="_blank">关于我们</a></li>
                       <li> <a href="健身管理3.html" target="_blank">联系我们</a></li>
                    </ul>
                </div>
            </nav>
            <div id="showcase">
                <div class="container">
                    <div class="showcase-content">
                        <h1>欢迎来到 <span class="text-primary">健身管理</span></h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at quae obcaecati aliquam inventore, sequi rerum corporis ab natus voluptate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, ex.
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt, officia nemo quibusdam minus facilis nulla.
                        </p>
                        <a href="健身管理2.html" class="btn">关于我们</a>
                    </div>
                </div>
            </div>
        </header>
        <section id="home-info" class="bg-dark">
            <div class="info-img"></div>
            <div class="info-content">
                <h2><span class="text-primary">健身管理</span>介绍</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam reiciendis similique ab. Atque ad, molestias minima explicabo consectetur quia deserunt dolorum tenetur blanditiis maiores quidem totam quis eos enim necessitatibus.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum cupiditate iusto aut veniam dolor labore distinctio, in velit repellendus.
                </p>
                <a href="健身管理2.html" class="btn btn-light  ">阅读更多</a>
            </div>
        </section>
        <section id="features">
            <div class="box bg-light">
                <i class="fa fa-users fa-3x"></i>
                <h3>教练介绍</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, blanditiis.</p>
            </div>
            <div class="box bg-primary">
                <i class="fa fa-leanpub fa-3x"></i>
                <h3>课程详情</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, blanditiis.</p>
            </div>
            <div class="box bg-light">
                <i class="fa fa-graduation-cap fa-3x"></i>
                <h3><a href="健身管理2.html"></a>学员反馈</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, blanditiis.</p>
            </div>
        </section>
        <section id="coach">
            <div class="item" v-for="(item,index) in coachlist" :key="index">
                <img :src="item.picture" alt="" class="imgcoach">
                <p>{{item.name}}    {{item.sex}}     {{item.year}}</p>
                <p>{{item.phonenumber}}</p>
                <p>{{item.address}}</p>
                </div>
             </div>
        </section>
    
        <div class="clr"></div>
        <footer id="main-footer">
            <p>健身管理 &copy;2024,All Rights Resever.</p>
        </footer>
    
    
    </div>
   <script>
    const app = new Vue({
  el: '#app',
  data: {
    coachlist: []
  },
  mounted() {
    this.myAxios({
      method: 'GET',
      url: 'http://127.0.0.1:8881/hy/coach/getcoach',
      // 其他配置参数...
      then:(response)=>{
        // 处理响应数据
        this.coachlist = response.data;
        console.log(this.coachlist)
      }
    });
  },
  methods: {
    myAxios(config) {
      // 创建一个 XMLHttpRequest 对象
      var xhr = new XMLHttpRequest();

      // 设置请求方法和 URL
      xhr.open(config.method || 'GET', config.url);

      // 设置请求头部
      xhr.setRequestHeader('Accept', config.headers && config.headers.Accept ? config.headers.Accept : '*/*');
      xhr.setRequestHeader('Content-Type', config.headers && config.headers['Content-Type'] ? config.headers['Content-Type'] : 'application/x-www-form-urlencoded');

      // 处理请求参数
      var params = '';
      if (config.params) {
        params = Object.keys(config.params)
          .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(config.params[key]))
          .join('&');
      }

      // 发送请求
      xhr.send(params);

      // 处理响应
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // 请求成功，处理结果
            var result = JSON.parse(xhr.responseText);
            // 执行传入的回调函数
            config.then(result);
          } else {
            // 请求失败，处理错误
            console.error('Request failed with status', xhr.status);
          }
        }
      };
    }
  }
});

   </script>
</body>
</html>

后台管理系统

使用vue3+element-plus+axios+node.js;

后端方面，使用node连接数据库，写接口。使用postman测试；
在这里插入图片描述

在这里插入图片描述

const express=require('express')
const app=express()

//解决跨域问题
const cors=require('cors')
app.use(cors())

//解析xwww-url
app.use(express.urlencoded({extended:false}))


const userRouter=require('./router/user')
app.use('/hy/user',userRouter)

const vipRouter=require('./router/vip')
app.use('/hy/vip',vipRouter)

const classRouter=require('./router/class')
app.use('/hy/class',classRouter)

const updateRouter=require('./router/goods')
app.use('/hy/goods',updateRouter)

// const informRouter=require('./router/inform')
// app.use('hy/inform',informRouter)

const repairRouter=require('./router/repair')
app.use('/hy/repair',repairRouter)

const coachRouter=require('./router/coach')
app.use('/hy/coach',coachRouter)

const newsRouter=require('./router/news')
app.use('/hy/news',newsRouter)

app.listen(8881,()=>{
    console.log('api server running at http://127.0.0.1:8881')
})

const express=require('express')
const router=express.Router()

const class_handler=require('../router_handler/class')


router.get('/getclassall',class_handler.getclassAll)

router.get('/deleteclass/:class_id',class_handler.deleteByclassId)

router.post('/updateclass',class_handler.updateByclassid)

router.post('/addclass',class_handler.addClass)

module.exports=router

const db=require('../db/index')

//获取
exports.getclassAll=(req,res)=>{
    const sql=`select * from hy_class where is_delete=0`

    db.query(sql,(err,results)=>{
        if(err) return res.send({status:1,message:err.message})
        res.send({
         status:0,
         message:'获取数据成功',
         data:results
     })
    })
}

//删除
exports.deleteByclassId=(req,res)=>{
    const class_id=req.params.class_id
 //    console.log(roomid)
    if(!class_id) return res.send({status:1,message:'未提供课程id'})
    const sql=`update hy_class set  is_delete=1  where class_id=?`
    db.query(sql,class_id,(err,results)=>{
     if(err) return res.send({status:1,message:err.message})
     if(results.affectedRows!==1) return res.send('删除课程失败')
     res.send({
     status:0,
     message:'删除课程成功!'
    })
    })
 }

 exports.addClass = (req, res) => {
    const selectSql = `SELECT * FROM hy_class WHERE class_id = ?`;
    db.query(selectSql, [req.body.class_id], (err, results) => {
      if (err) {
        return res.send({ status: 1, message: err.message });
      }
  
      if (results.length > 0) {
        return res.send({ status: 1, message: 'class_id被占用' });
      }
      const insertSql = `INSERT INTO hy_class SET ?`;
      db.query(insertSql, req.body, (err, results) => {
        if (err) {
          return res.send({ status: 1, message: err.message });
        }
  
        if (results.affectedRows !== 1) {
          return res.send('添加预约失败');
        }
  
        res.send({
          status: 0,
          message: '添加预约成功',
        });
      });
    });
};

//更新
exports.updateByclassid=(req,res)=>{
     //定义查重的sql语句
     const sql=`select * from hy_class where class_id<>? `

     db.query(sql,[req.body.class_id],(err,results)=>{
         if(err) return res.send({status:1,message:err.message})
         
         //判断name
         if(results.length===1) res.send({status:1,message:'class_id被占用'})
        
         const sql=`update hy_class set ? where class_id=?`
         db.query(sql,[req.body,req.body.class_id],(err,results)=>{
             if(err) return res.send({status:1,message:err.message})
 
             if(results.affectedRows!==1) return res.send({status:1,message:'更新课程失败!'})

             res.send({
                status:0,
                message:'更新课程信息成功!'
               })
         })
 
     })
}

<script setup>
import { computed, onMounted, ref  } from 'vue'
import { ElMessage } from 'element-plus'
import {getcoachAPI,deletecoachAPI} from '../../apis/coach'

const search = ref('');

const tableData = ref([]);

const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.coach_id.toString().includes(search.value.trim())
  )
);

const getAll=async()=>{
   const res = await getcoachAPI();
  tableData.value = res.data.data;
  console.log(res.data.data)
}
onMounted(getAll)

const handleDelete =async (row) => {
  const res=await deletecoachAPI(row.coach_id)
   if(res.data.status===0){
    ElMessage({ type: 'success', message:res.data.message })
    getAll()
  }else{
    ElMessage.error(res.data.message)
  }
  console.log(res.data)
};

</script>


<template id="user">
  
  <div class="top">
    <h3>健身教练人员管理</h3>
  </div>

  <el-table :data="filterTableData" style="width: 95%;margin:5px; height:600px">
    <el-table-column label="教练工号" prop="coach_id" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="年龄" prop="year" />
    <el-table-column label="性别" prop="sex" />
    <el-table-column label="照片" width="180">
        <template #default="{ row }">
            <div style="display: flex; align-items: center">
                <el-image :src="row.picture" style="width: 100px; height: 100px;"></el-image>
            </div>
        </template>
    </el-table-column>
    <el-table-column label="电话号码" prop="phonenumber" />
    <el-table-column label="地址" prop="address" />
    <el-table-column label="入职时间" prop="inter_time" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>
<style scoped>
#user{
   margin: 10px;
}
.top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

MySQL数据库存储

在这里插入图片描述

a别念m

关注

18
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
健身管理系统

健身管理系统本项目包括三个方面：前台预约展示，后台管理系统，MySQL数据库存储；前台预约展示前台方面使用html+css+vue2+axios;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫