web前端實戰記錄

原創 张桎梏 2020-07-03 09:09 
通過find找到指定條件的對象	
let obj = [{id:1},{id:2}] , aid = 1
let item =  obj.find((item)=>{
		return item.id == aid
})
// item =>{id: 1}
判斷環境
const prefix = process.env.NODE_ENV === 'development' ? '/api' : 'http://www.abc.com'
//判斷手機網站

 <script type="text/javascript">
            var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
            var browser = navigator.userAgent.toLowerCase();
            var isMobile = false;
            for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
            //alert(mobileAgent[i]);
            location.href = 'http://m.0071515.com';
            break; } }
        </script>

 

api請求封裝

//api.js
const prefix = process.env.NODE_ENV === 'development' ? '/api' : 'http://www.abc.com'
export default (config => {
    let data = {};
    let a = Object.keys(config)
    for (let k of a) {
        data[k] = prefix + config[k]
    }
    return data
})({
     'bindPhone'  : "/api/index.php/other/bindPhone  ", // 微信授權地址
     'openCity'   : "/api/index.php/other/city"  // 開放城市
})

//http.js
import axios from 'axios'
import qs from 'qs'
import 'es6-promise'

// 配置axios的默認URL
// axios.defauls.baseURL = 'xxx'
// 配置允許跨域攜帶cookie
axios.defaults.withCredentials = true
// 配置超時時間
axios.defaults.timeout = 100000

// axios攔截器 請求攔截
axios.interceptors.request.use(config => {
    // config.setHeaders([
    //     // 在這裏設置請求頭與攜帶token信息
    // ])
    return config
})

// axios攔截器 響應攔截
axios.interceptors.response.use(response => {
    // 在這裏你可以判斷後臺返回數據攜帶的請求碼
    // if (response.data.retcode === 200 || response.data.retcode === '200') {
    //     return response.data.data || response.data
    // }else {
    //     // 非200請求抱錯
    //     throw Error(response.data.msg || '服務異常')
    // }
    // Toast.hide();
    return response
})

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: params}).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}

