《uni-ui中的vue文件布局》及《jersey跨域文件上传前端开发》的实例教程70%

最新推荐文章于 2024-04-16 18:57:50 发布

欧皇夏老板

最新推荐文章于 2024-04-16 18:57:50 发布

阅读量264

点赞数 1

分类专栏： web前端文章标签： vue.js ui 前端

本文链接：https://blog.csdn.net/weixin_44203782/article/details/129327729

版权

web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

每个vue文件都是由三个三个模块组成，我就写一块了

不同页面调用同一页面配置
图片上传服务器tomcat的端口为8060，springboot端口为8070，
menu_draw.vue

<!-- 写页面的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="go1" :show-arrow="true"></uni-list-item>
							<uni-list-item :clickable="true" title="栏目管理" @click="go2" :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();
			},
			go1(){
				
			},
			go2(){
				//跳转到页面
				uni.redirectTo({
					url:"/pages/cms/article_list"
				})
			}

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

index.vue

<template>
	<view class="container">
		<!-- 第三步使用外部组件 -->
		<menuDraw></menuDraw>
		这是首页
	</view>
</template>

<script>
	//第一步：导入menu_draw.vue
	import menuDraw from '../common/menu_draw.vue'
	export default {
		//第二部：引用外部组件
		components:{
			menuDraw
		},
		data() {
			
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {

		}
	}
</script>

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

article_list.vue
上传图片p.paperlogo

<template>
	<view class="container">
	
		<menuDraw></menuDraw>
		<uni-table stripe border :loading="loading">
			<uni-tr>
				<uni-th align="center">编号</uni-th>
				<uni-th align="center">栏目</uni-th>
				<uni-th align="center">标题</uni-th>
				<uni-th align="center">描述</uni-th>
				<uni-th align="center">标题图</uni-th>
				<uni-th align="center">发布时间</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="p in paperList">
				<uni-td>{{p.id}}</uni-td>
				<uni-td>{{p.cid==1? "文学":"数学"}}</uni-td>
				<uni-td>{{p.papertitle}}</uni-td>
				<uni-td>{{p.paperdescribe}}</uni-td>			
				<uni-td>
					<image :src="filServer+p.paperlogo" style="width: 150rpx;" mode="widthFix"></image>
				</uni-td>
				<uni-td>{{p.publishtime}}</uni-td>
				<uni-td align="center">
					<button type="primary" size="mini" style="margin-right: 10rpx;" @click="doUpdate(p.id)">修改</button>
					<button type="warn" size="mini" @click="doDelete(p.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 {
			//本地的tomcat手动启动作为图片上传的服务器端口号为8060
				filServer:'http://localhost:8060',
				loading:false,
				msg: null,
				paperList: null,
				title: null,
				type: null, 
				//分页相关
				pageIndex: 1,
				pageSize: 2,
				pageTotle: 0,
				range: [
				        { value: "文学", text: "文学" },
				        { value: "数学", text: "数学" }
				      ]
			}
		},
		methods: {
			//分页器被点击后触发
			pageChanged(p){
				console.log(p)
				this.pageIndex = p.current;
				var url = 'http://localhost:8070/paper/find_all?papertitle='+this.title+'&columntitle='+this.type+'&pageIndex='+p.current+'&pageSize='+this.pageSize
				this.requestPaperList(url);
			},
			//请求论文列表
			requestPaperList(uri){	
				this.loading=true
				uni.request({					
					url: uri,
					method: 'GET',					
					success: (res) => {
						this.loading=false;
						console.log(res.data);
						this.paperList = res.data.data;
						this.pageTotle = res.data.total;
					}
				})
			},
			doLeft(){
				this.msg = "点击了返回按钮"
				this.open();
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			},
			doUpdate(id){
				uni.redirectTo({
					url: 'modify_paper?id='+id
				});
			},
			doAdd(){
				uni.redirectTo({
					url: 'add_paper'
				});
			},
			doSearch(){
				this.pageIndex = 1;
				var url = 'http://localhost:8070/paper/find_all?papertitle='+this.title+'&columntitle='+this.type+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
				this.requestPaperList(url);
			},
			doDelete(id){
				uni.request({
					url: "http://localhost:8070/paper/remove?id="+id,
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						if(res.data.code == 200){
							this.pageIndex = 1;
							var url = 'http://localhost:8070/paper/find_all?papertitle='+this.title+'&columntitle='+this.type+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
							this.requestPaperList(url);
						} else {
							this.msg = res.data.msg;
							this.open();
						}
					}
				})
					
			},
			//下拉列表选择时触发
			change(e){
				console.log("e:", e);
			}
		},
		//页面加载完成之后执行
		onLoad() {
			var url = 'http://localhost:8070/paper/find_all?papertitle='+this.title+'&columntitle='+this.type+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
			this.requestPaperList(url);
		}
	}
