uni-app+SpringBoot实战项目《云端笔记系统》------前端代码

最新推荐文章于 2023-07-03 18:38:37 发布
最新推荐文章于 2023-07-03 18:38:37 发布
阅读量338 收藏 5
点赞数 1
分类专栏： web前端 文章标签： 前端 uni-app spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44203782/article/details/129414031
版权

uni-app代码
实现jersey跨域文件图片上传
pages.json

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationStyle": "custom"
		}
	},
	{
		"path": "pages/common/menu_draw",
		"style": {
			"navigationStyle": "custom"
		}
	},
	{
		"path": "pages/user/login/login",
		"style": {
			"navigationStyle": "custom"
		}
	}    ,{
            "path" : "pages/user/user_list/user_list",
            "style" :                                                                                    
            {
               "navigationStyle": "custom"
            }
            
        }
        ,{
            "path" : "pages/channel/channel_list/channel_list",
            "style" :                                                                                    
            {
               "navigationStyle": "custom"
            }
            
        },
		{
		    "path" : "pages/channel/channel_add/channel_add",
		    "style" :                                                                                    
		    {
		       "navigationStyle": "custom"
		    }
		    
		},
		{
		    "path" : "pages/channel/channel_update/channel_update",
		    "style" :                                                                                    
		    {
		       "navigationStyle": "custom"
		    }
		    
		}
		
        ,{
            "path" : "pages/note/note_list/note_list",
            "style" :                                                                                    
            {
               "navigationStyle": "custom"
            }
            
        },
		{
		    "path" : "pages/note/note_add/note_add",
		    "style" :                                                                                    
		    {
		       "navigationStyle": "custom"
		    }
		    
		}
        ,{
            "path" : "pages/note/note_content/note_content",
            "style" :                                                                                    
            {
                "navigationStyle": "custom"
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	}
}

pages/user/login/login

<!-- 写页面的html代码-->
<!-- -->
<template>
	<view>
		<uni-forms ref="form" :model="formData"  :rules="rules" style="width: 600rpx;margin-left: auto;margin-right: auto;">
			<uni-forms-item style="margin-top :100rpx; text-align: center;">
			<h2>用户登录</h2>	
			</uni-forms-item>			
			<uni-forms-item label="用户名" name="userName">
				<uni-easyinput v-model="formData.userName"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码" name="passwd">
				<uni-easyinput type="password" placeholder="请输入密码" v-model="formData.passwd"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" size="mini" @click="doLogin">登录</button>
			</uni-forms-item>
		</uni-forms>	
				<!-- 提示框 -->
				<uni-popup ref="popup" type="dialog">
					<uni-popup-dialog 
						mode="base" title="通知" 
							:content="msg" 
							:duration="2000" 
							:before-close="true" 
							@close="close"
							@confirm="confirm">
					</uni-popup-dialog>
				</uni-popup>
	</view>
</template>

<!-- 写业务码，最常见的，发送网络请求-->
<script>
	export default {
		data() {
			return {
				formData:{
					userName:null,
					passwd:null,
				},
				msg:null,				
				rules:{
					userName:{
						rules:[
							{
								required :true,
								errorMessage:'请输入用户名'
								}
						]
					},
					passwd:{
						rules:[
							{
								required :true,
								errorMessage:'请输入密码'
								}
						]
					}
				}
			}
		},
		methods: {
			doLogin(){
				//进行表单校验
				this.$refs.form.validate().then(res=>{
					uni.request({
						url:'http://localhost:8070/user/login',
						method:'POST',
						data:{
							userName:this.formData.userName,
							passwd:this.formData.passwd
						},
						success: (res) => {
							console.log(res.data)
							if(res.data.code ==200){
								//将用户信息缓存到本地
								uni.setStorageSync('user_info', res.data.data);
								//跳转到主页
								uni.redirectTo({
									url:'/pages/index/index'
								})
							}else{
								this.msg=res.data.msg
								this.open();
							}
						}
					})
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})								
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			}

		}
	}
</script>
<!--页面效果 -->
<style>
	
</style>

