创新项目实训开发日志2

于 2025-04-04 11:56:40 发布
阅读量373 收藏 5
点赞数 5
分类专栏： 创新项目实训开发日志 文章标签： 前端 vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c335000/article/details/146996032
版权

一、开发简介

核心工作内容：优化前端框架，配置SCSS，配置Postman，开发DarkModeSlider组件

工作时间：第七周

二、规范代码风格

以下只介绍核心的代码规范，具体细节见CodeStyle.md

1.组件命名规范

使用大驼峰命名:	MyComponent.vue

2.vue文件结构顺序

<!--
 * @FileDescription: 该文件的描述信息
 * @Author: 该文件的作者
 * @Date: 该文件的创建时间
 * @LastEditors: 该文件的最后编辑者
 * @LastEditTime: 最后更新时间
 -->
 
<script>
// 脚本逻辑
</script>

<template>
  <!-- 模板内容 -->
</template>

<style>
/* 样式定义 */
</style>

3.注释规范

/**
  * @description: 方法描述
  * @param {参数类型} 参数名称
  * @param {参数类型} 参数名称
  * @return 没有返回信息写 void / 有返回信息 {返回类型} 描述信息
  */

三、SCSS 环境搭建

1.安装SCSS的依赖包

npm install --save-dev node-sass
npm install --save-dev sass-loader

2.SCSS文件架构规范化

  • 在assets目录创建styles文件夹
    • 创建index.scss
    • 创建_variables.scss
    • 创建_mixins.scss
  • 在vite.config.js中配置SCSS
