生命周期 封装

src/api/index.js

@@ -0,0 +1,40 @@
+import axios from "axios"
+import router from "../router/index.js"
+// axios 全局的url前缀
+axios.defaults.baseURL = "https://tomcat.theluyuan.com/vegetables"
+// 请求拦截器 请求前修改请求的配置 可以添加token 请求头 
+axios.interceptors.request.use((config)=>{
+  console.log(config)
+  // 这个请求的配置 axios({})
+  // config.url="11111"
+  // dom 添加盖板
+  // config.baseURL = "2222"
+  config.headers.token = localStorage.getItem("token")
+  return config
+})
+
+
+// 响应拦截器
+// 获取后台的信息 修改 或者 跳转页面
+axios.interceptors.response.use((res)=>{
+  console.log(JSON.stringify(res),"这是拦截器的")
+  // res.data = "这是修改之后的"
+  if(res.data.message == "请输入正确的用户信息"){
+    router.push("/index")
+  }
+  // 删除盖板
+    alert("信息")
+  return res
+})
+
+axios.interceptors.response.use((res)=>{
+  console.log("这是第二个")
+  return res
+})
+
+axios.interceptors.response.use((res)=>{
+  console.log("这是第san 个")
+  return res
+})
+
+export default axios

src/components/st.vue

