网站设计与开发大作业：设计自己的个人网站

一、大作业内容

二、大作业目的

本次大作业的目的是让学习者通过练习前端工程化、Vue代码编写以及网站设计，提升学生前端能力。

熟悉前端工程化概念，了解前端工程化的基本概念、原则和工具。他们将学会使用构建工具、包管理器和版本控制系统等工具来优化开发流程、提高代码质量。

掌握Vue框架的使用，学习如何使用Vue框架进行前端开发。了解Vue的基本概念、核心特性和常用工具，以及如何构建可维护和可扩展的Vue应用程序。

提升网站设计能力，我们将学习网站设计的基本原则和实践。了解个人网站界面设计原则、响应式设计和优化访客体验的方法，并学会使用HTML、CSS和JavaScript前端三门主要技术来实现网站设计。

通过完成本次大作业，使我们能熟练应用前端工程化工具，掌握Vue框架的使用，以及具备设计和实现网站的能力。为前端开发领域的职业发展和项目实践打基础。同时，通过实践和反思，不断提高自己的问题解决和创新能力。

三、大作业制作过程

1、个人网站设计与排版

首先是设计我的个人网站并进行排版：

在网站内容上我准备了以下五个栏目：

1. 首页：介绍这是谁的网站并放置我的生活剪影轮播图。
2. 社会实践：介绍我大一暑期组织的三下乡，展示实践图集和实践视频。
3. 我的家乡：介绍我的家乡：古都大同。
4. 关于我：介绍我的基本情况，包括教育经历、学习情况和人生信条。
5. 联系我：在这个栏目中，我留下了我的联系方式并放置了一个访客留言板。

在代码角度我编写了六个页面、两个组件：

两个组件：

页眉组件：包括网页Logo和栏目跳转链接以及覆盖整个页面的下雨特效。

页脚组件：灰色，起到装饰作用。

六个页面：

上述五个栏目的具体页面+404页面。

2、页面实现与关键代码分析

接下来结合代码逐个分析：

首先是存在于整个Vue生命周期的App.vue：

<template>

  <div id="app">

    <Header/>

    <router-view/>

    <Footer/>

  </div>

</template>

可以看到每个页面呈现的逻辑就是 ： 页眉+切换页内容+页脚

<script>

import Header from './components/Header.vue'

import Footer from "./components/Footer.vue"

export default {

  components:{

    Header,

    Footer,

  },

}

</script>

在浏览器中header和footer组件一直存在于页面中，每当路由更换，<router-view/>负责呈现每个栏目的具体内容。

下面是我的路由配置，router文件夹下的index.js,这里是六个页面的路由，其中如果页面url与routes的前五个路由都不匹配，会跳转到404.vue页面。

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

    {

        path: '/',

        redirect: '/home'

    },

    {

        path: '/home',

        name: 'home',

        component: () =>

            import ('../views/HomeView.vue')  

    },

    {

        path: '/three',

        name: 'three',

        component: () =>

            import ('../views/three.vue')

    },

    {

        path: '/datong',

        name: 'datong',

        component: () =>

            import ('../views/datong.vue')

    },

    {

        path: '/about',

        name: 'about',

        component: () =>

            import ( '../views/AboutView.vue')

    },

    {

        path: '/contact',

        name: 'contact',

        component: () =>

            import ('../views/contact.vue')

    },

    {

        path: '/404',

        name: 'NotFound',

        component: () =>

          import('../views/404.vue')

      },

   

      {

        path: '*',

        redirect: '/404',

        hidden: true

      }

   

]

const router = new VueRouter({

    mode: 'history',

    base: process.env.BASE_URL,

    routes

})

export default router

*接下来是组件介绍：

Header.vue组件是页面的页眉（导航栏）

在模板中渲染并绑定了导航栏中每一个小li,并加以router-link :to="nav.url"路由跳转。

<li v-for="nav in navData" :key="nav.url">

    <router-link :to="nav.url">{ { nav.title}}</router-link>

</li>//循环渲染

<script>中的与其对应的数据是路由控制，

  data() {

    return {

      navData: [

        {

          title: "首页",

          url: "/",

        },

        {

          title: "社会实践",

          url: "/three",

        },

        {

          title: "我的家乡",

          url: "/datong",

        },

        {

          title: "关于我",

          url: "/about",

        },

        {

          title: "联系我",

          url: "/contact",

        },

      ]

    }

  },

在页面挂载时就实现全屏的下雨特效：

mounted() {

    const box = document.getElementById("rainBox");

    let boxHeight = box.clientHeight;

    let boxWidth = box.clientWidth;

    window.onresize = function () {

      boxHeight