若依分离版—移动端开发通知公告功能

前言：

本文是在若依-ruoyi-AiDex-Uniapp的开源代码基础上增加功能

移动端可直接下载开源源码若依-ruoyi-AiDex-Uniapp《https://gitee.com/big-hedgehog/ruoyi-uniapp》

（1）优点：实现了和若依分离版后端交互，实现了登录，修改密码。

（2）缺点：功能不全，若依的公告功能，用户管理等功能没有实现移动端

开发移动端公告功能

效果图如下：

   图1  通知公告栏                       图2  通知列表                                    图3 通知详情

 1. 通知公告栏跳转到通知列表（图1到图2）

    <view class="uni-media-list" @click="navTo('/pages/sys/msg/list-notice')"> 

2.新建 list_notice 通知列表页面

<template>
	<view class="wrap">
	<!--	<u-swiper :height="270" :list="imgList" :title="false" @click="imgListClick"></u-swiper>-->
		<scroll-view class="scroll-list msg-list-item" scroll-y="true">	

			<view class="uni-list-cell" v-for="(item, index) in noticeList" :key="index" @click="navTo(item)">
				<uni-view class="uni-media-list">
					<uni-view  class="uni-media-list-body">
						<uni-view class="uni-media-list-text-top"><span>{
   {item.noticeTitle}}</span></uni-view>
						<uni-view class="uni-media-list-text-bottom">
							<uni-text><span>{
   {item.createBy}}</span><span style="font-size: 26rpx;color: #999999;padding-left: 10px;">{
   {item.createTime}}</span></uni-text>
						</uni-view>
					</uni-view>
					<view class="personnel-user">
						<image class="list-images" src="/static/aidex/list/list1.jpg"></image>
					</view>
				</uni-view>
			</view>
            <u-divider>已经到底了</u-divider>
		</scroll-view>
	</view>
</template>
<script>
	 import HeadNavBar from '@/components/headnavbar/index';
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
	components: {
	  HeadNavBar
	},
	data() {
		return {
			keywords: '',
			imgList: [
				{image: '/static/aidex/banner/banner01.png'},
				{image: '/static/aidex/banner/banner02.png'}, 
				{image: '/static/aidex/banner/banner03.png'}
			],
			 // 总条数
			total: 0,
			noticeList: [],
			// 查询参数
			queryParams: {
			        pageNum: 1,
			        pageSize: 10,
			        noticeTitle: undefined,
			        createBy: undefined,
			        status: undefined
			      },
		};
	},
	onLoad() {
		this.$u.api.notice.listData().then(res => {
			 this.noticeList = res.rows;
			 this.total = res.total;
			 	if (res.code == '200' || res.code == '401')
			       this.$u.toast(res.code);
			});
		},
	methods: {
		navTo(row) {
			let noticeId = 0;
			if (row != 0) {			
			    noticeId = row.noticeId 
			}
			//alert(noticeId);
			uni.navigateTo({
				url: '/pages/sys/msg/form?noticeId='+noticeId
			});
			
			
		},
		search(value) {
			this.$u.toast('搜索内容为：' + value)
		}
	}
	
};

</script>
<style lang="scss">
@import '../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.msg-time{
	font-size: 26rpx;
	padding: 10px 0;
	color: #999999;
	text-align: center;
}
.u-card__foot{
	.u-icon{
		margin-right: 10px;
	}
}

.u-swiper-wrap{
	padding:0 10px;
}
.uni-media-list {
    padding: 10px 10px;

}
.uni-media-list-body {
    height: 40px;
	padding-left:20rpx;
	padding-top:10rpx;
}
.list-images{
	width: 70px;
	height:55px;
	margin-right: 8px;
}
</style>

3. 通知公告详情界面

修改form.vue

<template>
	<view class="wrap">
		<view class="article-title">{
   {form.noticeTitle}}</view>
		<view class="article-meta">
			<span>{
   {form.createBy}}</span> <span style="font-size: 26rpx;color: #999999;padding-left: 10px;">{
   {form.createTime}}</span></text>
		</view>
		<view class="article-content">
					<u-parse :html="form.noticeContent"></u-parse>
			<p>
			{
   {form.noticeContent}}
			</p>
		</view>
		<view class="article-foot"><u-icon name="eye" size="34" color="" label="30"></u-icon> <u-icon name="thumb-up" size="34" color="" label="15"></u-icon></view>
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
	data() {
		return {
			form : {
			    noticeId: undefined,
			    createBy: undefined,
			    noticeTitle: undefined,
			    createTime: undefined,
				noticeContent:  undefined
			},
		};
	},
	onLoad(option) {
		// 获取设备信息
		this.form.noticeId = option.noticeId;
		//alert(this.form.noticeId);
		this.$u.api.notice.getNotice(this.form).then(res => {
			 this.form = res.data;
			// alert(this.form.noticeId);
			 	if (res.code == '200' || res.code == '401')
			       this.$u.toast(res.code);
			});
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>
<style lang="scss">
	
page {
	background-color: #ffffff;
}
.article-title {
	font-size: 40rpx;
	font-weight: 400;
	text-align: left;
	padding-bottom: 10rpx;
	font-weight: bold;
	margin: 30rpx 30rpx 0;
	color: #333333;
}
.article-meta {
	padding: 10rpx 30rpx 30rpx;
	color: #999999;
	border-bottom: 1px solid #ededed;
}
.article-content {
	padding: 30rpx 30rpx 0rpx;
	overflow: hidden;
	font-size: 30rpx;
	line-height: 50rpx;
	/deep/ p {
		margin-bottom: 20rpx;
		text-indent: 60rpx;
	}
	.banner-pic{
		margin: 10px auto;
		text-align: center;
		uni-image{
			width: 300px;
			height: 160px;
			box-shadow:0 3px 10px rgba(0,0,0,0.15);
			
		}
	}
}
.article-foot{
	padding:0 30rpx 20rpx;
	font-size: 26rpx;
	color: #999999;
	.u-icon{
		margin-right: 10px;
	}
}


</style>

4. 修改manifest.json文件，解决富文本文件图片预览的问题

没有此配置，预览的图片的路径是/dev-api/profile/upload/2022/07/06/list1_1

加上配置后，预览图片的路径自动改为后端地址  http://127.0.0.1/profile/upload/2022/07/06/list1_1

配置完成后，一定要重新编译！！！！！！！

参考：uni-app解决跨域问题_闲人不梦卿的博客-CSDN博客_uniapp解决跨域问题

4.前端api增加

		notice:{
			listData:(params={})=>vm.$u.get(config.adminPath+'/system/notice/mobile/list',params),
			getNotice:(params={})=>vm.$u.get(config.adminPath+'/system/notice/mobile',params),
		},

5.后端代码增加

  /**
     * 获取通知公告列表
     */
    @GetMapping("/mobile/list")
    public TableDataInfo mobilelist(SysNotice notice)
    {
        startPage();
        List<SysNotice> list = noticeService.selectNoticeList(notice);
        return getDataTable(list);
    }
    /**
     * 获取单个公告
     */
    @GetMapping("mobile")
    public AjaxResult getMoblieNotice(SysNotice notice)
    { // Long noticeId = Long.parseLong(request.getParameter("noticeId"));
        return AjaxResult.success(noticeService.selectNoticeById(notice.getNoticeId()));
    }