後臺管理系統總結

vue項目製作

vue init webpack vcustomers customers是文件名。
到customers文件夾cnpm install

項目啓動

定位到vue文件夾，首先vue開啓8080端口，npm run dev
定位到JSONSEVER文件夾，開啓json-server3000端口。npm run json:server

Customers.vue

從hello複製內容，更改div的class爲customer和default的name爲customer

設置路由過程

控制檯中cnpm install vue-router --save安裝路由
main.js中引入路由import VueRouter from 'vue-router'
中間件使用Vue.use(VueRouter)（配置一次即可，以後不用再配置了）
設置路由，path時要跳轉的頁面，component是vue文件的名稱，表示跳轉到的vue文件。path路徑下的頁面就是component.vue

const router = new VueRouter({
  mode:"history",
  base:__dirname,
  routes:[
    {path:"/",component:Customers},
    {path:"/about",component:About},
    {path:"/add",component:Add},
    {path:"/customer/:id",component:CustomerDetails},
    {path:"/edit/:id",component:Edit}
  ]
})

引入組件Customers：import Customers from './components/Customers'
裝入路由：可以根據路由跳轉到不同頁面了

 new Vue({
  router,
  template: `
     <div id="app">
       <router-link to="/">主頁</router-link>
       <router-link to="/about">關於我們</router-link>
       <router-view></router-view>
     </div>
  `
}).$mount("#app")

書寫內容

table裏添加內容<tr v-for="customer in customers">
data裏添加customers數組
安裝vue-resource：cnpm vue-resource --save
methods裏添加方法給customers數組賦值，then會接收數據，類似於Ajax

        fetchCustomers(){
            this.$http.get("http://localhost:3000/users")
            .then(function(response){
                // console.log(response);       
                this.customers = response.body;
            })
        },

main.js添加import VueResource from 'vue-resource'
main.js添加Vue.use(VueResource)'
此時頁面沒有顯示內容，借用生命週期created時，構建函數

    created() {
        this.fetchCustomers();
    },

在上面td裏賦值email、phone、name。

搭建bootStrap

index.html引入cdn

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

中文網引入模板粘貼到main.js

About.vue

從hello複製內容，更改div的class爲about和default的name爲about
此頁面填寫一些關於此管理系統的簡介和內容

Add.vue

書寫內容

設置一個form，綁定事件<form v-on:submit="addCustomer">
每一個都書寫內容，v-model綁定數據。<input type="text" class="form-control" placeholder="name" v-model="customer.name">
methods裏書寫addCustomer方法，submit之後把信息拿到並post到本地JSONSERVER文件裏。提交後跳到主頁面，this.$router.push({path:"/",query:{alert:"用戶信息添加成功!"}}); 。

    methods: {
        // 提交按鈕的事件e
        addCustomer(e){
          // 名字電話郵箱不能爲空
            if(!this.customer.name||!this.customer.phone||!this.customer.email){
                this.alert = "請添加對應的信息!";              
            }else{
                let newCustomer = {
                    name: this.customer.name,
                    phone: this.customer.phone,
                    email: this.customer.email,
                    education: this.customer.education,
                    graduationschool: this.customer.graduationschool,
                    profession: this.customer.profession,
                    profile: this.customer.profile
                }
                // 傳到這個接口
                this.$http.post("http://localhost:3000/users",newCustomer)
                // 傳回來並且接收
                .then(function(response){
                    // console.log(response);   
                    // 跳轉到主頁面 
                    this.$router.push({path:"/",query:{alert:"用戶信息添加成功!"}});           
                })
            }
            // 阻止默認事件
            e.preventDefault();       
        }

當頁面更新時(DOM元素更新時)添加方法，借用生命週期created函數。

 updated() {
        this.fetchCustomers();
    },

Alert.vue

bootstrap引入組件，調用message

    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{message}}
      </div>

綁定屬性 props:['message'], 父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新爲最新的值。這意味着你不應該在一個子組件內部改變 prop。
在Customers.vue中引入組件import Alert from './Alert'
在Customers.vue中使用組件

  components:{
        Alert
    }

在Customers.vue的data中定義alert:""
在Customers.vue中調用Alert <Alert v-if="alert" v-bind:message="alert"></Alert>。alert沒有值就不彈出來了，v-bind綁定信息。
Add.vue中this.$router.push({path:"/",query:{alert:"用戶信息添加成功!"}}); ，添加query（這是一個對象）信息。
Customers.vue中借用生命週期函數created，如果alert不爲空傳遞參數給第6步中的v-bind:meesage。

    created() {
        if(this.$route.query.alert){
            this.alert = this.$route.query.alert;
        }
        this.fetchCustomers();
    },

