前端大作业-仿手机QQ

简介

此程序是本人大三时期的前端工程大作业,初学前端三件套(HTML、CSS、JavaScript)和Vue后所编写的一个程序,是一个仿手机QQ网页,以前端网页的形式实现手机QQ基本界面和功能。

本程序是一个仿手机QQ单页面应用,使用Vue3框架设计开发,使用Vue项目脚手架(@vue/cli)进行搭建,代码编辑器使用Visual Studio Code,在项目中还使用了Vue的相关插件,如:Vue-Router等,此外还使用了Vant和FrozenUI两个UI库。

本程序的图形素材均从手机QQ截图并抠图而来,所以界面模仿得十分相似,程序实现了手机QQ的基础界面,以及部分基本功能,但由于时间问题实则偷懒 ,所以并没有实现后端功能,仅实现了前端界面,功能也均由前端实现。

本文章主要展示各个界面及功能,详细代码及细节,请下载程序进行了解,程序下载后,请进入cmd命令行终端并切换至程序根目录,输入“npm install”安装相关依赖,再输入“npm run serve”即可运行程序。

程序源代码及程序设计说明书可点击下方链接进行下载,供各位需要的人学习参考。

下载链接:仿手机QQ

目录

  • 简介
  • 页面简介
  • 页面展示
    • 欢迎页面(启动页)
    • 登录页面
    • 消息页面
    • 会话页面
    • 联系人页面
    • 个性名片页面
    • 动态页面
    • 侧边功能页面
  • 代码展示
    • 项目入口文件index.html
    • 程序入口文件main.js
    • 组件入口文件App.vue
    • 路由router
    • 其他
  • 后记


页面简介

本项目的主要页面共有8个,包括:欢迎页面、登录页面、消息页面、联系人页面、动态页面、会话页面、个性名片页面、侧边功能页面,各页面概述如下。

  1. 欢迎页面:用于“欢迎”用户,实际上是该APP的启动页,3秒后跳转至登录页面。
  2. 登录页面:输入QQ号和密码进行登录,由于本项目暂未实现后端功能,仅实现前端页面功能,故采用账号密码写死在程序代码中的方式,模拟登录功能。
  3. 消息页面:展示消息列表,点击任一条后可进入与好友聊天的会话页面。
  4. 联系人页面:展示好友列表、群聊列表等,点击任意好友后可查看该好友的个性名片。
  5. 动态页面:展示QQ中的各种功能,如:好友动态、游戏中心等。
  6. 会话页面:与某一好友聊天的页面,可输入消息,由于不涉及后端,故具体聊天功能暂未实现。
  7. 个性名片页面:展示用户各自的名片,名片内容包括用户的头像、昵称、QQ号等各种信息,亦可点击图片查看大图。
  8. 侧边功能页面:在主页面点击顶部栏的头像后可打开侧边功能页面,展示一些QQ功能列表及部分QQ信息,在此点击头像后可查看“我的个性名片”。

页面展示

本项目共有8个主要页面,接下来展示各页面的运行测试结果,在此仅展示主要功能,其他细节部分请至文章开头处下载程序,进行体验。

欢迎页面(启动页)

启动项目,首先来到的就是欢迎页面,即启动页,该页面展示3秒后将自动跳转至登录页面。

前端大作业-仿手机QQ_第1张图片

登录页面

跳转到登录页面后,需输入QQ号和密码(均为“123456”)并点击下方按钮进行登录,未输入QQ号或密码则在文本框下方会相应提示,QQ号或密码错误则会在顶部提示错误,登录成功则会跳转至主页面-消息页面。

前端大作业-仿手机QQ_第2张图片 前端大作业-仿手机QQ_第3张图片 前端大作业-仿手机QQ_第4张图片

消息页面

消息页面展示消息列表,点击任一条后可进入与好友聊天的会话页面,消息、联系人、动态页面下拉可进行刷新,点击顶部栏的“+”按钮会出现气泡弹出框,点击底部栏的标签可切换至其他页面,此外消息列表中的每一条都可左滑出现“置顶”和“删除”按钮

前端大作业-仿手机QQ_第5张图片 前端大作业-仿手机QQ_第6张图片
前端大作业-仿手机QQ_第7张图片 前端大作业-仿手机QQ_第8张图片

会话页面

在消息页面点击任意一条消息后都可进入与好友聊天的会话页面,亦可在好友的个性名片中点击“发消息”按钮进入。

前端大作业-仿手机QQ_第9张图片

联系人页面

联系人页面中有四个分页,好友、分组、群聊、设备,分组和群聊中还有折叠面板,可展开查看好友或群聊,点击好友后可查看该好友的个性名片。

前端大作业-仿手机QQ_第10张图片 前端大作业-仿手机QQ_第11张图片

