若依|若依分离版—移动端开发公告功能 spring|boot|uni-app

前言：本文是在若依-ruoyi-AiDex-Uniapp的基础上增加功能
移动端可直接下载源码若依-ruoyi-AiDex-Uniapp《https://gitee.com/big-hedgehog/ruoyi-uniapp》（1）优点：实现了和若依分离版后端交互，实现了登录，修改密码。
（2）缺点：功能不全，若依的公告功能，用户管理等功能没有实现移动端
开发移动端公告功能效果图如下：

文章图片

文章图片

文章图片

图1通知公告栏图2通知列表图3 通知详情
1. 通知公告栏跳转到通知列表（图1到图2）
【若依|若依分离版—移动端开发公告功能】
文章图片

2.新建 list_notice 通知列表页面

@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; }

3. 通知公告详情界面
修改form.vue

文章图片

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; } }

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解决跨域问题