pages/user/user_list/user_list

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2 style="margin-top: 30rpx;margin-bottom: 30rpx;padding-left: 30rpx;">用户管理</h2>	
		<uni-table stripe border :loading="loading">
			<uni-tr>
				<uni-td align="center">ID</uni-td>
				<uni-td align="center">用户名</uni-td>
				<uni-td align="center">昵称</uni-td>
				<uni-td align="center">头像</uni-td>
				<uni-td align="center">操作</uni-td>
			</uni-tr>
			<uni-tr v-for="u in userList">
				<uni-td>{{u.id}}</uni-td>
				<uni-td>{{u.userName}}</uni-td>
				<uni-td>{{u.nickName}}</uni-td>
				<uni-td>{{u.imgUrl}}</uni-td>
				<uni-td align="center">
					<button type="warn" size="mini" @click="doModify(u.id)">修改</button>
					<button type="warn" size="mini" @click="doDelete(u.id)">删除</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from'../../common/menu_draw.vue';
	export default {
		components:{
			
			menuDraw
		},
		data() {
			return {
				loading:false,
				msg:null,
				userList:null
			}
		},
		methods: {
			requestUserList(){
				this.loading=true
				uni.request({
					url:'http://localhost:8070/user/list',
					method:'GET',
					success: (res) => {
						console.log(res.data)
						this.loading=false;
						this.userList=res.data.data
					}
				})
			},
			doDelete(id){
				uni.request({
					url:'http://localhost:8070/user/remove?id='+id,
					method:'GET',
					success: (res) => {
						console.log(res.data)
						if(res.data.code==200){
							this.requestUserList()
						}else{
							this.msg=res.data.msg
							this.open()
						}
					}
				})
			},
			doModify(id){
				uni.redirectTo({
					url: 'modify_user?id='+id
				});
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			}
			
		},
		
		onLoad() {
			this.requestUserList()
		}
	}
</script>

<style>

</style>

