前端开发笔记

常用网站或相关文件

阿冰&老黄系统初始版本

后端源码：

http://gogs.egberthuang.com:3000/h681623456/laravel-base.git

搭载平台：

phpstudy

开发软件：

phpstorm || nodpa++

GIT 提交流程

基本流程

git init         // 初始化

git add .        // 将文件添加到本地代码仓库

git remote add origin 仓库地址        // 绑定远端仓库地址

git remote set-url origin 仓库地址        // 如果填错了使用set-url 修改

git commit -m "msg"        // 可以理解为推送版本-方便辨别

git push origin master        // 推送分支 确保远端有分支

如果是第一次提交报错可以直接强制推送

git push -f origin master

如果是本地项目可能会报错-踩坑

当你报错这个的时候，运行下面的git代码

hint: Your push was rejected due to missing or corrupt local objects.
hint: You can disable this check with: `git config lfs.allowincompletepush true`

git config lfs.allowincompletepush true

1、基础部分

1-1 flex 弹性布局

基础属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction 为盒内元素的排列方向。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

他有四个基础属性

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

rew 从左到右水平排列

row-reverse 从右到左水平排列

column 从上到下垂直排列

column 从下到上垂直排列

row（行）column（列） reverse（逆转）

flex-wrap 为换行方式

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap 为不换行（默认属性）

wrap 为第一行在上，第二行在下的换行方式（至上而下）

wrap-reverse 为换行后第一行在下（至下而上）

justify-content 为对齐方式

2、封装好的常用组件||方法

获取后台带分页数组

uni-app中的写法

// 注意不可直接使用!!!!!
// html
<view v-if="rankList.length == 0">
	<view class="empty-box">
        
		<image :src="imgHost + '/statics/images/empty-box.png'"></image>
		<view class="txt">{{loadTitle|| $t(`暂无记录`)}}</view>
	</view>
	<emptyPage v-if="!loading" :title="$t(`暂无排名~`)"></emptyPage>

	<view class="loadingicon acea-row row-center-wrapper">
	    <text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
	</view>
</view>

// css
<style>
	.empty-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		
	}
    .empty-box image{
		width: 414rpx;
		height: 240rpx;
	}
	.empty-box .txt{
		font-size: 26rpx;
		color: #999;
	}
</style>

// 引入占位页面组件
import emptyPage from '@/components/emptyPage.vue';

// export default 中的内容
components: {
	emptyPage
},

// data中存放
data() {
    return {
	    active: 0,
		rankList: [],
	    page: 1,
		limit: 20,
		loadend: false,
		loading: false,
		loadTitle: this.$t(`加载更多`)
	};
},

methods: {
    // 方法调用
    getBrokerageRankList: function() {
        if (this.loadend) return;
	    if (this.loading) return;
	    this.loading = true;
	    this.loadTitle = '';
	    getBrokerageRank({
		    page: this.page,
		    limit: this.limit,
	    }).then(res => {
	        let list = res.data.rank;
	        let loadend = list.length < this.limit;
	        this.rankList.push.apply(this.rankList, list);
	        this.loading = false;
	        this.loadend = loadend;
	        this.loadTitle = loadend ? this.$t(`我也是有底线的`) : this.$t(`加载更多`);
	        this.$set(this, 'rankList', this.rankList);
	        this.position = res.data.position;
	        this.page += 1
	    }).catch(err => {
		    this.loading = false;
		    this.loadTitle = this.$t(`加载更多`);
	    })
    }
}
</script>

时间戳转时间

// 时间戳处理
formatDate: function(value,spe='/') {
	value = value*1000
    let data= new Date(value);
	let year = data.getFullYear();
	let month = data.getMonth() + 1;
    let day = data.getDate();
	let h = data.getHours();
	let mm = data.getMinutes();
	let s = data.getSeconds();
	month = month > 10 ? month : "0" + month;
	day = day > 10 ? day : "0" + day;
	h = h > 10 ? h : "0" + h;
	mm = mm > 10 ? mm : "0" + mm;
	s = s > 10 ? s : "0" + s;
	return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
}