export function post(url, data) {
    return new Promise((resolve, reject) => {
        axios.post(url, qs.stringify(data), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        }).then(res => {
//可以在這裏判斷code是否是未登錄狀態
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}


//server.js
import {get, post} from './http'
import apis from './apis'
export const bindPhone = (phone, code) => {
    return post(apis.bindPhone, {phoen: phone, code: code})
}

export const openCity = () => {
    return get(apis.openCity, {})
}

// console.log(apis) 
{
    openCity   :  "/api/index.php/other/city",
    bindPhone  :  "/api/index.php/other/bindPhone  "
}
// console.log(typeof apis)   Object



vue 維護倒計時


import React, { Component } from 'react';
// import {connect} from 'react-redux';
import './mainTian.less'
class mainTian extends Component {


    constructor(props) {
        super(props);
        this.state = {
            day: 0,
            hour: 0,
            minute: 0,
            second: 0
        }
    }
    countFun(end) {
        let now_time = Date.parse(new Date());
        var remaining = end - now_time;

        this.timer = setInterval(() => {
            //防止出現負數
            if (remaining > 1000) {
                remaining -= 1000;
                let day = Math.floor((remaining / 1000 / 3600) / 24);
                let hour = Math.floor((remaining / 1000 / 3600) % 24);
                let minute = Math.floor((remaining / 1000 / 60) % 60);
                let second = Math.floor(remaining / 1000 % 60);

                this.setState({
                    day: day,
                    hour: hour < 10 ? "0" + hour : hour,
                    minute: minute < 10 ? "0" + minute : minute,
                    second: second < 10 ? "0" + second : second
                })
            } else {
                clearInterval(this.timer);
                
            }
        }, 1000);
    }
    componentDidMount() {
        const end = Date.parse(new Date('2019-09-01 09:00'))
        this.countFun(end);
    }
    componentWillMount() {
        setTitle('首頁');
        // clearInterval(settime);
    }
    //卸載組件取消倒計時
    componentWillUnmount() {
        clearInterval(this.timer);
    }
    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }



  

    render() {
        return (
            <div className='mainTian'>
                <div className="content" style={{
                    textAlign: "center",
                    fontSize: "16px",
                    fontWeight: "bold",
                    height: "60px",
                    lineHeight: "35px",
                }}>
                    <p className="span">本網站系統正在升級維護中....</p>
                    <p className="span" style={{
                        fontSize: "14px",
                        fontWeight: "normal",
                    }}>
                        {/* {this.state.day}天  */}
                        恢復正常訪問倒計時   <span>{this.state.day}天 {this.state.hour}:{this.state.minute}:{this.state.second}</span></p>
                        <p className="span"><a href="tel:1662610000" >瞭解詳情點擊聯繫客服</a></p>
                    <p className="span">敬請期待</p>
                </div>
            </div>



        );
    }
}


export default mainTian;

vuex狀態管理
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import {
	getMemberList,
	getContactList
} from '../common/http/services.js'

import orderInfo from './orderInfo/';

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		hasLogin: false, // 登陸狀態
        citycode:null
		userInfo: null, // 用戶信息
	},
	getters: {
		checkLogin: state => {
			return state.hasLogin;
		},
		getCityCode: state => {
			return state.citycode
		},
	},
	mutations: {
		setCitycode(state, citycode) {
			state.citycode = citycode
		},
		login(state, loginData) {
			state.hasLogin = true;
			state.userInfo = loginData
		},
	},
	actions: {
		getUserOpenId: async function({
			commit,
			state
		}) {
			return await new Promise((resolve, reject) => {
				if (state.openid) {
					resolve(state.openid)
				} else {
					uni.login({
						success: (data) => {
							commit('login')
							setTimeout(function() { //模擬異步請求服務器獲取 openid
								const openid = '123456789'
								console.log('uni.request mock openid[' + openid + ']');
								commit('setOpenid', openid)
								resolve(openid)
							}, 1000)
						},
						fail: (err) => {
							console.log('uni.login 接口調用失敗，將無法正常使用開放接口等服務', err)
							reject(err)
						}
					})
				}
			})
		},
//用戶信息
		getUserInfo(context) {
			getMemberList().then(res => {
				if (res.code === 200 || res.code === 0 ) {
					console.log(res.data)
					context.commit('login', res.data)
				}
			})
		},

		getAddressList(context) {
			getContactList().then(res => {
				if (res.code === 200 ) {
					context.commit('address', res.data.list)
				} else if ( res.code === 222) {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						success: () => {
                       //未登錄跳轉/處理
							uni.navigateTo({
								url: '../login/login'
							})
						}
					})
				}
			}).catch(err => {
				console.log(err);
				
			})
		}
	},
	modules: {
		orderInfo
	}
})

export default store


//調用的js
<script>
	import { mapState } from 'vuex'
	export default {
		onLaunch: function(e) {
			console.log('App Launch now');
		
		},
       computed:{
	    ...mapState(['userInfo']),
      },
		created: function() {
        console.log(this.userInfo)
		this.$store.commit("login",this.userInfo) // 將當前用戶保存到store
        this.$store.dispatch('getAddressList')    //觸發actions
		} 
	}
</script>

<style>
</style>









vue項目常用記錄

路由篇
異步1
加載組件，當你訪問 / ，纔會加載 home.vue。
{
  path: '/',
  component: resolve=>require(["@/components/pages/home.vue"],resolve),
  meta: {
    title: 'home'
  }
}
異步2
import a from './components/a.vue'

export default ({
{ 
  path: '/signIn',
  component: ()=>import("@/components/pages/signIn/signIn"),
}
})

