pd星球前端_pd前端-CSDN博客

<div class="nav">
    <a class="nav-title" v-bind:class="{'nav-title-click':currentPage===item.url}"  v-for="(item, index) in menuList" :key="index"
           @click="menuClick(item.url)">
          {{ item.title }}
    </a>
</div>

margin和padding的区别体现

margin

盒子之内，内容之外

padding

盒子之外，用于设置两个盒子间的间距

设置border-radius，体现在盒子的角

富文本显示

实现效果

后台上传什么，网页就显示什么，例如空行、图片等。

代码实现

以实现换行为例

//html部分
<div class="textBody">
    <p v-html="SystemInfo.content"></p>
</div>

//JS部分，用'<br>'替换'\n'，实现换行
this.SystemInfo.content = this.SystemInfo.content.replace(/\n/g,'<br>')

图片保持长宽比显示，不做拉伸、压缩

实现效果

在不同大小的显示屏幕上，图片保持一定的长宽比显示，不做拉伸、压缩（即当上传图片大于显示区域时，显示部分图片）

代码实现

<div>
    <img src="img.url">
</div>

img{
 aspect-ratio: 404 / 316; //保持长宽比
 object-fit: cover; //不做变形
}

网格布局（内容溢出问题）

实现效果

每一行有n个（此处以3个为例），有m行。

代码实现

①通过 .grid-container的 display : grid 属性来设置为网格布局

②grid-item为网格布局中，每一个网格内容，通过 v-for循环 实现

③img的style设置是为保持图片显示时保持长宽比，不做拉伸、压缩，同时设置图片圆角

④img的style中，“width: 100%;aspect-ratio: 404 / 316; ”，可以使图片的高度根据图片长宽比，随宽度变化而变化（图片宽度与盒子宽度一致，而盒子宽度取决于显示大小以及列数，即grid-template-columns属性）

<div class="grid-container">
    <div v-for="(item, index) in dataTable" :key="index"
         class="grid-item">
      <img :src="item.img" style="margin-bottom: 4%;border-radius: 8px;width: 100%;aspect-ratio: 404 / 316;object-fit: cover">
      <div class="text">
        {{ item.text }}
      </div>
    </div>
</div>

.grid-container {
  display: grid; //网格布局
  grid-template-columns: repeat(3, 1fr); //3列，每列等宽
  grid-column-gap: 3%; //行间距
  grid-row-gap: 1.5%; //列间距
}
.grid-item {
  padding: 0px; /* 设置单元格内边距 */
  text-align: left; /* 设置文本靠左 */
}
.text{
  //此处文本显示效果自定义
  height: 20px;
  color: black;
}

分页符

实现效果

点击时，发送网络请求，获得页面显示内容。

代码实现

①整体由三种组件组成 ---> 上一页、数字页码、下一页

②上一页、下一页中，增加判断：当前页是否为第一页 / 最后一页

③数字页码：点击时修改样式（ :style="{......}" 实现）

④showProjects()为网络请求函数，获取当页显示内容数据

⑤在首次网络请求时获得总页数后，要创建一个数组，便于数字页码遍历显示

⑥Array.from({ length }, (_, i) => i + 1); ---> 创建一个长度为length，内容为1---length的数组

源于互联网：

Array.from() 是一个静态方法，用于将类数组对象或可迭代对象转换为一个新的数组实例。
{ length } 是一个具有指定长度的对象字面量，其中 length 是一个变量，表示数组的长度。
(_, i) => i + 1 是一个箭头函数，它接受两个参数（通常我们只关心第二个参数 i），并返回 i + 1。这个函数将被用作 Array.from() 的映射函数，用于填充新数组的元素。
当 Array.from() 方法调用时，它会遍历传入的对象（这里是 { length }），并对每个元素执行箭头函数。由于我们只关心索引 i，所以忽略第一个参数 _。箭头函数的结果会被用来填充新的数组。
因此，Array.from({ length }, (_, i) => i + 1); 会生成一个长度为 length 的数组，其中每个元素的值为其索引加 1。例如，如果 length 为 5，那么生成的数组将是 [1, 2, 3, 4, 5]。

<!--分页符-->
  <div class="pages">
    <button @click="prevPage"
            :disabled="currentPage === 1"
            class="pageChangeButton"><
    </button>
    <div v-for="(item,index) in createArray(this.totalPages)"
         :key="index"
         @click="page(item)"
         class="pageNumber"
         :style="{ margin: '1%', fontSize: '24px', backgroundColor: item === currentPage ? '#5A559C' : '#ffffff',
                   color: item === currentPage ? '#ffffff' : '#000000' ,width:'41px' , height:'41px'}">
      {{item}}
    </div>
    <button @click="nextPage"
            :disabled="currentPage === totalPages"
            class="pageChangeButton">>
    </button>
  </div>


    //指定页
    page(item){
      this.currentPage = item;
      this.showProjects();
    },
    //上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.showProjects();
      }
    },
    //下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.showProjects();
      }
    },
    //创建分页符的遍历数组
    createArray(length) {
      return Array.from({ length }, (_, i) => i + 1);
    },


