Vue使用与项目实战

功能：使用vue实现音乐项目前端功能

实现流程：

1：在Hbuilder X创建Vue项目

1.1：使用外部命令启动Vue项目，在终端中下载npm包（如下图）：

//1.1.1：下载element-ui包
npm install -- sava element-ui @3
//1.1.2：下载qs数据转换包
npm i qs 
//1.1.3：下载router路由包
npm install vue-router
//1.1.4：下载axios数据交互包
npm install -- save-axios

2：编辑配置文件：

2.1：编辑main.js配置文件

import Vue from 'vue'	//引入vue
import App from './App.vue'	//引入vue网页

import router from './router' //导入router路由,导入文件夹里面的所有文件 

import ElementUI from 'element-ui';/*引入element-ui*/
import 'element-ui/lib/theme-chalk/index.css';

import {Message,MessageBox} from 'element-ui'	//引入element-ui消息提示

import axios from 'axios';	/*引入axios:操作ajax*/
import qs from 'qs';	//引入数据格式转换

Vue.use(ElementUI);		//运行Vue
Vue.prototype.axios=axios;	//给axios起别名
Vue.prototype.qs = qs;		//给数据转换起别名

Vue.config.productionTip = false	//关闭控制台版本信息

/*绑定请求的服务器的全局路径:绑定网关地址*/
Vue.prototype.axios.defaults.baseURL = "http://localhost:8002/";
//让请求携带cookie信息
Vue.prototype.axios.defaults.withCredentials=true
//前端拦截器，任何一次请求，首先会取出token，放到header请求头里面	
axios.interceptors.request.use(
	config=>{
		let token = sessionStorage.getItem("token");//从浏览器中取出token,如果登录成功过，一定有token
		if(token){
			config.headers.Authorization = token;
		}
		return config;
	}
)

new Vue({
	router,	//运行Vue
  render: h => h(App),	//要访问的地址
}).$mount('#app')		//访问地址的作用域

2.1：编辑App.vue页面配置文件

<template>
  <div id="app">
	<router-view></router-view><!--末班vue页面区域-->
  </div>
</template>

<script>
export default {	//导入入要执行的文件
  name: 'app',		//执行文件的作用域
}
</script>

<style>
</style>

2.3：编写路由配置(创建router文件夹并配置)：

import Vue from 'vue'	//导入vue
import Router from 'vue-router'  //导入路由 
Vue.use(Router)				//运行路由

//导入登录,主页组件（以下为导入的路由界面）
import Login from '../components/Login.vue'
import Index from '../components/Index.vue'
import Musiclist from '../components/Musiclist.vue'

//配置路由（界面信息）
export default new Router({
	routes:[
		{
			path:'/',  //此组件为起始页
			name:'Login',
			component:Login
		},
		{
			path:'/Index',  //主页面
			name:'Index',
			component:Index,
			children:[
				{
					path:'/Musiclist',	//路由界面1
					name:'Musiclist',
					component:Musiclist
					}
			]
		}
	]
})

3：编写前端页面：

3.1：编写登录（Login）界面：

<template>
	<div id="app">
		<el-form  status-icon label-width="100px" class="demo-ruleForm">		  
		  <el-form-item label="帐号" >
			<el-input v-model="user.username"></el-input>
		  </el-form-item>
		  <el-form-item label="密码">
			<el-input type="password" v-model="user.password" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="login()">登录</el-button>
			<el-button>重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { Message } from 'element-ui';
	export default {
	    data() {
	      return{
		    user:{'username':'','password':''}	
		  }
	    },
	    methods: {
			// let p = new URLSearchParams();
			// p.append('username',v.user.username);
			// p.append('password',v.user.password);
		   //this.qs.stringify(this.user)//与上面功能一样，都是将json数据转成参数形式
	      login() {
			 this.axios.post('auth-service/login',this.qs.stringify(this.user)).then(response=>{
				 console.log(response.data.data);//status: "LOGIN_ERROR"status: "OK"
				 if(response.data.status=='OK'){
					 sessionStorage.setItem('token',response.data.data);
					 sessionStorage.setItem('user',JSON.stringify(this.user));
					 this.$router.push("/Index");//去Index.vue界面 
				 }else{
					 Message.error('用户名或者密码不对!');
				 }
			 })
	      }
	    }
	  }
</script>

<style>
</style>

3.2：编写主页面（Index）：

