VUE---笔记

最新推荐文章于 2025-04-08 14:17:03 发布

码飒飒

最新推荐文章于 2025-04-08 14:17:03 发布

阅读量182

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_47365189/article/details/108695798

版权

笔记专栏收录该内容

14 篇文章

订阅专栏

Vue 的安装

参考这个大神的安装笔记https://www.cnblogs.com/zhouyu2017/p/6485265.html

idea中terminal使用npm报不是内部或外部命令，也不是可运行的程序或批处理文件。

1.https://www.cnblogs.com/yuanchaoyong/p/12612402.html
2.在idea中要使用axios 需要在终端vue add axios

开发前先引入axios后，对请求和响应进行处理

响应和请求都是同一个js文件

响应

import axois from “axios”
import axios from 'axios'

import { Loading } from 'element-ui'; // 请求前看业务需求是不是显示一个loading的遮罩层防止用户狂点
// 响应拦截器
 axios.intercetors.response.user(success => {
	 if(loadingFlag){
      	endLoading();
    }
	// 业务逻辑
	if(success.status && success.status == 200){
		if(success.data.code == 500 ){
			Message.error({message: success.data.message})  // 这里需要引进elment ui 的消息提示
			return;
		}
	}
	return success.data;
},error=>{
	// 没有请求到后端
	}
)

请求

let loading;
let loadingFlag = false;
function startLoading() {
  loadingFlag = true;
  loading = Loading.service({
    // target: '.main-container',

    text:'操作中...',//加载中需要显示的文字
    background:'rgba(0,0,0,.7)',//背景颜色

  });
}
//结束加载动画
function endLoading() {
  loading.close();
}
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API_URL, // url = base url + request url
  timeout: 170000, // request timeout
  responseType: 'json'
})

// request interceptor
service.interceptors.request.use(
 
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Token'] = getToken()// 有需要的要设置token
       // 判断当前请求是否设置了不显示Loading
       if(config.headers.showLoading === true){
        startLoading();//请求时的加载动画
      }

    }

    return config
    
  },
 

  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

实际业务的js

import request from '@/utils/request' //引进上面封装的请求

//get请求
export function pageCharges(current,limit){
  return request({
    url:'/rest/api/chargesController/chargesLists',
    method:'get',
    headers:{showLoading:true},//是否开启遮罩层
    params:{current,limit}
  })
}
// post请求
export function insertCharges(data){
  return request({
    url:'/rest/api/chargesController/saveCharges',
    method:'post',
    headers:{showLoading:true},//是否开启遮罩层
    params:{current,limit}
    data
  })
}

elementUI

在创建项目时增加插件或者在IDEA终端

npm install --save element-ui element-ui

https://www.bilibili.com/video/BV137411B7vB?p=2
在这里插入图片描述

Vue router 动态构建菜单

1.在router中的index.js里面
import 组件进来
然后routes数据中配置跳转页面

{
    path:'/',
    name: "导航1",
    component:App
  },
  {
   path: "/pageOne",
   name: "页面1",
   component: PageOne
 },

const router = new VueRouter({
  mode:"history",
  base: process.env.BASE_URL,
  routes
})

在需要引进的地方
2.用v-for遍历数组
语法:
v-for="(item,index) in array"

<el-menu>
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
            <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
          </el-submenu>

        </el-menu>

menu与router 的绑定

1.标签添加router属性
2.在页面中添加一个标签,它是一个容器,可以动态渲染
3. 标签的index值就是要跳转的router

弹框

            this.$confirm(res.msg, '提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'warning'
            });



 			this.$confirm(res.msg, '提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'warning'
            }).then((res) => {

            });
            
          this.$confirm('确定下载文件吗？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          window.open(this.file_base_url + this.attachmentDownLoadUrl + "?fileName=" + this.biddingData.otherFileName + "&fileUrl=" + this.biddingData.otherFileUrl);
          this.$message({
            showClose: true,
            message: '下载成功',
            type: 'success'
          })

this.$router.push(‘url’)跳转后不回到顶部

this.$router.push({path: '/login/login'}).then(() => window.scrollTo(0, 0));

数据库日期封装到对象,前端取到的是时间戳

 // 时间转换
      selectTime(data){
        var timestamp2 = this.timestampToTime(data)
        console.log("时间",timestamp2)
        return timestamp2
      },
      timestampToTime(timestamp){
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D;
      },

el-tree

el-tree数据格式

// 初始化树
      normalizer(node) {
        for (var i = 0,id,label,children,jsonMap=[],jsonTree=[];i < node.length;i++){
          id = node[i]["id"];
          label = node[i]["name"];
          children = node[i]["childrens"];
          if(null !=children && children.length >0){
            children = this.normalizer(children)
          }
          jsonMap = {id, label,children};
          jsonTree.push(jsonMap);
        }
        return jsonTree
      },


      // 获取权限tree
      async getPermissionTree(){
        const res1 =await getPermissionTree();
        console.log("获取权限树",res1.data)
        // this.permissionTree = res1.data
        let res = res1.data
        // for (var i = 0,id,label,jsonMap=[],jsonTree=[];i < res.length;i++){
        //   id = res[i]["id"];
        //   label = res[i]["name"];
        //   children = res[i]["children"];
        //   jsonMap = {id, label,children};
        //   jsonTree.push(jsonMap);
        // }
        let jsonTree = this.normalizer(res)
        console.log("树结构数据",jsonTree)
        this.permissionTree = jsonTree
      },

el-tree限制当某些菜单被选择时,对应的菜单也自动被选择

const bidKeyIds = this.bidKeyIds;
        const needCkeckIds = this.needCkeckIds;
        const checkedIds = this.$refs.tree.getCheckedKeys();
        // 提示 needCkeckIds如果已被选中 点击取消是应提示,有发招标权限的角色,此菜单不能没有
        if(checkedIds !==null && checkedIds.length >0){
          let intersection = checkedIds.filter(function (val){return bidKeyIds.indexOf(val) > -1})
          if(intersection !== null && intersection.length >0){
            needCkeckIds.forEach(v =>{
              if(v == currentNode.key){
                this.$message(',此权限不能取消');
              }
              this.$refs.tree.setChecked(v,true);
            })
          }
        }

数据库日期封装到对象,前端取到的是时间戳

      // 时间转换
      selectTime(data){
        var timestamp2 = this.timestampToTime(data)
        console.log("时间",timestamp2)
        return timestamp2
      },
      timestampToTime(timestamp){
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D;
      },

this.$router.push(‘url’)跳转后不回到顶部

this.$router.push({path: '/login/login'}).then(() => window.scrollTo(0, 0));

弹框

            this.$confirm(res.msg, '提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'warning'
            });



 			this.$confirm(res.msg, '提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'warning'
            }).then((res) => {

            });
            
          this.$confirm('确定下载文件吗？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          window.open(this.file_base_url + this.attachmentDownLoadUrl + "?fileName=" + this.biddingData.otherFileName + "&fileUrl=" + this.biddingData.otherFileUrl);
          this.$message({
            showClose: true,
            message: '下载成功',
            type: 'success'
          })