基于java SpringBoot和Vue UniAPP的头条新闻手机软件设计

        大家平时经常使用新闻类APP进行资讯浏览，但是怎样用代码实现一个新闻APP呢？常用的移动端开发一般分为两大类，一类是原生APP开发，比如谷歌的那一套技术，android studio作为开发工具，使用java或kotlin的语法。另一类是第三方的框架，比如Flutter或者uni-app。

        今天介绍的就是使用uni-app发开一个新闻手机软件。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

 

实现的功能

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

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

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

 

用到的技术

后端是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>

<script>
	import appRequest from "@/common/appRequestUrl.js";
export default {
	data() {
		return {
			user:"",
			hotTitle: "热搜：热搜内容标题",
			searchText:"",
			active: "",
			tName:"最新",
			tabs: [
				{ label: "最新", name: "" }
			],
			list: [
				
			],
			hotTime: "15:09",
			open: require("@/static/icon/publish.png"),
			visible: false,
			publish: [
				{ icon: require("@/static/icon/publish1.png"), name: "创建文章" }
			],
		};
	},onLoad() {
		
	},onShow() {
		this.user = appRequest.getUserInfo();
		this.getType();
		this.getData();
	},
	methods: {
		activeTab(name){
			var _this = this;
			this.tabs.map(function(item,index){
				if(item.name == name){
					_this.tName = item.label;
				}
			});
			this.getData(name);
		},
		getData(type){
			var _this = this;
			appRequest.request({
				method: "POST",
				url: appRequest.urlMap.findNmArticleList,
				data:{
					validFlag:1,
					type:type,
					title:this.searchText
				},
				success: function(res) {
					if (res.data.code == 200) {
						let data = res.data.data;
						_this.list = data;
						console.log(JSON.stringify(data));
					}else{
						uni.showToast({
							title:"获取失败",
							icon:"none"
						})
					}
				},
				fail: function(res) {
					uni.showToast({
						title:"网络异常",
						icon:"none"
					})
				}
			})
		},
		getType(){
			var _this = this;
			appRequest.request({
				method: "POST",
				url: appRequest.urlMap.findNmInfoTypeList,
				data:{
					validFlag:1
				},
				success: function(res) {
					if (res.data.code == 200) {
						let data = res.data.data;
						data.map(function(item,index,arr){
							_this.tabs.push({ label:item.typeName , name: item.tid });
						})
					}else{
						uni.showToast({
							title:"获取失败",
							icon:"none"
						})
					}
				},
				fail: function(res) {
					uni.showToast({
						title:"网络异常",
						icon:"none"
					})
				}
			})
		},getPicUrl(info) {
			if(info){
				if( info.length > 10 ){
					return info;
				}else {
					return appRequest.urlMap.getPicById + info;
				}
			}else {
				return "";
			}
		
		},
		toSearch() {
			uni.navigateTo({
				url: "/pages/search/index",
			});
		},
		toDetail(item) {
			uni.navigateTo({
				url: "/pages/news/detail?id="+item.id,
			});
		},
		onOpen() {
			this.visible = true;
		},
		toPublish() {
			this.visible = false;
			uni.navigateTo({
				url: "/pages/publish/index",
			});
		},
		toMessage() {
			uni.navigateTo({
				url: "/pages/message/index",
			});
		},
	},
};
</script>

演示视频

基于java和UniAPP的手机头条新闻软件设计