uni-app+SpringBoot实战项目《云端笔记系统》------前端代码
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>