2019-04-19 DAY6

前端到后端的一趟

先是在index。js里import一个/file的文件内容，再在下面concat加上一个filerouter。---可以从index。js里找到file在哪。然后/file里有各种功能，比如/add和/delete。可以分别路由到某个vue页面。再写一下vue页面，很简单的就可以,就是一个form表单.

form表单 action到后端的controller。

比如/filecontroller里面，写/upload的接口。具体实现写在？？？看一下项目里怎么写的。图片上上传到服务器，再到文件服务器，返回一个url地址。 vue页面上显示的这个图片url就是到这个服务器端的地址。 一般之后会加到数据库里面去，就是图片的id,name,url.

还有一般 /add。/select可以返回一个apiresult〈user〉泛型。

这样在swagger 里就可以看到他的很多信息。 dynamicbean就是一个动态的返回map？很多信息返回不了。
返回一个常量，以后就可以只改一个常量的值，不用每个地方都改。

用户，角色，权限的关系

1个用户可以有多个角色，一个角色可以有多个权限。
一般是，把权限（就是模块）给角色，再把角色给用户。
一个用户就有所有用的角色都权限了。

....实际操作起来和想象中不太一样。。。。。好困
下午了...........................

admin\src\main\java\com\lh\controller\FileUploadController.java

@Controller
@RequestMapping("fileupload")
public class FileUploadController {

@Value("${aliyun.oss-endpoint}")
String endpoint;

@Value("${aliyun.oss-access-key-id}")
String accessKeyId;

@Value("${aliyun.oss-access-key-secret}")
String accessKeySecret;

@Value("${aliyun.oss-bucket-name}")
String bucketName;

@Value("${aliyun.oss-cname}")
String ossCname;

private static OSS ossClient;

/**
 * 获取sts临时授权
 *
 * @param
 * @return
 */
@RequestMapping(value = "upload")
@ResponseBody
public ApiResult upload(HttpServletRequest req) {
    FileUtil fileUtil = new FileUtil();
    File file = fileUtil.getUploadFile(req);
    if (ossClient == null) {
        ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
    }

    String key = "images/" + DateUtil.format("yyyyMMdd") + "/" + UUID.randomUUID().toString().replaceAll("-", "");
    String fileName = file.getName();
    String fileType = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".") + 1) : "";
    if (StringUtil.hasLength(fileType)) {
        key = key + "." + fileType;
    }
    //System.out.println(key);
    ossClient.putObject(bucketName, key, file);
    ApiResult apiResult = ApiResult.build(200, "上传成功", "//" + ossCname + "/" + key);

    file.delete();
    //ossClient.shutdown();
    return apiResult;
}

}

在这里有常量

先贴一完整代码 ↑↑

image.png

image.png

image.png

image.png

image.png

阿里云-对象存储服务OSS-JAVA简单上传

文件上传

以下代码用于上传本地文件：
要有：endpoint;accesskeyid;accesskeysecret;再创建一个osslicent的实例，再putObject方法，就可以上传到服务器。到时候再存到数据库里去。

// Endpoint以杭州为例，其它Region请按实际情况填写。
 String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建    并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

// 创建OSSClient实例。
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);

// 上传文件。<yourLocalFile>由本地文件路径加文件名包括后缀组成，例  如/users/local/myfile.txt。
ossClient.putObject("<yourBucketName>", "<yourObjectName>", new File("<yourLocalFile>"));

// 关闭OSSClient。
ossClient.shutdown();

2019-04-22 DAY7

一开始一直点不出来方法。。是因为没有定义成public的。。

mapper.xml可以不用写，用这种方式：

有一个updatecommand（比如），直接写mapper接口

service中的方法

service实现有很多种update重写的方法

注解别忘了写

2019-04-23 DAY8

今天有点懵懵的。。。。因为vue不会
刚刚一直登陆不进去，一开始说找不到一个bean，然后我写了整个类名，然后说resultmap，发现用resulttype就进去了！！！！！因为我没有定义resultmap

2019-04-23 DAY8

迷茫，不会vue，前后端分离不会写。打算看一下vue.js
老大帮我把bug都改好了。恩！我得学一下vue了

image.png

2019-04-24 DAY9

vue.js学习（一）：

在html中用{{}}传值，里面可以是data中的key值（属性）或者是methods中的方法名（带括号，可以传值）

vue中，当前对象的data中的key值用this.key在methods中传值。

image.png

image.png

属性绑定：v-bind绑在标签的属性值上，v-html可以放在标签的中间就是p标签的中间加了一个websitetag的值就是一个a标签。

image.png

image.png

