個(gè)人介紹

hello hello~ ，這里是 code袁~???? ，歡迎大家點(diǎn)贊????關(guān)注????收藏??????

??作者簡介：一名喜歡分享和記錄學(xué)習(xí)的在校大學(xué)生
??個(gè)人主頁：code袁
?? 個(gè)人QQ：2647996100
?? 個(gè)人wechat：code8896

專欄導(dǎo)航

code袁系列專欄導(dǎo)航
1.畢業(yè)設(shè)計(jì)與課程設(shè)計(jì)：本專欄分享一些畢業(yè)設(shè)計(jì)的源碼以及項(xiàng)目成果。??????
2.微信小程序開發(fā)：本專欄從基礎(chǔ)到入門的一系開發(fā)流程，并且分享了自己在開發(fā)中遇到的一系列問題。??????
3.vue開發(fā)系列全程線路：本專欄分享自己的vue的學(xué)習(xí)歷程。

非常期待和您一起在這個(gè)小小的互聯(lián)網(wǎng)世界里共同探索、學(xué)習(xí)和成長。?????? ?? 歡迎訂閱本專欄 ???

視頻演示

1、前言介紹

伴隨著信息技術(shù)與互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，校園也進(jìn)到了一個(gè)新的信息化時(shí)代，傳統(tǒng)管理技術(shù)性沒法高效率、容易地管理體育場預(yù)約信息內(nèi)容。為了實(shí)現(xiàn)時(shí)代的發(fā)展必須，提升實(shí)驗(yàn)室預(yù)約高效率，各種各樣實(shí)驗(yàn)室預(yù)約體系應(yīng)時(shí)而生，實(shí)驗(yàn)室預(yù)約管理系統(tǒng)的實(shí)現(xiàn)是信息內(nèi)容時(shí)代浪潮時(shí)代的產(chǎn)物之一。一切系統(tǒng)都要遵循系統(tǒng)設(shè)計(jì)的基本流程。它還需要通過市場調(diào)查、需求分析報(bào)告、匯總設(shè)計(jì)、詳盡設(shè)計(jì)以及測試，根據(jù)Node語言表達(dá)設(shè)計(jì)，完成實(shí)驗(yàn)室預(yù)約管理系統(tǒng)。該系統(tǒng)根據(jù)B/S，即所謂的電腦瀏覽器/網(wǎng)絡(luò)服務(wù)器方式，運(yùn)用Node技術(shù)，前端采用uniapp微信小程序等技術(shù)實(shí)現(xiàn)，選用MySQL作為數(shù)據(jù)庫。
本實(shí)驗(yàn)室預(yù)約管理系統(tǒng)采用前后端分離的方式來實(shí)現(xiàn)，前端Vue、Element組件編寫前端代碼為主、其特點(diǎn)可以實(shí)時(shí)渲染加載數(shù)據(jù)，不用像以前傳統(tǒng)的頁面，寫完要重新啟動(dòng)項(xiàng)目才能加載數(shù)據(jù)。系統(tǒng)還采用的File文件組件上傳和預(yù)覽圖片等，以及前端利用了第三方富文本編輯器框架技術(shù)實(shí)現(xiàn)了實(shí)驗(yàn)室詳情介紹和系統(tǒng)公告等模塊。這樣比傳統(tǒng)文本框只能填寫文字又來更好更直觀的頁面呈現(xiàn)方式。不僅可以上傳文字，還可以直接復(fù)制網(wǎng)頁圖片文字等。實(shí)現(xiàn)動(dòng)態(tài)渲染頁面樣式和內(nèi)容等。

2、開發(fā)技術(shù)簡介

本節(jié)介紹場館預(yù)約平臺(tái)用到的一些技術(shù)和開發(fā)環(huán)境的簡介，用到開發(fā)技術(shù)主要包括：
（1）前端用到Element UI組件庫、Vue框架和微信小程序
（2）后端用到Node
（3）包管理器Npm
（4）中間件Express
（5）數(shù)據(jù)庫MySQL
系統(tǒng)開發(fā)環(huán)境主要是：前端開發(fā)工具Vscode，Hbuilder、操作系統(tǒng)Win10、CPU i5-9300H、內(nèi)存8G。