二叉樹(地區遞歸,側邊導航 實戰）

//element-ui menu 遞歸
<template>
  <div>
    <div class="sidebar-container">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        mode="vertical"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
      >
        <sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu" />
      </el-menu>
    </el-scrollbar>
    </div>
</template>
<script>
import SidebarItem from './../components/SidebarItem'
export default {
  name: 'Sidebar',
  components: { SidebarItem },
  props: {
    menuList: {
      type: Array,
      // required: true,
      default: () => {
        return [
          {
            path: '/func1', // 菜單項所對應的路由路徑
            title: '功能1', // 菜單項名稱
            children: [] // 是否有子菜單，若沒有，則爲[]
          },
          {
            path: '/func2',
            title: '功能2',
            children: []
          },
          {
            path: '/func3',
            title: '功能3',
            children: [
              {
                path: '/func41',
                title: '功能4-1',
                children: []
              },
              {
                path: '/func42',
                title: '功能4-2',
                children: []
              },
              {
                path: '/func43',
                title: '功能4-3',
                children: [
                  {
                    path: '/func51',
                    title: '功能5-1',
                    children: []
                  },
                  {
                    path: '/func52',
                    title: '功能5-2',
                    children: []
                  },
                  {
                    path: '/func53',
                    title: '功能5-3',
                    children: []
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  },
  data () {
    return {
      pagedefault: ''
    }
  },
 
}
</script>
<style lang="less">
.sidebar-container {
  transition: width 0.28s;
  width: 180px !important;
  height: 100%;
  position: fixed;
  font-size: 0px;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;

  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out,
      0s padding-right ease-in-out;
  }
  .el-scrollbar {
    height: 100%;
  }
  .scrollbar-wrapper {
    overflow-x: hidden !important;
    .el-scrollbar__view {
      height: 100%;
    }
  }
  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }
  .is-horizontal {
    display: none;
  }
  a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
  }
  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
  }
  .is-active > .el-submenu__title {
    color: #f4f4f5 !important;
  }
}
</style>

//SidebarItem.vue
<template>
  <div v-if="item.children">
    <template v-if="item.children.length == 0">
        <el-menu-item :index="item.path">
          <i class="el-icon-menu"></i>
          a{{item.title}}
        </el-menu-item>
    </template>

    <el-submenu v-else :index="item.path">
      <template slot="title" ><i class="el-icon-menu"></i>b{{item.title}}</template>

      <template v-for="child in item.children">
        <sidebar-item
          v-if="child.children&&child.children.length>0"
          :item="child"
          :key="child.path"/>
        <el-menu-item v-else :key="child.path" :index="child.path"> <i class="el-icon-location"></i>  c {{child.title}} </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

 

動態加載路由權限(直接貼代碼)

SidebarItem.vue

<template>
  <div v-if="item.children">
    <template v-if="item.children.length == 0">
        <el-menu-item :index="item.path">
          <i class="el-icon-menu"></i>
           {{item.title}}
        </el-menu-item>
    </template>

    <el-submenu v-else :index="item.path">
      <template slot="title" ><i class="el-icon-menu"></i> {{item.title}}</template>

      <template v-for="child in item.children">
        <sidebar-item
          v-if="child.children&&child.children.length>0"
          :item="child"
          :key="child.path"/>
        <el-menu-item v-else :key="child.path" :index="child.path"> <i class="el-icon-location"></i>   {{child.title}} </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

SideBarAdmin.vue

<template>
  <div>
    <div class="sidebar-container">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        mode="vertical"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
        default-active="1"
      >
        <sidebar-item v-for="menu in menuList"  :key="menu.path" :item="menu" />
      </el-menu>
    </el-scrollbar>
    </div>
  </div>
</template>
<script>
import SidebarItem from './../components/SidebarItem'

export default {
  name: 'Sidebar',
  components: { SidebarItem },
  props: {
    menuList: {
      type: Array,
      // required: true,
      default: () => {
        return [
          {
            path: '1', // 菜單項所對應的路由路徑
            title: '功能1', // 菜單項名稱
            children: [] // 是否有子菜單，若沒有，則爲[]
          },
          {
            path: '2',
            title: '功能2',
            children: []
          },
          {
            path: '3',
            title: '功能3',
            children: [
              {
                path: '3-1',
                title: '功能3-1',
                children: []
              },
              {
                path: '3-2',
                title: '功能3-2',
                children: []
              },
              {
                path: '3-3',
                title: '功能3-3',
                children: [
                  {
                    path: '3-31',
                    title: '功能3-31',
                    children: []
                  },
                  {
                    path: '3-32',
                    title: '功能3-32',
                    children: []
                  },
                  {
                    path: '3-33',
                    title: '功能3-33',
                    children: []
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  },
  data () {
    return {
      pagedefault: '',
      addList: [],
      default: 1
    }
  },
  watch: {
  },
  created () {
    this.addMenuRouter()
  },
  methods: {
    creatRouteList (list) {
//原有的路由添加 vue會自動處理覆蓋原有相同的路由
      let obj = [ {
        path: '/',
        component: resolve => require(['../page/Main.vue'], resolve),
        meta: {title: '自述文件'},
        children: [
          {
            path: '/dashboard',
            component: resolve => require(['../tag/Dashboard.vue'], resolve),
            meta: { title: '首頁' }
          },
          {
            path: '/user',
            component: resolve => require(['../tag/Reigster.vue'], resolve),
            meta: { title: '註冊用戶' }
          }
        ]
      } ]
      list.map((res, index) => {
        let item = {
          path: res.path,
          name: res.title,
          component: () => import(`../components/demo/${res.path}.vue`)
        }
        obj[0].children.push(item)
        console.log(obj)
        console.log(res.children.length)
        if (res.children.length > 0) {
          this.creatRouteList(res.children)
        }
      })
      this.$router.addRoutes(obj)
    },
    addMenuRouter () {
      this.creatRouteList(this.menuList)
    }
  }
}
</script>
<style lang="less">
.sidebar-container {
  transition: width 0.28s;
  width: 180px !important;
  height: 100%;
  position: fixed;
  font-size: 0px;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;

  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out,
      0s padding-right ease-in-out;
  }
  .el-scrollbar {
    height: 100%;
  }
  .scrollbar-wrapper {
    overflow-x: hidden !important;
    .el-scrollbar__view {
      height: 100%;
    }
  }
  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }
  .is-horizontal {
    display: none;
  }
  a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
  }
  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
  }
  .is-active > .el-submenu__title {
    color: #f4f4f5 !important;
  }
}
 .is-opened .el-submenu__title{
    background: #BFDFFA;
    color: #00afff;
    padding-left: 12px !important;
  }
</style>

效果圖（小部分路由截圖，左邊是導航欄右邊是內容 即children裏面的路由）

 

嵌套路由

router.js
 routes: [
    {
      path: '/',
      redirect: '/dashboard'
    },
//左右佈局
    {
      path: '/',
      component: resolve => require(['../page/Main.vue'], resolve),
      meta: {title: '自述文件'},
      children: [
        {
          path: '/dashboard',
          component: resolve => require(['../tag/Dashboard.vue'], resolve),
          meta: { title: '首頁' }
        },
        {
          path: '/user',
          component: resolve => require(['../tag/Reigster.vue'], resolve),
          meta: { title: '註冊用戶' }
        }
      ]
    },
//全頁面
    {
      path: '/login',
      component: resolve => require(['../page/Login.vue'], resolve)
    }
  ]

app.js

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

main.js

<template>
  <div class="wrapper">
    <vHead/>
    <vSidebar/>
    <div class="content-box" :class="{'content-collapse':collapse}">
      <v-tags></v-tags>
      <div class="content">
        <transition name="move" mode="out-in">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

C語言實現的json解析程序

只有一個頭文件和一個源文件，僅使用C語言標準庫。 作用就是讀取json文件，然後解析爲若干個互相關聯的結構，結構如下： typedef enum json_st { djson_string = 1, djson_number,

lindorx 2020-07-08 10:35:53

Pytorch垃圾分類搭建CNN模型中遇到的坑

背景就是利用pytorch進行圖形分類處理，採用的是cnn算法，在使用過程中碰到了一些小麻煩。 1、在對圖片進行壓縮時的報錯，報錯形式爲： raise ValueError("empty range for randrange() (%

wxfu2010 2020-07-08 09:59:08

項目中權限分配使用到的位運算

原因：  某一模塊的權限太多，如對客戶的權限 ， 增刪改查就是四個權限，就是四個權限字符串與之對應。   解決方案：    增 2 ，刪 4 ， 改 8 查 16 對應二進制爲 2：10  4：100 8：1000 16：10000  

JAVAWeb小将 2020-07-08 09:13:30

Maven相關問題彙總

maven中的${project.groupId} 和 ${project.version} 表示當前項目的groupId和版本。

JAVAWeb小将 2020-07-08 09:13:30

重學計算機基礎計劃

大學畢業一年、高中畢業五年矣。大學所學，幾近忘光，愧對老師們曾經的教導，於是突發奇想，想重新學習計算機基礎，並寫blog以此鞭策自己。重學的計算機基礎內容包括但不限於以下內容： 1. 數據結構與算法 2. 編程語言 3. 操作系統 4. 

keeper42 2020-07-08 06:15:20

ElasticSearch使用教程四(ElasticSearch查詢詳解)

一、簡介說明 注意：以下命令都是使用sense測試(ElasticSearch第二步-CRUD之Sense)，且數據都已經使用過IK分詞。 以下測試數據來源於文檔(db_test/person) 需要注意的是下面的id是文檔的ID，

ilifee 2020-07-08 04:10:56

143. Reorder List學習

143. Reorder List Total Accepted: 71015 Total Submissions: 301125 Difficulty: Medium Given a singly linke

ilifee 2020-07-08 04:10:45

SpringBoot項目部署到linux服務器

進行了這麼長時間SpringBoot項目開發，今天想系統的總結一下項目部署到linux服務器的流程，並在上一篇介紹了linux環境的準備與搭建，SpringBoot項目部署到linux服務器之環境搭建，這篇記錄一下從git上拉取項

科比333 2020-07-08 02:35:43

SpringCloud Stream 整合 RabbitMQ-消費失敗後重試

上一篇完成SpringCloud Stream整合RabbitMQ： SpringCloud Stream整合RabbitMQ，沒有進行任何配置，本篇記錄一下消息消費失敗後重試配置。 在程序開發過程中難免會出現各種奇葩異常，假如當

科比333 2020-07-08 02:35:43

Nacos(三)-Nacos Spring Cloud-配置中心

前兩篇記錄了下載安裝nacos、使用nacos作爲註冊中心： Nacos(一)-下載安裝 Nacos(二)-Nacos Spring Cloud-註冊中心 本篇記錄使用nacos作爲配置中心，並通過配置頁面修改配置進行動態刷新

科比333 2020-07-08 02:35:43

SpringCloud Stream 整合RabbitMQ

本篇簡單介紹SpringCloud Stream 整合RabbitMQ基本步驟： 引入SpringCloud 引入SpringCloud Stream相關依賴 定義綁定接口: 消息生產者(Output…Binding) 、消息消

科比333 2020-07-08 02:35:43

Nacos(二)-Nacos Spring Cloud-註冊中心

上一篇記錄了下載安裝nacos Nacos(一)-下載安裝 本篇記錄使用nacos作爲註冊中心，並註冊服務提供者、服務消費者進行調用演示。 一、項目介紹 本次創建一個項目nacos,其中包含兩個Module: service

科比333 2020-07-08 02:35:43

SpringBoot項目部署到linux服務器之環境搭建

進行了這麼長時間SpringBoot項目開發，今天想系統的總結一下項目部署到linux服務器的流程，這一篇記錄一下linux環境準備與搭建(linux環境裝在本機的虛擬機中） 。 一、軟件準備 虛擬機：VirtualBox 下

科比333 2020-07-08 02:35:43

Java知識點——Stream流

Stream 1. Stream流 1.1. Stream流引入 Stream流完全不是I/O流，按照流水線處理方式來考慮代碼中的思想。 JDK1.8 之後，我們擁有了Lambda表達式，讓代碼的中心偏向解決實際問題，直到重點

青柠小鱼码字猴 2020-07-08 03:45:43

leveldb數據庫的put ,get ,compaction操作總結

之前排查智能合約執行返回0x的問題，涉及到數據庫部分的內容，就把leveldb的3個主要操作介紹一下。 在此之間先介紹下leveldb中的文件類型。 文件類型 文件類型總共有5種：log, ldb, CURRENT, MANIF

刘小京 2020-07-08 03:15:20