建立一级路由vue-router-demo1
一个vue的单页应用（一级路由）的脚手架程序构建
1.进入某个目录如D：\VueStudy
2.通过命令创建项目：vue init webpack vue-router-demol(后几项都选N)
3.cd进入vue-router-demo1目录
4.安装依赖：npm install
5.运行:npm run dev
6.更改config目录下的index。js文件，将端口改成80ctr+c退出命令

13.png

package.json相当也pom.xml

APP.vue

<template>
<div id="app">
<div class="header">
<router-link to="/">
<img src="./assets/logo.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任务中心</router-link>
<router-link to="/lib" class="nav-item">库管理</router-link>
<router-link to="/ucenter" class="nav-item">张丽</router-link>
</div>
<div class="container"><router-view></router-view></div>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>

app {

background-color: rgb(244, 244, 244);
}
.header {
display: flex;
height: 80px;
background-color: #fff;
font-size: 20px;
padding-left: 120px;
align-items: center;
}
.nav-item {
width: 100px;
margin-right: 20px;
}
.logo{
widows: 100px;
height: 35px;
margin-right: 200px;
}
.container {
width: 85%;
margin: 0 auto;
padding-bottom: 40px;
}
a {
text-decoration: none;
color: #aaa;
}
a:hover {
color: rgb(2,165,218);
}
</style>```

index.js类

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
// 去除#的hash模式
mode: "history",
routes: [
{
//我的班课
path: '/',
name: 'Index',
component: resolve => require(['../components/Index.vue'], resolve)
},
{
//任务中心
path: '/task',
name: 'Task',
component: resolve => require(['../components/Task.vue'], resolve)
},
{
//库管理
path: '/lib',
name: 'Lib',
component: resolve => require(['../components/Lib.vue'], resolve)
},
{
//个人中心
path: '/ucenter',
name: 'UCenter',
component: resolve => require(['../components/UCenter.vue'], resolve)

    },
    {
        //新建班课
        path: '/new_course',
        name: 'NewCourse',
        component: resolve => require(['../components/NewCourse.vue'], resolve)
    },
    {
        //班课详情
        path: '/course/:id',
        name: 'CourseDetail',
        component: resolve => require(['../components/CourseDetail.vue'], resolve)
    }
]

})

代码地址：https://github.com/zl0502/VueStudy/tree/master/vue-router-demo1

在spring-boot-mybatis的基础上添加一个UploadController类

package com.springboot.mybatis.controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
/**

• 上传文件控制器
• 直接上传到服务器
  */

@RestController
public class UploadController {
//指定一个临时路径作为上传目录
//private static String UPLOAD_FOLDER = "D:/temp/";
//遇到http://localhost:8080，则跳转至upload.html页面
@GetMapping("/")
public String index() {
return "upload";
}
@PostMapping("upload")
public String fileUpload(@RequestParam("file")MultipartFile srcFile, RedirectAttributes redirectAttributes) {
String returnFileName="";
//前端没有选择文件，srcFile为空
if (srcFile.isEmpty()) {
redirectAttributes.addFlashAttribute("message", "请选择一个文件");
// return "redirect:upload_status";
}
//选择了文件，开始上传操作
try {
//构建上传目标路径，找到了项目的target的classes目录
File destFile = new File(ResourceUtils.getURL("classpath:").getPath());
if (!destFile.exists()) {
destFile = new File("");
}
//输出目标文件的绝对路径
System.out.println("file path:" + destFile.getAbsolutePath());
//拼接子路径
SimpleDateFormat sf_ = new SimpleDateFormat("yyyyMMdd");
String times = sf_.format(new Date());
File upload = new File(destFile.getAbsolutePath(), "upload/" + times);
//若目标文件夹不存在，则创建
if (!upload.exists()) {
upload.mkdirs();
}
System.out.println("完整的上传路径：" + upload.getAbsolutePath() + "/" + srcFile);
//根据srcFile大小，准备一个字节数组
byte[] bytes = srcFile.getBytes();
//拼接上传路径
//Path path = Paths.get(UPLOAD_FOLDER + srcFile.getOriginalFilename());
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
// 获得文件原始名称
String fileName = srcFile.getOriginalFilename();
// 获得文件后缀名称
String suffixName = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
// 生成最新的uuid文件名称
String newFileName = uuid + "." + suffixName;
//通过项目路径，拼接上传路径
Path path = Paths.get(upload.getAbsolutePath() + "/" + newFileName);
//** 开始将源文件写入目标地址
Files.write(path, bytes);
redirectAttributes.addFlashAttribute("message", "文件上传成功" + newFileName);
returnFileName="http://localhost:8080/upload/"+newFileName;
} catch (IOException e) {
e.printStackTrace();
}
return returnFileName;
}
//匹配upload_status页面
@GetMapping("upload_status")
public String uploadStatusPage() {
return "upload_status";
}
}

Task类

<template>
<div class="container">
<h2>任务中心</h2>
<div class="preview">
<img :src="imgUrl" />
</div>
<form>
<div class="upload">

<input type="file" @change="getFile(event)" class="sub-btn">提交</button>
</form>
</div>
</template>
<script>
export default {
name: 'Task',
data() {
return {
imgUrl:'https://static-cdn-oss.mosoteach.cn/mssvc/icons/icon_cc_cover1@2x.png',
file:''
};
},
methods:{
// 图片预览
getFile:function(event){
this.file=event.target.files[0];
var windowURL=window.URL||window.webkitURL;
alert(windowURL.createObjectURL(this.file));
this.imgUrl=windowURL.createObjectURL(this.file);
},
submit:function(event){
// 阻止元素发生默认的行为
event.preventDefault();
let formDate=new FormData();
formDate.append('file',this.file);
this.$http.post('http://localhost:8080/upload',formDate).then(function(response){
alert(response.data);
this.imgUrl=response.data;
});
}
}
};
</script>
<style scoped>

.preview{
    width:300px;
    height: 300px;
}
.preview img{
    width: 100%;
    height: 100%;
}
.sub-btn{
    width: 120px;
    height: 35px;
    border-radius: 20px;
    outline: none;
    background-color: #FFE4C4;
    color: #FFFFFF;
    position: relative;
    top: 20px;
}
.upload{
    margin-top: 10px;
    display: inline-block;
    width: 120px;
    height: 35px;
    border: 1px solid #00BBDD;
    border-radius: 4px;
    /* background-color: #42B983; */
    color: #000;
    text-align: center;
    cursor: pointer;
}
.upload input{
    width: 100%;
    height: 100%;
    /* 透明度 */
    opacity: 0;
}
.upload:hover{
    background: #aadffd;
    border-color: bisque;
    color: coral;
    text-decoration: none;
}

</style>

运行的结果是：实现图片的预览

22.png

可以换图片，但是只能预览，没有上传到数据库