3、系統(tǒng)功能圖

實(shí)驗(yàn)室預(yù)約系統(tǒng)主要由客戶端（微信小程序和安卓手機(jī)App）和Web管理端（基于Web服務(wù)器Apache Tomcat，MySQL數(shù)據(jù)庫）這兩個(gè)子系統(tǒng)組成。這兩個(gè)子系統(tǒng)之間通過Htpp的request請(qǐng)求和response響應(yīng)以json形式的數(shù)據(jù)交互，共同實(shí)現(xiàn)了實(shí)驗(yàn)室預(yù)約平臺(tái)的功能。
客戶服務(wù)端主要包括三大主要的功能模塊：登錄、預(yù)約和掃碼簽到模塊。Web管理端主要包括三大主要的功能模塊：用戶、動(dòng)態(tài)和預(yù)約模塊。這六大模塊還有相應(yīng)的子模塊，通過對(duì)子模塊的實(shí)現(xiàn)來實(shí)現(xiàn)整個(gè)客戶端的功能。如圖4-3所示。

4、功能實(shí)現(xiàn)

系統(tǒng)登錄功能是程序必不可少的功能，在登錄頁面必填的數(shù)據(jù)有兩項(xiàng)，一項(xiàng)就是賬號(hào)，另一項(xiàng)數(shù)據(jù)就是密碼，當(dāng)管理員正確填寫并提交這二者數(shù)據(jù)之后，管理員就可以進(jìn)入系統(tǒng)后臺(tái)功能操作區(qū)。下圖就是管理員登錄頁面。

該界面實(shí)現(xiàn)對(duì)實(shí)驗(yàn)室的添加、刪除、修改等一系列功能

該界面實(shí)現(xiàn)對(duì)實(shí)驗(yàn)室的動(dòng)態(tài)的添加、刪除、修改等一系列操作

實(shí)驗(yàn)室預(yù)約的流程：當(dāng)用戶選擇自己需要的預(yù)約的項(xiàng)目后，則需要用戶選擇合法的日期并且本系統(tǒng)的合法日期為當(dāng)前日期的下一天的六天合法日期。當(dāng)用戶進(jìn)入預(yù)約詳情頁面時(shí)用戶可以選擇預(yù)約的時(shí)間和地點(diǎn)。預(yù)約按鈕點(diǎn)擊后會(huì)判斷用戶是否登錄以及是否重復(fù)預(yù)約等。若預(yù)約信息合法則同request的庫生成對(duì)應(yīng)訂單的二維碼并將預(yù)約信息存入到數(shù)據(jù)庫中

5、庫表設(shè)計(jì)

程序設(shè)計(jì)是離不開對(duì)應(yīng)數(shù)據(jù)庫的設(shè)計(jì)操作的，這樣的做法就是減少數(shù)據(jù)對(duì)程序的依賴性，所以數(shù)據(jù)庫的設(shè)計(jì)也是需要花費(fèi)大量的日常時(shí)間來進(jìn)行設(shè)計(jì)的，在設(shè)計(jì)中對(duì)程序開發(fā)需要存儲(chǔ)的數(shù)據(jù)信息進(jìn)行實(shí)體劃分，先確認(rèn)實(shí)體，然后設(shè)計(jì)實(shí)體的屬性等操作，這種設(shè)計(jì)就是數(shù)據(jù)庫設(shè)計(jì)里面不能少的必須有的E-R模型設(shè)計(jì)。為了降低程序設(shè)計(jì)的對(duì)應(yīng)的數(shù)據(jù)庫設(shè)計(jì)難度，開發(fā)人員也可以使用相應(yīng)的工具來進(jìn)行E-R模型設(shè)計(jì)，現(xiàn)在市面上設(shè)計(jì)E-R模型的工具有PowerDesigner建模工具，Navicat制作工具，還有微軟的Visio繪圖工具。為了簡便起見，本程序在設(shè)計(jì)E-R模型的時(shí)候，就選用了微軟的Visio這款功能強(qiáng)大，操作便利的繪圖工具。

