写一个books接口，带按价格排序，前端页面创建完成，向后端发送请求，获取图书属性，表格显示在前端
前端使用监听属性实现点击价格正序和倒序排列
解决跨域问题

#setting.py
INSTALLED_APPS = [
    .......
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ......
]
CORS_ORIGIN_ALLOW_ALL=True

或

image.png

前端代码

    <table class="table table-striped">
    <thead><tr><th>title</th>
        <th>price
            <span class="btn btn-xs " @click="OrdingUpDown">
                <svg t="1686060486584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2935" width="16" height="16">
                    <path d="M512 51.2L153.6 460.8h716.8L512 51.2z m0 921.6l358.4-409.6H153.6L512 972.8z" fill="#999999" p-id="2936"></path>
                </svg>
            </span>
        </th><th>publish</th> <th>author</th></tr></thead>
    <tbody><tr v-for="book in bookList"><td>{{book.title}}</td><td>{{book.price}}</td><td>{{book.publish}}</td> <td>{{book.authors}}</td></tr></tbody>
</table>
//根组件
let vm = new Vue({
    el: "#app",
    data: {
        bookList: [],
        ordering:true
    },
    methods: {
        OrdingUpDown(){
            this.ordering=!this.ordering
          },
    computed:{computed_sumprice(){var sum=0;this.checkGroup.forEach(function (good) {sum+=good.price*good.number});return sum;}},
    watch:{
        ordering(bool){
            console.log(bool)
            if(bool){
                this.bookList.sort(function(a, b){return a.price - b.price});
                console.log(this.bookList)
            }
            else {this.bookList.sort(function(b, a){return a.price - b.price});
                console.log(this.bookList)
            }
        }
    },
    created() {
        axios.get('http://127.0.0.1:8000/book/').then(res => {
                // console.log(res.data);
                this.bookList=res.data
            })
})