• 前端开发流程与技术选型

    目录

    一、简介

    二、前端职责

    三、开发步骤

    四、技术选型

    五、页面展示

    一、简介

    做一个网站时，能看到的一切都是前端程序员的工作，负责网页或者app的结构、样式、用户操作网站时的事件逻辑（比如点击一个按钮）。

    二、前端职责

    前端程序员工作职责：

            ①和产品经理沟通需求，按照产品经理要求完成相应功能。

            ②和UI设计师沟通样式，按照UI设计图还原样式。

            ③和后端协作，对接后端api接口进行调试，进行登录验证，以及根据用户操作数据的增删改查。

    三、开发步骤

    从0-1开发一个前端项目，我们需要经历11个步骤。

    具体步骤有：

    其中有几个步骤详细说明一下：

    四、技术选型

    前端目前主要使用的技术有：

            ①前端运行环境：Node.js（npm是Node.js的官方包管理工具）

            ②框架：Vue、React、Uniapp、微信原生小程序框架、bootstrap、Angular等

            ③结构：HTML

            ④样式：CSS、CSS预处理器（Scss、Less、Stylus）

            ⑤逻辑：JavaScript（ECMAScript、Bom、Dom）

            ⑥代码分布式存储工具：Git、远程库（Gitee、Github、阿里云、腾讯云）

            ⑦打包工具：Webpack、Vite

            ⑧调试工具：Chrome DevTools(谷歌浏览器调试工具，可以调试手机端电脑端)、微信开发者工具（用来调试微信小程序、企业微信小程序、小游戏）

            ⑨兼容性：电脑端（各种尺寸的电脑、各种厂家的浏览器的样式和方法）、手机端（Android、iOS、Harmony等手机系统的差异） 、响应式开发

            ⑩浏览器：谷歌（google chrome）、360、火狐（Firefox）、Microsoft Edge、Safari

    五、页面展示

    这是一个Web前端页面：

    使用Node.js环境、vue框架、Less（CSS预处理器）、谷歌浏览器展示。

    这是一个微信小程序页面：

    使用Node.js环境、Uniapp框架（vue3版本）、Scss（CSS预处理器）、微信开发者工具展示。

    这是相应前端代码：

    2.  
    3. <script setup>
    4.  
    5. import { reactive, toRefs, computed, onMounted, ref } from 'vue';
    6. import { useStore } from 'vuex';
    7. import { onLoad, onHide } from '@dcloudio/uni-app';
    8.  
    9. const store = useStore();
    10. const state = reactive({
    11. 	week: ['日', '一', '二', '三', '四', '五', '六'],
    12. 	currentYear: '',
    13. 	currentMonth: '',
    14. 	currentToday: '',
    15. 	// 0周日，1周一
    16. 	monthFirstDayCurrentWeek: '',
    17. 	monthFinallyDayCurrentWeek: '',
    18. 	//currentMonthAllDate里面是一个一个的对象 ，对象属性number当前日期，isPlan当天是否有计划，month是否是当前月里面的日期，因为要显示不同的样式。还以根据需要在添加其他属性。
    19. 	currentMonthAllDate: [],
    20. 	lastMonthDateNumber: 0,
    21. 	nextMonthDateNumber: 0,
    22. 	// showMonthOrWeek为true,代表显示周，false显示月
    23. 	showMonthOrWeek: true,
    24. 	currentTodayDate: '',
    25. 	initialX: '',
    26. 	currentMonthNum: ''
    27. });
    28. const {
    29. 	currentMonthNum,
    30. 	initialX,
    31. 	currentTodayDate,
    32. 	showMonthOrWeek,
    33. 	lastMonthDateNumber,
    34. 	nextMonthDateNumber,
    35. 	currentMonthAllDate,
    36. 	week,
    37. 	currentMonth,
    38. 	currentYear,
    39. 	currentToday,
    40. 	monthFirstDayCurrentWeek,
    41. 	monthFinallyDayCurrentWeek
    42. } = toRefs(state);
    43.  
    44. // 今天凌晨
    45. state.currentTodayDate = new Date(new Date(new Date().toLocaleDateString()).getTime());
    46.  
    47. /**
    48.  * 记录手指触碰初始位置
    49.  */
    50. const handleTouchStart = (event) => {
    51. 	state.initialX = event.changedTouches[0].clientX;
    52. };
    53.  
    54. /**
    55.  * 左右滑动事件
    56.  */
    57. const handleTouchEnd = (event, index) => {
    58. 	const currentX = event.changedTouches[0].clientX;
    59. 	if (currentX - state.initialX > 20) {
    60. 		//往右滑动，上个月
    61. 		state.currentTodayDate = state.currentMonth == 1 ? new Date(`${state.currentYear - 1}/12/1`) : new Date(`${state.currentYear}/${state.currentMonthNum - 1}/1`);
    62. 		getAllDatesOfCurrentMonth(state.currentTodayDate);
    63. 		return;
    64. 	}
    65. 	if (state.initialX - currentX > 20) {
    66. 		// 往左滑动，下个月
    67. 		state.currentTodayDate = state.currentMonth == 12 ? new Date(`${state.currentYear + 1}/1/1`) : new Date(`${state.currentYear}/${state.currentMonthNum + 1}/1`);
    68. 		getAllDatesOfCurrentMonth(state.currentTodayDate);
    69. 		return;
    70. 	}
    71. };
    72.  
    73. /**
    74.  * 选中哪天
    75.  */
    76. const selectedDate = (date) => {
    77. 	state.currentTodayDate = date;
    78. 	getAllDatesOfCurrentMonth(state.currentTodayDate);
    79. 	// 下面去后端请求计划数据，并展示
    80. };
    81.  
    82. /**
    83.  * 切换显示周还是月
    84.  */
    85. const changeShowWeekOrMonth = () => {
    86. 	state.showMonthOrWeek = !state.showMonthOrWeek;
    87. 	getAllDatesOfCurrentMonth(state.currentTodayDate);
    88. };
    89.  
    90. /**
    91.  * 得到当前月份/当前周的所有日期，dateData某天日期
    92.  */
    93. const getAllDatesOfCurrentMonth = (dateData) => {
    94. 	state.currentMonthAllDate = [];
    95. 	const today = new Date(dateData);
    96. 	state.currentToday = today;
    97. 	state.currentYear = today.getFullYear();
    98. 	state.currentMonthNum = today.getMonth() + 1;
    99. 	if (today.getMonth() + 1 < 10) {
    100. 		state.currentMonth = '0' + (today.getMonth() + 1);
    101. 	} else {
    102. 		state.currentMonth = today.getMonth() + 1;
    103. 	}
    104. 	// 上个月总天数
    105. 	const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
    106. 	state.lastMonthDateNumber = new Date(lastMonth.getFullYear(), lastMonth.getMonth() + 1, 0).getDate();
    107. 	// 下个月总天数
    108. 	const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
    109. 	state.nextMonthDateNumber = new Date(nextMonth.getFullYear(), nextMonth.getMonth() + 1, 0).getDate();
    110. 	const dates = [];
    111. 	// 用if,else判断显示周还是月
    112. 	if (state.showMonthOrWeek) {
    113. 		// 显示当前选中日期所在周
    114. 		let day = today.getDay();
    115. 		let startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - day);
    116. 		let endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - day + 6);
    117. 		let currentMonthTwo = today.getMonth() + 1;
    118. 		for (let i = startDate; i <= endDate; ) {
    119. 			let monthFlag = '';
    120. 			if (new Date(i).getMonth() + 1 == currentMonthTwo) {
    121. 				monthFlag = 'current';
    122. 			} else if (new Date(i).getMonth() + 1 > currentMonthTwo) {
    123. 				monthFlag = 'last';
    124. 			} else {
    125. 				monthFlag = 'next';
    126. 			}
    127. 			dates.push(new Date(i));
    128. 			state.currentMonthAllDate.push({ number: i.getDate(), month: monthFlag, date: new Date(i) });
    129. 			i.setDate(i.getDate() + 1);
    130. 		}
    131. 	} else {
    132. 		// 显示当前选中日期所在月
    133. 		const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    134. 		const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    135. 		state.monthFirstDayCurrentWeek = firstDayOfMonth.getDay();
    136. 		state.monthFinallyDayCurrentWeek = lastDayOfMonth.getDay();
    137. 		// 补充上个月显示在本月的天数，例如5.1是周三，则周日周一周二显示上个月
    138. 		if (state.monthFirstDayCurrentWeek != 0) {
    139. 			// 判断上个月是不是上一年
    140. 			let isLastYearNumber = lastMonth.getMonth() + 1 == 12 ? 1 : 0;
    141. 			for (let i = 0; i < state.monthFirstDayCurrentWeek; i++) {
    142. 				state.currentMonthAllDate.push({
    143. 					number: state.lastMonthDateNumber - state.monthFirstDayCurrentWeek + 1,
    144. 					month: 'last',
    145. 					date: `${state.currentYear - isLastYearNumber}/${lastMonth.getMonth() + 1}/${state.lastMonthDateNumber - state.monthFirstDayCurrentWeek + 1}`
    146. 				});
    147. 				state.lastMonthDateNumber++;
    148. 			}
    149. 		}
    150. 		for (let i = firstDayOfMonth; i <= lastDayOfMonth; ) {
    151. 			dates.push(new Date(i));
    152. 			state.currentMonthAllDate.push({ number: dates.length, month: 'current', date: new Date(i) });
    153. 			i.setDate(i.getDate() + 1);
    154. 		}
    155. 		if (state.monthFinallyDayCurrentWeek != 6) {
    156. 			// 判断下个月是不是下一年
    157. 			let yearNumber = nextMonth.getMonth() + 1 == 1 ? 1 : 0;
    158. 			for (let i = 0; i < 6 - state.monthFinallyDayCurrentWeek; i++) {
    159. 				state.currentMonthAllDate.push({ number: i + 1, month: 'next', date: `${state.currentYear + yearNumber}/${nextMonth.getMonth() + 1}/${i + 1}` });
    160. 			}
    161. 		}
    162. 	}
    163. 	return dates;
    164. };
    165. getAllDatesOfCurrentMonth(state.currentTodayDate);
    166.  
    167. // 可删除，做了几个假数据，假装几天有计划的,isPlan为true代表当天有计划。
    168. state.currentMonthAllDate[2].isPlan = true;
    169. state.currentMonthAllDate[4].isPlan = true;
    170. state.currentMonthAllDate[0].isPlan = true;
    171. script>
    172.  
    173. <style scoped lang="scss">
    174. .calendarbBox {
    175. 	width: 735rpx;
    176. 	margin-left: 7.5rpx;
    177. 	display: flex;
    178. 	justify-content: space-around;
    179. 	flex-wrap: wrap;
    180. 	.singleDay {
    181. 		width: 105rpx;
    182. 		height: 87rpx;
    183. 		line-height: 87rpx;
    184. 		color: #333;
    185. 		font-size: 32rpx;
    186. 		font-weight: bold;
    187. 		text-align: center;
    188. 		position: relative;
    189. 		.dayText {
    190. 			position: relative;
    191. 			z-index: 9;
    192. 		}
    193. 		.dayTextA {
    194. 			position: relative;
    195. 			z-index: 9;
    196. 			color: #fff;
    197. 			font-size: 32rpx;
    198. 			font-weight: bold;
    199. 			text-align: center;
    200. 		}
    201. 		.dayTextB {
    202. 			position: relative;
    203. 			z-index: 9;
    204. 			color: #e1e1e1;
    205. 			font-size: 32rpx;
    206. 			font-weight: bold;
    207. 			text-align: center;
    208. 		}
    209. 		.point {
    210. 			width: 12rpx;
    211. 			height: 12rpx;
    212. 			background-color: #00b498;
    213. 			position: absolute;
    214. 			top: 65rpx;
    215. 			left: 50%;
    216. 			transform: translate(-50%, 0);
    217. 			border-radius: 50%;
    218. 		}
    219. 		.selectedDayBGColor {
    220. 			width: 87rpx;
    221. 			height: 87rpx;
    222. 			background-color: #00b498;
    223. 			border-radius: 50%;
    224. 			position: absolute;
    225. 			top: 0;
    226. 			left: 9rpx;
    227. 		}
    228. 		.pointA {
    229. 			width: 12rpx;
    230. 			height: 12rpx;
    231. 			background-color: #fff;
    232. 			position: absolute;
    233. 			top: 65rpx;
    234. 			left: 50%;
    235. 			transform: translate(-50%, 0);
    236. 			border-radius: 50%;
    237. 		}
    238. 	}
    239. }
    240. .transitionTime {
    241. 	transition: transform 0.5s;
    242. }
    243. .arrowBox {
    244. 	width: 750rpx;
    245. 	height: 109rpx;
    246. 	line-height: 109rpx;
    247. 	position: relative;
    248. 	.arrowButtonRegion {
    249. 		width: 100rpx;
    250. 		height: 50rpx;
    251. 		line-height: 50rpx;
    252. 		@include fsc();
    253. 		position: absolute;
    254. 		left: 50%;
    255. 		top: 50%;
    256. 		transform: translate(-50%, -50%);
    257. 		background-color: #00b488;
    258. 		border-radius: 10rpx;
    259. 		color: #fff;
    260. 		font-size: 28rpx;
    261. 		text-align: center;
    262. 	}
    263. }
    264. .titleBox {
    265. 	width: 750rpx;
    266. 	height: 92rpx;
    267. 	background-color: #fff;
    268. 	position: relative;
    269. 	padding-bottom: 60rpx;
    270. 	.title {
    271. 		position: absolute;
    272. 		left: 30rpx;
    273. 		top: 25rpx;
    274. 		color: #333;
    275. 		font-size: 53rpx;
    276. 		font-weight: bold;
    277. 		text-align: left;
    278. 	}
    279. }
    280. .week {
    281. 	width: 750rpx;
    282. 	height: 39rpx;
    283. 	color: #999;
    284. 	font-size: 32rpx;
    285. 	font-weight: bold;
    286. 	text-align: left;
    287. 	display: flex;
    288. 	justify-content: space-around;
    289. 	margin-left: 7.5rpx;
    290. 	margin-bottom: 49rpx;
    291. }
    292. style>

  • 相关阅读:
    定时任务调度（crond）
    C++ 使用栈求解中缀、后缀表达式的值
    基于PHP的纺织用品商城系统
    R语言使用df函数生成F分布密度函数数据、使用plot函数可视化F分布密度函数数据(F Distribution)
    redis基础2——key的基础使用、五大数据类型和三大特殊数据类型
    Go实现日志2——支持结构化和hook
    汇川PLC编程软件AutoShop的使用
    C++ | Leetcode C++题解之第191题位1的个数
    机器学习（四）R平方和回归模型的评价
    Matplotlib 主要参数配置
  • 原文地址：https://blog.csdn.net/zxy19931069161/article/details/139836300