1.預(yù)約實(shí)體及其附屬圖

2.管理員實(shí)體及其附屬圖

3.實(shí)驗(yàn)室實(shí)體及其附屬圖

6、性能測試

單元測試是軟件開發(fā)中的一種測試方法，用于測試代碼中的最小可測試單元（通常是函數(shù)或方法），以驗(yàn)證其行為是否符合預(yù)期[15]。單元測試可以檢測代碼中的缺陷和錯(cuò)誤，及時(shí)發(fā)現(xiàn)和修復(fù)代碼問題，提高代碼的質(zhì)量和穩(wěn)定性，也可以幫助開發(fā)人員快速定位問題，并提供反饋和調(diào)試信息，提高開發(fā)效率和效果?？傊?，單元測試是軟件開發(fā)中非常重要的一環(huán)，可以幫助開發(fā)人員提高代碼質(zhì)量和效率，提高軟件產(chǎn)品的質(zhì)量和穩(wěn)定性。

1.from base.data_read import ReadData
2.from base.response import method_post
3.import pytest

4.# ====測試數(shù)據(jù)讀取====
5.def data_read():
6.    # 1. 將yaml文件讀取
7.    data_dict = ReadData('data.yaml').read_data()
8.    # 2. 從字典中取數(shù)據(jù)  url  accounts
9.    url = data_dict['test_user_login']['url']
10.    accounts = data_dict['test_user_login']['accounts']
11.    # 3. 返回?cái)?shù)據(jù) 供測試用例調(diào)用
12.    return url, accounts
13.
14.
15.class TestLogin():
16.    @pytest.mark.parametrize('url', [data_read()[0]])
17.    @pytest.mark.parametrize('accounts', data_read()[1])
18.    def test_login(self, url, accounts):
19.        # 1. 注意這里的account是列表格式
20.        print('\n>>>', type(accounts))
21.        print(accounts)
22.        # 2. 發(fā)請(qǐng)求
23.        response = method_post(url, json=accounts)
24.        # 3. 判斷是否請(qǐng)求成功
25.        assert response.status_code == 200
26.        # 4. 根據(jù)返回的code判斷是否登錄成功
27.        code = response.json().get('code')
28.        print(response.json())
29.        assert code == 0, '登錄失敗!'
30.# =============測試結(jié)果==============
31.========= 1 failed, 1 passed in 11.81s ==========

7、關(guān)鍵代碼

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
const {login} =require('../../api/login')
Page({
  data: {
    phone: '',
    password: '',
    clientHeight:'',
    array: ['學(xué)生', '教師', ],
    index: 0,
  },
  onLoad(){
    var that=this
    wx.getSystemInfo({ 
      success: function (res) { 
        console.log(res.windowHeight)
          that.setData({ 
              clientHeight:res.windowHeight
        }); 
      } 
    }) 
  },
  bindType: function (e) {
    this.setData({
      index: e.detail.value
});
  },
  //協(xié)議
  goxieyi(){
   wx.navigateTo({
     url: '/pages/oppoint/oppoint',
   })
  },
  //獲取輸入款內(nèi)容
  phone(e){
   this.setData({
     phone:e.detail.value
   })
  },
  password(e){
    this.setData({
      password:e.detail.value
    })
  },
  //登錄事件
  goadmin(){
    let flag = false  //表示賬戶是否存在,false為初始值
    if(this.data.phone=='')
    {
      wx.showToast({
        icon:'none',
        title: '賬號(hào)不能為空',
      })
    }else if(this.data.password==''){
      wx.showToast({
        icon:'none',
        title: '密碼不能為空',
      })
    }else{
      let data={
        phone:this.data.phone,
        password:this.data.password,
        isadmin:this.data.index
      }
     login(data).then(res=>{
       console.log('55',res.data[0])
       wx.setStorageSync('userInfo', res.data[0])
       //添加登錄狀態(tài)
       wx.setStorageSync('statusLogin', true)
       wx.showToast({
        title: res.msg,
        icon:'none'
      })
       if(res.msg=="登錄成功"){
        wx.switchTab({
            url: '../my/my',
          })
       }
     })
    }
  },
  register(){
    wx.navigateTo({
      url: './register',
    })
  }
})
 