CustomerDetails.vue（頁面詳情）

首先添加路由信息

注意main.js中借用id形式{path:"/customer/:id",component:CustomerDetails},
Customers.vue中添加路由信息

 <td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">詳情</router-link></td>

CustomerDetails.vue的data中添加customer:""，customer是對象。
CustomerDetails.vue的methods中添加方法

        fetchCustomers(id){
            // 拼接id
            this.$http.get("http://localhost:3000/users/"+id)
            .then(function(response){
                // console.log(response);       
                this.customer = response.body;
            })
        },

借用生命週期函數created，定義函數調用時間

    // 一進到組件裏就有id
    created() {
        this.fetchCustomers(this.$route.params.id);
    }

添加返回按鈕

router-link標籤就是html裏的a href

<router-link to="/" class="btn btn-default">返回</router-link>

刪除按鈕

刪除：綁定deleteCustomer方法

<button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">刪除</button>

拿到id，利用delete刪除本地數據。刪除成功後返回到主頁，添加query會返回彈出窗口。

        deleteCustomer(id){
            this.$http.delete("http://localhost:3000/users/"+id)
            .then(function(response){
                this.$router.push({path:"/",query:{alert:"用戶刪除成功"}});
            })

編輯按鈕

綁定編輯跳轉頁面，會把id傳到Edit.vue的頁面

<router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">編輯</router-link>

新建Edit.vue，頁面和編輯類似。最主要改變的是http的請求的方式改爲put，並且拿到url中的id，拼接後按照id進行更新。

// 傳到這個接口
                this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)

main.js中配置路由。
寫一個方法，來到這個頁面的時候，文本框中有當前的信息。

        fetchCustomer(id){
           this.$http.get("http://localhost:3000/users/"+id)
           .then(function(response){
               this.customer = response.data;
           })
        },

7.調用生命週期created，在頁面構建完成時給上一步的方法傳遞id

    created(){
        this.fetchCustomer(this.$route.params.id);
    },

Add.vue中，當姓名或者電話或者id爲空時，彈出下面，成功時回到主頁並彈出成功。

Add.vue中引入Alert組件並且在component中添加Alert

    import Alert from './Alert'
    components:{
       Alert
    }

定義一個alert=""，並在方法中設置當姓名或者電話或者id爲空時，給alert賦值"請添加對應的信息!"

        updateCustomer(e){
          // 名字電話郵箱不能爲空
            if(!this.customer.name||!this.customer.phone||!this.customer.email){
                // console.log("請添加對應的信息"); 
                this.alert = "請添加對應的信息!";

如果alert不爲空，打印出alert

        <Alert v-if="alert" v-bind:message="alert"></Alert>

對alert進行賦值

           .then(function(response){
               this.customer = response.data;
           })

編輯頁面，編輯成功後，當姓名或者電話或者id爲空時，彈出下面

和上面步驟一樣

搜索框

Customer.vue中添加搜索框，v-model上filterInput

<input type="text" class="form-control" placeholder="搜索" v-model="filterInput">

下面data中添加filterInput屬性
表格添加方法，第一個形參曾經的數組，第二個是v-model的值

<tr v-for="customer in filterBy(customers,filterInput)">

methods實現方法，filter是ES6中方法，遍歷整個數組和當前customer比較，和for-in裏的customer的name相同的就返回。
然後用ES6裏的match方法，value是文本框輸入的value，正常情況爲null，如果輸入的值能匹配到數組中的名字任意一個字就返回true並顯示匹配上的名字。
如果hzx，輸入x可以匹配上，返回true，並且展示hzx的信息。

        filterBy(customers,value){
            // ES6的方法,遍歷整個數組和當前customer比較，和customer的name相同的就返回
          return customers.filter(function(customer){
            // 如果爲null，遍歷整個數組
              return customer.name.match(value);
          })
        }

總結

component.vue表示當前頁面，引入的vue和底下的template表示的在當前頁面添加引入的vue。
null不指向任何對象，相當於沒有任何值；而“”代表一個長度爲0的字符串，match要賦值爲空字符串

後臺管理系統總結

vue項目製作

項目啓動

Customers.vue

搭建bootStrap

About.vue

Add.vue

Alert.vue

CustomerDetails.vue（頁面詳情）

搜索框

總結

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

Vuex複習

flex佈局應用

CORS和JSONP

瀏覽器與進程和線程

瀏覽器繪製過程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結