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

pages.json

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationStyle": "custom"
		}
	}
	
        ,{
            "path" : "pages/index/content/content",
            "style" :                                                                                    
            {
                "navigationStyle": "custom"
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	}
}

index

<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 v-for="c in channelList">
							<uni-list-item :clickable="true" :title="c.channelName" @click="goNote(c.id)" :show-arrow="true">uni-list-item>						
						uni-list>
					scroll-view>
				uni-drawer>
				
			
		<uni-list :border="true" v-for="n in noteList">
				
					<uni-list-chat 
					:clickable="true"
					@click="goContent(n.id,n.title)"
					:title="n.title"
					:avatar="serveUrl+n.logo" 
					:time="n.publishTime"
					badge-positon="left">
					uni-list-chat>
		uni-list>
		
	view>
template>


<script>
	export default {
		data() {
			return {
				serveUrl:'http://192.168.10.30:8060',
				channelList:null,
				noteList:null
			}
		},
		onLoad(){
			//发送请求获取栏目列表
			uni.request({
				url:'http://192.168.10.30:8070/channel/list',
				method:'GET',
				success: (res) => {
					console.log(res.data)
					this.channelList=res.data.data
				}
			})
			//发送请求获取笔记
			this.requestNoteList(0)
		},
		methods: {
			//
			doLeft(){
				this.showDrawer()
			},
			doRight(){
				
			},
			showDrawer() {
							this.$refs.showRight.open();
			},
			closeDrawer() {
							this.$refs.showRight.close();
			},
			
			goNote(nid){
				console.log('跳转到'+nid)
				this.requestNoteList(nid)
			},
			//请求笔记列表
			requestNoteList(cid){
				uni.request({
					url:'http://192.168.10.30:8070/note/list?title=null&cid='+cid+"&pageIndex=1&pageSize=10000",
					method:'GET',
					success: (res) => {
						console.log(res.data)
						this.noteList=res.data.data
						this.closeDrawer();
					}
				})
			},
			goContent(nid,title){
				uni.navigateTo({
					url:"/pages/index/content/content?nid="+nid+'&title='+title
				})
			}

		}
	}
script>

<style>
	
style>

content

<template>
	<view>
		
		<uni-nav-bar left-icon="back"  title="云笔记管理系统" backgroundColor="#d3233b" color="#ffffff" fixed="true" @clickLeft="doLeft"/>
		
		<scroll-view scroll-y="true" >
			<div style="text-align: center; margin-bottom: 30rpx;margin-top: 30rpx;"><b>{{title}}b>div>
			<div v-for="c in contentList" style="margin-bottom: 12rpx;padding: 20rpx;">
				<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>
	view>
template>

<script>
	export default {
		data() {
			return {
				serverUrl: 'http://192.168.10.30:8060',
				title: null,
				nid:null,						
				contentList: null
				
			}
		},
		onLoad(options) {
			this.nid=options.nid
			this.title=options.title
			uni.request({
				url: 'http://192.168.10.30:8070/content/list?nid='+this.nid,
				method: 'GET',
				success: (res) => {
					console.log(res.data)
					this.contentList = res.data.data
				}
			})
		},
		methods: {
			doLeft(){
				uni.navigateBack()
			}
		}
	}
script>

<style>

style>