软件工程日报--app打包的实现

app打包的实现
app的打包方式有很多种,我这里直接使用云端打包的方式

打包介绍

云端打包不必自己创建证书,会更加方便,操作起来也更加容易.但是在一个项目第一次打包的时候需要申请云端证书,这个过程要等待很久.但是第一次打包以后后边再次打包就不必排队等待了.然后就可以得到apk文件,然后就可以安装到手机上

效果展示
这个就是在手机的效果

uni-forms
原生的form组件过于丑陋这里使用的uni*forms的插件来进行美化让页面更加美观

代码展示

<template>
  <view class="container">
    <uni-card :is-shadow="false" is-full>
      <text class="uni-h6">时间收集表单</text>
    </uni-card>

    <uni-section title="时间收集表单" type="line">
      <view class="example">
        <uni-forms ref="timeForm" :model="valiFormData" labelWidth="120px" @submit="onSubmit">
          
               
        
          <uni-section title="计划" type="line">
          <!-- 评估时间 -->
          <uni-forms-item label="评估时间（分钟）" prop="estimate" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.estimate"
              placeholder="请输入评估时间"
            />
          </uni-forms-item>
         </uni-section>
		 
		  <uni-section title="开发" type="line">
          <!-- 分析时间 -->
          <uni-forms-item label="分析时间（分钟）" prop="analysis" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.analysis"
              placeholder="请输入分析时间"
            />
          </uni-forms-item>
          
          <!-- 设计时间 -->
          <uni-forms-item label="设计时间（分钟）" prop="design" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.design"
              placeholder="请输入设计时间"
            />
          </uni-forms-item>
          
          <!-- 编码时间 -->
          <uni-forms-item label="编码时间（分钟）" prop="coding" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.coding"
              placeholder="请输入编码时间"
            />
          </uni-forms-item>
          
          <!-- 测试时间 -->
          <uni-forms-item label="测试时间（分钟）" prop="test" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.test"
              placeholder="请输入测试时间"
            />
          </uni-forms-item>
          
          <!-- 测量时间 -->
          <uni-forms-item label="计算时间（分钟）" prop="measurement" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.measurement"
              placeholder="请输入计算时间"
            />
          </uni-forms-item>
		  </uni-section>
           <uni-section title="报告" type="line">
          <!-- 内容时间 -->
          <uni-forms-item label="计算工作量（分钟）" prop="content" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.content"
              placeholder="请输入工作量"
            />
          </uni-forms-item>
          
          <!-- 事后总结时间 -->
          <uni-forms-item label="事后总结时间（分钟）" prop="postmortem" required>
            <uni-easyinput
              type="number"
              v-model.number="valiFormData.postmortem"
              placeholder="请输入事后总结时间"
            />
          </uni-forms-item>
          </uni-section>
          <!-- 提交按钮 -->
          <button formType="submit" type="primary" @click="onSubmit">提交</button>
        
        </uni-forms>
      </view>
    </uni-section>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

// 定义响应式表单数据
const valiFormData = reactive({
  username: '',
  date: '',
  estimate: 0,
  analysis: 0,
  design: 0,
  coding: 0,
  test: 0,
  measurement: 0,
  content: 0,
  postmortem: 0,
});

// 定义验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名' },
  ],
  date: [
    { required: true, message: '请选择日期' },
  ],
  estimate: [
    { required: true, message: '请输入评估时间' },
    { type: 'number', min: 0, message: '评估时间必须为非负数' },
  ],
  analysis: [
    { required: true, message: '请输入分析时间' },
    { type: 'number', min: 0, message: '分析时间必须为非负数' },
  ],
  design: [
    { required: true, message: '请输入设计时间' },
    { type: 'number', min: 0, message: '设计时间必须为非负数' },
  ],
  coding: [
    { required: true, message: '请输入编码时间' },
    { type: 'number', min: 0, message: '编码时间必须为非负数' },
  ],
  test: [
    { required: true, message: '请输入测试时间' },
    { type: 'number', min: 0, message: '测试时间必须为非负数' },
  ],
  measurement: [
    { required: true, message: '请输入测量时间' },
    { type: 'number', min: 0, message: '测量时间必须为非负数' },
  ],
  content: [
    { required: true, message: '请输入内容时间' },
    { type: 'number', min: 0, message: '内容时间必须为非负数' },
  ],
  postmortem: [
    { required: true, message: '请输入事后总结时间' },
    { type: 'number', min: 0, message: '事后总结时间必须为非负数' },
  ],
};

// 表单引用
const timeForm = ref(null);

// 提交表单处理
const onSubmit = () => {
  timeForm.value.validate().then(() => {
    // 表单验证通过，可以处理提交的数据
	 valiFormData.username=uni.getStorageSync('username');
	
	const localhost='172.18.48.225'
	uni.request({
		url:'http:///'+localhost+':7469/home/document/insert',
		data:valiFormData,
		method:'POST',
		header:{
			 'Content-Type': 'application/json' 
		},
		succsee:(res)=>{
			
		},
		
     })	
	
			uni.switchTab({
				url:'/pages/home/home'
			})
    uni.showToast({
      title: '提交成功',
      icon: 'success',
    });
  }).catch((errors) => {
    // 表单验证失败，输出错误信息
    console.error('表单验证失败:', errors);
    uni.showToast({
      title: '提交失败',
      icon: 'none',
    });
  });
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.uni-forms-item {
  margin-bottom: 20px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>