element-ui框架
Win + R打开运行框，输入cmd打开命令提示符窗口，进入到vue项目的根目录下，写入以下命令，该命令会将element-ui框架下载到vue项目下的node_modules中
在项目的src目录中找到main.js，将element-ui引入main.js即可
1
2
3
| import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
|
Echarts组件
Win + R打开运行框，输入cmd打开命令提示符窗口，进入到vue项目的根目录下，写入以下命令，该命令会将Echarts框架下载到vue项目下的node_modules中
1
| npm install echarts --save
|
在项目的src目录中找到main.js，将Echarts引入main.js即可
1
2
| import echarts from 'echarts'
Vue.prototype.$echarts = echarts
|
Ueditor组件(实现文件上传)
UEditor官网
下载UEditor源码
解压下载好的压缩包，复制除jsp以外的所有文件夹
在vue项目中的public中的static下新建ueditor包，将复制文件夹粘贴到其中
在ueditor.config.js中添加window.UEDITOR_HOME_URL，值为引入文件的位置；修改serverUrl，后端请求路径(可后续修改，建议同下)
在src下的components包中新建ueditor包，创建index.vue文件(封装编辑器,方便后续使用)，复制以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <template>
<div>
<script id="editor" type="text/plain" style="width: 97%; height: 540px"></script>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object,
serverUrl: "/file/api/ueditor/exec",
UEDITOR_HOME_URL: '/static/ueditor/'
},
id: {
type: String
},
},
mounted() {
this.editor = window.UE.getEditor('editor', this.config);
this.editor.addListener(function () {
this.editor.setContent(this.defaultMsg)
})
},
methods: {
getUEContent() {
return this.editor.getContent()
},
getContentTxt() {
return this.editor.getContentTxt()
},
setUEContent(value) {
this.$nextTick(function () {
this.editor.setContent(value)
})
},
init() {
this.editor = window.UE.getEditor('editor', this.config);
}
},
destroyed() {
this.editor.destroy()
}
}
</script>
|
页面引用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <template>
<div>
<Ueditor ref="ueditor"></Ueditor>
</div>
</template>
<script>
import Ueditor from '@/components/editor/index'
export default {
components: {
Ueditor
},
data() {
return {
}
},
methods:{
returnContent() {
this.$refs.ueditor.getUEContent()
this.$refs.ueditor.setUEContent("123")
this.$refs.ueditor.getContentTxt()
},
}
}
</script>
|
在main.js中引入ueditor的js文件
在pom.xml中引入相关依赖
1
2
3
4
5
6
7
8
9
10
| <dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
|
在application.yml中添加配置
1
2
| file:
path: F:/file/ueditor
|
导入相关文件(这是汇总好的全部东西)，config.json中imageUrlPrefix为’文件的访问前缀’
1
2
| 链接：https://pan.baidu.com/s/1cQD27sFJYdT0feqvR5j0Jw
提取码：2559
|
创建UeditorController
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.*;
@RestController
@RequestMapping("/api/ueditor")
public class UeditorController {
private static final Logger log = LoggerFactory.getLogger(UeditorController.class);
@GetMapping("/exec")
public String exec(HttpServletRequest request) throws Exception{
request.setCharacterEncoding("utf-8");
return new ActionEnter(request, request.getRealPath("/")).exec();
}
@PostMapping("/exec")
public Map<String, String> exec(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws Exception{
request.setCharacterEncoding("utf-8");
Map<String, String> map = new HashMap<>();
if (upfile != null){
String filename = upfile.getOriginalFilename();
String nowName = UUID.randomUUID() + filename.substring(upfile.getOriginalFilename().lastIndexOf("."));
String uploadPath = "";
String date = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
if (!upfile.isEmpty()){
String path = "F:/file/ueditor/";
File file = new File(path + date);
if (!file.exists()){
file.mkdirs();
}
uploadPath = path + date + "/" + nowName;
File newFile = new File(uploadPath);
if (!newFile.exists()){
newFile.createNewFile();
}
FileCopyUtils.copy(upfile.getBytes(), newFile);
}
map.put("state", "SUCCESS");
map.put("title", nowName);
map.put("original", filename);
map.put("type", filename.split("\\.")[1]);
map.put("url", "ueditor/" + date + "/" + nowName);
map.put("size", upfile.getSize() + "");
}
return map;
}
}
|
创建SpringMvcConfig，用于通过指定路径在浏览器访问图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class SpringMvcConfig implements WebMvcConfigurer {
@Value("${file.path}")
private String FILE_PATH;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/f/**").addResourceLocations("file:" + FILE_PATH);
}
}
|
sha1、md5加密组件引入
Win + R打开运行框，输入cmd打开命令提示符窗口，进入到vue项目的根目录下，选择要是用的加密组件，写入对应的安装命令，该命令会将js-sha1或js-md5组件下载到vue项目的node_modules中
1
2
| npm i js-sha1
npm i --save js-md5
|
使用方法
1
2
3
4
| <script>
let md5 = require('js-md5');
let sha1 = require('js-sha1');
</script>
|
