Javaweb 笔记（自用） vuecli 后面及项目demo内容 菜单查询之前

十七、Vue脚手架

1、概念

1、Vue脚手架是Vue 官方提供的标准化开发工具（开发平台）

2、可以把.vue文件，转换翻译成为浏览器认识的文件

3、脚手架向下兼容，用最新的脚手架，不要用就得脚手架用新的Vue

4、官方文档

添加链接描述

5、CLI command line interface 命令行接口工具

2、安装Node

添加链接描述

1、安装注意点

1、安装左边的稳定版
2、不要勾选有一个自动更新的什么鬼东西

2、查看node.js 的版本号

node -v

3、更换淘宝镜像

添加链接描述

4、更换仓库地址

添加链接描述

3、安装CLI

1、（仅第一次执行）全局安装

npm install -g @vue/cli

如果卡住了，敲个回车

安装完成之后，关掉cmd
再开一次，输入 vue

设置了淘宝镜像也不好使 安装了那个cnmp
用cnmp替代 nmp 安装速度飞起

2、安装出错

安装vue cli 报了错误，把错误复制一份，想去搜索，结果没有复制上，想复现错误，结果安装成功了？？

3、创建项目 切记一定要切到你要创建项目的目录！！！

vue create 名字

这个名字不要和主流库重名！！

1、询问 vue 版本

先选vue2

成功标志

serve 服务 server 服务器

敲这两个命令

2、vue调试工具

添加链接描述

检查-

4、这里开始看尚马的网课，因为这里我不需要学那么细

1、使用图形界面

vue ui

1、要在文件夹目录下打开，不然会一只读取c盘下面的文件夹

2、创建项目

1、router 路由

这是个特别重要的技术
用vue写的项目都会用这个技术
不是这个

key对应value 对应关系就是路由

2、生活里的路由实现的是上网，那么编程里的路由实现的是什么呢

为了实现 SPA 应用
（single page web application）单页面应用

多页面应用不好，比如小时候，点一个链接就新开一个网页出来那种，页面之间是跳转的，跳来跳去的

3、实现了路由的网站

添加链接描述

4、实现原理

5、理解

路由

后端路由先不用掌握

3、创建项目继续

路由模式
1、历史模式 就是普通的路径
2、hash模式就是 # 带个路径

4、创建项目权限不够

5、运行

6、基于脚手架的单页面应用的 目录结构

1、node_modules
脚手架里面会用到的各种JS文件
2、public
单页面应用里面唯一的一个页面

7、平常写代码，写src里面的内容

1、main.js

Vue项目的入口文件

