前端实习周记1---环境配置、静态页面、作品呈现页

一、环境配置

刚去公司实习，先配发了电脑，之后导师让自己先配置一下公司域网、配置VS、node、git环境

1、node安装

node一定要安装低一些的版本，下载地址: https://nodejs.org/en/。官网会有两个版本，工作要选择LTS版本（长期维护版）

但最开始建议安装较低版本的node，我当时安装了16.15.0node，结果公司的项目代码跑起来一堆报错，找了很久问题，问了下导师才发现问题，node版本太高，最后降为了10.4.1。node版本可以使用nvm来对版本进行管理控制。所以可以在最开始配置时先不要下载node，先安装nvm，然后用nvm来下载想要的node版本，这样方便管理切换。

2、Git

Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目

Git 各平台安装包下载地址为：http://git-scm.com/downloads

Git在我们自己学习过程中，可以去学习很多大神的博客，在工作中可以作为多个程序员共同代码维护的平台，你编写的代码、克隆工作项目代码都需要从上面操作，是很重要的平台。

Git的工作流程：

clone（克隆）Git资源作为工作目录（直接从Git上下载的资源，运行会出现一些报错，维护困难）
可以在clone（克隆）的资源上添加或修改文件
当其他人修改了时，我们可以更新资源
我们提交代码前可以查看修改
提交修改
在修改代码完成后，若发现错误，可以撤回提交并再次修改并提交

git的基本操作：

git init -初始化列表
git add -添加文件到暂存区
git commit - 将暂存区内容添加到仓库中
git status - 查看仓库当前状态，显示有变更的文件
git diff -比较文件的不同，暂存区和工作区的差异
git log -查看提交日志

二、静态页面

导师前两天给我了两个项目让我熟悉一些部门使用的框架，主要是以next.js 为主。第三天让我尝试去写一个报名页面。整个页面分为很多模块，头部导航栏可以迅速锚链接到指定模块，首页有一个提交按钮，其他都是布局相关的知识，刚去复习一下css也是很不错的，因为很久前学习的css，很多也没有实践，都记不清了。

静态页面图：

在布局过程中我遇到的问题是：

1、UI设计部给我的设计图纸是2560px的，而一些主要模块在整体布局中的宽度为1200px，当我按照这样去布局，将UI那边的图完全绘制完毕后，发现页面带上了左右滚动条，并不能窗口视图固定在1200px。

解决方法：在每个2560px的模块内再嵌套一个1200px的盒子，并让其水平居中，同时将2560px设置为width：100%，完美解决。

2、在多个垂直排列的div间有一个空隙

解决方法：在空隙下面的盒子上设置padding-top：1px，多少px都可以，只要有padding，上下两个盒子就会紧密贴合。

3、布局

布局这块知识真的多记一些，在做图时很方便

文字水平居中：在盒子中编写文字时，发现文字溢出盒子，或者不在盒子垂直方向的中间，可以试着设置line-height等于height，这样文字就不会溢出或不垂直居中了。

flex布局：弹性布局真的很实用，当要水平排列好多个盒子时，可以采用flex布局。

容器属性：

flex-direction：决定主轴的方向（项目的排列方向）

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

flex-wrap：弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行（这个在我写静态页面的时候真的太实用了，很多需要横向排版的盒子都可以使用这个属性来完成布局）

属性对应如下：

nowrap（默认值）：不换行
wrap ：换行，第一行在下方
wrap-reverse：换行，第一行在上方

默认情况是不换行，但这里也不会任由元素直接溢出容器，会设计到元素的弹性伸缩

justify-content：定义了项目在主轴上的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：两个项目两侧间隔相等

align-items

定义项目在交叉轴上如何对齐：

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

容器成员属性：

order：

定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item{  order:<integer> }

flex-grow：

当容器设为flex-wrap：nowrap；不换行时，容器的宽度有不够分的情况，弹性元素会根据flex-grow来决定定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink：

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

eg：若所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小；若一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

flex-basis：

设置的是元素在主轴上的初始尺寸，是元素flex-grow和flex-shrink生效前的尺寸，他可以设置跟width或height属性一样的值，则项目将占据固定空间

flex：

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为 0 1 auto，较难理解的属性

flex：1和flex：auto的区别，可归结为flex-basis：0和flex-basis：auto的区别

当设置为0时（绝对弹性元素），此时需要在伸缩时将元素尺寸纳入考虑

align-self：

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch

三、作品呈现页

这一块页面主要是：1、检测用户是否登录 2、从接口处获取用户数据 3、将获取的数据按照一定ui布局进行呈现。

检测用户是否登录时，直接在从接口处获取用户数据进行判断，若没获取到数据，则直接catch捕获异常，然后回调跳转至登录页面

页面呈现时，主要根据返回数据的状态进行判断和遍历，还是较简单的。