原创

基于java SpringBoot和Vue UniAPP的头条新闻手机软件毕业设计,附源码

实现的功能

分为管理员和普通用户两种角色,普通用户可以自行注册账号,有图片验证码;

普通用户:搜索、查看、点赞、收藏、评论头条新闻、查看评论回复和收藏等信息、与人工智能机器人聊天、修改个人信息等;

管理员:除普通用户的功能以外,还包括评论管理、文章管理、分类管理等。

用到的技术

后端是java语言的SpringBoot框架,MySql5.7或8数据库,Maven依赖管理;

前端是Vue.js语法的UniApp框架。

部分代码展示

<template>
    <view class="page-home">
        <view class="search">
            <view class="input" @tap="toSearch">
                <cl-input prefix-icon="cl-icon-search" :placeholder="hotTitle"></cl-input>
            </view>
            <image src="/static/icon/message.png" @click="toMessage" />
        </view>
        <cl-sticky is-topbar>
            <view class="tabs">
                <cl-tabs
                    v-model="active"
                    :labels="tabs"
                    justify="start"
                    unColor="#999999"
                    show-dropdown
                    :border="false"
                    @tab-change="activeTab"
                >
                </cl-tabs>
            </view>
        </cl-sticky>
        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @tap="toDetail(item)">
                <view class="det">
                    <view class="title">
                        <cl-text
                            :value="item.title"
                            color="#000000"
                            :size="32"
                            :ellipsis="2"
                        ></cl-text>
                    </view>
                    <view class="count">
                        <view class="is-top" >{{tName}}</view>
                        <!-- <view class="count-item">{{ item.comment }}评</view> -->
                        <view class="count-item">{{ item.createTime }}</view>
                    </view>
                </view>
                <view class="cover">
                    <image :src="getPicUrl(item.pic1)" mode="" />
                </view>
            </view>
        </view>
        <!-- <view class="hot">
            <view class="hot-head">
                <view class="tag">热点</view>
                <cl-text :value="`实时更新于${hotTime}`" color="#999999" :size="22"></cl-text>
            </view>

            <view class="hot-list">
                <view class="item" v-for="(item, index) in hot" :Key="index">
                    <cl-text
                        :value="item.title"
                        color="#333333"
                        :size="36"
                        :margin="[0, 0, 30, 0]"
                        :ellipsis="1"
                    ></cl-text>
                </view>
            </view>
        </view> -->
        <view class="publish">
            <view class="open" @tap="onOpen">
                <image :src="open" />
            </view>
            <view class="popup">
                <cl-popup :visible.sync="visible" size="90%" :padding="36" direction="center">
                    <view class="publish-list">
                        <view
                            class="item"
                            v-for="(item, index) in publish"
                            :key="index"
                            @tap="toPublish"
                        >
                            <view class="icon">
                                <image :src="item.icon" mode="aspectFit" />
                            </view>
                            <view class="name">
                                {{ item.name }}
                            </view>
                        </view>
                    </view>
                </cl-popup>
            </view>
        </view>
    </view>
</template>

演示视频链接

源码链接

正文到此结束
本文目录