526互联

vue入门——？？04days

发布时间 2024-01-09 17:13:07作者: 拆尼斯、帕丁顿

 def接口项目_回顾

# 创建数据库指定编码

CREATE DATABASE drf_ks CHARACTER SET utf8;

# 锁定用户后，之前签发的token，如果没过期，还能用
-自己写认证类---》拿到当前用户后，判断是否锁定，如果锁定了，认证不通过即可

# 用自定义用户表--》签发token（锁定的用户，不能签发），认证


# 定制返回格式时：
- 在表模型中写：如果方法出错，这个字段就不显示
- 在序列化类中写：
car_factory_detail = serializers.SerializerMethodField(read_only=True)
def get_car_factory_detail(self, obj):
return {}

详细要求：

1 有车型(CarModel)，车厂（CarFactory），经销商(Distributor)三个表,一个车厂可以生产多种车型，一个经销商可以出售多种车型，一个车型可以有多个经销商出售
  车型：车型名，车型出厂价，车厂id
  车厂：车厂名，车厂地址，联系电话
  经销商：经销商名，地址，联系电话
2 有用户表，基于django内置user表，扩展mobile字段
3 编写登陆接口，jwt方式返回token，
    格式为{status:100,msg:登陆成功，token：safasdfa}
4 所有接口（除登录外），必须登录后才能访问
5 管理员登陆后可以增，删，单查，群查，改 车型，车厂，经销商(具备所有接口权限)
6 普通用户登陆可以查看车型，车厂，经销商单条，所有(只有查看权限)
7 所有查询所有接口带分页功能
8 查询所有车型接口，可以按车型名字精准过滤

-------------不做要求
用户注册接口
管理员有用户锁定，删除用户功能

 

 

 

 

购物车案例

基本购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>{{good.count}}</td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3> 总价格：{{getPrice()}}</h3>

        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},

            ],
            checkGoodList: []
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            }
        }
    })
</script>
</html>

全选；全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>
                        {{good.count}}

                    </td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3>是否全选：{{checkAll}}</h3>
            <h3> 总价格：{{getPrice()}}</h3>

        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},

            ],
            checkGoodList: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    //全选了
                    this.checkGoodList = this.goodList
                } else {
                    //全不选
                    this.checkGoodList = []
                }
            },
            handleCheckOne() {
                // 如果checkGoodList的长度等于商品总长度，说明全选了，让checkAll =true
                if (this.checkGoodList.length == this.goodList.length) {
                    this.checkAll = true
                } else {
                    // 只要长度不相等，都是false
                    this.checkAll = false
                }
            },

        }
    })
</script>
</html>

带加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td><span class="btn" @click="handleJian(good)">-</span>
                        <input type="text" v-model="good.count">
                        <span class="btn"@click="handleAdd(good)">+</span>
                    </td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3>是否全选：{{checkAll}}</h3>
            <h3> 总价格：{{getPrice()}}</h3>

        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},

            ],
            checkGoodList: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    //全选了
                    this.checkGoodList = this.goodList
                } else {
                    //全不选
                    this.checkGoodList = []
                }
            },
            handleCheckOne() {
                // 如果checkGoodList的长度等于商品总长度，说明全选了，让checkAll =true
                if (this.checkGoodList.length == this.goodList.length) {
                    this.checkAll = true
                } else {
                    // 只要长度不相等，都是false
                    this.checkAll = false
                }
            },
            handleAdd(good) {
                good.count++
            },
            handleJian(good) {
                if (good.count > 1) {
                    good.count--
                } else {
                    alert('不能再少了，受不了了')
                }

            }
        }
    })
</script>
</html>

v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>input 和v-model</h1>
    <input type="text" v-model="name">

    <h1>v-model修饰符：lazy、number、trim</h1>
    <input type="text" v-model.lazy="s1">--->{{s1}}
    <br>
    <input type="text" v-model.number="s2">--->{{s2}}
    <br>
    <input type="text" v-model.trim="s3">--->{{s3}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '彭于晏',
            s1: '',
            s2: '',
            s3: '',

        },
    })
</script>
</html>

与后端交互

# 1 使用jq的ajax  ===》不好---》引入了jq框架，好多功能用不到
# 2 原生js  fetch
    提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分
       fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
# 3 axios  第三方ajax，只有ajax，没有别的，小--》底层还是基于XMLHttpRequest
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

jq发送

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
                // 1 发送请求方式1 使用 jq的ajax
                $.ajax({
                    url: 'http://127.0.0.1:5000/userinfo',
                    method: 'get',
                    success: data => {
                        // CORS policy  跨域问题---》解决---》后端响应头中加入：Access-Control-Allow-Origin
                        console.log(typeof data)
                        data = JSON.parse(data)
                        this.username = data.username
                        this.age = data.age
                    }
                })
            }
        }
    })
</script>
</html>

原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
                // 1 原生fetch发送请求
                fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
            }
        }
    })
</script>
</html>

axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
                // 1 axios发送请求
                axios.get('http://127.0.0.1:5000/userinfo')
                    .then(res => {
                        console.log(res.data); //真正的响应体的数据在res.data
                        this.username = res.data.username
                        this.age = res.data.age
                    })
                    .catch(error => {
                        console.log(error);
                    });

            }
        }
    })
</script>
</html>