//添加以下代码，全局导入
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @use "@/assets/styles/variables" as *;
        @use "@/assets/styles/mixins" as *;
        `,
      },
    },
  },

3.全局样式变量初始化

编写_variables.scss

// 全局样式变量
// 使用: color: $global-font-color;

$global-background-color:var(--global-background-color, #FFFFFF);// 背景颜色
$global-background-color-contrast:var(--global-background-color-contrast, #232323);// 背景颜色——补色

$global-font-color:var(--global-font-color, #232323);// 字体颜色
$global-font-color-contrast:var(--global-font-color, #FFFFFF);// 字体颜色——补色

4.常用的可复用样式块

编写_mixins.scss

// 混入——可复用样式块
// 使用: @include center-flex(column)


/**
 * @description: 使用 Flexbox 实现垂直水平居中（父容器需设置 display: flex）
 * @param {string} $direction: row 主轴方向（row|column）
 */
@mixin content-center-flex($direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}


/**
 * @description: 使用 Flexbox 实现元素在父容器中的居中布局
 * @param {string} $direction: 居中方向，可选值：
 *   - "row": 仅水平居中
 *   - "column": 仅垂直居中
 *   - "row,column" 或 "column,row": 同时水平和垂直居中
 */
@mixin position-center-box($direction: "row,column") {
  display: flex;


  // 检查是否包含 row（水平居中）
  @if str-index($direction, "row") {
    margin-left: auto;
    margin-right: auto;
  }

  // 检查是否包含 column（垂直居中）
  @if str-index($direction, "column") {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/**
 * @description: 严格限制元素尺寸（不会被内容撑开）
 * @param {number} $width - 严格宽度百分比（0~100）
 * @param {number} $height - 严格高度百分比（0~100）
 */
@mixin hold($width: null, $height: null) {
  // 严格宽度控制
  @if $width != null {
    width: #{$width * 1%};
    max-width: #{$width * 1%}; // 双重锁定
    overflow: hidden; // 防止内容溢出
  }

  // 严格高度控制
  @if $height != null {
    height: #{$height * 1%};
    max-height: #{$height * 1%}; // 双重锁定
    overflow: hidden; // 防止内容溢出
  }

  // 内容超出时显示滚动条（可选）
  @if $width != null or $height != null {
    overflow: auto;
  }
}

/**
 * @description: 文本溢出显示省略号
 * @param {number} $lines - 显示行数 (1为单行)
 */
@mixin text-ellipsis($lines: 1) {
  overflow: hidden;
  @if $lines == 1 {
    white-space: nowrap;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

/**
 * @description: 创建线性渐变背景
 * @param {string} $direction - 渐变方向 (to right|to bottom...)
 * @param {color} $colors... - 颜色列表 (最少2个)
 */
@mixin gradient-bg($direction: to right, $colors...) {
  background: linear-gradient($direction, $colors);
  // 兼容旧版浏览器
  background: -webkit-linear-gradient($direction, $colors);
}

/**
 * @description: 添加悬浮缩放动画
 * @param {number} $scale - 缩放倍数 (默认: 1.05)
 * @param {number} $duration - 动画时长 (默认: 0.3s)
 */
@mixin hover-scale($scale: 1.05, $duration: 0.3s) {
  transition: transform $duration ease;
  &:hover {
    transform: scale($scale);
  }
}

/**
 * @description: 生成多层阴影
 * @param {number} $level - 阴影层级 (1-5)
 */
@mixin shadow($level: 1) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  } @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  } @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19);
  } @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  } @else if $level == 5 {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
}

5.使用示例

<style lang="scss" scoped>
.card {
  @include content-center-flex;
  @include hold(99, 99);
  @include position-center-box("column,row");
  background-color: $global-background-color;
  color: $global-font-color;
}
</style>

四、配置Postman

1.创建Mock Server 

  • 新建一个Workspace
  • 新建一个Collection
  • 新建一个Mock server

2.定义API

  • 复制Mock server的url地址
  • 在Collection中添加request请求
  • 为请求添加example，并写入返回数据(JSON格式)
{
    "code": 0,
    "data": 30,
    "message":"success"
}

3.测试API

  • 更改vite.config.js
server: {
        proxy: {
            '/api': {//获取路径中包含了/api的请求
                target: "后台服务所在源",
                changeOrigin: true,//修改源
                rewrite: (path) => path.replace(/^\/api/, '')//'/api'替换成''
            }
        }
    }
  • 新建api/test.js并编写
import request from "../utils/request.js";


/**
 * @description: 测试Postman的后端是否能正常运行
 * @return {Promise<>} - 返回Promise
 */
export const testPostmanSever = () => {
    const url = `/getSeverData`;
    return request.get(url);
}
  • 测试
import {testPostmanSever} from "@/api/test";

/**
 * @description: 测试Postman的后端是否能正常运行
 * @return void
 */
const testPostmanSeverFunction = async () => {
  let result = await testPostmanSever();
  console.log(result)
}

testPostmanSeverFunction()
  • 启动项目，打开调试页面，查看运行结果

五、开发DarkModeSlider组件

1.新建组件

  • 新建文件components/DarkModeSlider.vue

2.编辑组件

<!--
 * @FileDescription: 白天模式与深色模式的切换
 * @Author: Nevertheless
 * @Date: 2025.4.4
 * @LastEditors: Nevertheless
 * @LastEditTime: 2025.4.4
 -->


<script setup>
import {ref} from "vue";

/**
 * 变量初始化
 * */
const dayOrNight = ref(false);
const baseColor = "#232323";
const contrastColor = "#FFFFFF";

/**
 * @description: 改变背景颜色
 * */
const changeBackground = () => {
  if (dayOrNight.value) {
    console.log("切换至夜晚");
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color', baseColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color-contrast', contrastColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-font-color', contrastColor);
    document.getElementsByTagName('body')[0].style.setProperty('$global-font-color-contrast', baseColor);
  } else {
    console.log("切换至白天");
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color', contrastColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color-contrast', baseColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-font-color', baseColor);
    document.getElementsByTagName('body')[0].style.setProperty('$global-font-color-contrast', contrastColor);
  }

}
</script>


<template>
  <span>
    <el-switch
        style="--el-switch-on-color: #2F2F2F; --el-switch-off-color: #F1F1F1"
        v-model="dayOrNight"
        active-text="晚上"
        inactive-text="白天"
        @change="changeBackground">
    </el-switch>
  </span>
</template>


<style scoped lang="scss">

</style>

3.测试组件

<!-- 模式切换——浅色/深色 -->
<dark-mode-slider></dark-mode-slider>

六、上传Gitee

git add 对应文件

git commit -m "工作描述"
git push

七、展望

  • 根据需求分析开发前后端交互的API
  • 根据页面设计开发网页组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值