</script>

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

Tomcat修改端口及readonly
在这里插入图片描述
在web.xml文件里修改添加一段如图方框

在server.xml文件中修改端口号为8060（默认为8080）

再在你的tomcat里创建一个文件夹存放上传的图片位置如图

D:\apache-tomcat-8.5.84\webapps\ROOT\upload

通过cmd手动启动tomcat（bin文件夹下的startup.bat）

在pom.xml里添加依赖

<!-- 文件上传:Begin -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<!-- 文件上传:End -->
        <!--用于接受多媒体文件-->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.3</version>
		</dependency>
		<!--跨服务器上传:Begin -->
		<dependency>
			<groupId>com.sun.jersey</groupId>
			<artifactId>jersey-client</artifactId>
			<version>1.19</version>
		</dependency>
		<dependency>
			<groupId>com.sun.jersey</groupId>
			<artifactId>jersey-core</artifactId>
			<version>1.19</version>
		</dependency>
		<!--跨服务器上传:End -->

application.yml配置上传文件的大小

servlet:
    multipart:
      #设置单个文件大小
      max-file-size: 10MB

      max-request-size: 100MB

Jersey工具类

package demo.utils;

import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.Date;
import java.util.Random;

/**
 * 跨服务器文件上传工具类
 *
 * @author bossxia
 *
 */
public class JesyFileUploadUtil {

    /**
     * 上传文件
     *
     * @param file --文件名
     * @param serverUrl --服务器路径http://127.0.0.1:8080/ssm_image_server
     * @return
     * @throws IOException
     */
    public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {
        //重新设置文件名
        String newFileName = new Date().getTime()+""; //将当前时间获得的毫秒数拼接到新的文件名上
        //随机生成一个3位的随机数
        Random r = new Random();
        for(int i=0; i<3; i++) {
            newFileName += r.nextInt(10); //生成一个0-10之间的随机整数
        }

        //获取文件的扩展名
        String orginalFilename = file.getOriginalFilename();
        String suffix = orginalFilename.substring(orginalFilename.indexOf("."));

        //创建jesy服务器，进行跨服务器上传
        Client client = Client.create();
        //把文件关联到远程服务器
        //例如：http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpg
        WebResource resource = client.resource(serverUrl+"/"+newFileName+suffix);
        //上传
        //获取文件的上传流
        resource.put(String.class, file.getBytes());

        //图片上传成功后要做的事儿
        //1、ajax回调函数做图片回显（需要图片的完整路径）
        //2、将图片的路径保存到数据库（需要图片的相对路径）
//        String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路径
        String relativePath = "/upload/"+newFileName+suffix; //相对路径

        return relativePath;
    }
}

Conrtollerce层再添加一个

package demo.controller;

import demo.utils.JesyFileUploadUtil;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@CrossOrigin(origins = "*")
@RestController
public class FileController {

    @PostMapping("/uploadFile")
    public String uploadFile(MultipartFile fileName){
        //手动启动tomcat作为图片上传服务器     tomcat端口号8060
        String fileServer = "http://localhost:8060/upload";
        String path = "";
        try {
           path = JesyFileUploadUtil.uploadFile(fileName,fileServer);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return path;
    }
}

前端这里先用一般的html写一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="file" @change="Upload" />
</div>
<script>
    new Vue({
        el: '#app',
        data: {

        },
        methods: {
            Upload(event){
                const flie = event.target.files[0];
                // 在这里进行一系列的校验
                const formData = new FormData();
                formData.append("fileName",flie);
                //使用idea后端的FileController    idea端口号：8070
                axios.post('http://localhost:8070/uploadFile',formData,{
                    'Content-type' : 'multipart/form-data'
                }).then(res=>{
                    console.log(res.data);
                },err=>{
                    console.log(err)
                })
            }
        }
    });
</script>
</body>
</html>

欧皇夏老板

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《uni-ui中的vue文件布局》及《jersey跨域文件上传前端开发》的实例教程70%

在web.xml文件里修改添加一段如图方框在server.xml文件中修改端口号为8060（默认为8080）再在你的tomcat里创建一个文件夹存放上传的图片位置如图。
复制链接

扫一扫

专栏目录