$mount(‘#app’)指定了监控的根标签的内容

2、引入其他js文件，就不用标签引入了

直接import 引入

3、下载vscode

下载慢的问题

添加链接描述

下载vscode插件 配置详情

添加链接描述

同步vsCode插件

添加链接描述
这里面的快捷键不好使，自己找一下
ctrl+p

若需在其他机器上DownLoad插件的话，同样，Ctrl+Shift+P打开命令框，输入sync，找到Download settings，会跳转到Github的Token编辑界面，点Edit，regenerate token，保存新生成的token，在vscode命令框中输入此Token，回车，再输入之前的Gist ID，即可同步插件和设置

我的token和 gist ID 保存在百度云了

4、vscode 配置 git

添加链接描述

提交到 gitee 添加链接描述

5、精简组件，把没用的东西删一下

1、

2、

这个应该是APP。vue里面的文件

6、.vue 结构

1、.vue 结构标签

<template> 里面写 html 标签   模板标签 类似于div
<script> 写javascript代码
<style> 里面写样式代码

2、src文件目录用法

1、assets 放静态图片
2、components 放组件的 一个.vue 就是一个组件
3、views 视图 把纯显示的内容也 拆分到这里了 视图和组件之间互相配合使用（老师说项目里不会这么分）
因为把上面那三个标签都写完就是一个完整的vue组件了
4、router 路由 控制显示组件的位置
5、App.vue 根访问地址

8、.vue 结构注意的点

里面 写文本或同级标签 必须有一个上级标签

这是它解析的基本规范，他在处理的时候需要这样的结构

9、新建组件并配置

1、创建组件

2、我们的组件想要被别的组件发现，要加一个

3、想要把子组件显示出来，就需要把根组件里面内容替换掉

整套工具就知道 ，我敲了对应的路径之后，去显示哪个组件，去替换App.vue的内容

2、配置路由访问地址

1、引入组件

2、配置路由地址

记得首字母大写，并且采用驼峰命名

5、安装插件或依赖

1、element ui

是插件，不是依赖
插件是比较大的扩展，依赖是比较小的扩展
集成程度小的就是依赖


插件不是只装一个就行了的

红框里的都是基于element ui的插件，是要an很多工具包的

2、axious [æk’siəʊ:s]

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

3、qs 帮我们格式化键值对的

是字符串格式化的小工具

4、代码变更是有热部署的，依赖和插件变更要重启

5、导入 element ui 后启动报错

因为我之前把这个helloworld.vue 给删掉了

把这个文件里面element的案例删掉

6、把element的案例删掉之后，我的mypage不显示了

原因：我把<route-view> 给删了

6、element

1、bootcdn 导入，我没有这个，这个加载有点慢

添加链接描述

2、element 布局容器

这个应该重要，我没使用过这个

3、new vue 老师居然是这么创建的

这个radio 示范是需要 return 的，老师直接写的也能跑

4、element 官方的Vue创建方式

 var Main = {
        data () {
            return {
                radio: '1'
            };
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

选项中没有el就用mount加载
和生命周期这个不一样

beforeMount
数据装载之后
mounted
数据有更新之前

不过就是换了种写法一样，不要害怕

1、vue官方推荐的vue创建格式 method写法（我也不知道是不是推荐的）

好像没有方便多少，而且还不清晰了

5、从计数器来看vue的数值传送

1、vue.extend()方法其实是vue的一个构造器，继承自vue

2、Ctor 可能是构造函数,啊不是

3、我知道为什么官方推荐这套new vue的方法了，确实好用

var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

他的意思是 定义一个变量是Vue挂载main的属性
main属性如下

var main = {
        data() {
            return {
                num: 1
            }
        }, methods: {
            handleChange(myval){
                console.log(myval)
            }
        }
    }

然后，根据挂载了这个属性的vue，去创建一个对象，然后用mount加载作用域

我能懂是因为，我误打误撞写出来了这个

var Ctor = new Vue(Main);
    Ctor.$mount("#app")

var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

看出差别来了吧，下面是官方的，还是官方的规范些

4、形参

这么写确实好，跟java差不多了

5、vue 遍历 ：key=item.id

放元素id或者唯一键的值

用vue遍历的时候，官方建议加上一个 :key
目的是在遍历的过程中，给元素起上唯一的标记
在他内部处理的时候效率会更高，我没懂，但是看这个，也不懂
添加链接描述

???多个属性键值对 的时候 key 怎么给

6、element下拉列表 遍历组件的问题

这里好像是反的

7、element遍历的时候某一个选项想禁用

8、element遍历的时候整个组件都想禁用

9、用户上传文件

成功之后返回的路径，填入到这里

10、table

table不用自己加v-for遍历

但是需要指定数据

label 就是列的名字

11、树形结构

data props

具体怎么使用，我还不知道

12、element 使用归纳

1、看清数据是否需要绑定

2、事件

并且它改出来的事件里面通常会添加形参，一般来说这些形参都是点谁，获得哪个的属性值

十八、Vue脚手架 导入登录组件 动态菜单组件

你不要觉得脚手架难，又要配置，又要装装插件

别人开发这么一大堆东西是用来给你找麻烦的吗？

是为了让你用起来更模式化，更简单，更高效

1、新建组件，粘贴代码

所以我们加的每一个.vue 都是一个一个的 vue组件

1、export default 里面写什么

这个里面写的就是 vue 配置 你还记得吧，那个 vue（option） 就是这个玩意
就是这个

加上这个，别的组件就能把这个组件 import 进来了

export 是导出

2、在路由里面配置

3、流程概述

环境一旦搭配好了—>写组件和组件里面的代码—>配置路由——>地址栏一敲就出来了

4、组件跳转

5、更改vue cli 的服务器 端口号

module 模块的意思
exports 出口的意思
dev develop 开发

端口改了，重新启动

6、main组件

7、组件跳转 叫做切换路由显示的组件

用户登录完，跳转到main组件

用的是 Vue 对象里面
注册出来 的 路由 里面的
切换功能

route 路由在创建项目的时候已经自动帮我们导入进来了


不是跳转，是叫做 切换 路由显示的组件

8、qs

1、在组件里面使用依赖

如果不好使的好，记得来这里面看一眼，有没有qs

这么打印qs对象的

这么使用qs的

这样就成功了

9、如果多个组件都需要用qs

我们所有的组件的入口 就是main.js 所以在这里写
做公共的导入

这里面的vue可以往上面注册组件的

手动自己注册组件,在main。js里面配置

vue原型链 类似于java的反射

1、是 Js 里面对象 继承 和 扩展的 机制
2、在Js里面，已经创建好的对象
里面包含的属性 和 方法 我们 对可以通过原型链 对他进行查找 或者 扩展
3、类似与java 反射 java反射——>我创建好一个类，我不想通过New 的方式来找里面的对象，可以通过反射来找到里面的方法或属性来调用
4、原型链类似于这种机制，但做法不一样
他就是直接用对象扩展方式，普通调用对象的时候，对象不能轻易的去扩展

但是如果能先调用它的prototype proto 原始 prototype 原型
可以对现有已经创建好的对象
来给它扩展一些对象的属性，或者方法

axios也这么用

加入这种绑定的好处

在进入main。js的时候，默认进这个文件的时候

绑定代码肯定会执行

执行后相当于qs已经注册给vue对象了

之后在其他组件里面，要是用qs对象的时候

直接找vue对象就可以了

这行代码是打印vue

之后牛可以想route 一样 直接 $. 什么就可以了，不需要在每个组件里面单独引入了

注册的时候不用非要加$符号，只是为了语法上，和其他注册功能统一

10、概览

我们现在写的应用叫单页面应用

对于我们来说主要要写的是src


1、assets里面就是静态图片
2、components就是要编写的组件

3、整个程序启动的时候，会先执行main.js
4、在main。js里面创建了vue 对象，这里注册组件，并且加载了根标签 App.vue

5、App.vue 显示出来之后
，因为导入了 路由 router 组件

router 组件里面 的 router-view


所以我们一敲地址，我们自己的组件就能显示出来了，写好组件，配好路由地址就可以了

11、看看我又犯了什么错误

1、我怎么跳转不好使啊

vscode代码超出屏幕可视区域不换行

这个代码可读性，像屎一样

2、怎么切换组件我忘了

this.$router.push('/main');

3、找不到表单，我应该写错了

啊，因为我是传参数进来的，所以要写形参的参数
，那我要是写死的，是怎么写的呢？

12、怎么在vscode里面看git 分支结构

添加链接描述

十九、连接后台服务接口

回顾：
1、动态菜单：根据每个用户存储的权限信息，在登录的时候，把他拥有的哪些权限查出来
2、查出来之后，从数据库里面组织出来，前端需要的父子嵌套的数据关系
3、最终把数据返回给前台

1、动态菜单设计 ：两个表：

1、权限的表
2、用户表，当前用户具有哪些权限

2、导入sql数据

刷新

datagrip 方式

导入

导出

添加链接描述

3、sql数据解读

菜单表

mid:菜单编号
menuname:菜单名称
pid：上级编号
url:子菜单的访问地址
show 是否可用
glyphicon ：对应图标

用户表

uid 编号
username 名称
password 密码
rloe_id 当前用户的角色 角色id -1超级管理员 1管理员2普通用户3渠道’,
reg_time 注册时间
login_time 最后登陆时间
isvaild 是否可用 =1有效 =0无效’,
create_uid 由哪个用户来创建的当前用户
menu_id 菜单数组
channels 渠道数组
partners
remark 备注
head_img 头像地址

4、要体现当前用户与权限的关系（多对多）

设计模式

1、中间表

比如用户与商品之间，有几千条对应关系

2、简化方式 （使用复合字段，使用特殊符号分割）

比如系统权限有个四五十条，最多百十来条


如果数据量比较大，一个字段存几千个逗号“，”，肯定存不下，就要使用中间表（不知道怎么使用）
添加链接描述

5、通用代码导出jar包

1、jdbc连接属性

然后根据需要选择加载哪个配置文件

还可以细化
jdbc_dev.properties
jdbc_test.properties

我在mybatis里面也是写死的，等下有空给他改了

1、给连接属性赋值

2、用数据连接池的方法

3、通用代码打包

重要！！

4、通用代码使用

这些就可以删了

1、当前项目引入 依赖 depensence

== tomcat 里面要重新配置==

5、这里开始做vuedemo，有问题在这里解决

1 、依赖 fastJson

添加链接描述

2 、看Facets 这里会不会找错

老师说这里有可能会找错

3 、打包策略

4 、拦截未验证登录

过滤器典型使用场景

权限控制

1、模拟用户的权限控制

集合中的contains方法

添加链接描述
string 中重写了equal 所以既比较地址又比较内容

60005自己定义的没有权限

判断登录和判断是否有访问权限是两个过滤器，并且第二个过滤器要放在登录后面

注解是类名，配置式，是配置的先后顺序

登录验证

1、判断是否登陆（session里面是否有user对象）

2、拦截所有请求，图片和css样式也会被拦截

和登录和注册有关的资源都要放行

1、设置不被拦截的String[]

跨域请求（先欠着，只把代码写上）

这里面包含了域前请求的参数

写到过滤器里，就是那个设置了字符编码的过滤器里

HttpServletResponse response1=(HttpServletResponse)response;
        //允许跨域的主机地址
        response1.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");
        //允许跨域的请求方法 GET,POST,HEAD 等
        response1.setHeader("Access-Control-Allow-Methods","*");
        //重新与检验跨域的缓存时间（s）
        response1.setHeader("Access-Control-Max-Age","3600");
        //允许跨域的请求头
        response1.setHeader("Access-Control-Allow-Headers","*");
        //是否携带cookie
        response1.setHeader("Access-Control-Allow-Credentials","true");

验证码 先欠着

3、用ajax请求，加转发重定向没有什么用，

一般是由后台返回一个特殊的码 600，告诉你没有登录

前端收到600 自己用 location.herf 去跳转

前后端是这么配合的

和上面一样，登录界面也会被拦截

一种解决方法

给登录注册界面加层

servlet地址就可以直接用，如果访问的是servlet地址
所以有了这种代码

白名单 直接行得通 直接放行 不走逻辑判断

在做登录控制是，必放行的 login in 和 login out 和 静态资源

我要他妈吐了，没学的东西太多了，算了自己手撕代码把
就这段代码

ReturnCode.NOT_LOGIN.getcode( )

setReturnCode()

JSON.toJSONString( )

5 、这回开始写了

1 、注册组件

2、发送ajax请求

1、箭头函数

3、我卡在了，怎么把vue集成到 我之前在尚硅谷那里学的 架构上

我可以用post的方式 把 opera 传过来

我现在有点方，但是淡定，就当现在已经开始做项目了，加油！！

tomcat 的 update 摁钮设置

添加链接描述

4、我的跨域请求一直不好使，居然要他妈这么写，我真是服了

5、应该是统一获得json字符串，然后给方法，应该更简单了

明天上午做这个事情

6、完成用get方法的整合了

vue部分

loginForm:{
                    name: '',
                    password:'',
                    operate:'login'

this.$axios.get("http://localhost:8080/login.do?"+this.$qs.stringify(this.loginForm))

java部分

原来我根本没有打通，出错了，找找那里出错了吧

1、我把他妈的名字写成大写的了

2、data 写成了 date

通了，通了，他妈的通了

3、vue这边的设置

7、完成用post方法的整合了

8、接着听课

1、前端路由换地址和后端无关

2、老师说无论技术怎么发展，只要http协议不换，我们做的东西就差不多，所以一定要明白HTTP协议是怎么回事

添加链接描述
这个要看，这是个引子

3、替换axios的绝对路径

老师是这么写的

4、优先走绝对路径

5、跨域cookie 在客服端（我也不知道是不是客户端，是axios里面设置）和服务端都需要设置

1、同源策略出了不让你访问之外，对cookie也有限制
2、cookie本身是按域存的
3、不同的服务器之间，不允许发送cookie数据的
4、不是对你这个服务器存的，发过去，对方也可能不读，没什么用
5、但是如果跨域 访问的话，就成为问题了

6、我需要允许你把不同域的cookie带过去，进行使用

main.js

credentials 资格证书

9、动态菜单

就是后台写好一个服务接口，给main组件传值
mounted 数据装载之后

老师那种语句只能用在小量数据上

1、in语句不能用于子查询 效率会变低

2、查出来的数据没有父子关系

需要二级菜单套在一级菜单的子数据上

3、用fastjson 去转的话，需要什么样的实体结构（这个问题好）

其实就是我某一个Key里面是一个数组

1、方案一：

这样比较麻烦

2、方案二：子数据和父数据结构一样，字段一样

真的，太NB了，这个

我其中 某一个key 里面是一个数组

3、方案三：类似购物车

之前那个递归 真经典，找个时间，把那个找回来

4、父子关系 手动嵌套方法

4.1、父子关系验证方法

4. 2父子关系 for 嵌套方法

4. 3 sql dao 方法

1、查用户都要什么 id权限的

2、根据用户权限数组 和 一二级菜单 来查询返回 菜单

3、实现步骤

上面的是根据 userRole 来查询的用户拥有的权限菜单

4、验证数据正确性

5、后端，方法整合

5.1 用户权限信息是在登录的时候已经查好的

在登录的时候调用一下这个实现类的方法

等你登录好了，什么时候要菜单，直接去session里面取就好了
不用去查数据库了
有一个专门的接口

6、前端设置

数据打印出来了

7、数字转字符串

8、设置了动态菜单，你没有登录啥都看不到，但是能敲进来也不好看

比如用户知道 敲/main 就能进来

#8.1 阻止未登录访问main

8.1 checkLogin 过滤器类

之前已经把用户登录信息存到session 里面了
所以在过滤器里面

7、vue配置响应拦截器

除了允许配置全局参数外，还允许配置全局拦截器

分两种
请求拦截器
响应拦截器 响应之前先过拦截器

8、promise 函数

添加链接描述

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

Promise 对象有以下两个特点:
1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：
pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

9、因为有导入组件，直接使用

直接写你自己的处理就可以了，因为所有公共内容，都会先在拦截器里面执行

不允许随意访问组件的功能是这么实现的：前台发请求，后台返码，配合响应拦截器一起来使用

每次使用都要看一下，我们后台的响应码有没有被前台的响应拦截器截住

我试了一下，注销return resp报这个错误

9.1、太他吗的干了，来看看我会犯什么傻逼错误吧，哈哈哈

1、数据类型对应

1、BIGINT:大小(8字节)，范围(有符号为-9223372036854775808到9223372036854775807，无符号为0到18446744073709551615)，用于极大整数值，对应于java中的Long类型

添加链接描述

2、导不进去包

3、longtext

varchar为变长字节，所占空间为字符串实际长度加1，最长为65535个字节
而longtext也是变长字符存储，只保存字符数据，最长为4294967295字节，比较适合存储大内容

4、sql语句这么写对吗

@Select(“select menu_id from pn_admin_user where username=#{user.getUid()};”)

@Select(“select menu_id from pn_admin_user where uid=#{uId};”)

private String menuId; // ‘菜单数组’,

不应该返回 list

5、test 不打印日志

把鼠标放在 日志系统的版本号上面，升级下版本号就好了

6、lombak 我实在受不了 uid->uId 要把所有删掉，重新建了

添加链接描述
@data 可能有坑 添加链接描述

7、lombak 报错

添加链接描述

8、xml return 配置参数写反

草拟吗杀了我吧，你妈死了！！！！
这个是数据库的

这个是java的

9、怎么分 0 和 1 去查询的

10、vue this.$axios 不好使

这么写

11、vue datafrom 参数出错

12、传参数既有 对象 又有普通参数

添加链接描述

13、传参数 #{=0} 出错

添加链接描述

13、UnsupportedOperationException

14、查不出来数据

14.1、mybaits in

添加链接描述

14.1、mybaits 类型设置错误

添加链接描述

14.1、我终于完成了我要的功能

上面那个写错了，是“”== 双等号

15、mysql 动态查询

添加链接描述

16、mysql in （） 只能查出一条数据的问题

添加链接描述

select * from pn_admin_menu pu where pu.mid in(select menu_id from pn_admin_user where username='kerwin') ;

select * from pn_admin_menu pu where FIND_IN_SET(pu.mid,(select menu_id from pn_admin_user where username='kerwin')) ;

17、我居然循环都不会写了

menu.getSubMenu().add(sub);

18、明明代码都写了，但是session 获取的不一样

把 127.0.0.1 换成 localhost

127.0.0.1 走网卡 localhost 不走网卡

可能是被拦截了

添加链接描述

19、这段代码为什么会触发反射bug啊

如果是基本类型比较，那么只能用==来比较，不能用equals ，如果是基本类型的包装类型,那么用equals

这个是老师的代码
这个是我的，我没有初始化，所以空指针

20、前端怎么用那段代码啊

21、数据没有从前端发送过来

我的

22、没有设置字符编码

23、前端数据获取异常

这样写，居然没有数据

24、字符串，是这种格式的，前端用不了

要把json 转为对象 才能用

25、这个是他妈的啥啊 {“$ref":"$.returnData[5].subMenu[0]”}

添加链接描述

26、不会判断 未登录跳转

就是在登录过滤器里面（/*） 这个里面判断有没有 user这个对象

27、配置了登录过滤器，没有拦截样式

vue的样式，是不是拦截不了啊

27、放行和登陆相关的资源

28、vue 跳转页面 用路由

router

29、配置了 java的过滤器 和 vue 的过滤器 现在 用户名密码正确也登不上去了

我应该是把，和登录相关的都给拦截了，要取消这些

if(!"/login".equals(req.getServletPath())&&!"/loginOut".equals(req.getServletPath())&&!req.getServletPath().endsWith(".html")&&!req.getServletPath().endsWith(".css")&&!req.getServletPath().endsWith(".js")&&!req.getServletPath().endsWith(".png")&&!req.getServletPath().endsWith(".jpg")&&!req.getServletPath().endsWith(".jpeg")  ){
            }
        }else{
            filterChain.doFilter(req,resp);
        }

30、放行规则

31、在main.js 里面使用 element ui

32、不显示地址栏完整参数

6 、明日计划

处理post请求 中央控制器 暂缓
统一返回字符串 数据量不够