<template>
  <div class="messge">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
      <!-- 彈窗信息 -->
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
        :before-close="handleClose"
        label-width="80px"
      >
        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name" placeholder="實(shí)驗(yàn)室名稱"></el-input>
        </el-form-item>
        <el-form-item label="開放時(shí)間" prop="openTime">
          <el-input
            v-model="form.openTime"
            placeholder="實(shí)驗(yàn)室開發(fā)時(shí)間"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="實(shí)驗(yàn)室地址"></el-input>
        </el-form-item>
        <el-form-item label="簡介" prop="desc">
          <el-input v-model="form.desc" placeholder="實(shí)驗(yàn)室簡介"></el-input>
        </el-form-item>
        <el-form-item label="負(fù)責(zé)人" prop="id">
          <el-select v-model="form.adminId" placeholder="請(qǐng)選擇">
            <span></span>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="實(shí)驗(yàn)室logo">
          <commonUpload></commonUpload>
        </el-form-item>
      </el-form>
      <!-- 表單提交 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="submit">確 定</el-button>
      </span>
    </el-dialog>

    <div class="manage-hander">
      <!-- 添加按鈕 -->
      <el-button type="primary" @click="handleAdd">+ 新增</el-button>
    </div>
    <!-- 表格 -->
    <div class="common-table">
      <el-table :data="tableData" stripe height="90%" style="width: 100%">
        <el-table-column prop="name" label="實(shí)驗(yàn)室名稱"> </el-table-column>
        <el-table-column prop="openTime" label="實(shí)驗(yàn)室開放時(shí)間">
        </el-table-column>
        <el-table-column prop="address" label="實(shí)驗(yàn)室地址"> </el-table-column>
        <el-table-column prop="logo" label="logo">
          <template slot-scope="scope">
            <el-image
              style="width: 150px; height: 100px"
              :src="scope.row.logo"
              :preview-src-list="[scope.row.logo]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-form-item label="簡介" prop="desc">
          <el-input v-model="form.desc" placeholder="實(shí)驗(yàn)室簡介"></el-input>
        </el-form-item>
        <el-table-column label="負(fù)責(zé)人" prop="adminId">
          <template slot-scope="scope">
            <span v-for="item in options" :key="item.id">
              <span v-if="scope.row.adminId === item.id">
                {{ item.username }}
              </span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="addr" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary "
              size="mini"
              @click="handleEdit(scope.row)"
              >編輯</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >刪除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分頁組件 -->
      <el-pagination
        class="page"
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import commonUpload from "@/components/commonUpload.vue";
import { getPlace, addPlace, deletePlace, updatePlace } from "@/api/index";
import { allAdmin } from "@/api/reservation";
export default {
  name: "User",
  data() {
    return {
      dialogVisible: false,
      // 表單字段
      form: {
        name: "",
        openTime: "",
        address: "",
        logo: "",
        adminId: "",
        desc: "",
      },
      // 表單校驗(yàn)
      rules: {
        name: [{ required: true, message: "請(qǐng)輸入實(shí)驗(yàn)室名稱" }],
        openTime: [{ required: true, message: "請(qǐng)輸入實(shí)驗(yàn)室開發(fā)時(shí)間" }],
        address: [{ required: true, message: "請(qǐng)輸入實(shí)驗(yàn)室地址" }],
        desc: [{ required: true, message: "請(qǐng)輸入實(shí)驗(yàn)室簡介" }],
      },
      options: [
        {
          id: "",
          username: "",
        },
      ],
      // 表單數(shù)據(jù)
      tableData: [],
      total: 0, //頁面的總條數(shù)
      modelType: 0, //0表示是新增的彈窗 ，1表示的是編輯
      userFrom: {
        username: "",
      },
    };
  },
  components: {
    commonUpload,
  },
  methods: {
    // 提交
    submit() {
      if (this.modelType == 0) {
        this.$refs.form.validate((value) => {
          // 校驗(yàn)為真
          if (value) {
            console.log("value", this.form);
            this.form.logo = this.$store.state.upload.imgUrl;
            addPlace(this.form).then((res) => {
              // console.log(res);
              this.$message.success("添加成功");
            });
            this.$refs.form.resetFields();
            this.dialogVisible = false;
            this.getList();
          }
        });
      } else {
        this.$refs.form.validate((value) => {
          // 校驗(yàn)為真
          if (value) {
            console.log("value", this.form);
            updatePlace(this.form).then((res) => {
              // console.log(res);
              this.$message.success("修改成功");
            });
            this.$refs.form.resetFields();
            this.dialogVisible = false;
            this.getList();
          }
        });
      }
    },
    handle(e) {
      console.log();
      // let id = res.id;
      this.$confirm("要修改用戶權(quán)限嗎？", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        privalUser(e).then((res1) => {
          console.log(res1.data.data);
          this.$message.success(res1.data.data.msg);
        });
      });
    },
    // 關(guān)閉彈窗
    handleClose() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    // 點(diǎn)擊取消按鈕
    cancle() {
      this.handleClose();
    },
    // 表單的編輯
    handleEdit(res) {
      this.modelType = 1;
      this.dialogVisible = true;
      // 注意到對(duì)當(dāng)前的數(shù)據(jù)進(jìn)行深度拷貝
      this.form = JSON.parse(JSON.stringify(res));
    },
    //表單的刪除
    handleDelete(res) {
      // let id = res.id;
      this.$confirm("此操作將永久刪除該文件, 是否繼續(xù)?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 調(diào)用刪除接口
          var that = this;
          deletePlace(res).then((res) => {
            that.$message({
              type: "success",
              message: res.data.data.msg,
            });
          });
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消刪除",
          });
        });
    },
    // 新增數(shù)
    handleAdd() {
      (this.modelType = 0), (this.dialogVisible = true);
      this.form = {};
    },
    getOpstions() {
      allAdmin().then((res) => {
        this.options = res.data.data.data;
      });
    },
    // 查詢數(shù)據(jù)
    handleSearch() {
      searchUser(this.userFrom).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data.data;
        // this.getList();
      });
    },
    //分頁
    handlePage(val) {
      console.log(val);
    },
    // 獲取數(shù)據(jù)
    getList() {
      // 采用封裝的api接口方法
      getPlace().then((res) => {
        console.log("11", res.data.data.data);
        this.tableData = res.data.data.data;
      });
    },
  },
  // 掛載
  mounted() {
    this.getList();
    this.getOpstions();
  },
};
</script>

<style lang="less">
.messge {
  height: 90%;
  .common-table {
    position: relative;
    height: calc(100% - 62px);
    .page {
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
  .manage-hander {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.el-table .cell {
  img {
    height: 50rpx;
  }
}
</style>

8、源碼獲取

大家點(diǎn)贊、收藏、關(guān)注、評(píng)論啦 、查看????獲取聯(lián)系方式????

??寫在最后

??伙伴們，如果你已經(jīng)看到了這里，覺得這篇文章有幫助到你的話不妨點(diǎn)贊??或 Star ?支持一下哦！手動(dòng)碼字，如有錯(cuò)誤，歡迎在評(píng)論區(qū)指正??~

你的支持就是我更新的最大動(dòng)力??~
文章來源地址http://www.zghlxwxcb.cn/news/detail-851243.html

到了這里，關(guān)于基于微信小程序的實(shí)驗(yàn)室預(yù)約系統(tǒng)的設(shè)計(jì)與開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！