pages/note/note_add/note_add

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2 style="margin-top: 30rpx; margin-bottom: 30rpx; padding-left: 30rpx;">添加笔记</h2>
		<uni-forms ref="form" :model="formData" :rules="rules" style="width: 600rpx; margin-left: auto; margin-right: auto;">
			<uni-forms-item label="标题:" name="noteTitle">
				<uni-easyinput v-model="formData.noteTitle" placeholder="请输入标题"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="栏目:" name="channelId">
				<uni-data-select :localdata="typeData" v-model="formData.channelId" @change="doChange"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="内容:" name="content">
				<uni-easyinput type="textarea" v-model="formData.content"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" @click="uploadLogo" :loading="btnLoading" :disabled="btnState">上传标题图</button>
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" @click="uploadAttachment">上传附件</button>
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" size="mini" @click="doSave">添加笔记</button>
			</uni-forms-item>
		</uni-forms>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../../common/menu_draw.vue';
	
	var _self;
	
	export default {
		components: {
			menuDraw
		},
		data() {
			return {
				btnLoading:false,//上传按钮进度条的显示状态
				btnState:false,//上传按钮是否可以被点击的状态
				msg: null,
				formData: {
					noteTitle: null, 
					channelId: null,
					content: null,
					logoPath: null, //标题图上传后的路径
					attachmentPath: null //附件上传后的路径
				},
				typeData: [],
				rules: {
						noteTitle: {
							rules:[
								{
									required: true,
									errorMessage: '请输入标题'
								}
							]
						},
						channelId: {
							rules:[
								{ 
									required: true,
									errorMessage: '请选中栏目'
								}
							]
						},
						content: {
							rules:[
								{ 
									required: true,
									errorMessage: '请输入内容'
								}
							]
						}
				}
			}
		},
		onLoad() {
			uni.request({
				url: 'http://localhost:8070/channel/list',
				method:'GET',
				success: (res) => {
					var channelList = res.data.data;
					for(var i=0; i<channelList.length; i++){
						var temp = {value: channelList[i].id, text: channelList[i].channelName}
						this.typeData.push(temp);
					}
				}
			})
		},
		methods: {
			doChange(e){
				console.log(e)
			},
			doSave(){
				//进行表单校验
				this.$refs.form.validate().then(res=>{
					// console.log('表单数据信息：', res);
					uni.request({
						url: 'http://localhost:8070/note/save',
						method: 'POST',
						data: {
							title: this.formData.noteTitle,
							cid: this.formData.channelId,
							content: this.formData.content,
							attachment: this.formData.attachmentPath,
							logo: this.formData.logoPath
						},
						success: (res) => {
							console.log(res.data)
							if(res.data.code == 200){
								//跳转到栏目列表
								uni.redirectTo({
									url: '/pages/note/note_list/note_list'
								})
							} else {
								this.msg = res.data.msg
								this.open();
							}
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			//上传标题图
			uploadLogo(){
				_self=this;
				//打开手机相册，或文件管理器选择文件
				uni.chooseImage({
					count: 1,//允许上传一个文件
					sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						//获得选择好的文件,他是一个数组
						const tempFilePaths =res.tempFilePaths;
						
						
						//把选择的文件上传到服务器
						_self.btnLoading= true//让按钮的进度条显示出来
						_self.btnState= true//让上传按钮不可点击
						const uploadTask=uni.uploadFile({
							url:'http://localhost:8070/upload/file',
							filePath:tempFilePaths[0],
							name:'fileName',
							success: (res) => {
								console.log(res.data)
								_self.btnLoading=false//让按钮的进度条隐藏
								_self.btnState=false//让上传按钮可以点击
								_self.formData.logoPath=res.data
							}
						})
						//获取文件上传进度
						uploadTask.onProgressUpdate(function(res){
							console.log("上传进度"+res.progress)
							console.log("已经上传的数据长度"+res.totalBytesSent)
							console.log("预计需要上传的数据总长度"+res.totalBytesExpectedToSend)
						})
					}
				})
				
				
			},
			//上传附件
			uploadAttachment(){
				_self=this;
				
				uni.chooseFile({
				  count: 1, //默认100
				  extension:['.zip','.doc','.txt'],//允许上传的文件拓展名
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						//获取选择好的文件数组，如果只选择了一个文件，这个文件就是数组的第一个元素
						const tempFilePaths = res.tempFilePaths;//数组
						
						//把选择的文件上传到服务器
						const uploadTask=uni.uploadFile({
							url:'http://localhost:8070/upload/file',//上传到SpringBoot的controller
							filePath:tempFilePaths[0],//选择好的文件
							name:'fileName',
							success: (res) => {
								console.log(res.data)
								_self.formData.attachmentPath=res.data
							}
						})
						
					}
				});

			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

pages/note/note_content/note_content

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<div style="margin-top: 30rpx; margin-left: auto; margin-right: auto; width: 1400rpx; height: 960rpx;">
			<div style="width: 640rpx; height: 960rpx; margin-right: 10rpx; padding: 20rpx; border: 1px solid #000000; border-radius: 10rpx; float: left;">
				<scroll-view scroll-y="true" style="height: 960rpx;">
					<div style="text-align: center; margin-bottom: 30rpx;"><b>{{title}}</b></div>
					<div v-for="c in contentList" style="margin-bottom: 12rpx;">
						<div v-if="c.type == 'txt'">{{c.content}}</div>
						<div v-if="c.type == 'png'">
							<image :src="serverUrl+c.content" style="width: 640rpx;" mode="widthFix"></image>
						</div>
					</div>
				</scroll-view>
			</div>
			<div style="width: 640rpx; height: 960rpx; margin-left: 50rpx; float: left;">
				<div style="margin-bottom: 25rpx;">
					<button @click="doTxt" class="mini-btn" type="default" size="mini" style="margin-right: 25rpx;">文本</button>
					<button @click="doImg" class="mini-btn" type="primary" size="mini" style="margin-right: 25rpx;">图片</button>
				</div>
				<textarea placeholder-style="color:#F76260" placeholder="内容输入完成后需要点击[文本]按钮以添加" v-model="articleValue" style="border: 1px solid #000000; border-radius: 5rpx; height: 300rpx; width: 640rpx; padding: 10rpx; margin-bottom: 35rpx;" />
			</div>
		</div>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" title="通知" :content="msg" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../../common/menu_draw.vue'
	var _self;
	export default {
		components: {
			menuDraw
		},
		data() {
			return {
				serverUrl: 'http://localhost:8060',
				msg: null,
				title: null,
				nid: null,
				articleValue: null,
				contentList: null
			}
		},
		onLoad(options) {
			this.nid = options.nid
			this.title = options.title
			this.requestContent()
		},
		methods: {
			requestContent(){
				uni.request({
					url: 'http://localhost:8070/content/list?nid='+this.nid,
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						this.contentList = res.data.data
					}
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(value) {
				this.$refs.popup.close()
			},
			doTxt(){
				uni.request({
					url:'http://localhost:8070/content/save',
					method:'POST',
					data:{
						nid:this.nid,
						type:'txt',
						content:this.articleValue
					},
					success: (res) => {
						console.log(res.data)
						if(res.data.code==200){
							//刷新列表
							this.requestContent()
							this.articleValue=null
						}else{
							this.msg=res.data.msg
							this.open()
						}
					}
				})
			},
			doImg(){
				_self = this;
				//第一步选择图片
				uni.chooseImage({
					count:1,
					sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						//获得选择好的文件,他是一个数组
						const tempFilePaths =res.tempFilePaths;
						//第二步：上传图片
						uni.uploadFile({
							url:'http://localhost:8070/upload/file',
							filePath:tempFilePaths[0],
							name:'fileName',
							success: (res) => {
								console.log(res.data)
								uni.request({
									url:'http://localhost:8070/content/save',
									method:'POST',
									data:{
										nid:_self.nid,
										type:'png',
										content:res.data
									},
									success: (res) => {
										console.log(res.data)
										if(res.data.code==200){
											//刷新列表
											_self.requestContent()
											_self.articleValue=null
										}else{
											_self.msg=res.data.msg
											_self.open()
										}
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

pages/note/note_list/note_list

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2 style="margin-top: 30rpx; margin-bottom: 30rpx; padding-left: 30rpx;">笔记管理</h2>
		<uni-forms v-model="queryParam" style="margin-top: 50rpx; margin-left: 50rpx;">
			<uni-forms-item label="标题:" style="width: 400rpx; float: left; margin-right: 50rpx;">
				<uni-easyinput v-model="queryParam.title" placeholder="请输入标题"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="栏目:" style="width: 400rpx; float: left; margin-right: 50rpx;">
				<uni-data-select
				      v-model="queryParam.channelName"
				      :localdata="range"
				      @change="change"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button type="default" size="mini" style="margin-right: 15rpx;" @click="doSearch">查询</button>
				<button type="default" size="mini" @click="doAdd">添加笔记</button>
			</uni-forms-item>
		</uni-forms>
		<uni-table stripe border :loading="loading">
			<uni-tr>
				<uni-td align="center">ID</uni-td>
				<uni-td align="center">栏目名</uni-td>
				<uni-td align="center">标题</uni-td>
				<uni-td align="center">发布时间</uni-td>
				<uni-td align="center">标题图</uni-td>
				<uni-td align="center">操作</uni-td>
			</uni-tr>
			<uni-tr v-for="n in noteList">
				<uni-td align="center">{{n.id}}</uni-td>
				<uni-td>{{n.channel.channelName}}</uni-td>
				<uni-td><a href="#" @click="goContent(n.id,n.title)">{{n.title}}</a></uni-td>
				<uni-td>{{n.publishTime}}</uni-td>
				<uni-td>
					<image :src="serverUrl+n.logo" style="width: 180rpx;" mode="widthFix"></image>				
				</uni-td>
				<uni-td align="center">
					<button type="primary" size="mini" @click="doUpdate(n.id)" style="margin-right: 10rpx;">修改</button>
					<button type="warn" size="mini" @click="doDelete(n.id)">删除</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination style="margin-top: 30rpx;" :current="pageIndex" :page-size="pageSize" :total="pageTotle" @change="pageChanged"></uni-pagination>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../../common/menu_draw.vue'
	
	export default { 
		components: {
			menuDraw
		},
		data() {
			return {
				serverUrl:'http://localhost:8060',//文件服务器地址
				//分页相关
				pageIndex: 1,
				pageSize: 2,
				pageTotle: 0,
				
				range: [],
				queryParam:{
					title: null,
					channelName: null
				},
				loading: false,
				msg: null,
				noteList: null
			}
		},
		methods: {
			//请求栏目列表
			requestnoteList(){
				this.loading = true
				if(this.queryParam.channelName == null){
					this.queryParam.channelName = 0;
				}
				uni.request({
					url: 'http://localhost:8070/note/list?title='+this.queryParam.title+"&cid="+this.queryParam.channelName+"&pageIndex="+this.pageIndex+"&pageSize="+this.pageSize,
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						this.loading = false
						this.noteList = res.data.data
						this.pageTotle = res.data.total
					}
				})
			},
			doDelete(id){
				uni.request({
					url: 'http://localhost:8070/note/remove?id='+id,
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						if(res.data.code == 200){
							//刷新用户列表
							this.requestnoteList()
						} else {
							this.msg = res.data.msg
							this.open()
						}
					}
				})
			},
			doUpdate(id){
				uni.redirectTo({
					url: '/pages/channel/channel_update/channel_update?id='+id
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(value) {
				this.$refs.popup.close()
			},
			doAdd(){
				uni.redirectTo({
					url: '/pages/note/note_add/note_add'
				})
			},
			change(e){
				console.log(e)
			},
			pageChanged(p){
				this.pageIndex = p.current; //设置被点击的页码
				this.requestnoteList();
			},
			doSearch(){
				this.requestnoteList()
			},
			goContent(id,title){
				uni.redirectTo({
					url:'/pages/note/note_content/note_content?nid='+id+'&title='+title
				})
			}
		},
		onLoad() {
			//下拉列表显示数据
			this.requestnoteList()
			uni.request({
				url: 'http://localhost:8070/channel/list',
				method: 'GET',
				success: (res) => {
					console.log(res.data)
					var channelList = res.data.data;
					for(var i=0; i<channelList.length; i++){
						var temp = {value : channelList[i].id, text : channelList[i].channelName}
						this.range.push(temp)
					}
					console.log(this.range)
				}
			})
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

pages/index/index

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2>欢迎使用云笔记后台管理系统</h2>		
	</view>
</template>

<script>
	import menuDraw from'../common/menu_draw.vue';
	export default {
		components:{
			menuDraw
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

pages/common/menu_draw

<!-- 写页面的html代码-->
<!-- -->
<template>
	<view >
		<!-- 导航栏 -->
		<uni-nav-bar left-icon="settings" right-icon="home-filled" title="云笔记管理系统" backgroundColor="#d3233b" color="#ffffff" fixed="true" @clickLeft="doLeft" @clickRight="doRight"/>
		<!-- 抽屉 -->
		
				<uni-drawer ref="showRight" mode="left" :mask-click="true">
					<scroll-view style="height: 100%;" scroll-y="true">
						<uni-list>
							<uni-list-item :clickable="true" title="首页" @click="goIndex" :show-arrow="true"></uni-list-item>
							<uni-list-item :clickable="true" title="用户管理" @click="goUser" :show-arrow="true"></uni-list-item>
							<uni-list-item :clickable="true" title="栏目管理" @click="goChannel" :show-arrow="true"></uni-list-item>
							<uni-list-item :clickable="true" title="笔记管理" @click="goNote" :show-arrow="true"></uni-list-item>
						</uni-list>
					</scroll-view>
				</uni-drawer>
		
	</view>
</template>

<!-- 写业务码，最常见的，发送网络请求-->
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			//
			doLeft(){
				this.showDrawer()
			},
			doRight(){
				
			},
			showDrawer() {
							this.$refs.showRight.open();
			},
			closeDrawer() {
							this.$refs.showRight.close();
			},
			//跳转到首页
			goIndex(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			goUser(){
				//跳转到用户管理
				uni.redirectTo({
					url:"/pages/user/user_list/user_list"
				})
			},
			goChannel(){
				uni.redirectTo({
					url:"/pages/channel/channel_list/channel_list"
				})
			},
			goNote(){
				uni.redirectTo({
					url: '/pages/note/note_list/note_list'
				})
			}

		}
	}
</script>
<!--页面效果 -->
<style>
	
</style>

pages/channel/channel_add/channel_add

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2 style="margin-top: 30rpx; margin-bottom: 30rpx; padding-left: 30rpx;">添加栏目</h2>
		<uni-forms ref="form" :model="formData" :rules="rules" style="width: 600rpx; margin-left: auto; margin-right: auto;">
			<uni-forms-item label="栏目名:" name="channelName">
				<uni-easyinput v-model="formData.channelName" placeholder="请输入栏目名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="类型:" name="channelType">
				<uni-data-select :localdata="typeData" v-model="formData.channelType" @change="doChange"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" size="mini" @click="doSave">添加</button>
			</uni-forms-item>
		</uni-forms>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../../common/menu_draw.vue';
	
	export default {
		components: {
			menuDraw
		},
		data() {
			return {
				msg: null,
				formData: {
					channelName: null,
					channelType: null
				},
				typeData: [
					{value: '1', text:'前端开发'},
					{value: '2', text:'后端开发'},
					{value: '3', text:'服务器'},
					{value: '4', text:'数据库'}
				],
				rules: {
						channelName: {
							rules:[
								{
									required: true,
									errorMessage: '请输入栏目名'
								}
							]
						},
						channelType: {
							rules:[
								{ 
									required: true,
									errorMessage: '请选中类型'
								}
							]
						}
				}
			}
		},
		methods: {
			doChange(e){
				console.log(e)
			},
			doSave(){
				//进行表单校验
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					uni.request({
							url:'http://localhost:8070/channel/save',
							method:'POST',
							data:{
								channelName:this.formData.channelName,
								type:this.formData.channelType
							},
							success: (res) => {
								console.log(res.data)
								if(res.data.code ==200){									
									//跳转到栏目列表
									uni.redirectTo({
										url:'/pages/channel/channel_list/channel_list'
									})
								}else{
									this.msg=res.data.msg
									this.open();
								}
							}
						})
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

pages/channel/channel_list/channel_list

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2 style="margin-top: 30rpx; margin-bottom: 30rpx; padding-left: 30rpx;">栏目管理</h2>
		<button type="default" size="mini" @click="doAdd">添加栏目</button>
		<uni-table stripe border :loading="loading">
			<uni-tr>
				<uni-td align="center">ID</uni-td>
				<uni-td align="center">栏目名</uni-td>
				<uni-td align="center">类型</uni-td>
				<uni-td align="center">操作</uni-td>
			</uni-tr>
			<uni-tr v-for="c in channelList">
				<uni-td align="center">{{c.id}}</uni-td>
				<uni-td>{{c.channelName}}</uni-td>
				<uni-td>
					<!-- {{c.type==1?"前端开发":c.type==2?"后端开发":c.type==3?"服务器":"数据库"}} -->
					<view v-if="c.type==1">前端开发</view>
					<view v-if="c.type==2">后端开发</view>
					<view v-if="c.type==3">服务器</view>
					<view v-if="c.type==4">数据库</view>
				</uni-td>
				<uni-td align="center">
					<button type="primary" size="mini" @click="doUpdate(c.id)">修改</button>
					<button type="warn" size="mini" @click="doDelete(c.id)">删除</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../../common/menu_draw.vue'
	
	export default { 
		components: {
			menuDraw
		},
		data() {
			return {
				loading: false,
				msg: null,
				channelList: null
			}
		},
		methods: {
			//请求栏目列表
			requestChannelList(){
				this.loading = true
				uni.request({
					url: 'http://localhost:8070/channel/list',
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						this.loading = false
						this.channelList = res.data.data
					}
				})
			},
			doDelete(id){
				uni.request({
					url: 'http://localhost:8070/channel/remove?id='+id,
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						if(res.data.code == 200){
							//刷新用户列表
							this.requestChannelList()
						} else {
							this.msg = res.data.msg
							this.open()
						}
					}
				})
			},
			doUpdate(id){
				uni.redirectTo({
					url: '/pages/channel/channel_update/channel_update?id='+id
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(value) {
				this.$refs.popup.close()
			},
			doAdd(){
				uni.redirectTo({
					url: '/pages/channel/channel_add/channel_add'
				})
			}
		},
		onLoad() {
			this.requestChannelList()
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

pages/channel/channel_update/channel_update

<template>
	<view class="container">
		<menuDraw></menuDraw>
		<h2 style="margin-top: 30rpx; margin-bottom: 30rpx; padding-left: 30rpx;">修改栏目</h2>
		<uni-forms ref="form" :model="formData" :rules="rules" style="width: 600rpx; margin-left: auto; margin-right: auto;">
			<uni-forms-item label="栏目名:" name="channelName">
				<uni-easyinput v-model="formData.channelName" placeholder="请输入密码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="类型:" name="channelType">
				<uni-data-select :localdata="typeData" v-model="formData.channelType" @change="doChange"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" size="mini" @click="doModify">修改</button>
			</uni-forms-item>
		</uni-forms>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../../common/menu_draw.vue';
	
	export default {
		components: {
			menuDraw
		},
		data() {
			return {
				id: null,
				msg: null,
				formData: {
					channelName: null,
					channelType: null
				},
				typeData: [
					{value: 1, text:'前端开发'},
					{value: 2, text:'后端开发'},
					{value: 3, text:'服务器'},
					{value: 4, text:'数据库'}
				],
				rules: {
						channelName: {
							rules:[
								{
									required: true,
									errorMessage: '请输入栏目名'
								}
							]
						},
						channelType: {
							rules:[
								{ 
									required: true,
									errorMessage: '请选中类型'
								}
							]
						}
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			console.log("页面传参：id="+this.id)
			uni.request({
				url: 'http://localhost:8070/channel/get?id='+this.id,
				method: 'GET',
				success: (res) => {
					console.log(res.data)
					this.formData.channelName = res.data.data.channelName
					this.formData.channelType = res.data.data.type
				}
			})
		},
		methods: {
			doChange(e){
				console.log(e)
			},
			doModify(){
				//进行表单校验
				this.$refs.form.validate().then(res=>{
					 console.log('表单数据信息：', res);
					uni.request({
						url: 'http://localhost:8070/channel/modify',
						method: 'POST',
						data: {
							id: this.id,
							channelName: this.formData.channelName,
							type: this.formData.channelType
						},
						success: (res) => {
							console.log(res.data)
							if(res.data.code == 200){
								//跳转到栏目列表
								uni.redirectTo({
									url: '/pages/channel/channel_list/channel_list'
								})
							} else {
								this.msg = res.data.msg
								this.open();
							}
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
欧皇夏老板
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于uni-app+springboot的商业项目（第一季）
06-30
本课程是基于跨平台商业项目“官厅画院”设计的系列课程中的第一季。它整合了跨平台uni-app与springboot+mybatis等技术。采用示例教学，提供全部示例文件。旨在帮助小白快速入手，全栈开发。通过该系列课程，能够帮助大家，独立完成跨平台程序的前端与后台。
基于uniapp+Springboot跨平台的项目任务管理系统设计-计算机毕业源码设计
计算机源码设计案例的博客
10-10 2407
开发软件： Eclipse或者Idea + HbuilderX + Mysql + Redis uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端；后端接口才有java语言的Springboot技术开发 现在介绍的是一个基于uniapp客户端+springboot服务器接口端的一个任务管理系统，项目可以发布到小程序，H5,安卓，ios等多端，这里以安卓app演示，系统一..
Uni-app实战项目之整合SpringBoot前后端分离开发Android、iOS、小程序应用
Nishuibaichuan 的博客
10-31 9016
欢迎加入课程群：571278542 课程大纲[会有细微差异，最终以录制课程为准]： 1、成果演示 2、开发技术和工具介绍 3、建立数据库(后台开发3-7节) 4、环境搭建 5、栏目管理(七牛云管理附件) 6、文章管理 7、视频管理 8、提前说说api调用跨域问题及其后面集成swagger2 9、发现(首)页编写轮播图、文章、视频 10、讲堂页编写 11、个人中心页编写 12、Api接口编写和解决跨...
基于uniapp + springboot实现物流配送系统【附项目源码】分享
ybigbear的博客
04-22 549
基于uniapp + springboot实现物流配送系统一、管理员端1.添加运单信息（运单信息包括运单号，接单时间，完成时间，货物编号（可以填多个货物编号），创建时间，收货人 收货地址，收货人手机号， 结算金额， 备注明细（冷冻食品/加急/水果之类））， 支付方式（微信支付/支付宝支付/网银支付/现金支付）管理员天添加运单信息默认状态为待发布任务，然后管理员点击发布，运单状态改为已发布任务。
用uniapp完成一个前端项目
qq_39321234的博客
07-03 2182
这里给初学者提供一个uniapp的练习项目，学习uniapp需要vue和微信小程序的基础（其实微信小程序基础需要的不多），建议把基础内容学牢固了再看本文。uniapp中（基本所有框架都是这样）局部大于全局，这里我给首页定义的文字是青年帮新闻，全局也是青年帮新闻，显示的实际是局部定义的青年帮新闻。选择的默认模板就行，个人比较习惯用vue2，所以这个项目也勾选的是vue2，unicloud这里就不用勾选了。的结构，scroll-view的scroll-x和scroll-y分别是可以上下和左右滑动的属性。
uni-app+Vue3+pinia+uview-plus搭建的项目包
最新发布
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
技术需求：前端采用Uni-app框架，框架语法为Vue + 小程序，基于组件、路由、状态管理、MVVM响应式数据等；后端采用Express + CSRF完成数据接口开发等。系统设计目标：可以方便的浏览音乐排行榜、搜索指定音乐；轻松...
uni-app+uview+vuex+分包环境搭建
03-07
2. 安装HBuilderX：用于编写和管理uni-app项目，提供代码编辑、预览、打包等功能。 3. 创建uni-app项目：在HBuilderX中选择uni-app模板，初始化项目结构。 4. 集成uView UI：通过npm安装uView，然后在main.js中引入...
flutter前端 uni-app小程序 springboot停车场管理系统源码
03-27
【小程序/h5/公众号】：uni-app(底层框架Vue)，一套代码直接生成h5(直接部署公众号)，微信小程序，可以打包混合app，一箭三雕，经济又好用 【后台管理】：vue-element-admin，是目前国内外都很火的一套后台 java框架...
Vue中的Uni-App与springboot交互实现增删改查
lplovewjm的博客
04-06 2231
在本文中，我们将介绍如何在Vue框架下使用Uni-App实现前端和Java后台数据的交互，并演示如何通过Uni-App向Java后台发送请求来实现增删改查操作。
spring boot+ios app+android app 即时通讯项目
11-19
一款即时通讯的app，有服务器，有客户端，如果有什么不明白还可以私我。
云笔记系统设计源码
03-27
云笔记（cloudnote），是达内在线教育平台(tmooc)中的一个子项目。cloudnote系具有 的功能有：注册、登录、修改密码、笔记本、笔记、活动、回收站、收藏笔记本、活动笔记本。用户在使用cloudnote时，需要先进行注册，注册成功后，系统会自动给该用户创建四个笔记本
云笔记资源代码
09-04
本资源是基于java语言开发的一个简单的云笔记，它是一个实现对信息进行存储修改功能的网页版笔记模式，此版本适合起步学习
java云笔记代码与文档
09-19
java版云笔记代码与文档，里面有需要的需求文档和每天的代码，讲解这个的博客地址为http://www.cnblogs.com/yangliguo/p/7544020.html
前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记.zip
05-03
前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款多人协同的云笔记 前端项目源码：模仿有道云，个人制作的一款
基于uniapp的记账本源码，后台springboot
wfuhui的博客
08-11 1236
大等于jdk1.8，大于mysql5.5，idea（eclipse），HBuilder X。首页显示余额，以及记账记录，点击新增按钮跳转添加记账，输入金额，选择类型保存即可。代码注释齐全，没有多余代码，适合学习(毕设)，二次开发，包含论文技术相关文档。用户管理：查看注册用户信息及删除。个人中心显示我的信息（可编辑）记录管理：查看用户新增记账记录。管理员管理：后台管理员增删改查。分类管理：分类信息增删改查。统计分析展示收入支出占比。......
Java项目云笔记管理系统（前端）
阿水的博客
03-13 657
Java项目云笔记管理系统（java+uni-app+SpringBoot+Mybatis(MybatisPlus)+Maven+Mysql）项目运行环境配置：Jdk1.8 + Tomcat(SpringBoot内置) + Mysql8 + HBuilderX（Webstorm也行）+IDEA（IntelliJ IDEA, Eclispe,MyEclispe,Sts都支持）。
SpringBoot + uni-app开发企业级图书商城系统
weixin_44844734的博客
08-17 1358
在经过一天多的采访调查中，身边大多数的同学都没有意愿购买一本利用率较低的书籍，甚至于专业课的书籍他们更愿意从师兄或者师姐那里购买，比起全新的书籍不仅价格更便宜而且书籍上还有师兄师姐留下来的笔记和重点知识见解，全新的书籍根本不受身边同学们的欢迎，他们宁愿花费更多的时间在网络上寻找合适的二手书籍也不想去花费更多的金钱去买全新的书籍。（2）商品模块：图书发布、修改、图书列表、详情、搜索、发布购书需求；PC端后台的主要功能包括登录注册、密码修改、昵称头像修改、上传书籍、修改书籍信息、销售数据报表等。......
103 云笔记案例（代码流程分析）
阿甘兄
08-12 460
1.笔记本操作 1)创建笔记本 前台输入笔记本名 前台向后台传入的参数、笔记本的名字 后台封装 a. 从session中获取用户名 b. 创建时间戳 c.封装rowkey d. 保存到redis key：用户名 value：list<rowkey|笔记本的名字|创建时间|状态> 步骤： 1、获取jedi...
基于uni-app+springboot的移动智能办公系统设计与实现
08-24
移动智能办公系统是基于uni-app框架和springboot后端技术开发的一款集合办公管理、知识分享、团队协作等功能的移动应用程序。 该系统的设计与实现包括以下几个方面： 1. 用户管理：系统管理员可以对用户进行管理，包括注册、登录、权限设置等功能。用户可以根据自身角色访问对应的功能模块。 2. 办公管理：系统提供日程安排、任务管理、公告发布等功能，用户可以通过系统进行办公事务的管理和协作。可以设置提醒和共享功能，方便团队成员协同工作。 3. 知识分享：用户可以发布、查看和评论知识分享内容，支持多种格式的文档上传和在线预览，方便团队之间的知识共享和技术交流。 4. 团队协作：系统提供在线聊天、文件共享、任务分配等功能，方便团队成员之间的沟通和协作。可以设定项目组和权限，实现不同团队之间的隔离和数据安全。 5. 报表统计：系统可以对用户的办公行为进行数据监控和分析，生成相应的报表和图表，帮助管理层进行决策和评估。 该系统的实现基于uni-app框架和springboot后端技术，uni-app可以实现一次开发多端部署，用户可以在不同的移动终端上使用该应用。而springboot提供了快速开发、安全稳定的后台支持，能够保证系统的高效运行和数据的安全性。 综上所述，基于uni-app和springboot的移动智能办公系统设计与实现可以提供全方位的办公管理、知识分享和团队协作等功能，为用户提供便捷、高效的办公体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值