商店后台管理项目

一，是整个项目的思维导图

二，总结

mcv是啥

m:modules模型   数据库PHP，mysql

c:ctrl 控制   后端

v:views 页面    前端vue

他们之间的关系总结如下：

从数据库拿到数据

存到电脑的内存中

后端将数据进行整合打包

前端收到展示到页面上

二，生命周期

<template>
  <h1>vue3的生命周期</h1>
  <div id="dom">{{ msg }}--{{ num }}</div>
  <!-- v-on:事件名="事件方法"绑定事件 简写@符号-->
  <!-- 事件及方法直接声明在setup内 -->
  <button v-on:click="handleClick">click me</button><hr/>

  <!-- v-model：双向数据绑定 -->
  <!-- input:输入事件有
        blur：失去焦点
        focus：获取焦点
        change：内容更改
   -->


  <input type="text" placeholder="请输入姓名" v-model="userName"> <br/>
  <input type="text" placeholder="请输入电话" v-model="userphone" 
  @focus="handleFocus"
  @blur="handleBlur"
  @change="handleChane"
  @input="handleInput"
  > <br/>

  <textarea placeholder="请输入您的建议" id="" cols="30" rows="10" v-model="userInput"></textarea>
  <p>{{userName}}---{{userInput}}</p>

  <button @click="submit" >提交</button>


</template>

<script>
import {
  reactive,toRefs,onBeforeMount,onMounted,onBeforeUpdate,
  onUpdated,
} from "vue";
export default {
  // name: "about",
  setup() {
    const data = reactive({
      msg: "你好",
      msg1: "您好1",
      num: 0,
      userName:"",
      userInput:"",
      userphone:"",
      
    });
    // 数据渲染前
    onBeforeMount(() => {
      console.log("onBeforeUnmount", document.querySelector("#dom"));
    });
    // 数据渲染后
    onMounted(() => {
      console.log("onBeforeUnmount", document.querySelector("#dom"));
      setTimeout(() => {
        // data.msg = "hello";
        // data.msg1="hello"这里只能有一个
      }, 2000);
    });
    // 数据更新前
    onBeforeUpdate(() => {
      console.log("onBeforeUnmount", document.querySelector("#dom"));
    });
    // 数据更新后
    onUpdated(() => {
      console.log("onBeforeUnmount", document.querySelector("#dom"));
      // data.num + =1;触发死循环，尽量不要在这里写
    });
    // 事件及方法
    const handleClick = () => {
      alert("您好")
    }

    const submit =() => {
      alert('${data.userName} 的建议是 ${data.userInput}')
    }
    const handleFocus =() => {
      console.log("获取焦点");
    }
    const handleBlur =() => {
      console.log("失去焦点");
      if(!data.userphone){
        alert("手机号必填")
      }
    }
    const handleInput =() => {
    //正则验证手机号
    if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(data.userphone)){
      console.log("不符合手机号");
    }
    }
    return {
      ...toRefs(data),
      handleClick,
      submit,
      handleBlur,
      handleFocus,
      handleInput
    };

  },
};
</script>

 

 

 

三，路由

 

 

在vuex的store中的index.js文件代码：

// import { reject } from 'core-js/fn/promise'
import { createStore } from 'vuex'
import number from "./state/num.state.js"

export default createStore({
  //全局的状态初始值
  state: {
    count: 1,
  },
  //判断，类似于计算state的计算属性，获取state的对应值
  getters: {
    countStatus(state){
      return state.count>=1
    }

  },
  //更新状态的方法-更新state的唯一方法，commit mutatios
  mutations: {
    setCount(state,num){
      state.count=num+1
    }
  },
  //可以异步操作，可以返回promise，更改数据还是回传递到mutations去更改
  actions: {
    setCountPromise(context,num){
      return new Promise((resolve,reject)=>{
        if(num>100){
          reject("值不能大于100")
        }else{
          context.commit("setCount",num)
          resolve(num)
        }
      })
      
    }

  },
  //数据比较多，分模块
  modules: {
    number
  }
})