个性名片页面

个性名片页面展示好友的详细信息,此页面中点击头像或精选照片中的照片可查看大图,点击“发消息”按钮可发起与好友的聊天。

前端大作业-仿手机QQ_第12张图片 前端大作业-仿手机QQ_第13张图片

动态页面

动态页面仅简单的展示展示QQ中的各种功能,如:好友动态、游戏中心等。

前端大作业-仿手机QQ_第14张图片

侧边功能页面

在主页面(消息、联系人、动态)点击顶部栏的头像后,会跳转至侧边功能页面,展示一些QQ功能列表及部分QQ信息,在此点击头像后可查看“我的个性名片”。

前端大作业-仿手机QQ_第15张图片 前端大作业-仿手机QQ_第16张图片

代码展示

本程序代码较多且有详细注释,在此仅展示部分重要代码,完整代码请至文章开头处下载程序,进行了解。

项目入口文件index.html

index.html是项目的入口文件,主要声明了网站的头部信息,引入相应资源等。body仅为一个div,其挂载了Vue应用实例。

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Mobile_QQtitle>
    <link rel="icon" href="favicon.ico">
    
    <link rel="stylesheet" href="./css/FrozenUI.css"/>
  head>
  <body>
    <div id="app">div>
  body>
html>

程序入口文件main.js

main.js是程序的入口文件,主要完成UI库组件和路由的导入,创建应用实例,并挂载。

import { createApp } from 'vue'
import { Toast, Button, Form, Field, CellGroup, NavBar, Icon, Image as VanImage,
    Tabbar, TabbarItem, Popover, SwipeCell, Cell, Tag, Search, PullRefresh, Tab, Tabs,
    Collapse, CollapseItem, IndexBar, IndexAnchor, Row, Col } from 'vant'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(Toast);
app.use(Button);
app.use(Form);
app.use(Field);
app.use(CellGroup);
app.use(NavBar);
app.use(Icon);
app.use(VanImage);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Popover);
app.use(SwipeCell);
app.use(Cell);
app.use(Tag);
app.use(Search);
app.use(PullRefresh);
app.use(Tab);
app.use(Tabs);
app.use(Collapse);
app.use(CollapseItem);
app.use(IndexBar);
app.use(IndexAnchor);
app.use(Row);
app.use(Col);
app.use(router);
app.mount('#app');

组件入口文件App.vue

App.vue是组件的入口文件,是一个根组件,该组件被用作渲染的起点,其他的所有组件都将被渲染至此。

<template>
  <div id="app">
    <router-view>router-view>
  div>
template>

<script>
export default {
  name: 'app'
}
script>

<style>

style>

路由router

本项目使用到了Vue-Router技术,根据不同的路由渲染不同的组件,首先定义路由存放至routes中,再用createRouter方法创建路由实例router并传递routes配置,最后将路由实例router导出供main.js文件使用。

import { createRouter, createWebHashHistory } from 'vue-router'
import WelcomeView from '../views/WelcomeView.vue'
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'
import MessageCom from '../components/MessageCom.vue'
import FriendsCom from '../components/FriendsCom.vue'
import DiscoverCom from '../components/DiscoverCom.vue'
import CardView from '../views/CardView.vue'
import DialogView from '../views/DialogView.vue'
import SideView from '../views/SideView.vue'

const routes = [
  { path: '/', redirect: '/welcome' },
  { path: '/welcome', name: 'welcome', component: WelcomeView },
  { path: '/login', name: 'login', component: LoginView },
  { path: '/home', name: 'home', component: HomeView, 
    children: [
      { path: 'message', component: MessageCom, meta: {keepAlive: true} },
      { path: 'friends', component: FriendsCom, meta: {keepAlive: true} },
      { path: 'discover', component: DiscoverCom }
    ]
  },
  { path: '/card', name: 'card', component: CardView },
  { path: '/dialog/:name', name: 'dialog', component: DialogView },
  { path: '/side', name: 'side', component: SideView }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

其他

本项目共编写了11个自定义组件,包括:TopBar、BottomBar、MessageCom、FriendsCom、DiscoverCom、WelcomeView、LoginView、HomeView、DialogView、CardView、SideView,其中view组件属于页面级别组件,构成了一个个页面。该部分内容较多,在此不展示代码,完整程序代码请至文章开头处下载,进行了解。

后记

本程序仅供学习和参考,请勿抄袭或另作他用。

感谢观看,有什么问题可在下方评论区进行评论,若觉得本文章写得不错,还请点个赞呢。

关注我,收看更多精彩!( • ̀ω•́ )✧求点赞、评论、收藏、关注

你可能感兴趣的:(大作业(课程设计),前端,html,css,javascript,vue.js)