<template> <div> <img src="" alt="Card image cap"> <div> <h5>{{product.name}}</h5> <p>{{product.description===null?"暂无描述":product.description}}</p> <p>价格: {{product.price}}</p> <a href="#" @click="goDetail">查看详情</a> <a href="#">加入购物车</a> </div> </div> </template> <script> export default { props:['product'], methods:{ goDetail(){ console.log(this.product.id); this.$router.push(`/detail/${this.product.id}`); } } } </script>
程序入口APP.vue
<template> <div> <nav-bar></nav-bar> <router-view></router-view> </div> </template> <script> import NavBar from './views/components/navbar' export default { name: 'App', components:{NavBar} } </script>
注册：通过 this.$store.dispatch去调用actions中的方法，其中有趣的是commit的参数竟然被方法名给..这个以后在思考。。
<template> <div> <div> <div> <div> <h5>注册</h5> <hr> <div> <label for="">用户名</label> <input type="text" v-model="user.name"> </div> <div> <label for="">真实姓名</label> <input type="text" v-model="user.realname"> </div> <div> <label for="">密码</label> <input type="password" v-model="user.password"> </div> <div> <button @click="register">注册</button> </div> </div> </div> </div> </div> </template> <script> export default { data(){ return{ user:{ name:'', realname:'', password:'' } } },methods:{ register(){ this.$store.dispatch('REGISTER',this.user).then(res=>{ if(res=="OK") this.$router.push('/index'); }) } } } </script>
登录
<template> <div> <div> <div> <div> <h5>登录</h5> <hr> <div> <label for="">用户名</label> <input type="text" v-model="user.name"> </div> <div> <label for="">密码</label> <input type="password" v-model="user.password"> </div> <div> <button @click="login">登录</button> </div> </div> </div> </div> </div> </template> <script> export default { data(){ return { user:{ name:'', password:'' } } }, methods:{ login(){ this.$store.dispatch('LOGIN',this.user).then(res=>{ console.log(res); if (res){ this.$router.push('https://www.jb51.net/') } }) } } } </script>
主页面
<template> <div> <h1>商品列表</h1> <div> <div v-for="p in products" :key="p.id"> <!-- 传递商品信息到子组件 --> <product-card :product="p"></product-card> </div> </div> </div> </template> <script> import ProductCard from './components/product.vue' export default { components:{ProductCard}, computed:{ products(){ return this.$store.getters.ALL_PRODUCTS; } }, created(){ this.$store.dispatch('LOAD_PRODUCTS'); } } </script>
本文结语知识总结：
获取url中的参数
let id = this.$route.params.id; this.details = this.$store.getters.GET_PRODUCT_BYID(id);
有的小伙伴在复制我的代码运行报错，说什么未初始化；一定要在index.vue添加这个代码，LOAD_PRODUCTS给数据初始化
created(){ this.$store.dispatch('LOAD_PRODUCTS'); }
跳转路由
this.$router.push('https://www.jb51.net/')
ApiClound万能帮助类
import crypto from 'crypto' // 加密 import axios from 'axios' class API { constructor(classname){ this.api = `https://d.apicloud.com/mcm/api/${classname}`; let ID = ''; let KEY = ''; let now = Date.now(); //当前时间 let sha1 = crypto.createHash('sha1'); sha1.update(ID + "UZ" + KEY + "UZ" + now); axios.defaults.headers["X-APICloud-AppId"] = ID; axios.defaults.headers["X-APICloud-AppKey"] = sha1.digest('hex') + "." + now; } Select(){ return axios.get(this.api); } Insert(obj){ return axios.post(this.api,obj); } Update(id,obj){ // RESTFUL API return axios.put(this.api+`/${id}`,obj); } Delete(id){ return axios.delete(this.api + `/${id}`); } } export default API;
还有同学问我父组件和子组件如何传值？
在父页面引用的地方以":"表示的值都可以在子页面的props获取到