工作项目中，对创建课程的前端设计

一、功能的设计

此次博客是针对教师教务端的创建课程页面设计。从工作台按钮通过点击事件跳转来到创建课程页面。

创建课程，需要输入课程名称，课程类型，课程价格，课程老师，授课日期，课程的开始时间，课程的结束时间。（有条件的我到时候更新添加一个自动计算区间课时）

二、代码

废话不多说，我直接上一个前后端已经写好的，你们把自己的后端接口补上去就好。没有写后端的同学，你去找一下怎么插入假数据哈。

<template>
  <view class="container">
      <!-- 创建课程 -->
    <view class="form-group">
      <text>课程名称：</text>
      <input v-model="courseName" />
    </view>
    <view class="form-group">
      <text>课程类型：</text>
      <input v-model="courseType" />
    </view>
    <view class="form-group">
      <text>课程价格：</text>
      <input v-model="coursePrice" />
    </view>
    <view class="form-group">
      <text>课程老师：</text>
      <input v-model="courseTeacher" />
    </view>
    <view class="form-group">
      <text>授课日期：</text>
      <input v-model="courseWeekday" />
    </view>
    <view class="form-group">
      <text>课程开始时间：</text>
      <input v-model="courseTimeStart" />
    </view>
    <view class="form-group">
      <text>课程结束时间：</text>
      <input v-model="courseTimeEnd" />
    </view>
    
    <view class="btn-group">
      <button @click="createCourse">创建课程</button>
    </view>
  </view>
</template>

<script>
// 引入axios
import axios from "axios";

export default {
  data() {
    return {
      courseName: "",
      courseType: "",
      coursePrice: "",
      courseTeacher: "",
      courseTimeStart: "",
      courseTimeEnd: "",
      courseWeekDay: "",
    };
  },
  methods: {
async createCourse() {
  const apiUrl = "";//补上你们的后端接口
  const data = {
    courseName: this.courseName,
    courseType: this.courseType,
    coursePrice: this.coursePrice,
    courseTeacher: this.courseTeacher,
    courseTimeStart:this.courseTimeStart,
    courseTimeEnd:this.courseTimeEnd,
    courseWeekDay:this.courseWeekDay,
  };

  console.log(data); // 在请求发送前打印出要发送的数据

  try {
    const response = await axios.post(apiUrl, data);
    console.log(response.data);
    uni.showToast({
      title: "课程创建成功",
      icon: "success",
    });
  } catch (error) {
    console.error(error);
    uni.showToast({
      title: "课程创建失败",
      icon: "none",
    });
  }
},

  },
};
</script>

<style>
/* 样式根据您的需求进行调整 */
.container {
  padding: 20rpx;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

input {
  flex: 1;
  height: 50rpx;
  border: 1px solid #ccc;
  padding: 10rpx;
}

button {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4rpx;
  padding: 10rpx 20rpx;
}
</style>

三、预览图

 

 

四、总结

此次开发，和后端人员沟通接口的返回值时，因为对于重要返回数据无法设空测试的时候，一个一个加进去很痛苦，一定要和设计后端的人员多多沟通，不然写好了出问题，测试找报错会抓爆头的。急着赶工期，没有什么样式，非常的粗糙，请各位同学可以自定义样式设计精益求精。有什么问题，还请多多指教。