每个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>