@@ -8,6 +8,24 @@
 </template>
 <script>
 export default{
+     beforeCreate(){
+        console.log("组建这是第一个")
+    },
+    created(){
+        console.log("组建这是第二个")
+    },
+    beforeMount(){
+        console.log("组建这是第三个")
+    },
+    mounted(){
+        console.log("组建这是第四个")
+    },
+    beforeDestroy(){
+        console.log("组建这是死的")
+    },
+    destroyed(){
+        console.log("组建这是死透的")
+    },
     data(){
    return{
      name:"aaa",
@@ -16,7 +34,8 @@ export default{
     },
  methods:{
      fangfa(){
-         this.$emit("ooo","231","456")
+         this.name = new Date().getTime()
+        //  this.$emit("ooo","231","456")
      }
  }   
 }

src/main.js

@@ -1,75 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
-import VueRouter from 'vue-router'
-import index from "./pages/index.vue"
-import list from "./pages/list.vue"
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import axios from "axios"
+import router from "./router/index.js"
+import axios from "./api/index.js"
 Vue.use(ElementUI);
-// axios 全局的url前缀
-axios.defaults.baseURL = "https://tomcat.theluyuan.com/vegetables"
-// 请求拦截器 请求前修改请求的配置 可以添加token 请求头 
-axios.interceptors.request.use((config)=>{
-  console.log(config)
-  // 这个请求的配置 axios({})
-  // config.url="11111"
-  // dom 添加盖板
-  // config.baseURL = "2222"
-  config.headers.token = localStorage.getItem("token")
-  return config
-})
 
-
-// 响应拦截器
-// 获取后台的信息 修改 或者 跳转页面
-axios.interceptors.response.use((res)=>{
-  console.log(JSON.stringify(res),"这是拦截器的")
-  // res.data = "这是修改之后的"
-  if(res.data.message == "请输入正确的用户信息"){
-    router.push("/index")
-  }
-  // 删除盖板
-    alert("信息")
-  return res
-})
-
-axios.interceptors.response.use((res)=>{
-  console.log("这是第二个")
-  return res
-})
-
-axios.interceptors.response.use((res)=>{
-  console.log("这是第san 个")
-  return res
-})
 Vue.prototype.axios = axios
 // vue 使用这个插件
-Vue.use(VueRouter)
 
-const router = new VueRouter({
-  routes: [{
-    path:"/index",
-    component:index,
-    children:[{
-      path:"table",
-      component: () => import("./pages/table.vue")
-    },{
-      path:"list",
-      component: list
-    }]
-  },{
-    path:"/list",
-    name:"list",
-    component:list
-  },{
-    path:"/login",
-    component: ()=> import("./pages/login.vue")
-  },{
-    path:"*",
-    component: ()=> import("./pages/404.vue")
-  }]
-})
 
 
 Vue.config.productionTip = false

src/pages/login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="lll">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="审批人">
                 <el-input
@@ -26,6 +26,8 @@
             <el-table-column prop="des" label="简介"> </el-table-column>
             <el-table-column prop="cateId" label="cateId"> </el-table-column>
         </el-table>
+        <st id="st"></st>
+        <div id="aaa">{{aaa}}</div>
     </div>
 </template>
 
@@ -33,19 +35,78 @@
 </style>
 
 <script>
+import st from "../components/st.vue"
 export default {
+    components:{
+        st
+    },
+    // 生命周期
+    // 生
+    // 刚进组建 初始化之前
+    beforeCreate(){
+        console.log(this.formInline)
+        console.log("这是第一个")
+    },
+    // 初始化完成
+    // data
+    // 没有dom
+    created(){
+        console.log(document.getElementById("lll"))
+        console.log("这是第二个")
+    },
+    // 挂载前 初始化了dom节点 但是是在js中
+    beforeMount(){
+        console.log(document.getElementById("lll"))
+        // 虚拟dom
+
+        console.log("这是第三个")
+    },
+    mounted(){
+        console.log(document.getElementById("lll"))
+
+        console.log("这是第四个")
+    },
+    // 死
+    beforeDestroy(){
+        console.log("这是死的")
+    },
+    destroyed(){
+        console.log("这是死透的")
+    },
+
+    // 页面更新
+    beforeUpdate(){
+        // 数据已经更新了 更新的是页面
+        console.log(document.getElementById("aaa").innerText)
+        console.log(this.aaa,"更新前")
+    },
+    updated(){
+        console.log(document.getElementById("aaa").innerText)
+
+        console.log(this.aaa,"更新后")
+
+    },
     data() {
         return {
             formInline: {
-                user: "",
-                pwd: "",
+                user: "123",
+                pwd: "321",
             },
-            tableData:[]
+            tableData:[],
+            aaa:"111"
         };
     },
     methods: {
         onSubmit() {
-            console.log(this.formInline);
+            this.aaa = new Date().getTime()
+            this.$nextTick(()=>{
+                console.log(document.getElementById("aaa").innerText,"页面上的")
+            })
+        
+            console.log(this.aaa)
+            // document.getElementById("st").remove()
+            // this.$router.push("/index")
+            // console.log(this.formInline);
             // jquery data
             // params url
             // data 请求体传参
@@ -71,22 +132,22 @@ export default {
             //         console.log(res.data)
             //     })
             // 全局的 baseURL + url
-            this.axios
-                .post("/user/login", {
-                    phone: this.formInline.user,
-                    password: this.formInline.pwd,
-                })
-                .then((res) => {
-                    console.log(res);
-                    localStorage.setItem("token",res.data.data.token)
-                    return this.axios.post(
-                        "/product/selectall"
-                    );
-                })
-                .then((res) => {
-                    console.log(res);
-                    this.tableData = res.data.data
-                });
+            // this.axios
+            //     .post("/user/login", {
+            //         phone: this.formInline.user,
+            //         password: this.formInline.pwd,
+            //     })
+            //     .then((res) => {
+            //         console.log(res);
+            //         localStorage.setItem("token",res.data.data.token)
+            //         return this.axios.post(
+            //             "/product/selectall"
+            //         );
+            //     })
+            //     .then((res) => {
+            //         console.log(res);
+            //         this.tableData = res.data.data
+            //     });
             // this.axios.get("cf://www.baidu.com",{
             //     params:{
             //         adasd:213,

src/router/index.js

@@ -0,0 +1,31 @@
+import Vue from "vue"
+import VueRouter from "vue-router"
+import index from "../pages/index.vue"
+import list from "../pages/list.vue"
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  routes: [{
+    path:"/index",
+    component:index,
+    children:[{
+      path:"table",
+      component: () => import("../pages/table.vue")
+    },{
+      path:"list",
+      component: list
+    }]
+  },{
+    path:"/list",
+    name:"list",
+    component:list
+  },{
+    path:"/login",
+    component: ()=> import("../pages/login.vue")
+  },{
+    path:"*",
+    component: ()=> import("../pages/404.vue")
+  }]
+})
+
+export default router