Javaee课程前端设计知识点

1、路由器跳转

1. 带值跳转

发送页面 “name”后面是跳转的路径,msgKeyOne为要传的值

<router-link :to="{ name: 'path', params: { msgKeyOne: 'value' }}">
				</router-link>

接收页面 id为接收到的值

data()
{return{
id:'',
}},
mounted() {
	  this.id= this.$route.params.msgKeyOne;
		  }

2、图片

1. 显示后端传来的地址图片

bookInfo为后端传来的集合数组名

<img :src="bookInfo.image"/>

2. 轮播显示图片

bookinfo为后端传来的数组集合名

<el-carousel height="400px" width="500px">
					<el-carousel-item v-for="item in bookinfo.slice(8, 12)" :key="item">
						<router-link :to="{ name: 'check', params: { msgKeyOne: item.gid }}">
							<a href=""><img :src="item.image" alt="图片不存在"></a>
						</router-link>
					</el-carousel-item>
				</el-carousel>

3、将动态变量变为全局变量

1. 获取变量页面使用localStorage进行存储

userID为其他页面使用时需要调用的参数，value为全局变量值

  localStorage.setItem("userID",value);

2. 使用变量页面

切记，userID与传送页应该一样

data(){
return{
userids:'',
}},
created(){
this.userids =localStorage.getItem('userID')}

4、使用导航栏效果

主界面实现导航栏

<template>
<div id="nav">
	<div id="daohang"style="width: 200px;height: 100vh;">
		<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			<!-- <el-radio-button :label="true">展开</el-radio-button> -->
			<!-- <el-radio-button :label="false">收起</el-radio-button> -->
		</el-radio-group>
		
		
		
		<el-menu
		      default-active="2"
		      class="el-menu-vertical-demo"
		      @open="handleOpen"
		      @close="handleClose"
		      background-color="#ffffff"
		      text-color="#000"
			  router
		      active-text-color="#ffd04b">
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span slot="title">基本资料</span>
				</template>
				<el-menu-item index="1-1">完善个人信息</el-menu-item>
				<el-menu-item index="1-2">修改密码</el-menu-item>
			</el-submenu>
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-menu"></i>
					<span slot="title">收货地址管理</span>
				</template>
				<el-menu-item index="2-1">完善收货地址</el-menu-item>
			</el-submenu>
			<el-submenu index="3">
				<template slot="title">
					<i class="el-icon-document"></i>
					<span slot="title">客服服务</span>
				</template>
			<el-menu-item index="3-1">举报投诉</el-menu-item>
				<el-menu-item index="3-2">咨询建议</el-menu-item>
			</el-submenu>
			<el-submenu index="4">

				<i class="el-icon-setting"></i>
				<span slot="title">卡卷管理</span>
			</el-submenu>
		</el-menu>
		</div>
		<div id="content" style="width: 800px;height: 100vh; margin-top: -100vh; margin-left: 20%;">
			<router-view></router-view>
			</div>
	</div>
</template>

<style>
	.nav{
		width: 10%;
		
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

index.js实现点击导航栏跳转不同界面path

	{//进入个人信息后显示个人信息界面
	path: '/info',
	name: 'info',
	component: () => import("../views/client/main/people/info.vue"),
		children: [{
				path: '/1-1',
				name: 'Info',
				component: () => import("../components/people/infos.vue")
			},
          {
				path: '/1-2',
				name: 'addresss',
				component: () => import("../components/people/addresss.vue")
			},
			{
							path: '/2-1',
							name: 'addresss',
							component: () => import("../components/people/addresss.vue")
						},
		]
	},

具体跳转哪页直接按照正常编写vue即可

5、elementui分页与后台数据库相连

 <el-table :data="bookInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)"style="width:100%">

		 	<el-table-column prop="id" label="序号" width="120%">
		 	</el-table-column>
		 	<el-table-column prop="name" label="订单编号" width="120%">
		 	</el-table-column>
		 	<el-table-column prop="writer" label="订单金额" width="120%">
		 	</el-table-column>
		 	<el-table-column prop="publish" label="供应商" width="120%">
		 	</el-table-column>
			<el-table-column prop="publish" label="创建时间" width="120%">
			</el-table-column>
			<el-table-column prop="publish" label="操作" width="120%">
			</el-table-column>
			<el-table-column prop="publish" label="再次购买" width="120%">
			</el-table-column>
		 
		 	<el-table-column align="right">
		 		<!-- <template> -->
		 			<el-input placeholder="请输入书名搜索" v-model="bookname" clearable>
		 			</el-input>
		 			<el-button slot="append" icon="el-icon-search" @click="check" class="button"></el-button>
		 		<!-- </template> -->
		 		<template slot-scope="scope">
		 			<el-button size="mini" @click="edit(scope.row,scope.row.id)">编辑</el-button>
		 			<el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.row.id)">删除</el-button>
		 		</template>
		 
		 	</el-table-column>
		 </el-table>

 <div class="block">
		     <el-pagination small 
		     layout="total,prev,pager,next,jumper" 
		     :total="bookInfo.length"
		     :page-size="pagesize"
		     pager-count="3"
		     :current-page="currentPage"
		     @current-change="handleCurrentChange"
		     ></el-pagination>
		   </div>

export default {
		data() {
			return {
				pagesize:1,
					currentPage:1
					}
					}
					}

methods: {
			// 分页
			handleCurrentChange(val){
					this.currentPage = val;
							
				},
					getnetwork() {
				// console.log(this.bookinfo.id);
				var that = this
				this.$axios.post("http://localhost:8081/springboot/getuser")
					.then(function(res) {
						console.log(res.data)
						that.bookInfo = res.data
						// console.log(this.bookInfo)
					}).catch(function(err) {
						console.log(err)
					})
			}
				}

知识小点

1. 用v-for限制循环数组的长度

显示数组地址8到12的数据

v-for="item in bookinfo.slice(8, 12)"