<template>
	<div id="app">
		<el-container style="height: 500px; border: 1px solid #eee">
		  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
		    <el-menu :default-openeds="['1', '3']">
		      <el-submenu index="1">
		        <template slot="title"><i class="el-icon-message"></i>导航一</template>
				  
					<!--跳转值Vue的视图层界面-->
					<el-menu-item index="1-1">
					  <router-link to="/Musiclist">显示列表</router-link>
					</el-menu-item>
		          
				  <el-menu-item index="1-2">选项2</el-menu-item>
		          <el-menu-item index="1-3">选项3</el-menu-item>
		      </el-submenu>
		      <el-submenu index="2">
		        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
		          <el-menu-item index="2-1">选项1</el-menu-item>
		          <el-menu-item index="2-2">选项2</el-menu-item>
		          <el-menu-item index="2-3">选项3</el-menu-item>
		      </el-submenu>
		      <el-submenu index="3">
		        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
		          <el-menu-item index="3-1">选项1</el-menu-item>
		          <el-menu-item index="3-2">选项2</el-menu-item>
		          <el-menu-item index="3-3">选项3</el-menu-item>
		      </el-submenu>
		    </el-menu>
		  </el-aside>
		  
		  <el-container>
		    <el-header style="text-align: right; font-size: 12px">
		      <el-dropdown>
		        <i class="el-icon-setting" style="margin-right: 15px"></i>
		        <el-dropdown-menu slot="dropdown">
		          <el-dropdown-item>查看</el-dropdown-item>
		          <el-dropdown-item>新增</el-dropdown-item>
		          <el-dropdown-item>删除</el-dropdown-item>
		        </el-dropdown-menu>
		      </el-dropdown>
		      <span>{{user.username}}</span>
		    </el-header>
		    
		   <el-main>
               <!--Vue的视图层-->
		      <router-view/>
		    </el-main>
		  </el-container>
		</el-container>

	</div>
</template>

<script>
		export default {
		    data() {
		      return {
				user:JSON.parse(sessionStorage.getItem("user")),
		      }
		    },
			methods:{
				test(){
					this.axios.post("auth-service/getUsers/0/5").then(response=>{
						console.log(response.data);
					})
				}
			}
		  };
	  
</script>

<style>
	 .el-header {
	    background-color: #B3C0D1;
	    color: #333;
	    line-height: 60px;
	  }
	  .el-aside {
	    color: #333;
	  }
</style>

3.3：编写树形结构数据页面（MusicList）：

<template>
	<div id="app">
		<el-table :data="musicList" style="width: 100%">
			<el-table-column prop="id" label="编号" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			<!--添加图片区域开始-->
			<el-table-column label="图片" width="180">
				<template slot-scope="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.picurl"></el-image>
				</template>
			</el-table-column>
			<!--添加图片区域结束-->
			<el-table-column prop="playcount" label="播放次数" width="100px"></el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
			
			<!--添加视频区域开始-->
			<el-table-column label="音乐视频" width="200px">
				<template slot-scope="scope">
					<video ref="video" id="video" :src="scope.row.mvurl" :autoplay="videolist.autoplay"
						:controls="videolist.controls" :controlslist="videolist.controlslist"
						:webkit-playsinline="webkitplaysinline" style="width:100%;height:100%">
					</video>
				</template>
			</el-table-column>
			<!--添加视频区域结束-->
		</el-table>

		<!--隐藏表单区域开始-->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
			
			<el-form class="demo-ruleForm">
				<el-form-item label="名称">
					<el-input v-model="music.name"></el-input>
				</el-form-item>
				<el-form-item label="点击量">
					<el-input v-model="music.playcount"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblefalse()">取 消</el-button>
				<el-button type="primary" @click="dialogVisibleTrue()">确 定</el-button>
			</span>
		</el-dialog>
		<!--隐藏表单区域结束-->

		<!--分页功能开启-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="current" :page-sizes="[3, 5, 8, 10]" :page-size="size"
			layout="sizes, prev, pager, next,total,jumper" :total="total">
		</el-pagination>
		<!--分页功能结束-->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				musicList: [],
				//视频变量的定义
				videolist: { //视频设置
					autoplay: false, //自动播放:false
					controls: 'controls', //操作按钮,
					controlslist: 'nodownload noplaybackrate' //不要下载按钮，不要播放速度按钮
				},
				webkitplaysinline: 'true',
				current: 1, //当前页
				size: 5, //当前页数量
				total: 0, //一共多少条记录
				dialogVisible: false, //弹出框默认隐藏
				title: '', //修改或添加
				music:'',//需要修改的对象
			}
		},
        //初始化加载
		created() {
			this.test();
		},
		methods: {
			//修改
			handleEdit(index, row) {
				console.log(index, row);
				this.title = "修改"
				this.music = row;
				console.log(this.music);
				this.dialogVisible = true;
			},
			//确认修改
			dialogVisibleTrue(){
				console.log(123);
				this.axios.put("/musiclist-service/update",this.music).then(response=>{
					console.log(response.data);
				})
				this.dialogVisible = false;
			},
			//删除
			handleDelete(index, row) {
				console.log(index, row);
				this.axios.delete("/musiclist-service/del/" + row.id).then(response => {
					console.log(response.data);
					this.test();
				})
			},
			//取消提示框
			dialogVisiblefalse() {
				console.log("进入")
				this.dialogVisible = false;
			},
            //分页查询
			test() {
				console.log(123);
				this.axios.get("/musiclist-service/getListMusicinfo/" + this.current + "/" + this.size + "").then(
					response => {
						console.log(response.data.data.records);
						this.musicList = response.data.data.records;
						this.total = response.data.data.total; //一共多少条记录
					})
			},
            //设置页面显示对象数量
			handleSizeChange(v) { //修改每页显示的条数,比如每页三条,参数一v存储你选择每页显示几条
				console.log(v);
				this.size = v;
				this.test();
			},
            //设置跳转页面
			handleCurrentChange(v) { //点击某一页事件,比如点击第二页
				console.log(v);
				this.current = v;
				this.test();
			}
		}
	}
</script>
<style>
</style>