列表`
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<h2>
商品列表
</h2>
<ul clas="item-list">
<li class="head">
<span>名称</span>
<span>价格</span>
<span>操作</span>
</li>
<li v-for="item of list" :key="item.id">
<span>
<router-link :to="{name:'items',params:{itemId:item.id}}">{{item.name}}</router-link>
</span>
<span>
{{item.price}}
</span>
<span>
<button>删除</button>
</span>
</li>
</ul>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
data(){
return{
list:[],
}
},
created(){
this.axios({
url:'/api/items'
}).then(({data})=>{
this.list=data
console.log(this.list);
});
},
components: {
// HelloWorld
},
}
</script>
<style>
ul{
margin:0;
padding:0;
}
li{
list-style:none;
width:510px;
height:30px;
display:flex;
border-bottom:1px solid #333;
}
.item-list{
padding:10px;
/* display:flex; */
justify-content:space-between;
height:30px;
line-height:30px;
/* border-bottom:1px solid #333; */
}
.item-list li.head{
font-weight:bold;
}
.item-list li span{
min-width:200px;
}
span{
width:200px;
height:30px;
line-height:30px;
}
</style>
详情
<template>
<div>
<div v-if="item">
<h2>商品详情</h2>
<dt>ID</dt>
<dd>{{item.id}}</dd>
<dt>名称</dt>
<dd>{{item.name}}</dd>
<dt>价格</dt>
<dd>{{item.price | RMB}}</dd>
</div>
<div v-else>
<h2>请稍后,暂时没有商品信息</h2>
</div>
</div>
</template>
<script>
import RMB from '@/filters/RMB.js'
export default{
name:'items',
data(){
return{
item:false
}
},
filters:{
RMB
},
mounted(){
//获取路由参数(也就是得到要显示那组数据
// console.log(typeof this.$route.params.itemId)
let itemId=this.$route.params.itemId;
if(itemId){
this.axios({
url:`/api/item/${itemId}`,
}).then(res=>{
console.log(res);
this.item=res.data
});
}
},
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.axios=axios;
new Vue({
router,
render: h => h(App)
}).$mount('#app')
自定义个插件
export default val=>{
return '¥'+(val/100).toFixed(2);
}
vue.config.js解决跨域
const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy:{
‘/api’:{
target:“http://localhost:7777”,
pathRewrite:{
‘^/api’:‘’
}
}
}
}
})
路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path:'/items/:itemId',
name:'items',
component:()=>import('@/views/items.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
列表效果图
详情效果图
**