Vue后台管理界面

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文件格式

组件使用流程
组件->全局组件->局部组件->组件注册->组件使用->路由设置->路径相关->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组件：  后续一切动作的源头(如果没有引用二者之间毫无关系)
    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跳转到对呀路由(/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

由图片可以看出，这个是经过了一些列封装然后使得用的时候方便
创建文件夹utils用来放封装函数->request.js对获取后台数据的axios进行封装->然后使用的时候在config文件夹下的dev-env.js里更改BASE_API为我们接口的各个部分即可

三、结合数组函数map实现二级联动

@ v-on的缩写 : v-bind缩写 @绑定事件 :变为变量

四、结合数组函数push、indexOf、splice增删输入框

可见input类型标签使用v-model和数据双向绑定更改值
以及遍历使用v-for((item,index) in list) :key="index"
v-for key 实现输入框的增加、删除





// key 指定一个属性为区别两个数据，一般是id，类似于数据库里的主键

五、渲染列表

列表里大部分用的都是input标签,然后渲染方式就是绑定v-model双向绑定更改数据
六、父子通信

// 父组件

// 子组件

Vue后台管理界面

Vue后台管理项目

一、自我总结后台管理界面项目里的知识点

二、实际应用

v-for key 实现输入框的增加、删除

{{title}}

你可能感兴趣的:(Vue后台管理界面)