.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 3%;
}
.pageChangeButton{
  background: none;
  width: 32.57px;
  height: 33.13px;
  border: 1px solid black;
  font-size: 150%;
  color: black
}
.pageNumber{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageChangeButton:hover{
  cursor: pointer;
}
.pageNumber:hover{
  cursor: pointer;
}

点击小手

实现效果

当鼠标移至可点击区域时，光标变小手（若可点击区域为div，光标默认是输入光标 “I” ）

代码实现

①鼠标悬浮时的样式 ---> XXX : hover （hover-->悬浮；XXX-->对应组件）

②cursor属性值：

基本光标样式

auto：浏览器会根据当前上下文自动选择光标样式。
default：默认光标，通常是一个箭头。
crosshair：光标呈现为十字线。
pointer：光标呈现为指示链接的手形图标。
move：指示对象可被移动的光标。
text：指示文本的光标。
wait：表示程序忙的光标，通常为沙漏或表。
help：指示可用的帮助，通常为问号或气球。

调整尺寸相关光标样式

n-resize：指示矩形框边缘可向上（北）移动。
s-resize：指示矩形框边缘可向下（南）移动。
e-resize：指示矩形框边缘可向右（东）移动。
w-resize：指示矩形框边缘可向左（西）移动。
se-resize：指示矩形框边缘可向下及向右（南/东）移动。
sw-resize：指示矩形框边缘可向下及向左（南/西）移动。
ne-resize：指示矩形框边缘可向上及向右（北/东）移动。
nw-resize：指示矩形框边缘可向上及向左（北/西）移动。

自定义光标样式

url('path/to/cursor.cur'), default：使用指定的.cur文件作为光标图案，如果加载失败，则使用默认光标。
url('path/to/cursor.png'), pointer：使用指定的.png文件作为光标图案，如果加载失败，则使用pointer光标

.nav-title:hover{
  cursor: pointer;
}

左右翻转显示

实现效果

代码实现

当index % 2 === 0为真时，即索引值为偶数时，会添加"reverse"类，进行翻转；否则，不会添加该类。

<div v-for="(item, index) in dataTable" :key="index"
     :class="{ reverse: index % 2 === 0}">
    ...
</div>

移动端打开vue

实现效果

在移动端打开vue项目，检查移动端适配情况

代码实现

具体见上一篇博客：WebStorm ---Vue项目使用移动端打开_webstorm显示移动端-CSDN博客

npm run serve -- --port 端口 --host 地址

跳转外部链接（网页版新建新页面）

实现效果

当点击图片后，跳转外部链接，网页版需要新建一个页面展示。此处若使用window.open()，移动端有时点击会没有反应，因此需要增加移动端的判断，并针对移动端使用window.location方法。

代码实现

通过获取浏览器的 userAgent 字符串，然后使用正则表达式来检查该字符串中是否包含特定的移动设备标识符。如果匹配成功，说明用户正在使用移动设备，返回 true；否则返回 false。

//判断是否为移动端，是移动端返回true
isMobile() {
    const userAgent = window.navigator.userAgent
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
},

//打开外部链接
if(this.isMobile()){
    window.location = this.clickLink;
}else {
    window.open(this.clickLink)
}

移动端适配（小菜版）

实现效果

在移动端打开，也是网页版的效果。

代码实现

①移动端适配一般使用rem等方法，此处因没有学习相关知识，改用限制最大、小宽度实现

②限制宽度，同时网页内大小用百分比表示，则显示时网页内容大小会根据宽度改变

.app{
  min-width: 1200px;
  max-width: 1500px;
}

网络优化

实现效果

网页基本完成后，发现某一板块页加载很慢，需要提高加载速度。

代码实现

①因为网页基本完成（主要也没学过怎么优化），增加了图片懒加载以及scripts增加了async属性

②async属性用于指定脚本的异步加载

HTML中的<script>标签通过设置async属性来指示浏览器该脚本可以被异步加载。这意味着浏览器在解析HTML文档时，会开始异步下载该脚本，但在下载完成后立即执行该脚本。这种异步下载和执行的方式可以显著提高页面加载性能，因为脚本的下载过程不会阻塞页面的其他部分的渲染。

<img loading="lazy" src="url">

<script async>
    ...
</script>

首页进入板块页面时，菜单栏对应动态变化

实现效果

首页点击不同区域进入不同板块页后，需要菜单栏对应动态变化

代码实现

//在板块页面，点击触发change-page事件，传递type参数
this.$emit('change-page', type);

handleChangePage(type){
    //修改当前页类型
    //菜单选项根据当前页类型动态变换样式
},

//监听change-page事件，事件处理中触发handleChangePage方法，更新当前页类型
<div class="main">
      <router-view @change-page="handleChangePage"></router-view>
</div>

部署服务器

要求

在本地widows电脑上远程控制Linux系统的服务器，并安装 jdk1.8、tomcat9、mysql8.0、redis、nginx 环境并配置相应文件。

具体实现

此处均为 ssh连接后使用命令行进行下载安装 ，还可以先将安装包下载至本地再使用winscp工具上传至目标服务器，再在服务器中进行安装。

后续对应具体文件配置至目标服务器中也使用winscp工具（可视化）。

        参考博客：

        Linux 下载安装 jdk1.8_jdk1.8linux下载-CSDN博客

        CentOS7 下载安装配置Tomcat 9（亲测可行）

        Linux安装mysql8.0（官方教程！）-CSDN博客

        CentOS 7下载安装Redis（超详细，亲测可行）_centos7 redis-CSDN博客

        文件传输工具WinSCP下载安装教程_winscp安装教程-CSDN博客