vue3 小案例。数据驱动 视图。 多状态 页面。

状态1  没有key

状态2 输入key待确认

状态3 有key了。

状态4 修改key

状态5 修改确认key

状态3 

其实一共就5个状态。

每个状态对应的视图不一样。

<script setup>
import requestUtil from "@/util/request";
import  store from '@/store'
import  {ref, computed  , onMounted,nextTick , reactive,onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
import  {ElMessage} from 'element-plus'


const state = ref("unbind")  //unbind    awaitBind  binded  changing  awaitChange
const now = ref("")
const pre = ref("456")
const form = ref()


const strageObj  = {

  unbind: {
    firstLabel: "输入key值",
    firstType: "input",
    buttonText: "确认",
    buttonFn: () => {
      state.value = "awaitBind"
    }
  }
,
  awaitBind: {
    secondLabel: "待确认key值:",
    secondType: "span",
    buttonText: "我已确认无误，使用该kay",
    buttonFn: () => {
      saveKey();
    }
  }
  ,
  binded: {
    firstLabel: "你的key值",
    firstType: "span",
    buttonText: "修改",
    buttonFn: () => {
      state.value = "changing"
    }
  }
  ,
  changing: {
    firstLabel: "当前key值",
    firstType: "span",
    secondLabel: "要修改为",
    secondType: "input",
    buttonText: "确认修改",
    buttonFn: () => {
      if(!now.value){
        alert("输入key");
        return;
      }
      state.value = "awaitChange"
    }
  }
  ,
  awaitChange: {
    firstLabel: "当前key值",
    firstType: "span",
    secondLabel: "要修改为",
    secondType: "span",
    buttonText: "确认使用新key",
    buttonFn: () => {
      saveKey();
    }
  }
}

const stateobj = computed(()=>{
  return strageObj[state.value]
})

const queryForm=ref({
  query:'',
  pageNum:1,
  pageSize:100
})


const getKey =async()=>{
  console.log(queryForm.value);
  const res=await requestUtil.get("api/key/get");
  console.log(res.data.key);
  if(res.data.key){
    //有key
    state.value = "binded";
    pre.value = res.data.key;
  }else{
    //没有key  不用管 默认就行了
  }
}

const saveKey = async ()=>{

  const res=await requestUtil.post("api/key/save",{key:now.value} );
  now.value=""
  getKey();
}

getKey();

</script>

<style scoped>

</style>
<template>

  <div style="padding: 15px; max-width: 400px;  ">
    <el-form :model="form" label-width="auto"  >
      <el-form-item v-if="stateobj.firstLabel&&stateobj.firstType"  :label="stateobj.firstLabel">
        <el-input v-model="now"  v-if="stateobj.firstType==='input'"  />
        <span v-if="stateobj.firstType==='span'">{{pre}}</span>
      </el-form-item>
      <el-form-item v-if="stateobj.secondLabel&&stateobj.secondType"  :label="stateobj.secondLabel">
        <el-input  v-model="now"    v-if="stateobj.secondType==='input'"  />
        <span v-if="stateobj.secondType==='span'">{{now}}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="()=>{
          stateobj.buttonFn()
        }">{{stateobj.buttonText}}</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

package java456.com.controller_demo4;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import java456.com.entity.BigType;
import java456.com.entity.PageBean;
import java456.com.entity.R;
import java456.com.entity_demo1.People;
import java456.com.entity_demo1.Project;
import java456.com.service.PeopleService;
import java456.com.service.ProjectService;
import java456.com.util.StringUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.ServletContext;
import java.util.*;

@RestController
@RequestMapping("/api/key")
public class KeytController {

    @Autowired
    private ServletContext servletContext;

    /**
     * /api/key/get
     * 添加或者修改
     * @return
     */
    @RequestMapping("/get")
    public R get(){
        Map<String, Object> resultMap = new HashMap<>();
        String key = (String) servletContext.getAttribute("key");
        resultMap.put("key",key);
        //servletContext.setAttribute("config", config);
        return R.ok(resultMap);
    }

    @PostMapping("/save")
    public R save(@RequestBody Map<String, String> params ){
        String key= params.get("key");
        servletContext.setAttribute("key", key);
        return R.ok();
    }


}