关于方法给不给括号：如果在{{}中要给括号，不然以为是属性值，绑定事件上可以不给括号。

image.png

v-on:和@是一样的，一般用@比较方便

image.png

阻止事件冒泡事件；.once只执行一次：

image.png

image.png

键盘事件：可以指定按那两个键才触发方法

image.png

双向绑定：先在input中加个ref的属性给个名字，再在vue中用this.$refs.name.value拿到input传过来的值！

image.png

image.png

双向绑定用v-model更方便！vue的data中要有name属性，如果属性有值，name一开始{{name}}就能显示值

image.png

计算属性：大量耗时的时候使用，点击一个触发一个，不像methods，点一个，触发全部。在{{}}中写方法名的时候不能加()

image.png

image.png

v-if：v-else-if两个只会显示一个。

image.png

image.png

v-show和v-if的区别：v-show在标签中是存在的，只是display是不是none显不显示，而v-if不是。

image.png

v-for循环拿到数组中的每个元素值：

image.png

image.png

可以只拿到name和age不会有格式

image.png

用template标签不会像div那样创建很多的div，他只会有一个。

image.png

component组件：template模板里面只能有一个根标签，不可用全局的变量，不然一个改了全改了。

结构是这样的

在html中，只要创建一个<greeting></greeting>标签就行了~！

执行顺序：component中是注册app.vue这个组件。

先html，再main.js再app.vue

vue的结构：分三个部分

image.png

vue中调用别的组件。要在component中注册

先import进来，然后在components中注册，最后在template标签下使用。

image.png

局部组件的构建：

image.png

这样也可以

用了scoped，样式就不会影响到别的关联的vue了

image.png

父组件向子组件传值，属性传值props：

image.png

我觉得都写同名就好了

这样写更严谨

传值和传引用：

传值，只变一个，传引用，全变

子组件向父组件传值：

子组件中的点击事件

触发这个方法，注册的事件名字是titlechanged，参数是后面那个“”里的

接着去他的父组件里找

找到这个事件，他要执行这个update的方法，参数是一个事件

在方法里改变内容

这里的title就是方法中的参数穿过来的

生命周期钩子：

image.png

router-link不会重新加载页面，而a标签会

image.png

2019-04-26 DAY10

vue.js学习（二）：

components中的模块名字如果是驼峰的，可以不加引号，如果不是，就要加引号，而且不能和已存在的标签重复。

非驼峰命名

注意上面的标签名都是app-heade

路由配置：

image.png

image.png

路由跳转不进行刷新，用view-view，不用a标签。（a标签会刷新一次）

因为有多个页面都在这一块区域显示，所以用这个标签

router-link不用a标签

不用href，用to属性

如果url输入错误可以用这个方式

跳转到home

给路由起名字：

image.png

在这里使用，注意to前面的冒号是绑定的意思

实现跳转：

image.png

好几种方式

二级路由

写在about的children里面

首先要包裹在一个div里面，，router-link的tag属性作用是把这一条标签作为一个li

image.png

默认展示：用redirect

image.png

点到关于我们，自动展示某个vue

全局守卫：就是在没有登录前不能看其他页面

image.png

后置钩子，组件内守卫（一般不怎么用，用的多是全局守卫）

就是说，进入到这个组件之后会怎么样

路由独享的守卫

两种方式，第二种是全局守卫复制过来的。就是要进入这个组件之前的守卫。next()：进入这个组件，有flase参数就又进不去了

异步；beforeRouterEnter和beforeRouterLeave

beforeRouterEnter、就是进入组件之前

beforeRouterLeave：离开组件之前

复用router-view

image.png

就展示了一个组件：HOME

也展示其他组件用components，加一个default，一进去就展示的组件，全部，不是只有Home

结果

路由步骤：

routes.js

import进来

image.png

就是下面那个components里的组件可以用router-view跳转

加入history、可以去掉#，很好

添加header组件，放到app.vue里面，实现点哪个跳那个

image.png

image.png

效果

2019-04-28 DAY11

axios全局配置：

image.png

image.png

全局配置 或者：

image.png

image.png

Java中交互方式分为同步和异步两种，异同情况如下：

同步交互：指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；
异步交互：指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。
区别：一个需要等待，一个不需要等待，在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。

async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面

image.png

image.png

2019-04-29 DAY12

新的一天，从报错开始

image.png

新的任务：做一个项目管理的增删查改，要有树形目录。

IMG_20190429_155215.jpg

2019-05-07 DAY13

这一天真的很累，完成了后端的基本内容，vue的树形怎么都不会写。

2019-05-09 DAY14

然后电脑又坏了。刚刚去找了老大，解决了一些问题。
1、前端没有显示添加的模块，但是输入接口能跳转。是因为没有配置模块里和到角色的权限里面。。
2、对于数据库的设计问题，id应该设置为自增长，number要计算。

image.png

image.png

................下午了........
脑子很乱，让我来理一下。
目前遇到的问题：
1、下载的接口写不好，不能从给的url地址下载下来文件。
2、上传文件的前端不知道怎么写，用他给的uploadfilebutton返回的url是个很诡异的地址，有80多k。
3、怎么把这一条数据的id传给这一条数据的按钮跳转的新增页面
4、关键字number在哪里计算。
5、树还是出不来

成功了！！！！！！！！！！！

2019-05-10 DAY15

昨天把功能基本写好了，今天就总结一下

image.png

emmmm下载好像还不行。。。现在是打开这个东西。

1、树形是怎么出来的

然后就去看vue.js了。。。。看的很困

2019-05-13 DAY16

又是周一，今天眼睛不是很舒服。
prop属性详解：https://www.cnblogs.com/xiaohuochai/p/7388866.html

静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

image.png

image.png

动态props：动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

image.png

总结一下：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

子组件向父组件传值

image.png

2.在响应该点击事件的函数中

使用$emit来触发一个自定义事件，并传递一个参数

image.png

image.png

总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

Vue的slot-scope的场景的个人理解（写的很好）

简单来说：

理解插槽作用域的使用方式

1.父组件传递了todos数组给子组件
2.子组件通过props接受了数组数据，这里应该没有任何问题
3.子组件拿到数组后v-for渲染列表，并且通过 <slot :todo="todo">的方式，把数组内的每一个todo对象，传递给父组件
4.父组件通过slot-scope="slotProps"的方式，接受todo对象，之后就可以通过slotProps.todo.xxx的方式来使用了

所以数据的流动经历了

父组件传递todos数组给子组件
子组件遍历todos数组，把里面的todo对象传递给父组件

props，scope，slot，ref，is，slot，sync等知识点（写的很好）

好了，看了近一天。。基本看懂vue了。。。