Vue后台管理界面
2019-03-29 本文已影响174人
樊小勇
Vue后台管理项目
一、自我总结后台管理界面项目里的知识点
- 项目起始 初学vue使用https://panjiachen.github.io/vue-element-admin-site/zh/guide/下载文档进行操作
单页应用
1. webapck 把很多的js,img,hmtl,css .... 打包成一个html文件以及相应的css和js
2. node可以操作本地文件
3. npm下载安装nodejs模块(插件)
4. 路由,单页应用通过改变路由来改变页面显示的内容
模板(使用下面技术)
1. vue
2. elm-ui
3. webapck
4. 文档地址: https://panjiachen.github.io/vue-element-admin-site/zh/guide/
5. 使用
* 下载项目源文件
* npm i 安装依赖的模块或者插件
* npm run dev 启动服务
接口：http://132.232.87.95:3000/
- 单页应用 APS
单页应用
1. webapck 把很多的js,img,hmtl,css .... 打包成一个html文件以及相应的css和js
2. node可以操作本地文件
3. npm下载安装nodejs模块(插件)
4. 路由,单页应用通过改变路由来改变页面显示的内容
模板(使用下面技术)
1. vue
2. elm-ui
3. webapck
4. 文档地址: https://panjiachen.github.io/vue-element-admin-site/zh/guide/
5. 使用
* 下载项目源文件
* npm i 安装依赖的模块或者插件
* npm run dev 启动服务
这里的dev是根据package.json里scripts对象里的start来决定的
在文件夹shift+右击，调出对应文件夹的命令窗口
- vue文件格式
<template>
<div>
// 只能有一个标签，html里的内容放在这里面
</div>
</template>
<script>
import from './'
// 到入 从某某文件里导出某某 ./用来选定当前文件夹 不能直接填否者会报错
export default {
// 导出，vue js的代码放这里
生命周期函数 了解可以看vue基础篇
};
</script>
<style scoped lang="less">
// css代码放这里 scoped表示该样式只用于这个文件 lang="less"需安装less插件才可用 关于less请看我主页的文章
</style>
- 组件使用流程
组件->全局组件->局部组件->组件注册->组件使用->路由设置->路径相关->vue文件格式->组件导入、导出->eleme-ui引用->样式更改
全局组件：定义在Vue对象(main.js里)外,必须注册才能使用 注册之后 Vue对象都可以访问使用
Vue.componet('组件名',{
data:function(){
// data必须是函数
return:{
// 返回想要的函数对象等
}
}
template:`里面可以是标签也可以是其他的`
})
组件注册：script里加 component('组件名', {
// ... 选项 ...
})
局部组件：定义在vue组件里面，只有在这个vue组件里才能使用
- 配置路由
路由设置：router文件夹是路由设置的文件夹，对应里面的router.js 是配置路径的地方
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap=[
{
path: './文件对应的文件夹',
component: () => import('@/views/对应的文件夹)
children: [ // 上面文件夹下的文件夹，简称子文件
{
path: 'index 文件名一般固定为index',
name: '和父文件里path对应',
component: () => import('@/views/index对应的文件夹/index'), // 如果有几个子文件时默认显示的文件
meta: { title: '随意命名', icon: '图标名' }
}
]
}
]
export default new Router({
routes: constantRouterMap
})
然后在main.js函数里面导入
import Vue from 'vue'
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App)
})
- 父子组件通信
假设a为父组件，b为子组件
a引用b时需要引入,import b from 'b'
a使用b时需要在a里面注册b,
components:{
b
}
a使用b组件：<b></b> 后续一切动作的源头(如果没有引用二者之间毫无关系)
a使用b相当于使用标签，但是标签一般都有属性
b可以自定义属性 b里面使用 props 数组定义数组 注意是数组后接 :[ ] 属性填在里面
父组件传数据给子组件：
a使用b里声明好的属性，然后给属性赋值，也就是所谓的父组件传数据给子组件
给属性赋值可以是字符串也可以是变量，但是变量之前要加:
子组件传数据给父组件：
a在b里声明了自定义的事件，以及函数
在b里面触发a的自定义事件来传数据 this.$emit("自定义事件名",数据data)
- 简单的数据结构
栈：存放基本数据类型(数字，字符串，布尔，undef,null)
堆：存放对象
栈像一个杯子，内部的东西都是从外放进来的，而且是先进后出
堆像一个仓库，内部存放对象，对象里包含很多信息，一个变量对应一个对象，当两个变量对应的对象是相同的话
只要有一方更改，对象里面的数据都会发生更改，类似于通过一个变量绑定相同的对象然后实现双向绑定
栈堆：先进后出 数组的两个方法可以解释 push pop
数列：先进先出 数组的两个方法可以解释 push shift
- 组件的使用和引用
步骤：1.引入elme组件，形成静态页面
需要注意标签内绑定的事件函数、属性和变量，更改或者对应的在下面创建好不然不会显示
2.把相同部分做成一个小组件
创建小组件，然后把相同部分的代码放在组件里面，注意里面的变量属性和函数要对应存在否者不显示
3.引用刚才创建的小组件
首先得导入，import from '' 路径要填对 同一个文件夹的话只需要./后接组件名
然后在导出export default下面 注册组件 components:{ 组件名 }
4.使用组件，放在之前对应的地方，使用直接是<标签名/>
5.在组件里面定义属性然后传需要的数据过去
在组件的导出下面使用props:[属性名] 定义属性名 然后在引用的组件标签
里面添加属性并传入需要的属性，是变量的时候前面需要加:
6.然后组件实现的功能都是在组件里面编辑的，到引用的上面直接就是有功能的了
- 三目运算符
三目运算符
三元表达式
if()else() => *?*:*
意思相近，?为if,如果前面的true则打印?后面的，如果为false则打印：后面的
sc 快速生成vue组件的框架
二、实际应用
一、 vue里页面之间传参通过router-link
获取页面传过来的参数
this.$route.params.参数名;
第一步: <router-link :to="`/cinema/edit/${scope.row.cinemaId}`">编辑</router-link>
通过router-link跳转到对呀路由(/cinema/edit)下，后面接/然后就是参数。模板字符串``里用${参数}来传
第二步：{
path: 'edit/:id',
component: () => import('@/views/cinema/edit'),
meta: {
title: '编辑影院',
icon: 'form'
}
}
router里面在路径对应的后面加/:id,用id来接受参数,当然参数是自定义的
第三步: 在跳转后的页面获取参数this.$route.params.id id对应我们在路由里定义的储存参数的变量上
二、vue里获取接口数据
created() {
let id = this.$route.params.id;
this.findList(id);
},
methods: {
findList(id){
const url = process.env.BASE_API + '/cinema/findById'
// 封装后的使用
axios.get(url,{
params:{
// 参数
cinemaId:id
}
}).then( res => {
this.list=res.data.data.cinema;
}).catch( error => {
console.log(error)
})
}
},
和js原生对比不然发现有不同的地方,这里是对接口进行了一些封装
image.png
image.png
image.png
image.png
- 由图片可以看出，这个是经过了一些列封装然后使得用的时候方便
创建文件夹utils用来放封装函数->request.js对获取后台数据的axios进行封装->然后使用的时候在config文件夹下的dev-env.js里更改BASE_API为我们接口的各个部分即可
三、 结合数组函数map实现二级联动
<template>
<!-- 联动选择组件 -->
<div>
<el-select @change="changeCity" v-model="film.cityId" filterable placeholder="请选择城市">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="film.districtId" style="margin-left: 20px;" placeholder="请选择区域">
<el-option v-for="item in district" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
import axios from 'axios'
export default {
props:[
'film'
],
data() {
return {
options:[],
district:[]
}
},
created() {
this.getlist();
},
methods: {
getlist(){
const url = process.env.BASE_API +'/city/getList';
axios.get(url,{
params:{}
}).then(res=>{
const cities = res.data.cities;
const arr = cities.map(item=>{
return{
value:item.cityId,
label:item.name
}
})
this.options = arr;
}).catch(error=>{
console.log(error)
})
},
changeCity(cityId){
this.getDistrId(cityId)
this.film.districtId=''
},
getDistrId(cityId){
const url = process.env.BASE_API +'/district/findByCityId';
axios.get(url,{
params:{
cityId
}
}).then(res=>{
const distr = res.data.districts;
const arr = distr.map(item=>{
return{
value:item.objectId,
label:item.name
}
})
this.district = arr;
}).catch(error=>{
console.log(error)
})
}
},
}
</script>
<style>
</style>
- @ v-on的缩写 : v-bind缩写 @绑定事件 :变为变量
四、 结合数组函数push、indexOf、splice增删输入框
<template>
<!-- 增删输入框组件 -->
<div class="sb">
<el-form-item class="input" label="剧照">
<el-input placeholder="请输入内容" v-model="film.pics">
</el-input>
<el-button @click="addDomain" class="button" type="info">新增</el-button>
</el-form-item>
<el-form-item class="input" label='剧照' v-for="(domain) in photos.domains" :key="domain.key">
<div>
<el-input placeholder="请输入内容" v-model="film.pics">
</el-input>
<el-button @click.prevent="removeDomain(domain)" class="button" type="info">删除</el-button>
</div>
</el-form-item>
</div>
</template>
<script>
export default {
props:[
"film"
],
data() {
return {
photos: {
domains: []
}
};
},
created() {
},
methods: {
addDomain() {
this.photos.domains.push({
value: "",
});
},
removeDomain(item) {
var index = this.photos.domains.indexOf(item);
if (index !== -1) {
this.photos.domains.splice(index, 1);
}
}
}
};
</script>
<style>
.input {
position: relative;
right: 80px;
}
.button {
position: relative;
float: right;
top: -40px;
left: 75px;
}
.ab {
clear: both;
}
</style>
- 可见input类型标签使用v-model和数据双向绑定更改值
以及遍历使用v-for((item,index) in list) :key="index" - v-for key 实现输入框的增加、删除
<template>
<div>
<h3>v-for key 实现输入框的增加、删除</h3>
<div
:v-model="lists[index].value"
:class="'input'+index"
v-for="(list,index) in lists"
:key="list.id"
>
<input type="text" placeholder="请输入">
<button v-if="panduan(index)" @click="add">+</button>
<button v-else @click="del(index)">-</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [{}]
};
},
created() {},
methods: {
add() {
this.lists.push({
value: ""
});
},
del() {
this.lists.pop();
},
panduan(index) {
return this.lists.length - 1 === index;
}
}
};
</script>
<style>
button {
width: 25px;
height: 25px;
}
</style>
// key 指定一个属性为区别两个数据，一般是id，类似于数据库里的主键
五、渲染列表
<template>
<!-- 父子通信组件 -->
<div>
<el-form-item label="电影名称">
<el-input v-model="film.name"></el-input>
</el-form-item>
<el-form-item label="海报地址">
<el-input v-model="film.poster"></el-input>
</el-form-item>
<el-form-item label="演员">
<el-input v-model="film.actors"></el-input>
</el-form-item>
<el-form-item label="导演">
<el-input v-model="film.director"></el-input>
</el-form-item>
<el-form-item label="产地">
<el-input v-model="film.nation"></el-input>
</el-form-item>
</div>
</template>
<script>
import Xuan from './Xuan'
export default {
props:[
'film'
],
data() {
return {
}
},
components:{
Xuan
}
}
</script>
<style>
</style>
列表里大部分用的都是input标签,然后渲染方式就是绑定v-model双向绑定更改数据
六、父子通信
// 父组件
<template>
<div>
<Form></Form>
<Form title="添加电影"></Form>
<!-- 通过字符串添加 -->
<Form :title="title"></Form>
<!-- 通过变量以及组件里的属性添加 -->
<!-- 通过自定义事件把子组件的数据传到父组件 -->
<Form id="app" @aaa="test">自定义事件</Form>
<!-- 二级联动 -->
<demo class="demo"></demo>
<!-- 增删输入框 -->
<xinzeng></xinzeng>
</div>
</template>
<script>
// 加载Form 组件
import xinzeng from './components/xinzeng';
import demo from './components/demo';
import Form from './components/Form'
export default {
data() {
return {
title:'这是通过组件的属性添加的'
}
},
created() {
// emit 触发自定义事件
// this.$emit('aaa');
},
mounted() {
},
methods: {
test(data){
alert(data);
}
},
// 注册组件
components:{
Form,
demo,
xinzeng
}
}
</script>
<style>
.demo{
margin-top: 20px;
margin-left: 20px;
}
</style>
// 子组件
<template>
<div>
<h3>{{title}}</h3>
<span>用户名:</span>
<input v-model="user" type="text">
<button @click="submit">传数据</button>
</div>
</template>
<script>
export default {
props // 属性 如果把组件当成标签
:[
"title",
],
data() {
return {
user:''
}
},
// 避免修改从父组件传下来的属性，修改会给后期维护带来不利
created() {
console.log(this.title);
// 可以通过this访问title
},
methods: {
submit(){
// 触发父组件的自定义aaa事件
this.$emit("aaa",this.user)
}
},
}
</script>
<style>
button{
width: 100px;
}
</style>
